chore(react): update tests for disabled Fieldset (#4389)

.changeset/ten-bats-trade.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+chore(react): update tests for disabled Fieldset

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(
+      <Fieldset legend="legend" isDisabled>
+        <Button testId="button" />
+        <Button testId="buttonWithDisabledProp" isDisabled={false} />
+      </Fieldset>
+    );
+
+    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(<Button loadingText="loading" isLoading />);
 

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(
+      <Fieldset legend="legend" isDisabled>
+        <Checkbox {...basicProps} testId="checkbox" />
+        <Checkbox
+          {...basicProps}
+          isDisabled={false}
+          testId="checkboxWithDisabledProp"
+        />
+      </Fieldset>
+    );
+
+    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(
+        <Fieldset legend="legend" isDisabled>
+          {getCheckbox({ ...basicProps, isDisabled: false })}
+        </Fieldset>
+      );
+
+      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(
+        <Fieldset legend="legend" isDisabled>
+          {getCheckbox({ ...basicProps })}
+        </Fieldset>
+      );
+
+      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 }));
 

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(
+      <Fieldset legend="legend" isDisabled>
+        <Input testId="input" />
+        <Input testId="inputWithDisabledProp" isDisabled={false} />
+      </Fieldset>
+    );
+
+    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(<Input size="small" variation="quiet" />);
 

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(
+      <Fieldset legend="legend" isDisabled>
+        <Radio value="test">test</Radio>
+      </Fieldset>
+    );
+
+    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(
+      <Fieldset legend="legend" isDisabled>
+        <Radio value="radio1" isDisabled={false}>
+          test
+        </Radio>
+      </Fieldset>
+    );
+
+    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(
       <View testId="test">

packages/react/src/primitives/Select/__tests__/Select.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Select } from '../Select';
+import { Fieldset } from '../../Fieldset';
 import { IconExpandMore } from '../../Icon/internal';
 import { ComponentClassNames } from '../../shared';
 
@@ -125,6 +126,28 @@ describe('Select primitive test suite', () => {
     expect(select).toBeRequired();
   });
 
+  it('should always be disabled if parent Fieldset isDisabled', async () => {
+    render(
+      <Fieldset legend="legend" isDisabled>
+        <Select testId="select">
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+        </Select>
+        <Select testId="selectWithDisabledProp" isDisabled={false}>
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+        </Select>
+      </Fieldset>
+    );
+
+    const select = await screen.findByTestId('select');
+    const selectDisabled = await screen.findByTestId('selectWithDisabledProp');
+    expect(select).toHaveAttribute('disabled');
+    expect(selectDisabled).toHaveAttribute('disabled');
+  });
+
   it('should render placeholder correctly if it is set', async () => {
     render(
       <Select placeholder={placeholder} defaultValue="">

packages/react/src/primitives/SliderField/__tests__/SliderField.test.tsx

@@ -9,6 +9,7 @@ import {
   SLIDER_TRACK_TEST_ID,
 } from '../SliderField';
 import { Heading } from '../../Heading';
+import { Fieldset } from '../../Fieldset';
 import {
   testFlexProps,
   expectFlexContainerStyleProps,
@@ -231,6 +232,27 @@ describe('SliderField:', () => {
         const root = await screen.findByTestId(SLIDER_ROOT_TEST_ID);
         expect(root).toHaveAttribute('data-disabled', '');
       });
+
+      it('should always be disabled if parent Fieldset isDisabled and SliderField isDisabled={false}', async () => {
+        render(
+          <Fieldset legend="legend" isDisabled>
+            <SliderField defaultValue={0} label="slider" isDisabled={false} />
+          </Fieldset>
+        );
+
+        const root = await screen.findByTestId(SLIDER_ROOT_TEST_ID);
+        expect(root).toHaveAttribute('data-disabled', '');
+      });
+      it('should always be disabled if parent Fieldset isDisabled and SliderField isDisabled is not defined', async () => {
+        render(
+          <Fieldset legend="legend" isDisabled>
+            <SliderField defaultValue={0} label="slider" />
+          </Fieldset>
+        );
+
+        const root = await screen.findByTestId(SLIDER_ROOT_TEST_ID);
+        expect(root).toHaveAttribute('data-disabled', '');
+      });
     });
 
     describe('Track', () => {

packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx

@@ -6,6 +6,7 @@ import { AUTO_GENERATED_ID_PREFIX } from '../../utils/useStableId';
 import { ComponentClassNames } from '../../shared';
 import { ComponentPropsToStylePropsMap } from '../../types';
 import { SwitchField } from '../SwitchField';
+import { Fieldset } from '../../Fieldset';
 
 describe('Switch Field', () => {
   const label = 'My switch label';
@@ -133,6 +134,25 @@ describe('Switch Field', () => {
       expect(field).toHaveProperty('disabled', true);
     });
 
+    it('should always be disabled if parent Fieldset isDisabled and SliderField isDisabled={false}', async () => {
+      const { container } = render(
+        <Fieldset legend="legend" isDisabled>
+          <SwitchField label={label} isDisabled />
+        </Fieldset>
+      );
+      const field = container.getElementsByTagName('input')[0];
+      expect(field).toHaveProperty('disabled', true);
+    });
+    it('should always be disabled if parent Fieldset isDisabled and SliderField isDisabled is not defined', async () => {
+      const { container } = render(
+        <Fieldset legend="legend" isDisabled>
+          <SwitchField label={label} />
+        </Fieldset>
+      );
+      const field = container.getElementsByTagName('input')[0];
+      expect(field).toHaveProperty('disabled', true);
+    });
+
     it('should set the input to checked with the isChecked prop', () => {
       const { container } = render(<SwitchField isChecked label={label} />);
 

packages/react/src/primitives/TextArea/__tests__/TextArea.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { TextArea } from '../TextArea';
+import { Fieldset } from '../../Fieldset';
 import { ComponentClassNames } from '../../shared';
 
 describe('TextArea component', () => {
@@ -46,6 +47,22 @@ describe('TextArea component', () => {
     expect(textarea).toHaveAttribute('required', '');
   });
 
+  it('should always be disabled if parent Fieldset isDisabled', async () => {
+    render(
+      <Fieldset legend="legend" isDisabled>
+        <TextArea testId="textarea" />
+        <TextArea testId="textareaWithDisabledProp" isDisabled={false} />
+      </Fieldset>
+    );
+
+    const textarea = await screen.findByTestId('textarea');
+    const textareaDisabled = await screen.findByTestId(
+      'textareaWithDisabledProp'
+    );
+    expect(textarea).toHaveAttribute('disabled');
+    expect(textareaDisabled).toHaveAttribute('disabled');
+  });
+
   it('should set size and variation data attributes', async () => {
     render(<TextArea size="small" variation="quiet" />);