fixup! Transform Action jest tests into playwright (#592)

src/components/CheckboxField/__tests__/CheckboxField.spec.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  CheckboxFieldForTest,
+  CheckboxFieldForRefTest,
+  CheckboxWForFormLayoutTests,
+} from './CheckboxField.story';
+import { checkedPropTest } from './_propTests/checkedPropTest';
+
+test.describe('CheckboxField', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.labelPropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.labelPositionPropTest(),
+        ...mixPropTests([
+          checkedPropTest,
+          propTests.disabledPropTest,
+          propTests.validationStatePropTest(true),
+        ]),
+        ...mixPropTests([
+          checkedPropTest,
+          propTests.requiredPropTest,
+        ]),
+        ...mixPropTests([
+          checkedPropTest,
+          propTests.validationTextPropTest(true),
+          propTests.validationStatePropTest(true),
+        ]),
+        ...mixPropTests([
+          checkedPropTest,
+          propTests.validationTextPropTest(true),
+          propTests.helpTextPropTest(true),
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <CheckboxFieldForTest
+              {...props}
+            />,
+          );
+
+          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.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest(true),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <CheckboxWForFormLayoutTests
+              {...props}
+            />,
+          );
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

src/components/CheckboxField/__tests__/CheckboxField.story.tsx

@@ -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;
+};
+type CheckboxWForFormLayoutTestsProps = CheckboxFieldForTestProps & {
+  layout: 'vertical' | 'horizontal' | undefined
+};
+
+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 CheckboxWForFormLayoutTests = ({
+  layout = undefined,
+  ...props
+} : CheckboxWForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <CheckboxField
+        label={defaultLabel}
+        {...props}
+      />
+      <CheckboxField
+        label="another-test-label"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};

src/components/CheckboxField/__tests__/_propTests/checkedPropTest.ts

@@ -0,0 +1,12 @@
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+export const checkedPropTest: PropTests = [
+  {
+    name: 'checked=false',
+    props: { checked: false },
+  },
+  {
+    name: 'checked=true',
+    props: { checked: true },
+  },
+];