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

Author: lukasbriza

src/components/Button/__tests__/Button.spec.tsx

@@ -66,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/Radio/__tests__/Radio.spec.tsx

@@ -8,7 +8,11 @@ import {
   propTests,
 } from '../../../../tests/playwright';
 import { partialDisabledOptionsPropTest } from './_propTests/partialDisabledOptionsPropTest';
-import { RadioForTest } from './Radio.story';
+import {
+  RadioForTest,
+  RadioForFormLayoutTests,
+} from './Radio.story';
+import type { RadioForFormLayoutTestsProps } from './Radio.story';
 
 const options = [
   {
@@ -30,119 +34,155 @@ const options = [
   },
 ];
 
-test.describe('CheckboxField', () => {
-  test.describe('visual', () => {
-    [
-      ...propTests.defaultComponentPropTest,
-      ...propTests.requiredPropTest,
-      ...propTests.labelPropTest,
-      ...propTests.isLabelVisiblePropTest,
-      ...propTests.renderAsRequiredPropTest,
-      ...propTests.layoutPropTest,
-      ...mixPropTests([
-        propTests.validationStatePropTest,
-        propTests.validationTextPropTest,
-        propTests.disabledPropTest,
-      ]),
-      ...mixPropTests([
-        propTests.validationStatePropTest,
-        propTests.helpTextPropTest,
-      ]),
-      ...mixPropTests([
-        partialDisabledOptionsPropTest,
-        propTests.validationStatePropTest,
-      ]),
-    ].forEach(({
-      name,
-      onBeforeTest,
-      onBeforeSnapshot,
-      props,
-    }) => {
-      test(name, async ({
-        mount,
-        page,
+test.describe('Radio', () => {
+  test.describe('base', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.defaultComponentPropTest,
+        ...propTests.requiredPropTest,
+        ...propTests.labelPropTest,
+        ...propTests.isLabelVisiblePropTest,
+        ...propTests.renderAsRequiredPropTest,
+        ...propTests.layoutPropTest,
+        ...mixPropTests([
+          propTests.validationStatePropTest,
+          propTests.validationTextPropTest,
+          propTests.disabledPropTest,
+        ]),
+        ...mixPropTests([
+          propTests.validationStatePropTest,
+          propTests.helpTextPropTest,
+        ]),
+        ...mixPropTests([
+          partialDisabledOptionsPropTest,
+          propTests.validationStatePropTest,
+        ]),
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
       }) => {
-        if (onBeforeTest) {
-          await onBeforeTest(page);
-        }
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <RadioForTest
+              {...props}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
+    });
+
+    test.describe('non-visual', () => {
+      test('id', async ({ mount }) => {
+        const radioId = 'radioId';
+        const label = 'radioLabel';
 
         const component = await mount(
           <RadioForTest
-            {...props}
+            id={radioId}
+            label={label}
+            options={options}
           />,
         );
 
-        if (onBeforeSnapshot) {
-          await onBeforeSnapshot(page, component);
-        }
-
-        const screenshot = await component.screenshot();
-        expect(screenshot).toMatchSnapshot();
+        await expect(component).toHaveAttribute('id', radioId);
+        await expect(component.getByText(label).first()).toHaveAttribute('id', `${radioId}__label`);
+        await expect(component.getByText(label).last()).toHaveAttribute('id', `${radioId}__displayLabel`);
+        await expect(component.getByText(options[0].label)).toHaveAttribute('id', `${radioId}__item__${options[0].key}__labelText`);
+        await expect(component.getByText(options[1].label)).toHaveAttribute('id', `${radioId}__item__${options[1].key}__labelText`);
+        await expect(component.getByText(options[2].label)).toHaveAttribute('id', `${radioId}__item__${options[2].value}__labelText`);
+        await expect(component.locator(`input[id=${radioId}__item__${options[0].key}]`)).not.toBeEmpty();
+        await expect(component.locator(`input[id=${radioId}__item__${options[1].key}]`)).not.toBeEmpty();
+        await expect(component.locator(`input[id=${radioId}__item__${options[2].value}]`)).not.toBeEmpty();
+        await expect(component.locator(`label[id=${radioId}__item__${options[0].key}__label]`)).not.toBeEmpty();
+        await expect(component.locator(`label[id=${radioId}__item__${options[1].key}__label]`)).not.toBeEmpty();
+        await expect(component.locator(`label[id=${radioId}__item__${options[2].value}__label]`)).not.toBeEmpty();
       });
     });
-  });
 
-  test.describe('non-visual', () => {
-    test('id', async ({ mount }) => {
-      const radioId = 'radioId';
-      const label = 'radioLabel';
-
-      const component = await mount(
-        <RadioForTest
-          id={radioId}
-          label={label}
-          options={options}
-        />,
-      );
-
-      await expect(component).toHaveAttribute('id', radioId);
-      await expect(component.getByText(label).first()).toHaveAttribute('id', `${radioId}__label`);
-      await expect(component.getByText(label).last()).toHaveAttribute('id', `${radioId}__displayLabel`);
-      await expect(component.getByText(options[0].label)).toHaveAttribute('id', `${radioId}__item__${options[0].key}__labelText`);
-      await expect(component.getByText(options[1].label)).toHaveAttribute('id', `${radioId}__item__${options[1].key}__labelText`);
-      await expect(component.getByText(options[2].label)).toHaveAttribute('id', `${radioId}__item__${options[2].value}__labelText`);
-      await expect(component.locator(`input[id=${radioId}__item__${options[0].key}]`)).not.toBeEmpty();
-      await expect(component.locator(`input[id=${radioId}__item__${options[1].key}]`)).not.toBeEmpty();
-      await expect(component.locator(`input[id=${radioId}__item__${options[2].value}]`)).not.toBeEmpty();
-      await expect(component.locator(`label[id=${radioId}__item__${options[0].key}__label]`)).not.toBeEmpty();
-      await expect(component.locator(`label[id=${radioId}__item__${options[1].key}__label]`)).not.toBeEmpty();
-      await expect(component.locator(`label[id=${radioId}__item__${options[2].value}__label]`)).not.toBeEmpty();
+    test.describe('functionality', () => {
+      test('calls synthetic event onChange()', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <RadioForTest
+            onChange={() => {
+              changeCalled = true;
+            }}
+            options={options}
+          />,
+        );
+
+        await component.getByText(options[1].label).click({ force: true });
+        expect(changeCalled).toBeTruthy();
+      });
+      test('check on space press when focused', async ({ mount }) => {
+        let changeCalled = false;
+        const testId = 'testId';
+
+        const component = await mount(
+          <RadioForTest
+            id={testId}
+            onChange={() => { changeCalled = true; }}
+            options={options}
+          />,
+        );
+
+        const input = component.locator(`input[id=${testId}__item__${options[1].key}]`);
+        await input.focus();
+        await input.press('Space');
+        expect(changeCalled).toBeTruthy();
+      });
     });
   });
 
-  test.describe('functionality', () => {
-    test('calls synthetic event onChange()', async ({ mount }) => {
-      let changeCalled = false;
-
-      const component = await mount(
-        <RadioForTest
-          onChange={() => {
-            changeCalled = true;
-          }}
-          options={options}
-        />,
-      );
-
-      await component.getByText(options[1].label).click({ force: true });
-      expect(changeCalled).toBeTruthy();
-    });
+  test.describe('formLayout', () => {
+    test.describe('visual', () => {
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
 
-    test('check on space press when focused', async ({ mount }) => {
-      let changeCalled = false;
-      const testId = 'testId';
-
-      const component = await mount(
-        <RadioForTest
-          id={testId}
-          onChange={() => { changeCalled = true; }}
-          options={options}
-        />,
-      );
-
-      const input = component.locator(`input[id=${testId}__item__${options[1].key}]`);
-      await input.focus();
-      await input.press('Space');
-      expect(changeCalled).toBeTruthy();
+          const component = await mount(
+            <RadioForFormLayoutTests
+              {...props as unknown as RadioForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
     });
   });
 });

src/components/Radio/__tests__/Radio.spec.tsx-snapshots/CheckboxField-visual-partialDisabledWithDisabledValue-validationState-warning-1-chromium-linux.png

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { InputHTMLAttributes } from 'react';
 import { Radio } from '..';
+import { FormLayoutContext } from '../../FormLayout';
 
 // Types for story component will be improved when we have full TypeScript support
 type RadioForTestProps = InputHTMLAttributes<HTMLInputElement>;
+export type RadioForFormLayoutTestsProps = RadioForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
 
 const defaultLabel = 'test-group-label';
 const defaultOptions = [
@@ -33,3 +37,27 @@ export const RadioForTest = ({
 
   />
 );
+
+export const RadioForFormLayoutTests = ({
+  layout,
+  ...props
+} : RadioForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <Radio
+        label={defaultLabel}
+        options={defaultOptions}
+        {...props}
+      />
+      <Radio
+        label="another-test-label"
+        options={defaultOptions}
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};