Skip to content

Commit

Permalink
chore(CodeSnippet): update tests to RTL (#11665)
Browse files Browse the repository at this point in the history 
* chore: update codesnippet tests to rtl

* chore: add mock copy to clipboard

* chore: update classname test

* fix: show more selector

* fix: skip failing test

* chore: remove test
  • Loading branch information
@jnm2377
jnm2377 authored Jun 27, 2022
1 parent 404c14d commit a1af135
Showing 1 changed file with 156 additions and 80 deletions.
236 changes: 156 additions & 80 deletions packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,102 +6,178 @@
*/

import React from 'react';
import Button from '../../Button';
import CodeSnippet from '../';
import Copy from '../../Copy';
import CopyButton from '../../CopyButton';
import { shallow, mount } from 'enzyme';

const prefix = 'cds';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

jest.mock('copy-to-clipboard', () => {
return jest.fn();
});

describe('Code Snippet', () => {
describe('Renders as expected', () => {
let snippet;

beforeEach(() => {
snippet = shallow(
<CodeSnippet className="some-class" type="single">
{'node -v'}
</CodeSnippet>
);
});

it('should use the appropriate snippet class', () => {
expect(snippet.hasClass(`${prefix}--snippet`)).toEqual(true);
expect(snippet.hasClass(`${prefix}--snippet--single`)).toEqual(true);
});

it('should render children as expected', () => {
expect(snippet.find(`.${prefix}--snippet-container`).length).toBe(1);
});

it('should all for custom classes to be applied', () => {
expect(snippet.hasClass('some-class')).toEqual(true);
});

it('should allow hiding of the copy button', () => {
expect(snippet.find(CopyButton).length).toBe(1);
snippet.setProps({ hideCopyButton: true });
expect(snippet.find(CopyButton).length).toBe(0);
});

it('should set disabled if one is passed via props', () => {
snippet.setProps({ disabled: true });
expect(snippet.find(`.${prefix}--snippet--disabled`).length).toBe(1);
});
const inline = `node -v`;

const single = `yarn add carbon-components@latest carbon-components-react@latest @carbon/icons-react@latest carbon-icons@latest`;

const multiLong = ` "scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
"ci-check": "carbon-cli ci-check",
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
"doctoc": "doctoc --title '## Table of Contents'",
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
"lint": "eslint actions config codemods packages",
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
"sync": "carbon-cli sync",
"test": "cross-env BABEL_ENV=test jest",
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
},
"resolutions": {
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-is": "~16.9.0",
"react-test-renderer": "~16.9.0"
},
`;

const multiShort = ` "scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
"ci-check": "carbon-cli ci-check",
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
"doctoc": "doctoc --title '## Table of Contents'",
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
"lint": "eslint actions config codemods packages",
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
"sync": "carbon-cli sync",
"test": "cross-env BABEL_ENV=test jest",
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
},`;

const multi15 = ` "scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
"ci-check": "carbon-cli ci-check",
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
"doctoc": "doctoc --title '## Table of Contents'",
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
"lint": "eslint actions config codemods packages",
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
"sync": "carbon-cli sync",
"test": "cross-env BABEL_ENV=test jest",
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
},
"resolutions": {
"react": "~16.9.0",`;

describe('CodeSnippet', () => {
it('should use the appropriate snippet class when it is type single', () => {
render(
<CodeSnippet type="single" data-testid="code-1">
{single}
</CodeSnippet>
);
expect(screen.getByTestId('code-1')).toHaveClass('cds--snippet--single');
});

it('should use the appropriate snippet class when it is type multi', () => {
render(
<CodeSnippet type="multi" data-testid="code-2">
{multiLong}
</CodeSnippet>
);

expect(screen.getByTestId('code-2')).toHaveClass('cds--snippet--multi');
});

it('should use the appropriate snippet class when it is type inline', () => {
render(
<CodeSnippet type="inline" data-testid="code-3">
{inline}
</CodeSnippet>
);

expect(screen.getByTestId('code-3')).toHaveClass('cds--snippet--inline');
});

it('should render children as expected', () => {
render(
<CodeSnippet type="inline" data-testid="code-4">
{inline}
</CodeSnippet>
);

expect(screen.getByTestId('code-4')).toHaveTextContent(inline);
});

describe('Triggers appropriate events', () => {
it('should call the click handler', () => {
const onClick = jest.fn();
const clickWrapper = mount(<CodeSnippet onClick={onClick} />);
clickWrapper.find(CopyButton).simulate('click');
expect(onClick).toHaveBeenCalled();
});

it('should call the click handler with type="inline"', () => {
const onClick = jest.fn();
const clickWrapper = mount(
<CodeSnippet type={'inline'} onClick={onClick} />
);
clickWrapper.find(Copy).simulate('click');
expect(onClick).toHaveBeenCalled();
});
it('should allow custom classes to be applied when passed in via className', () => {
const { container } = render(
<CodeSnippet type="inline" data-testid="code-5" className="custom-class">
{inline}
</CodeSnippet>
);

expect(container.firstChild).toHaveClass('custom-class');
});

describe('check for showMoreBtn', () => {
let wrapper;
it('should allow hiding the copy button', () => {
render(
<CodeSnippet type="single" hideCopyButton>
{single}
</CodeSnippet>
);

expect(document.querySelector('button')).not.toBeInTheDocument();
});

beforeEach(() => {
wrapper = mount(<CodeSnippet type={'multi'} />);
});
it('should set disabled on copy button if it is passed via props', () => {
render(
<CodeSnippet type="single" disabled>
{single}
</CodeSnippet>
);

expect(screen.getByTitle('Copy to clipboard')).toHaveAttribute('disabled');
});
});

it('when less then 15 rows', () => {
wrapper.setProps({
children: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14',
});
describe('CodeSnippet events', () => {
it('should call the click handler when the copy button is clicked', () => {
const onClick = jest.fn();
render(
<CodeSnippet type="single" onClick={onClick}>
{single}
</CodeSnippet>
);

const button = screen.getByTitle('Copy to clipboard');
userEvent.click(button);
expect(onClick).toHaveBeenCalled();
});

expect(wrapper.find(Button).length).toBe(0);
});
it('should call the click handler with type inline', () => {
const onClick = jest.fn();
render(
<CodeSnippet type="inline" data-testid="code-6" onClick={onClick}>
{inline}
</CodeSnippet>
);

const button = screen.getByTestId('code-6');
userEvent.click(button);
expect(onClick).toHaveBeenCalled();
});
});

it('when exactly 15 rows', () => {
wrapper.setProps({
children: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15',
});
describe('Show more button', () => {
it('should not have show more button when less then 15 rows', () => {
render(<CodeSnippet type="multi">{multiShort}</CodeSnippet>);

expect(wrapper.find(Button).length).toBe(0);
});
expect(screen.queryByText('Show more')).toBe(null);
});

it.skip('when more then 15 rows', () => {
wrapper.setProps({
children: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16',
});
it('should not have show more button when exactly 15 rows', () => {
render(<CodeSnippet type="multi">{multi15}</CodeSnippet>);

expect(wrapper.find(Button).length).toBe(1);
});
expect(screen.queryByText('Show more')).toBe(null);
});
});

0 comments on commit a1af135

Please sign in to comment.