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);
});
});