diff --git a/static/app/components/checkboxFancy/checkboxFancy.tsx b/static/app/components/checkboxFancy/checkboxFancy.tsx index 42de8b8dd6f231..3eb596d18fcc21 100644 --- a/static/app/components/checkboxFancy/checkboxFancy.tsx +++ b/static/app/components/checkboxFancy/checkboxFancy.tsx @@ -35,7 +35,7 @@ const CheckboxFancy = styled( data-test-id="checkbox-fancy" role="checkbox" aria-disabled={isDisabled} - aria-checked={isChecked} + aria-checked={isIndeterminate ? 'mixed' : isChecked} className={className} onClick={onClick} > diff --git a/tests/js/spec/components/checkboxFancy.spec.tsx b/tests/js/spec/components/checkboxFancy.spec.tsx index e6c18174057a73..ba0a5052021053 100644 --- a/tests/js/spec/components/checkboxFancy.spec.tsx +++ b/tests/js/spec/components/checkboxFancy.spec.tsx @@ -1,31 +1,31 @@ -import {mountWithTheme} from 'sentry-test/enzyme'; +import {mountWithTheme} from 'sentry-test/reactTestingLibrary'; import CheckboxFancy from 'app/components/checkboxFancy/checkboxFancy'; describe('CheckboxFancy', function () { it('renders', function () { - const wrapper = mountWithTheme(); - expect(wrapper).toSnapshot(); + const {container} = mountWithTheme(); + expect(container).toSnapshot(); }); it('isChecked', function () { const wrapper = mountWithTheme(); - expect(wrapper.props().isChecked).toEqual(true); - expect(wrapper.find('[data-test-id="icon-check-mark"]').exists()).toEqual(true); - expect(wrapper.find('[data-test-id="icon-subtract"]').exists()).toEqual(false); + expect(wrapper.getByRole('checkbox', {checked: true})).toBeTruthy(); + expect(wrapper.getByTestId('icon-check-mark')).toBeInTheDocument(); + expect(wrapper.queryByTestId('icon-subtract')).toBeNull(); }); it('isIndeterminate', function () { const wrapper = mountWithTheme(); - expect(wrapper.props().isIndeterminate).toEqual(true); - expect(wrapper.find('[data-test-id="icon-check-mark"]').exists()).toEqual(false); - expect(wrapper.find('[data-test-id="icon-subtract"]').exists()).toEqual(true); + expect(wrapper.getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed'); + expect(wrapper.queryByTestId('icon-check-mark')).toBeNull(); + expect(wrapper.getByTestId('icon-subtract')).toBeInTheDocument(); }); it('isDisabled', function () { const wrapper = mountWithTheme(); - expect(wrapper.props().isDisabled).toEqual(true); - expect(wrapper.find('[data-test-id="icon-check-mark"]').exists()).toEqual(false); - expect(wrapper.find('[data-test-id="icon-subtract"]').exists()).toEqual(false); + expect(wrapper.getByRole('checkbox')).toHaveAttribute('aria-disabled', 'true'); + expect(wrapper.queryByTestId('icon-check-mark')).toBeNull(); + expect(wrapper.queryByTestId('icon-subtract')).toBeNull(); }); });