diff --git a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js index 09f91d497f97..444cc2348efa 100644 --- a/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js +++ b/packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js @@ -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( - - {'node -v'} - - ); - }); - - 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( + + {single} + + ); + expect(screen.getByTestId('code-1')).toHaveClass('cds--snippet--single'); + }); + + it('should use the appropriate snippet class when it is type multi', () => { + render( + + {multiLong} + + ); + + expect(screen.getByTestId('code-2')).toHaveClass('cds--snippet--multi'); + }); + + it('should use the appropriate snippet class when it is type inline', () => { + render( + + {inline} + + ); + + expect(screen.getByTestId('code-3')).toHaveClass('cds--snippet--inline'); + }); + + it('should render children as expected', () => { + render( + + {inline} + + ); + + expect(screen.getByTestId('code-4')).toHaveTextContent(inline); }); - describe('Triggers appropriate events', () => { - it('should call the click handler', () => { - const onClick = jest.fn(); - const clickWrapper = mount(); - clickWrapper.find(CopyButton).simulate('click'); - expect(onClick).toHaveBeenCalled(); - }); - - it('should call the click handler with type="inline"', () => { - const onClick = jest.fn(); - const clickWrapper = mount( - - ); - clickWrapper.find(Copy).simulate('click'); - expect(onClick).toHaveBeenCalled(); - }); + it('should allow custom classes to be applied when passed in via className', () => { + const { container } = render( + + {inline} + + ); + + expect(container.firstChild).toHaveClass('custom-class'); }); - describe('check for showMoreBtn', () => { - let wrapper; + it('should allow hiding the copy button', () => { + render( + + {single} + + ); + + expect(document.querySelector('button')).not.toBeInTheDocument(); + }); - beforeEach(() => { - wrapper = mount(); - }); + it('should set disabled on copy button if it is passed via props', () => { + render( + + {single} + + ); + + 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( + + {single} + + ); + + 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( + + {inline} + + ); + + 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({multiShort}); - 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({multi15}); - expect(wrapper.find(Button).length).toBe(1); - }); + expect(screen.queryByText('Show more')).toBe(null); }); });