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

Author: lukasbriza

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

@@ -13,7 +13,6 @@ import {
   CheckboxForFormLayoutTests,
 } from './CheckboxField.story';
 import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
-import { checkedPropTest } from './_propTests/checkedPropTest';
 
 test.describe('CheckboxField', () => {
   test.describe('base', () => {
@@ -24,24 +23,25 @@ test.describe('CheckboxField', () => {
         ...propTests.renderAsRequiredPropTest,
         ...propTests.isLabelVisiblePropTest,
         ...propTests.labelPositionPropTest,
+        ...propTests.helperTextAndValidationTextPropType,
         ...mixPropTests([
-          checkedPropTest,
+          propTests.checkedPropTest,
           propTests.disabledPropTest,
           propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
-          checkedPropTest,
+          propTests.checkedPropTest,
+          propTests.validationStatePropTest,
           propTests.requiredPropTest,
         ]),
         ...mixPropTests([
-          checkedPropTest,
-          propTests.validationTextPropTest,
+          propTests.checkedPropTest,
           propTests.validationStatePropTest,
+          propTests.renderAsRequiredPropTest,
         ]),
         ...mixPropTests([
-          checkedPropTest,
-          propTests.validationTextPropTest,
-          propTests.helpTextPropTest,
+          propTests.checkedPropTest,
+          propTests.requiredPropTest,
         ]),
       ].forEach(({
         name,

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

@@ -44,14 +44,19 @@ test.describe('Radio', () => {
         ...propTests.isLabelVisiblePropTest,
         ...propTests.renderAsRequiredPropTest,
         ...propTests.layoutPropTest,
+        ...propTests.helperTextAndValidationTextPropType,
         ...mixPropTests([
           propTests.validationStatePropTest,
           propTests.validationTextPropTest,
           propTests.disabledPropTest,
         ]),
         ...mixPropTests([
           propTests.validationStatePropTest,
-          propTests.helpTextPropTest,
+          propTests.requiredPropTest,
+        ]),
+        ...mixPropTests([
+          propTests.validationStatePropTest,
+          propTests.renderAsRequiredPropTest,
         ]),
         ...mixPropTests([
           partialDisabledOptionsPropTest,

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

@@ -34,7 +34,6 @@ export const RadioForTest = ({
     options={defaultOptions}
     value={defaultOptions[0].value}
     {...props}
-
   />
 );
 

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

@@ -17,14 +17,14 @@ const options = [
 
 export const partialDisabledOptionsPropTest: PropTests = [
   {
-    name: 'partialDisabledWithDisabledValue',
+    name: 'options:shape[basePartialDisabledWithDisabledValue]',
     props: {
       options,
       value: 'value1',
     },
   },
   {
-    name: 'partialDisabledWithoutDisabledValue',
+    name: 'options:shape[basePartialDisabledWithoutDisabledValue]',
     props: {
       options,
       value: 'value2',

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

@@ -57,23 +57,24 @@ test.describe('SelectField', () => {
         ...propTests.renderAsRequiredPropTest,
         ...propTests.isLabelVisiblePropTest,
         ...propTests.requiredPropTest,
+        ...propTests.helperTextAndValidationTextPropType,
         ...propTests.sizePropTest,
         ...mixPropTests([
           propTests.layoutPropTest,
           propTests.fullWidthPropTest,
         ]),
         ...mixPropTests([
-          propTests.disabledPropTest,
-          propTests.variantPropTest,
           propTests.validationStatePropTest,
+          propTests.requiredPropTest,
         ]),
         ...mixPropTests([
-          propTests.validationTextPropTest,
           propTests.validationStatePropTest,
+          propTests.renderAsRequiredPropTest,
         ]),
         ...mixPropTests([
-          propTests.validationTextPropTest,
-          propTests.helpTextPropTest,
+          propTests.disabledPropTest,
+          propTests.variantPropTest,
+          propTests.validationStatePropTest,
         ]),
       ].forEach(({
         name,
@@ -99,44 +100,45 @@ test.describe('SelectField', () => {
             await onBeforeSnapshot(page, component);
           }
 
-          const screenshot = await component.screenshot();
+          const screenshot = await component.screenshot({ animations: 'disabled' });
           expect(screenshot).toMatchSnapshot();
         });
       });
-    });
 
-    /**
-     * Full page screenshot is required for option tests because native select options are rendered outside of the DOM.
-     */
-    test.describe('visual-fullPage', () => {
-      [
-        ...openSelectFieldOptionsTest,
-      ].forEach(({
-        name,
-        onBeforeTest,
-        onBeforeSnapshot,
-        props,
-      }) => {
-        test(name, async ({
-          mount,
-          page,
+      /**
+       * Full page screenshot is required for option tests
+       * because native select options are rendered outside of the DOM.
+       */
+      test.describe('fullPage', () => {
+        [
+          ...openSelectFieldOptionsTest,
+        ].forEach(({
+          name,
+          onBeforeTest,
+          onBeforeSnapshot,
+          props,
         }) => {
-          if (onBeforeTest) {
-            await onBeforeTest(page);
-          }
+          test(name, async ({
+            mount,
+            page,
+          }) => {
+            if (onBeforeTest) {
+              await onBeforeTest(page);
+            }
 
-          const component = await mount(
-            <SelectFieldForTest
-              {...props}
-            />,
-          );
+            const component = await mount(
+              <SelectFieldForTest
+                {...props}
+              />,
+            );
 
-          if (onBeforeSnapshot) {
-            await onBeforeSnapshot(page, component);
-          }
+            if (onBeforeSnapshot) {
+              await onBeforeSnapshot(page, component);
+            }
 
-          const screenshot = await page.screenshot();
-          expect(screenshot).toMatchSnapshot();
+            const screenshot = await page.screenshot({ animations: 'disabled' });
+            expect(screenshot).toMatchSnapshot({ maxDiffPixelRatio: 0.001 });
+          });
         });
       });
     });
@@ -227,7 +229,7 @@ test.describe('SelectField', () => {
         expect(changeCalled).toBeTruthy();
       });
 
-      test('change options on up and down key press', async ({ mount }) => {
+      test('change options on down key press', async ({ mount }) => {
         let changeCalled = false;
 
         const component = await mount(
@@ -243,6 +245,22 @@ test.describe('SelectField', () => {
         await select.press('ArrowDown');
         expect(changeCalled).toBeTruthy();
       });
+      test('change options on up key press', async ({ mount }) => {
+        let changeCalled = false;
+
+        const component = await mount(
+          <SelectFieldForTest
+            onChange={() => { changeCalled = true; }}
+            options={baseOptions}
+            value={baseOptions[1].value}
+          />,
+        );
+
+        const select = component.getByRole('combobox');
+        await select.focus();
+        await select.press('ArrowUp');
+        expect(changeCalled).toBeTruthy();
+      });
     });
   });
 
@@ -274,7 +292,7 @@ test.describe('SelectField', () => {
             await onBeforeSnapshot(page, component);
           }
 
-          const screenshot = await component.screenshot();
+          const screenshot = await component.screenshot({ animations: 'disabled' });
           expect(screenshot).toMatchSnapshot();
         });
       });