From b36202a5b488b437101fcc326feda39369530fcd Mon Sep 17 00:00:00 2001 From: Luis Parra <16653744+lsprr@users.noreply.github.com> Date: Tue, 19 Mar 2024 15:13:20 -0400 Subject: [PATCH] test: switch alert tests to react testing library (#1381) --- .../__tests__/src/components/Alert/index.js | 38 ----------- .../react/src/components/Alert/index.test.tsx | 66 +++++++++++++++++++ 2 files changed, 66 insertions(+), 38 deletions(-) delete mode 100644 packages/react/__tests__/src/components/Alert/index.js create mode 100644 packages/react/src/components/Alert/index.test.tsx diff --git a/packages/react/__tests__/src/components/Alert/index.js b/packages/react/__tests__/src/components/Alert/index.js deleted file mode 100644 index 12e462878..000000000 --- a/packages/react/__tests__/src/components/Alert/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import Alert from 'src/components/Alert'; -import axe from '../../../axe'; - -const defaults = { show: false, heading: { text: 'hi' } }; - -test('returns null if passed a falsey "show" prop', () => { - const alert = mount(hello); - expect(alert.html()).toBe(''); -}); - -test('shows modal if passed a truthy "show" prop', () => { - const alert = mount( - - hello - - ); - expect(alert.find('.Alert').exists()).toBe(true); -}); - -test('should return no axe violations', async () => { - const alert = mount( - - Hello! - - ); - expect(await axe(alert.html())).toHaveNoViolations(); -}); - -test('should return no axe violations warning variant', async () => { - const alert = mount( - - Hello! - - ); - expect(await axe(alert.html())).toHaveNoViolations(); -}); diff --git a/packages/react/src/components/Alert/index.test.tsx b/packages/react/src/components/Alert/index.test.tsx new file mode 100644 index 000000000..63938a469 --- /dev/null +++ b/packages/react/src/components/Alert/index.test.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import Alert from './'; +import axe from '../../axe'; + +const defaults = { show: false, heading: Default Alert }; + +test('should return null when passed a falsey "show" prop', () => { + render(Test Alert); + + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); +}); + +test('should pass classNames through', () => { + render( + + Test Alert + + ); + + expect(screen.queryByRole('dialog')).toHaveClass('Alert', 'baz'); +}); + +test('should pass ref prop through', () => { + const ref = React.createRef(); + + render( + + Test Alert + + ); + + expect(ref.current).toBeInTheDocument(); +}); + +test('should show modal when passed a truthy "show" prop', () => { + render( + + Test Alert + + ); + + expect(screen.queryByRole('dialog')).toBeInTheDocument(); +}); + +test('should return no axe violations', async () => { + const { container } = render( + + Hello! + + ); + + const results = await axe(container); + expect(results).toHaveNoViolations(); +}); + +test('should return no axe violations warning variant', async () => { + const { container } = render( + + Hello! + + ); + + const results = await axe(container); + expect(results).toHaveNoViolations(); +});