From 4e93144b8b688553b03f0173866b19c830fb3824 Mon Sep 17 00:00:00 2001 From: Jason Date: Wed, 21 Feb 2024 16:39:14 -0600 Subject: [PATCH] test: update Code tests to use react testing library (#1352) --- .../__tests__/src/components/Code/index.js | 86 ------------------ .../react/src/components/Code/Code.test.tsx | 87 +++++++++++++++++++ 2 files changed, 87 insertions(+), 86 deletions(-) delete mode 100644 packages/react/__tests__/src/components/Code/index.js create mode 100644 packages/react/src/components/Code/Code.test.tsx diff --git a/packages/react/__tests__/src/components/Code/index.js b/packages/react/__tests__/src/components/Code/index.js deleted file mode 100644 index 6c5e7576c..000000000 --- a/packages/react/__tests__/src/components/Code/index.js +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import { act } from 'react-dom/test-utils'; -import { setImmediate } from 'timers/promises'; -import { shallow, mount } from 'enzyme'; -import { createSandbox } from 'sinon'; -import Code from 'src/components/Code'; -import axe from '../../../axe'; - -const sandbox = createSandbox(); - -class MockObserver { - observe() {} - disconnect() {} -} - -let resizeObserverListener; - -beforeEach(() => { - document.body.innerHTML = '
'; - global.ResizeObserver = global.ResizeObserver || (() => null); - sandbox.stub(global, 'ResizeObserver').callsFake(listener => { - resizeObserverListener = listener; - return { - observe: sandbox.stub(), - disconnect: sandbox.stub() - }; - }); -}); - -afterEach(() => { - document.body.innerHTML = ''; - resizeObserverListener = null; - sandbox.restore(); -}); - -test('should render a block', () => { - const code = shallow( - {`var some = "javascript"`} - ); - expect(code.contains('code')); -}); - -test('should return no axe violations', async () => { - const code = shallow( - {`var some = "javascript"`} - ); - expect(await axe(code.html())).toHaveNoViolations(); -}); - -test('should set tabIndex when element is scrollable', async () => { - // Mock the specific state expected when the tab should be scrollable - sandbox.stub(global.HTMLPreElement.prototype, 'clientWidth').value(123); - sandbox.stub(global.HTMLPreElement.prototype, 'scrollWidth').value(456); - - const wrapper = mount( - {`var some = "javascript"`}, - { attachTo: document.getElementById('fixture') } - ); - - act(() => { - resizeObserverListener(); - }); - - wrapper.update(); - - expect(wrapper.find('pre').prop('tabIndex')).toEqual(0); -}); - -test('should not set tabIndex when element is not scrollable', () => { - // Mock the specific state expected when the tab should not be scrollable - sandbox.stub(global.HTMLPreElement.prototype, 'clientWidth').value(123); - sandbox.stub(global.HTMLPreElement.prototype, 'scrollWidth').value(123); - - const wrapper = mount( - {`var some = "javascript"`}, - { attachTo: document.getElementById('fixture') } - ); - - act(() => { - resizeObserverListener(); - }); - - wrapper.update(); - - expect(wrapper.find('pre').prop('tabIndex')).toEqual(undefined); -}); diff --git a/packages/react/src/components/Code/Code.test.tsx b/packages/react/src/components/Code/Code.test.tsx new file mode 100644 index 000000000..588636a2c --- /dev/null +++ b/packages/react/src/components/Code/Code.test.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; +import { createSandbox } from 'sinon'; +import Code from './'; + +const sandbox = createSandbox(); + +beforeEach(() => { + global.ResizeObserver = global.ResizeObserver || (() => null); + sandbox.stub(global, 'ResizeObserver').callsFake((listener) => { + listener(); + return { + observe: sandbox.stub(), + disconnect: sandbox.stub() + }; + }); +}); + +afterEach(() => { + sandbox.restore(); +}); + +test('should render Code block', () => { + const { container } = render( + {`var some = "javascript"`} + ); + expect(container.querySelector('pre')).toHaveClass('Code'); + expect(container.querySelector('pre')).not.toHaveClass('Code--scrollable'); + expect(container.querySelector('pre')).toHaveTextContent( + 'var some = "javascript"' + ); +}); + +test('should set tabIndex when element is scrollable', () => { + // Mock the specific state expected when the tab should be scrollable + sandbox.stub(global.HTMLPreElement.prototype, 'clientWidth').value(123); + sandbox.stub(global.HTMLPreElement.prototype, 'scrollWidth').value(456); + + const { container } = render( + {`var some = "javascript"`} + ); + expect(container.querySelector('pre')).toHaveClass('Code--scrollable'); + expect(container.querySelector('pre')).toHaveAttribute('tabIndex', '0'); +}); + +test('should not set tabIndex when element is not scrollable', () => { + // Mock the specific state expected when the tab should not be scrollable + sandbox.stub(global.HTMLPreElement.prototype, 'clientWidth').value(123); + sandbox.stub(global.HTMLPreElement.prototype, 'scrollWidth').value(123); + + const { container } = render( + {`var some = "javascript"`} + ); + expect(container.querySelector('pre')).toHaveClass('Code--scrollable'); + expect(container.querySelector('pre')).not.toHaveAttribute('tabIndex'); +}); + +test('should support className prop', () => { + const { container } = render( + {`var some = "javascript"`} + ); + expect(container.querySelector('pre')).toHaveClass('Code', 'bananas'); +}); + +test('should return no axe violations', async () => { + const { container } = render( + {`var some = "javascript"`} + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); +}); + +test('should return no axe violations when scrollable', async () => { + // Mock the specific state expected when the tab should be scrollable + sandbox.stub(global.HTMLPreElement.prototype, 'clientWidth').value(123); + sandbox.stub(global.HTMLPreElement.prototype, 'scrollWidth').value(456); + + const { container } = render( + {`var some = "javascript"`} + ); + const results = await axe(container); + expect(results).toHaveNoViolations(); +});