Transform Layouts jest tests into playwright (#594)

Author: lukasbriza

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  ButtonGroupForTest,
+  SelectedButtonGroupForTest,
+} from './ButtonGroup.story';
+
+test.describe('ButtonGroup', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.blockPropTest,
+        ...propTests.disabledPropTest,
+        ...propTests.sizePropTest,
+        ...mixPropTests([
+          propTests.priorityPropTest,
+          propTests.disabledPropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(<ButtonGroupForTest {...props} />);
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+
+      test.describe('selectedButton', () => {
+        [
+          ...mixPropTests([
+            propTests.priorityPropTest,
+            propTests.disabledPropTest,
+          ]),
+        ].forEach(({
+          name,
+          onBeforeTest,
+          onBeforeSnapshot,
+          props,
+        }) => {
+          test(name, async ({
+            mount,
+            page,
+          }) => {
+            if (onBeforeTest) {
+              await onBeforeTest(page);
+            }
+
+            const component = await mount(<SelectedButtonGroupForTest {...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-block-boolean-false-1-chromium-linux.png

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import { ButtonGroup } from '..';
+import { Button } from '../../Button';
+
+// Types for story component will be improved when we have full TypeScript support
+type ButtonGroupForTestProps = HTMLAttributes<HTMLFieldSetElement>;
+
+export const ButtonGroupForTest = ({
+  ...props
+}: ButtonGroupForTestProps) => (
+  <ButtonGroup {...props}>
+    <Button label="Button1" />
+    <Button label="Button2" />
+    <Button label="Button3" />
+  </ButtonGroup>
+);
+
+export const SelectedButtonGroupForTest = ({
+  ...props
+}: ButtonGroupForTestProps) => (
+  <ButtonGroup {...props}>
+    <Button color="selected" label="Button1" />
+    <Button label="Button2" />
+    <Button label="Button3" />
+  </ButtonGroup>
+);
+

src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx-snapshots/ButtonGroup-base-visual-block-boolean-true-1-chromium-linux.png

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import { propTests } from '../../../../tests/playwright';
+import {
+  FormLayoutForTest,
+  FormLayoutWithoutChildrenForTest,
+} from './FormLayout.story';
+import { labelWidthPropTest } from './_propTests/labelWidthPropTest';
+import { fieldLayoutPropTest } from './_propTests/fieldLayoutPropTest';
+
+test.describe('FormLayout', () => {
+  test.describe('base', () => {
+    /**
+     * `autoWidth` is not tested because subgrid is already supported in all browsers
+     * we aim to support within RUI. The issue this property was intended to solve has
+     * either already been resolved or cannot be reproduced with the tools
+     * currently available to us.
+    */
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...labelWidthPropTest,
+        ...fieldLayoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(<FormLayoutForTest {...props} />);
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('pass id into root component', async ({ mount }) => {
+        const id = 'custom-id';
+
+        const component = await mount(
+          <FormLayoutForTest id={id} />,
+        );
+
+        const root = await component.getAttribute('id');
+        expect(root).toBe(id);
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('render null when no children provided', async ({ mount }) => {
+        const component = await mount(
+          <FormLayoutWithoutChildrenForTest />,
+        );
+
+        const innerHTML = await component.innerHTML();
+        expect(innerHTML).toBe('');
+      });
+    });
+  });
+});

src/components/ButtonGroup/__tests__/ButtonGroup.spec.tsx-snapshots/ButtonGroup-base-visual-defaultComponentProps-object-1-chromium-linux.png

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import {
+  FormLayout,
+  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>;
+
+export const FormLayoutForTest = ({
+  ...props
+}: FormLayoutForTestProps) => (
+  <FormLayout {...props}>
+    <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>
+);
+
+export const FormLayoutWithoutChildrenForTest = ({
+  ...props
+}: FormLayoutForTestProps) => (
+  <FormLayout {...props} />
+);