From 86939516686140b3fb899eeb5c2d557c87fc4916 Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Fri, 14 Jan 2022 14:59:01 -0600 Subject: [PATCH 1/2] chore: check in progress --- .../react/src/components/Toggle/Toggle-test.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js index a1cb2a8f498e..9175be4d2649 100644 --- a/packages/react/src/components/Toggle/Toggle-test.js +++ b/packages/react/src/components/Toggle/Toggle-test.js @@ -9,8 +9,25 @@ import React from 'react'; import Toggle from '../Toggle'; import { mount } from 'enzyme'; import { settings } from 'carbon-components'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +// packages/components/scss/components/toggle/_toggle.scss +import '../../../../components/scss/components/toggle/_toggle.scss'; const { prefix } = settings; + +describe('Toggle RTL', () => { + describe('Behaviors', () => { + fit('toggles on click', () => { + render(); + expect(screen.getByText('Off')).toBeVisible(); + expect(screen.getByText('On')).not.toBeVisible(); + userEvent.click(screen.getByRole('checkbox')); + expect(screen.getByText('On')).toBeVisible(); + expect(screen.getByText('Off')).not.toBeVisible(); + }); + }); +}); describe('Toggle', () => { const commonProps = { 'aria-label': 'Toggle label', From d116b43d63186fff3e2ef9c35448ba7cbb160bde Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Fri, 14 Jan 2022 16:12:19 -0600 Subject: [PATCH 2/2] test(react): update Toggle tests to rtl --- .../src/components/Toggle/Toggle-test.js | 158 ++++++------------ 1 file changed, 48 insertions(+), 110 deletions(-) diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js index 9175be4d2649..39b6659bc79e 100644 --- a/packages/react/src/components/Toggle/Toggle-test.js +++ b/packages/react/src/components/Toggle/Toggle-test.js @@ -7,18 +7,13 @@ import React from 'react'; import Toggle from '../Toggle'; -import { mount } from 'enzyme'; -import { settings } from 'carbon-components'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -// packages/components/scss/components/toggle/_toggle.scss import '../../../../components/scss/components/toggle/_toggle.scss'; -const { prefix } = settings; - describe('Toggle RTL', () => { describe('Behaviors', () => { - fit('toggles on click', () => { + it('toggles on click', () => { render(); expect(screen.getByText('Off')).toBeVisible(); expect(screen.getByText('On')).not.toBeVisible(); @@ -26,129 +21,72 @@ describe('Toggle RTL', () => { expect(screen.getByText('On')).toBeVisible(); expect(screen.getByText('Off')).not.toBeVisible(); }); - }); -}); -describe('Toggle', () => { - const commonProps = { - 'aria-label': 'Toggle label', - labelA: 'Off', - labelB: 'On', - labelText: 'Toggle label', - }; - - describe('Renders as expected', () => { - const wrapper = mount(); - - const input = wrapper.find('input'); - - it('Switch and label Ids should match', () => { - const toggleLabel = wrapper.find(`.${prefix}--toggle__label`); - expect(input.id).toEqual(toggleLabel.htmlFor); - }); - - it('should set defaultChecked as expected', () => { - expect(input.props().defaultChecked).toEqual(false); - wrapper.setProps({ defaultToggled: true }); - expect(wrapper.find('input').props().defaultChecked).toEqual(true); - }); - it('Can set defaultToggled state', () => { - wrapper.setProps({ defaultToggled: true }); - expect( - wrapper.find(`.${prefix}--toggle-input`).props().defaultChecked - ).toEqual(true); - }); - - it('Should add extra classes that are passed via className', () => { - wrapper.setProps({ className: 'extra-class' }); - expect(wrapper.find('div').hasClass('extra-class')).toEqual(true); + it('toggles on keydown - enter', () => { + render(); + expect(screen.getByText('Off')).toBeVisible(); + expect(screen.getByText('On')).not.toBeVisible(); + userEvent.type(screen.getByRole('checkbox'), 'enter'); + expect(screen.getByText('On')).toBeVisible(); + expect(screen.getByText('Off')).not.toBeVisible(); }); - it('Can be disabled', () => { - wrapper.setProps({ disabled: true }); - expect(wrapper.find(`.${prefix}--toggle-input`).props().disabled).toEqual( - true - ); + it('toggles on keydown - space', () => { + render(); + expect(screen.getByText('Off')).toBeVisible(); + expect(screen.getByText('On')).not.toBeVisible(); + userEvent.type(screen.getByRole('checkbox'), 'space'); + expect(screen.getByText('On')).toBeVisible(); + expect(screen.getByText('Off')).not.toBeVisible(); }); + }); - it('Can have a labelA', () => { - wrapper.setProps({ labelA: 'labelA-test' }); - expect(wrapper.find(`.${prefix}--toggle__text--off`).text()).toEqual( - 'labelA-test' + describe('Props', () => { + it('add custom class name to wrapper div', () => { + const { container } = render( + ); + expect(container.firstChild).toHaveClass('custom-class'); }); - it('Can have a labelB', () => { - wrapper.setProps({ labelB: 'labelB-test' }); - expect(wrapper.find(`.${prefix}--toggle__text--on`).text()).toEqual( - 'labelB-test' - ); + it('sets toggled based on defaultToggled on render', () => { + render(); + expect(screen.getByText('On')).toBeVisible(); }); - }); - - it('toggled prop sets checked prop on input', () => { - const wrapper = mount(); - - const input = () => wrapper.find('input'); - expect(input().props().checked).toEqual(true); - - wrapper.setProps({ toggled: false }); - expect(input().props().checked).toEqual(false); - }); - describe('events', () => { - it('passes along onChange to ', () => { + it('calls onChange when the control is changed', () => { const onChange = jest.fn(); - const id = 'test-input'; - const wrapper = mount( - - ); - - const input = wrapper.find('input'); - const inputElement = input.instance(); - - inputElement.checked = true; - wrapper.find('input').simulate('change'); - - expect( - onChange.mock.calls.map((call) => - call.map((arg, i) => (i > 0 ? arg : arg.target)) - ) - ).toEqual([[inputElement]]); + render(); + userEvent.click(screen.getByRole('checkbox')); + expect(onChange).toHaveBeenCalled(); }); - it('should invoke onToggle with expected arguments', () => { + it('calls onToggle when toggled', () => { const onToggle = jest.fn(); - const id = 'test-input'; - const wrapper = mount( - - ); - - const input = wrapper.find('input'); - const inputElement = input.instance(); - - inputElement.checked = true; - wrapper.find('input').simulate('change'); - - const call = onToggle.mock.calls[0]; - - expect(call[0]).toEqual(true); - expect(call[1]).toEqual(id); - expect(call[2].target).toBe(inputElement); + render(); + userEvent.click(screen.getByRole('checkbox')); + expect(onToggle).toHaveBeenCalled(); }); - }); - describe('ToggleSmall', () => { - const wrapper = mount(); + it('takes in custom labels for toggled and untoggled states', () => { + render(); + expect(screen.getByText('test On')).toBeInTheDocument(); + expect(screen.getByText('test Off')).toBeInTheDocument(); + }); - it('Sets the `ToggleSmall` className', () => { - const input = wrapper.find('input'); - expect(input.hasClass(`${prefix}--toggle-input--small`)).toEqual(true); + it('sets toggled based on toggled prop', () => { + const { rerender } = render(); + expect(screen.getByText('Off')).toBeVisible(); + rerender(); + expect(screen.getByText('On')).toBeVisible(); }); - it('Renders a checkmark SVG', () => { - const svg = wrapper.find(`.${prefix}--toggle__check`); - expect(svg.length).toBe(1); + it('passes extra props to input', () => { + render(); + expect(screen.getByRole('checkbox')).toHaveAttribute( + 'aria-disabled', + 'true' + ); }); }); });