Transform Action jest tests into playwright (#592)

Author: lukasbriza

src/components/Alert/__tests__/Alert.spec.tsx

@@ -9,6 +9,7 @@ import { AlertForTest } from './Alert.story';
 test.describe('Alert', () => {
   test.describe('visual', () => {
     [
+      ...propTests.defaultComponentPropTest,
       ...propTests.feedbackColorPropTest,
       ...propTests.neutralColorPropTest,
       ...propTests.iconPropTest,
@@ -19,6 +20,7 @@ test.describe('Alert', () => {
     ].forEach(({
       name,
       onBeforeTest,
+      onBeforeSnapshot,
       props,
     }) => {
       test(name, async ({
@@ -35,6 +37,10 @@ test.describe('Alert', () => {
           />,
         );
 
+        if (onBeforeSnapshot) {
+          await onBeforeSnapshot(page, component);
+        }
+
         const screenshot = await component.screenshot();
         expect(screenshot).toMatchSnapshot();
       });

src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-danger-1-chromium-linux.png

@@ -15,9 +15,16 @@ import {
 test.describe('Button', () => {
   test.describe('visual', () => {
     [
+      ...propTests.defaultComponentPropTest,
       ...propTests.afterLabelPropTest,
       ...propTests.beforeLabelPropTest,
       ...propTests.blockPropTest,
+      ...propTests.endCornerPropTest,
+      ...propTests.feedbackIconPropTest,
+      ...propTests.labelPropTest,
+      ...propTests.labelVisibilityPropTest,
+      ...propTests.sizePropTest,
+      ...propTests.startCornerPropTest,
       ...mixPropTests([
         [
           ...propTests.actionColorPropTest,
@@ -27,15 +34,10 @@ test.describe('Button', () => {
         propTests.disabledPropTest,
         propTests.priorityPropTest,
       ]),
-      ...propTests.endCornerPropTest,
-      ...propTests.feedbackIconPropTest,
-      ...propTests.labelPropTest,
-      ...propTests.labelVisibilityPropTest,
-      ...propTests.sizePropTest,
-      ...propTests.startCornerPropTest,
     ].forEach(({
       name,
       onBeforeTest,
+      onBeforeSnapshot,
       props,
     }) => {
       test(name, async ({
@@ -52,6 +54,10 @@ test.describe('Button', () => {
           />,
         );
 
+        if (onBeforeSnapshot) {
+          await onBeforeSnapshot(page, component);
+        }
+
         const screenshot = await component.screenshot();
         expect(screenshot).toMatchSnapshot();
       });
@@ -60,13 +66,18 @@ test.describe('Button', () => {
 
   test.describe('non-visual', () => {
     test('id', async ({ mount }) => {
+      const testId = 'testId';
+      const testLabel = 'testLabel';
+
       const component = await mount(
         <ButtonForTest
-          id="test-id"
+          id={testId}
+          label={testLabel}
         />,
       );
 
-      await expect(component).toHaveAttribute('id', 'test-id');
+      await expect(component).toHaveAttribute('id', testId);
+      await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`);
     });
 
     test('ref', async ({ mount }) => {

src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-light-1-chromium-linux.png renamed to src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-dark-1-chromium-linux.png

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  CheckboxFieldForTest,
+  CheckboxFieldForRefTest,
+  CheckboxForFormLayoutTests,
+} from './CheckboxField.story';
+import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
+
+test.describe('CheckboxField', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPositionPropTest,
+        ...propTests.labelPropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...mixPropTests([
+          propTests.disabledPropTest,
+          propTests.checkedPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.requiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
+        ]),
+        ...mixPropTests([
+          propTests.checkedPropTest,
+          propTests.requiredPropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <CheckboxFieldForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const idValue = 'checkbox-id';
+        const label = 'checkbox-label';
+        const helpText = 'checkbox-helpText';
+        const validationText = 'checkbox-validationText';
+
+        const component = await mount(
+          <CheckboxFieldForTest
+            helpText={helpText}
+            id={idValue}
+            label={label}
+            validationText={validationText}
+          />,
+        );
+
+        await expect(component.getByRole('checkbox')).toHaveAttribute('id', idValue);
+        await expect(component).toHaveAttribute('id', `${idValue}__label`);
+        await expect(component.getByText(label)).toHaveAttribute('id', `${idValue}__labelText`);
+        await expect(component.getByText(helpText)).toHaveAttribute('id', `${idValue}__helpText`);
+        await expect(component.getByText(validationText)).toHaveAttribute('id', `${idValue}__validationText`);
+      });
+
+      test('ref', async ({ mount }) => {
+        const component = await mount(
+          <CheckboxFieldForRefTest
+            testRefAttrName="test-ref"
+            testRefAttrValue="test-ref-value"
+          />,
+        );
+
+        await expect(component.getByRole('checkbox')).toHaveAttribute('test-ref', 'test-ref-value');
+      });
+    });
+
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange()', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <CheckboxFieldForTest
+            onChange={() => {
+              changeCalled = true;
+            }}
+          />,
+        );
+
+        await component.click({ force: true });
+        expect(changeCalled).toBeTruthy();
+      });
+
+      test('check on space press when focused', async ({ mount }) => {
+        const component = await mount(
+          <CheckboxFieldForTest />,
+        );
+
+        const input = component.getByRole('checkbox');
+        await input.focus();
+        await input.press('Space');
+        await expect(input).toBeChecked();
+      });
+    });
+  });
+
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <CheckboxForFormLayoutTests
+              {...props as unknown as CheckboxForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

src/components/Alert/__tests__/Alert.spec.tsx-snapshots/Alert-visual-color-string-help-1-chromium-linux.png

@@ -0,0 +1,71 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { LabelHTMLAttributes } from 'react';
+import { FormLayoutContext } from '../../FormLayout';
+import { CheckboxField } from '..';
+
+// Types for story component will be improved when we have full TypeScript support
+type CheckboxFieldForTestProps = LabelHTMLAttributes<HTMLLabelElement>;
+type CheckboxFieldForRefTestProps = CheckboxFieldForTestProps & {
+  testRefAttrName: string;
+  testRefAttrValue: string;
+};
+export type CheckboxForFormLayoutTestsProps = CheckboxFieldForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
+
+const defaultLabel = 'test-label';
+
+export const CheckboxFieldForTest = ({
+  ...props
+} : CheckboxFieldForTestProps) => (
+  <CheckboxField
+    label={defaultLabel}
+    {...props}
+  />
+);
+
+export const CheckboxFieldForRefTest = ({
+  testRefAttrName,
+  testRefAttrValue,
+  ...props
+} : CheckboxFieldForRefTestProps) => {
+  const ref = useRef<HTMLLabelElement>(undefined);
+
+  useEffect(() => {
+    ref.current?.setAttribute(testRefAttrName, testRefAttrValue);
+  }, [testRefAttrName, testRefAttrValue]);
+
+  return (
+    <CheckboxField
+      label={defaultLabel}
+      {...props}
+      ref={ref}
+    />
+  );
+};
+
+export const CheckboxForFormLayoutTests = ({
+  layout,
+  ...props
+} : CheckboxForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <CheckboxField
+        label={defaultLabel}
+        {...props}
+      />
+      <CheckboxField
+        label="another-test-label"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};