Transform miscellaneous section form jest to playwright (#595)

Author: lukasbriza

src/components/Badge/__tests__/Badge.spec.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import { BadgeForTest } from './Badge.story';
+import { labelPropTest } from './_propTests/labelPropTest';
+import { priorityPropTest } from './_propTests/priorityPropTest';
+
+test.describe('Badge', () => {
+  test.describe('visual', () => {
+    [
+      ...propTests.defaultComponentPropTest,
+      ...labelPropTest,
+      ...mixPropTests([
+        [
+          ...propTests.feedbackColorPropTest,
+          ...propTests.neutralColorPropTest,
+        ],
+        priorityPropTest,
+      ]),
+    ].forEach(({
+      name,
+      onBeforeTest,
+      onBeforeSnapshot,
+      props,
+    }) => {
+      test(name, async ({
+        mount,
+        page,
+      }) => {
+        if (onBeforeTest) {
+          await onBeforeTest(page);
+        }
+
+        const component = await mount(
+          <BadgeForTest
+            {...props}
+          />,
+        );
+
+        if (onBeforeSnapshot) {
+          await onBeforeSnapshot(page, component);
+        }
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+    });
+  });
+
+  test.describe('non-visual', () => {
+    test('id', async ({ mount }) => {
+      const component = await mount(
+        <BadgeForTest
+          id="test-id"
+        />,
+      );
+
+      await expect(component).toHaveAttribute('id', 'test-id');
+    });
+  });
+});

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import { Badge } from '..';
+
+// Types for story component will be improved when we have full TypeScript support
+type BadgeForTestProps = HTMLAttributes<HTMLDivElement>;
+
+export const BadgeForTest = ({
+  ...props
+}: BadgeForTestProps) => (
+  <Badge label="Badge label" {...props} />
+);

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

@@ -0,0 +1,6 @@
+import { propTests } from '../../../../../tests/playwright';
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+export const labelPropTest: PropTests = [
+  ...propTests.labelPropTest.filter((test) => typeof test.props?.label === 'string'),
+];

src/components/Badge/__tests__/Badge.spec.tsx-snapshots/Badge-visual-color-string-dark-priority-string-filled-1-chromium-linux.png

@@ -0,0 +1,10 @@
+import { propTests } from '../../../../../tests/playwright';
+import type { PropTests } from '../../../../../tests/playwright/types';
+
+const subsetOfValues = [
+  'filled',
+  'outline',
+];
+
+export const priorityPropTest: PropTests = propTests.priorityPropTest
+  .filter(({ props }) => subsetOfValues.includes(props.priority as string));

src/components/Badge/__tests__/Badge.spec.tsx-snapshots/Badge-visual-color-string-dark-priority-string-outline-1-chromium-linux.png

@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+  expect,
+  test,
+} from '@playwright/experimental-ct-react';
+import {
+  mixPropTests,
+  propTests,
+} from '../../../../tests/playwright';
+import {
+  CadForTest,
+  CadWithScrollableForTest,
+  CardOnlyWithBodyForTest,
+} from './Card.story';
+import { densePropTest } from './_propTests/densePropTest';
+
+test.describe('Card', () => {
+  test.describe('visual', () => {
+    [
+      ...propTests.defaultComponentPropTest,
+      ...densePropTest,
+      ...mixPropTests([
+        propTests.disabledPropTest,
+        propTests.feedbackColorPropTest,
+      ]),
+      ...propTests.raisedPropTest,
+    ].forEach(({
+      name,
+      onBeforeTest,
+      onBeforeSnapshot,
+      props,
+    }) => {
+      test(name, async ({
+        mount,
+        page,
+      }) => {
+        if (onBeforeTest) {
+          await onBeforeTest(page);
+        }
+
+        const component = await mount(
+          <CadForTest
+            {...props}
+          />,
+        );
+
+        if (onBeforeSnapshot) {
+          await onBeforeSnapshot(page, component);
+        }
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+    });
+
+    test.describe('composition', () => {
+      /**
+       * Card with body and footer is omitted from composition section, because
+       * it is included in base visual tests.
+       */
+      test.describe('onlyBody', () => {
+        [
+          ...propTests.defaultComponentPropTest,
+        ].forEach(({
+          name,
+          onBeforeTest,
+          onBeforeSnapshot,
+          props,
+        }) => {
+          test(name, async ({
+            mount,
+            page,
+          }) => {
+            if (onBeforeTest) {
+              await onBeforeTest(page);
+            }
+
+            const component = await mount(
+              <CardOnlyWithBodyForTest
+                {...props}
+              />,
+            );
+
+            if (onBeforeSnapshot) {
+              await onBeforeSnapshot(page, component);
+            }
+
+            const screenshot = await component.screenshot({ animations: 'disabled' });
+            expect(screenshot).toMatchSnapshot();
+          });
+        });
+      });
+
+      test.describe('scrollView', () => {
+        [
+          ...propTests.defaultComponentPropTest,
+        ].forEach(({
+          name,
+          onBeforeTest,
+          onBeforeSnapshot,
+          props,
+        }) => {
+          test(name, async ({
+            mount,
+            page,
+          }) => {
+            if (onBeforeTest) {
+              await onBeforeTest(page);
+            }
+
+            const component = await mount(
+              <CadWithScrollableForTest
+                {...props}
+              />,
+            );
+
+            if (onBeforeSnapshot) {
+              await onBeforeSnapshot(page, component);
+            }
+
+            const screenshot = await component.screenshot({ animations: 'disabled' });
+            expect(screenshot).toMatchSnapshot();
+          });
+        });
+      });
+    });
+  });
+
+  test.describe('non-visual', () => {
+    test('id', async ({ mount }) => {
+      const id = 'test-id';
+
+      const component = await mount(
+        <CadForTest
+          id={id}
+        />,
+      );
+
+      await expect(component.locator(`div[id=${id}]`)).toHaveAttribute('id', id);
+    });
+  });
+});

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import {
+  Card,
+  CardBody,
+  CardFooter,
+} from '..';
+import { TextLink } from '../../TextLink';
+import { Button } from '../../Button';
+import { ScrollView } from '../../ScrollView';
+
+// Types for story component will be improved when we have full TypeScript support
+type CardForTestProps = HTMLAttributes<HTMLDivElement>;
+
+export const CadForTest = ({
+  ...props
+}: CardForTestProps) => (
+  <div style={{ padding: '20px' }}>
+    <Card {...props}>
+      <CardBody>
+        This is a card body.
+        <TextLink href="/" label="This is a link" />
+      </CardBody>
+      <CardFooter>
+        <Button label="Footer button" />
+      </CardFooter>
+    </Card>
+  </div>
+);
+
+export const CadWithScrollableForTest = ({
+  ...props
+}: CardForTestProps) => (
+  <div
+    style={{
+      display: 'flex',
+      height: '400px',
+      padding: '20px',
+      width: '500px',
+    }}
+  >
+    <Card {...props}>
+      <ScrollView arrows>
+        <CardBody id="card-body">
+          Hello! I&apos;m scrollable card.
+          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+          ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
+          dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+          quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+          arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+          Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
+          dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
+          tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
+          enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
+          Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+          imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+          ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
+          eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
+          sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
+          hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
+          <TextLink href="/" label="This is a link" />
+        </CardBody>
+      </ScrollView>
+      <CardFooter>
+        <Button label="Footer button" />
+      </CardFooter>
+    </Card>
+  </div>
+);
+
+export const CardOnlyWithBodyForTest = ({
+  ...props
+}: CardForTestProps) => (
+  <div style={{ padding: '20px' }}>
+    <Card {...props}>
+      <CardBody>
+        This is a card body.
+        <TextLink href="/" label="This is a link" />
+      </CardBody>
+    </Card>
+  </div>
+);