diff --git a/.changeset/ten-bats-trade.md b/.changeset/ten-bats-trade.md new file mode 100644 index 00000000000..10e19fccad0 --- /dev/null +++ b/.changeset/ten-bats-trade.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui-react": patch +--- + +chore(react): update tests for disabled Fieldset diff --git a/packages/react/src/primitives/Button/__tests__/Button.test.tsx b/packages/react/src/primitives/Button/__tests__/Button.test.tsx index f75d30284f6..5ac42e0f0be 100644 --- a/packages/react/src/primitives/Button/__tests__/Button.test.tsx +++ b/packages/react/src/primitives/Button/__tests__/Button.test.tsx @@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Button } from '../Button'; +import { Fieldset } from '../../Fieldset'; import { ButtonColorTheme } from '../../types'; import { ComponentClassNames } from '../../shared'; @@ -238,6 +239,20 @@ describe('Button test suite', () => { expect(button).toBeDisabled(); }); + it('should always be disabled if parent Fieldset isDisabled', async () => { + render( +
+ ); + + const button = await screen.findByTestId('button'); + const buttonDisabled = await screen.findByTestId('buttonWithDisabledProp'); + expect(button).toHaveAttribute('disabled'); + expect(buttonDisabled).toHaveAttribute('disabled'); + }); + it('should set loading state correctly if isLoading is set to true', async () => { render(); diff --git a/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx b/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx index 649e5c5d234..14d6aa251d6 100644 --- a/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx +++ b/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx @@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Checkbox } from '../Checkbox'; +import { Fieldset } from '../../Fieldset'; import { CheckboxProps } from '../../types/checkbox'; import { PrimitiveProps } from '../../types/view'; import { ComponentClassNames } from '../../shared/constants'; @@ -78,6 +79,30 @@ describe('Checkbox', () => { ); }); + it('should always be disabled if parent Fieldset isDisabled', async () => { + render( + + ); + + const checkbox = await screen.findByTestId('checkbox'); + const checkboxDisabled = await screen.findByTestId( + 'checkboxWithDisabledProp' + ); + expect(checkbox).toHaveClass( + `${ComponentClassNames['Checkbox']}--disabled` + ); + expect(checkboxDisabled).toHaveClass( + `${ComponentClassNames['Checkbox']}--disabled` + ); + }); + it('should render basic props correctly', async () => { render(getCheckbox({ ...basicProps })); @@ -127,6 +152,28 @@ describe('Checkbox', () => { expect(input).toBeChecked(); }); + it('should be disabled if parent Fieldset isDisabled and checkbox isDisabled={false}', async () => { + render( + + ); + + const input = await screen.findByRole('checkbox'); + expect(input).toHaveAttribute('disabled'); + }); + + it('should be disabled if parent Fieldset isDisabled and checkbox isDisabled is not defined', async () => { + render( + + ); + + const input = await screen.findByRole('checkbox'); + expect(input).toHaveAttribute('disabled'); + }); + it('should be disabled if isDisabled is set to true', async () => { render(getCheckbox({ ...basicProps, isDisabled: true })); diff --git a/packages/react/src/primitives/Input/__tests__/Input.test.tsx b/packages/react/src/primitives/Input/__tests__/Input.test.tsx index 5e0793968db..3dfe283b82a 100644 --- a/packages/react/src/primitives/Input/__tests__/Input.test.tsx +++ b/packages/react/src/primitives/Input/__tests__/Input.test.tsx @@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Input } from '../Input'; +import { Fieldset } from '../../Fieldset'; import { ComponentClassNames } from '../../shared'; describe('Input component', () => { @@ -85,6 +86,20 @@ describe('Input component', () => { expect(input).toHaveAttribute('required'); }); + it('should always be disabled if parent Fieldset isDisabled', async () => { + render( + + ); + + const input = await screen.findByTestId('input'); + const inputDisabled = await screen.findByTestId('inputWithDisabledProp'); + expect(input).toHaveAttribute('disabled'); + expect(inputDisabled).toHaveAttribute('disabled'); + }); + it('should set size and variation data attributes', async () => { render(); diff --git a/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx b/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx index 1265c5d5b33..53eeb2f1415 100644 --- a/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx +++ b/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { Radio } from '../Radio'; +import { Fieldset } from '../../Fieldset'; import { RadioGroupField } from '../../RadioGroupField'; import { View } from '../../View'; import { ComponentClassNames } from '../../shared'; @@ -56,6 +57,36 @@ describe('RadioField test suite', () => { expect(radioLabel).toHaveAttribute('data-disabled', 'true'); }); + it('should always be disabled if parent Fieldset isDisabled and radio isDisabled is not defined', async () => { + render( + + ); + + const radio = await screen.findByRole('radio'); + expect(radio).toHaveAttribute('disabled'); + + const radioLabel = await screen.findByText('test'); + expect(radioLabel).toHaveAttribute('data-disabled', 'true'); + }); + + it('should always be disabled if parent Fieldset isDisabled and radio isDisabled={false}', async () => { + render( + + ); + + const radio = await screen.findByRole('radio'); + expect(radio).toHaveAttribute('disabled'); + + const radioLabel = await screen.findByText('test'); + expect(radioLabel).toHaveAttribute('data-disabled', 'true'); + }); + it('should have no default labelPosition', async () => { render(