From 04853f0d42bb5a63cd035175edad733f54edb94a Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Fri, 23 Sep 2022 10:47:41 -0500 Subject: [PATCH] refactor(react): update radio tile tests to rtl (#12108) * refactor(react): update radio tile tests to rtl * chore(react): remove screen.debug() * chore(react): remove old tests * chore(react): update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../__snapshots__/PublicAPI-test.js.snap | 3 - .../components/RadioTile/RadioTile-test.js | 184 ++++++------------ .../src/components/RadioTile/RadioTile.js | 12 +- .../src/components/Tile/next/Tile.stories.js | 5 +- packages/react/tasks/build-test-rtl.js | 2 +- 5 files changed, 65 insertions(+), 141 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index f6fc4fa1c516..9be473ee2e1a 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -5724,9 +5724,6 @@ Map { "className": Object { "type": "string", }, - "defaultChecked": Object { - "type": "bool", - }, "disabled": Object { "type": "bool", }, diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js index de086bc88500..ae9be5381f49 100644 --- a/packages/react/src/components/RadioTile/RadioTile-test.js +++ b/packages/react/src/components/RadioTile/RadioTile-test.js @@ -1,156 +1,90 @@ /** - * Copyright IBM Corp. 2016, 2018 + * Copyright IBM Corp. 2022 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import React from 'react'; -import RadioButton from '../RadioButton'; -import { mount } from 'enzyme'; - -const prefix = 'cds'; - -const render = (props) => - mount( - - ); - -describe('RadioButton', () => { - describe('renders as expected', () => { - const wrapper = render({ - checked: true, +import RadioTile from './RadioTile'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; + +describe('RadioTile', () => { + describe('renders as expected - Component API', () => { + it('should spread extra props onto outermost element', () => { + render(); + + expect(document.querySelector('.cds--tile')).toHaveAttribute( + 'data-testid', + 'test-id' + ); }); - const input = wrapper.find('input'); - const label = wrapper.find('label'); - const div = wrapper.find('div'); + it('should respect checked prop', () => { + const { container } = render( + + ); - describe('input', () => { - it('is of type radio', () => { - expect(input.props().type).toEqual('radio'); - }); - - it('has the expected class', () => { - expect(input.hasClass(`${prefix}--radio-button`)).toEqual(true); - }); - - it('has a unique id set by default', () => { - expect(input.props().id).toBeDefined(); - }); - - it('should have checked set when checked is passed', () => { - wrapper.setProps({ checked: true }); - expect(input.props().checked).toEqual(true); - }); - - it('should set the name prop as expected', () => { - expect(input.props().name).toEqual('test-name'); - }); + expect(container.firstChild).toHaveAttribute('checked'); + expect(screen.getByTestId('test-id')).toHaveClass( + 'cds--tile--is-selected' + ); }); - describe('label', () => { - it('should set htmlFor', () => { - expect(label.props().htmlFor).toEqual(input.props().id); - }); - - it('should set the correct class', () => { - expect(label.props().className).toEqual( - `${prefix}--radio-button__label` - ); - }); - - it('should render a span with the correct class for radio style', () => { - const span = label.find('span'); - expect( - span.at(0).hasClass(`${prefix}--radio-button__appearance`) - ).toEqual(true); - }); - - it('should render a span for the label text', () => { - const span = label.find('span'); - expect(span.at(1).hasClass('')).toEqual(true); - expect(span.at(1).text()).toEqual('testlabel'); - }); - - it('should render label text', () => { - wrapper.setProps({ labelText: 'test label text' }); - expect(label.text()).toMatch(/test label text/); - }); - - it('should not have the className when no class is passed through props', () => { - expect(label.hasClass(label.props.className)).toEqual(false); - }); - - it('should have the className passed through props', () => { - const label = render({ - className: 'extra-class', - }); - expect(label.hasClass('extra-class')).toEqual(true); - }); + it('should support a custom `className` prop on the outermost element', () => { + render( + + ); + + expect(screen.getByTestId('test-id')).toHaveClass('custom-class'); }); - describe('wrapper', () => { - it('should have the correct class', () => { - expect(div.hasClass(`${prefix}--radio-button-wrapper`)).toEqual(true); - }); + it('should respect disabled prop', () => { + const { container } = render( + + ); - it('should have extra classes applied', () => { - expect(div.hasClass('extra-class')).toEqual(true); - }); + expect(container.firstChild).toHaveAttribute('disabled'); + expect(screen.getByTestId('test-id')).toHaveClass('cds--tile--disabled'); }); - }); - it('should set defaultChecked as expected', () => { - const wrapper = render({ - defaultChecked: true, + it('should respect id prop', () => { + render(); + + expect(screen.getByRole('radio')).toHaveAttribute('id', 'tile-1'); }); - const input = () => wrapper.find('input'); - expect(input().props().defaultChecked).toEqual(true); - wrapper.setProps({ defaultChecked: false }); - expect(input().props().defaultChecked).toEqual(false); - }); + it('should add name to input', () => { + render(); - it('should set id if one is passed in', () => { - const wrapper = render({ - id: 'unique-id', + expect(screen.getByRole('radio')).toHaveAttribute('name', 'tile'); }); - const input = wrapper.find('input'); - expect(input.props().id).toEqual('unique-id'); - }); - - describe('events', () => { - it('should invoke onChange with expected arguments', () => { + it('should call onChange when expected', () => { const onChange = jest.fn(); - const wrapper = render({ onChange }); - const input = wrapper.find('input'); - const inputElement = input.instance(); + render(); - inputElement.checked = true; - wrapper.find('input').simulate('change'); + userEvent.click(screen.getByRole('radio')); + userEvent.type(screen.getByRole('radio'), '{space}'); - const call = onChange.mock.calls[0]; - - expect(call[0]).toEqual('test-value'); - expect(call[1]).toEqual('test-name'); - expect(call[2].target).toBe(inputElement); + expect(onChange).toHaveBeenCalledTimes(2); }); - }); - it('supports disabled state', () => { - const wrapper = render({ - disabled: true, + it('should respect tabIndex prop', () => { + render(); + + expect(screen.getByRole('radio')).toHaveAttribute('tabIndex', '-1'); }); - const input = () => wrapper.find('input'); - expect(input().props().disabled).toEqual(true); + it('should respect value prop', () => { + render(); + + expect(screen.getByRole('radio')).toHaveAttribute('value', 'standard'); + }); }); }); diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js index a2f82cee163e..0897ab2a0f5f 100644 --- a/packages/react/src/components/RadioTile/RadioTile.js +++ b/packages/react/src/components/RadioTile/RadioTile.js @@ -11,7 +11,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import { keys, matches } from '../../internal/keyboard'; import { useFallbackId } from '../../internal/useId'; -import { useFeatureFlag } from '../FeatureFlags'; import { usePrefix } from '../../internal/usePrefix'; import deprecate from '../../prop-types/deprecate'; @@ -31,7 +30,6 @@ function RadioTile({ }) { const prefix = usePrefix(); const inputId = useFallbackId(id); - const enabled = useFeatureFlag('enable-v11-release'); const className = cx( customClassName, `${prefix}--tile`, @@ -42,8 +40,6 @@ function RadioTile({ [`${prefix}--tile--disabled`]: disabled, } ); - const inputProps = enabled ? {} : rest; - const labelProps = enabled ? rest : {}; function handleOnChange(evt) { onChange(value, name, evt); @@ -59,7 +55,6 @@ function RadioTile({ return ( <> -