fixup! Transform Layouts jest tests into playwright (#594)

Author: lukasbriza

src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx

@@ -10,8 +10,6 @@ import {
 import {
   ButtonGroupForTest,
   SelectedButtonGroupForTest,
-  ButtonGroupWithFeedbackIconForTest,
-  ButtonGroupWithLabelForTest,
 } from './ButtonGroup.story';
 
 test.describe('ButtonGroup', () => {
@@ -21,9 +19,9 @@ test.describe('ButtonGroup', () => {
         ...propTests.defaultComponentPropTest,
         ...propTests.blockPropTest,
         ...propTests.disabledPropTest,
+        ...propTests.sizePropTest,
         ...mixPropTests([
           propTests.priorityPropTest,
-          propTests.sizePropTest,
           propTests.disabledPropTest,
         ]),
       ].forEach(({
@@ -82,67 +80,6 @@ test.describe('ButtonGroup', () => {
           });
         });
       });
-
-      test.describe('buttonWithFeedbackIcon', () => {
-        [
-          ...mixPropTests([
-            propTests.priorityPropTest,
-            propTests.disabledPropTest,
-          ]),
-        ].forEach(({
-          name,
-          onBeforeTest,
-          onBeforeSnapshot,
-          props,
-        }) => {
-          test(name, async ({
-            mount,
-            page,
-          }) => {
-            if (onBeforeTest) {
-              await onBeforeTest(page);
-            }
-
-            const component = await mount(<ButtonGroupWithFeedbackIconForTest {...props} />);
-
-            if (onBeforeSnapshot) {
-              await onBeforeSnapshot(page, component);
-            }
-
-            const screenshot = await component.screenshot();
-            expect(screenshot).toMatchSnapshot();
-          });
-        });
-      });
-
-      test.describe('groupLabel', () => {
-        [
-          ...propTests.defaultComponentPropTest,
-        ].forEach(({
-          name,
-          onBeforeTest,
-          onBeforeSnapshot,
-          props,
-        }) => {
-          test(name, async ({
-            mount,
-            page,
-          }) => {
-            if (onBeforeTest) {
-              await onBeforeTest(page);
-            }
-
-            const component = await mount(<ButtonGroupWithLabelForTest {...props} />);
-
-            if (onBeforeSnapshot) {
-              await onBeforeSnapshot(page, component);
-            }
-
-            const screenshot = await component.screenshot();
-            expect(screenshot).toMatchSnapshot();
-          });
-        });
-      });
     });
   });
 });

src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx-snapshots/ButtonGroup-base-visual-priority-string-filled-size-string-medium-disabled-boolean-false-1-chromium-linux.png renamed to src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx-snapshots/ButtonGroup-base-visual-priority-string-filled-disabled-boolean-false-1-chromium-linux.png

@@ -2,7 +2,6 @@ import React from 'react';
 import type { HTMLAttributes } from 'react';
 import { ButtonGroup } from '..';
 import { Button } from '../../Button';
-import { TestIcon } from '../../../../tests/playwright';
 
 // Types for story component will be improved when we have full TypeScript support
 type ButtonGroupForTestProps = HTMLAttributes<HTMLFieldSetElement>;
@@ -27,31 +26,3 @@ export const SelectedButtonGroupForTest = ({
   </ButtonGroup>
 );
 
-export const ButtonGroupWithFeedbackIconForTest = ({
-  ...props
-}: ButtonGroupForTestProps) => (
-  <ButtonGroup {...props}>
-    <Button
-      feedbackIcon={<TestIcon />}
-      label="Button1"
-    />
-    <Button label="Button2" />
-    <Button label="Button3" />
-  </ButtonGroup>
-);
-
-export const ButtonGroupWithLabelForTest = ({
-  ...props
-}: ButtonGroupForTestProps) => (
-  <>
-    <label htmlFor="label" id="label">Group label:</label>
-    <ButtonGroup
-      {...props}
-      aria-labelledby="label"
-    >
-      <Button label="Button1" />
-      <Button label="Button2" />
-      <Button label="Button3" />
-    </ButtonGroup>
-  </>
-);

src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx-snapshots/ButtonGroup-base-visual-priority-string-filled-size-string-medium-disabled-boolean-true-1-chromium-linux.png renamed to src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx-snapshots/ButtonGroup-base-visual-priority-string-filled-disabled-boolean-true-1-chromium-linux.png

@@ -6,24 +6,17 @@ import {
 import { propTests } from '../../../../tests/playwright';
 import {
   FormLayoutForTest,
-  FormLayoutWithCustomFieldForTest,
   FormLayoutWithoutChildrenForTest,
 } from './FormLayout.story';
-import { fieldWidthPropTest } from './_propTests/fieldWidthPropTest';
+import { labelWidthPropTest } from './_propTests/labelWidthPropTest';
 import { fieldLayoutPropTest } from './_propTests/fieldLayoutPropTest';
-import { autoWidthPropTest } from './_propTests/autoWidthPropTest';
-import { customFieldLabelAlignmentPropTest } from './_propTests/customFieldTests/customFieldLabelAlignmentPropTest';
-import { customFieldValidationStatesPropTest } from './_propTests/customFieldTests/customFieldValidationStatesPropTest';
-import { customFieldInnerFieldSizePropTest } from './_propTests/customFieldTests/customFieldInnerFieldSizePropTest';
-import { customFieldRequiredPropTest } from './_propTests/customFieldTests/customFieldRequiredPropTest';
 
 test.describe('FormLayout', () => {
   test.describe('base', () => {
     test.describe('visual', () => {
       [
         ...propTests.defaultComponentPropTest,
-        ...fieldWidthPropTest,
-        ...autoWidthPropTest,
+        ...labelWidthPropTest,
         ...fieldLayoutPropTest,
       ].forEach(({
         name,
@@ -52,7 +45,7 @@ test.describe('FormLayout', () => {
     });
 
     test.describe('non-visual', () => {
-      test('Pass id into root component', async ({ mount }) => {
+      test('pass id into root component', async ({ mount }) => {
         const id = 'custom-id';
 
         const component = await mount(
@@ -65,7 +58,7 @@ test.describe('FormLayout', () => {
     });
 
     test.describe('functionality', () => {
-      test('Render null when no children provided', async ({ mount }) => {
+      test('render null when no children provided', async ({ mount }) => {
         const component = await mount(
           <FormLayoutWithoutChildrenForTest />,
         );
@@ -75,98 +68,4 @@ test.describe('FormLayout', () => {
       });
     });
   });
-
-  test.describe('withCustomField', () => {
-    test.describe('visual', () => {
-      [
-        ...customFieldLabelAlignmentPropTest,
-        ...customFieldValidationStatesPropTest,
-        ...customFieldInnerFieldSizePropTest,
-        ...customFieldRequiredPropTest,
-      ].forEach(({
-        name,
-        onBeforeTest,
-        onBeforeSnapshot,
-        props,
-        customFieldLayoutProps,
-        customFieldProps,
-      }) => {
-        test(name, async ({
-          mount,
-          page,
-        }) => {
-          if (onBeforeTest) {
-            await onBeforeTest(page);
-          }
-
-          const component = await mount(
-            <FormLayoutWithCustomFieldForTest
-              {...props}
-              customFieldLayoutProps={customFieldLayoutProps}
-              customFieldProps={customFieldProps}
-            />,
-          );
-
-          if (onBeforeSnapshot) {
-            await onBeforeSnapshot(page, component);
-          }
-
-          const screenshot = await component.screenshot();
-          expect(screenshot).toMatchSnapshot();
-        });
-      });
-    });
-
-    test.describe('non-visual', () => {
-      test('Pass id into custom field', async ({ mount }) => {
-        const id = 'custom-id';
-
-        const component = await mount(
-          <FormLayoutWithCustomFieldForTest
-            customFieldLayoutProps={{
-              fieldLayout: 'horizontal',
-              id,
-              label: 'CustomLayoutFieldLabel',
-            }}
-            customFieldProps={{
-              label: 'CustomFieldLabel',
-            }}
-          />,
-        );
-
-        await expect(component.locator(`div[id=${id}]`)).not.toBeEmpty();
-        await expect(component.locator(`div[id=${id}__label]`)).not.toBeEmpty();
-        await expect(component.locator(`div[id=${id}__field]`)).not.toBeEmpty();
-      });
-
-      test('Render label with labelForId', async ({ mount }) => {
-        const id = 'custom-id';
-        const labelForId = 'custom-labelForId';
-
-        const component = await mount(
-          <FormLayoutWithCustomFieldForTest
-            customFieldLayoutProps={{
-              id,
-              label: 'CustomFieldLabel',
-              labelForId,
-            }}
-            customFieldProps={{
-              label: 'CustomFieldLabel',
-            }}
-          />,
-        );
-
-        await expect(component.locator(`label[id=${id}__label][for=${labelForId}]`)).not.toBeEmpty();
-      });
-    });
-
-    test.describe('functionality', () => {
-      test('Render null when no children to custom field provided', async ({ mount }) => {
-        const component = await mount(<FormLayoutWithCustomFieldForTest />);
-
-        const numberOfInputComponents = await component.getByRole('textbox').count();
-        expect(numberOfInputComponents).toBe(2);
-      });
-    });
-  });
 });

src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx-snapshots/ButtonGroup-base-visual-priority-string-filled-size-string-large-disabled-boolean-true-1-chromium-linux.png

@@ -5,21 +5,70 @@ import {
   FormLayoutCustomField,
 } from '..';
 import { TextField } from '../../TextField';
+import { CheckboxField } from '../../CheckboxField';
+import { FileInputField } from '../../FileInputField';
+import { Radio } from '../../Radio';
+import { SelectField } from '../../SelectField';
+import { TextArea } from '../../TextArea';
+import { Toggle } from '../../Toggle';
 
 // Types for story component will be improved when we have full TypeScript support
 type FormLayoutForTestProps = HTMLAttributes<HTMLDivElement>;
-type FormLayoutWithCustomFieldForTestProps = FormLayoutForTestProps & {
-  customFieldLayoutProps: HTMLAttributes<HTMLDivElement>;
-  customFieldProps: HTMLAttributes<HTMLDivElement>;
-};
 
 export const FormLayoutForTest = ({
   ...props
 }: FormLayoutForTestProps) => (
   <FormLayout {...props}>
-    <TextField label="Label1" />
-    <TextField label="Label2" />
-    <TextField label="Label3" />
+    <TextField
+      label={
+        'Another form element with a very long label that is so '
+        + 'long that in the auto mode, it should make the label column '
+        + 'grow until the inputs reach the end of the line, but it will '
+        + 'not exceed 50 % of the FormLayout width in the limited label '
+        + 'width mode'
+      }
+    />
+    <CheckboxField
+      checked
+      label="Label2"
+    />
+    <Radio
+      label="Label3"
+      options={[
+        {
+          label: 'Value',
+          value: 'value',
+        },
+        {
+          label: 'Value2',
+          value: 'value2',
+        },
+      ]}
+      value="value"
+    />
+    <SelectField
+      label="Label4"
+      options={[
+        {
+          label: 'Value1',
+          value: 'value1',
+        },
+        {
+          label: 'Value2',
+          value: 'value2',
+        },
+      ]}
+      value="value1"
+    />
+    <TextArea label="Label5" />
+    <Toggle
+      checked={false}
+      label="Label6"
+    />
+    <FormLayoutCustomField label="Custom field label">
+      <TextField label="Label7" />
+    </FormLayoutCustomField>
+    <FileInputField label="Attachment label 8" />
   </FormLayout>
 );
 
@@ -28,21 +77,3 @@ export const FormLayoutWithoutChildrenForTest = ({
 }: FormLayoutForTestProps) => (
   <FormLayout {...props} />
 );
-
-export const FormLayoutWithCustomFieldForTest = (props: FormLayoutWithCustomFieldForTestProps) => {
-  const {
-    customFieldLayoutProps,
-    customFieldProps,
-    ...restProps
-  } = props;
-
-  return (
-    <FormLayout {...restProps}>
-      <TextField label="Label1" />
-      <TextField label="Label2" />
-      <FormLayoutCustomField {...customFieldLayoutProps}>
-        {customFieldProps ? <TextField {...customFieldProps} /> : null}
-      </FormLayoutCustomField>
-    </FormLayout>
-  );
-};