fixup! fixup! 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,

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

@@ -15,6 +15,7 @@ import {
 test.describe('Button', () => {
   test.describe('visual', () => {
     [
+      ...propTests.defaultComponentPropTest,
       ...propTests.afterLabelPropTest,
       ...propTests.beforeLabelPropTest,
       ...propTests.blockPropTest,

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

@@ -10,36 +10,38 @@ import {
 import {
   CheckboxFieldForTest,
   CheckboxFieldForRefTest,
-  CheckboxWForFormLayoutTests,
+  CheckboxForFormLayoutTests,
 } from './CheckboxField.story';
+import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
 import { checkedPropTest } from './_propTests/checkedPropTest';
 
 test.describe('CheckboxField', () => {
   test.describe('base', () => {
     test.describe('visual', () => {
       [
+        ...propTests.defaultComponentPropTest,
         ...propTests.labelPropTest,
         ...propTests.renderAsRequiredPropTest,
         ...propTests.isLabelVisiblePropTest,
-        ...propTests.labelPositionPropTest(),
+        ...propTests.labelPositionPropTest,
         ...mixPropTests([
           checkedPropTest,
           propTests.disabledPropTest,
-          propTests.validationStatePropTest(true),
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           checkedPropTest,
           propTests.requiredPropTest,
         ]),
         ...mixPropTests([
           checkedPropTest,
-          propTests.validationTextPropTest(true),
-          propTests.validationStatePropTest(true),
+          propTests.validationTextPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           checkedPropTest,
-          propTests.validationTextPropTest(true),
-          propTests.helpTextPropTest(true),
+          propTests.validationTextPropTest,
+          propTests.helpTextPropTest,
         ]),
       ].forEach(({
         name,
@@ -122,7 +124,7 @@ test.describe('CheckboxField', () => {
   test.describe('formLayout', () => {
     test.describe('visual', () => {
       [
-        ...propTests.layoutPropTest(true),
+        ...propTests.layoutPropTest,
       ].forEach(({
         name,
         onBeforeTest,
@@ -137,8 +139,8 @@ test.describe('CheckboxField', () => {
           }
 
           const component = await mount(
-            <CheckboxWForFormLayoutTests
-              {...props}
+            <CheckboxForFormLayoutTests
+              {...props as unknown as CheckboxForFormLayoutTestsProps}
             />,
           );
 

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

@@ -13,8 +13,8 @@ type CheckboxFieldForRefTestProps = CheckboxFieldForTestProps & {
   testRefAttrName: string;
   testRefAttrValue: string;
 };
-type CheckboxWForFormLayoutTestsProps = CheckboxFieldForTestProps & {
-  layout: 'vertical' | 'horizontal' | undefined
+export type CheckboxForFormLayoutTestsProps = CheckboxFieldForTestProps & {
+  layout: 'vertical' | 'horizontal'
 };
 
 const defaultLabel = 'test-label';
@@ -48,10 +48,10 @@ export const CheckboxFieldForRefTest = ({
   );
 };
 
-export const CheckboxWForFormLayoutTests = ({
-  layout = undefined,
+export const CheckboxForFormLayoutTests = ({
+  layout,
   ...props
-} : CheckboxWForFormLayoutTestsProps) => {
+} : CheckboxForFormLayoutTestsProps) => {
   const values = useMemo(() => ({ layout }), [layout]);
 
   return (

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

@@ -33,23 +33,24 @@ const options = [
 test.describe('CheckboxField', () => {
   test.describe('visual', () => {
     [
+      ...propTests.defaultComponentPropTest,
       ...propTests.requiredPropTest,
       ...propTests.labelPropTest,
       ...propTests.isLabelVisiblePropTest,
       ...propTests.renderAsRequiredPropTest,
-      ...propTests.layoutPropTest(true),
+      ...propTests.layoutPropTest,
       ...mixPropTests([
-        propTests.validationStatePropTest(true),
-        propTests.validationTextPropTest(true),
+        propTests.validationStatePropTest,
+        propTests.validationTextPropTest,
         propTests.disabledPropTest,
       ]),
       ...mixPropTests([
-        propTests.validationStatePropTest(true),
-        propTests.helpTextPropTest(true),
+        propTests.validationStatePropTest,
+        propTests.helpTextPropTest,
       ]),
       ...mixPropTests([
         partialDisabledOptionsPropTest,
-        propTests.validationStatePropTest(),
+        propTests.validationStatePropTest,
       ]),
     ].forEach(({
       name,

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

@@ -2,6 +2,7 @@ import { actionColorPropTest } from './propTests/actionColorPropTest';
 import { afterLabelPropTest } from './propTests/afterLabelPropTest';
 import { beforeLabelPropTest } from './propTests/beforeLabelPropTest';
 import { blockPropTest } from './propTests/blockPropTest';
+import { defaultComponentPropTest } from './propTests/defaultComponentPropTest';
 import { disabledPropTest } from './propTests/disabledPropTest';
 import { endCornerPropTest } from './propTests/endCornerPropTest';
 import { feedbackColorPropTest } from './propTests/feedbackColorPropTest';
@@ -31,6 +32,7 @@ export const propTests = {
   afterLabelPropTest,
   beforeLabelPropTest,
   blockPropTest,
+  defaultComponentPropTest,
   disabledPropTest,
   endCornerPropTest,
   feedbackColorPropTest,

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

@@ -0,0 +1,8 @@
+import type { PropTests } from '../types';
+
+export const defaultComponentPropTest: PropTests = [
+  {
+    name: 'defaultComponentProps',
+    props: {},
+  },
+];

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

@@ -1,23 +1,12 @@
 import type { PropTests } from '../types';
 
-export const helpTextPropTest = (useUndefined: boolean = false): PropTests => {
-  const propTests = [
-    {
-      name: 'helpText=long',
-      props: { helpText: 'Extra long helpText that exceeds regular length that anyone would expect to input in this property.' },
-    },
-    {
-      name: 'helpText=normal',
-      props: { helpText: 'Some normal helpText.' },
-    },
-  ];
-
-  if (useUndefined === true) {
-    propTests.push({
-      name: 'helpText=undefined',
-      props: { helpText: undefined },
-    });
-  }
-
-  return propTests;
-};
+export const helpTextPropTest: PropTests = [
+  {
+    name: 'helpText=long',
+    props: { helpText: 'Extra long helpText that exceeds regular length that anyone would expect to input in this property.' },
+  },
+  {
+    name: 'helpText=normal',
+    props: { helpText: 'Some normal helpText.' },
+  },
+];

src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-visual-defaultComponentProps-1-chromium-linux.png

@@ -1,23 +1,12 @@
 import type { PropTests } from '../types';
 
-export const labelPositionPropTest = (useUndefined: boolean = false): PropTests => {
-  const propTests = [
-    {
-      name: 'labelPosition=before',
-      props: { labelPosition: 'before' },
-    },
-    {
-      name: 'labelPosition=after',
-      props: { labelPosition: 'after' },
-    },
-  ];
-
-  if (useUndefined === true) {
-    propTests.push({
-      name: 'labelPosition=undefined',
-      props: { labelPosition: undefined },
-    });
-  }
-
-  return propTests;
-};
+export const labelPositionPropTest: PropTests = [
+  {
+    name: 'labelPosition=before',
+    props: { labelPosition: 'before' },
+  },
+  {
+    name: 'labelPosition=after',
+    props: { labelPosition: 'after' },
+  },
+];

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

@@ -1,23 +1,12 @@
 import type { PropTests } from '../types';
 
-export const layoutPropTest = (useUndefined: boolean = false): PropTests => {
-  const propTests = [
-    {
-      name: 'layout=vertical',
-      props: { layout: 'vertical' },
-    },
-    {
-      name: 'layout=horizontal',
-      props: { layout: 'horizontal' },
-    },
-  ];
-
-  if (useUndefined === true) {
-    propTests.push({
-      name: 'layout=undefined',
-      props: { layout: undefined },
-    });
-  }
-
-  return propTests;
-};
+export const layoutPropTest: PropTests = [
+  {
+    name: 'layout=vertical',
+    props: { layout: 'vertical' },
+  },
+  {
+    name: 'layout=horizontal',
+    props: { layout: 'horizontal' },
+  },
+];

src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-false-disabled-true-validationState-undefined-1-chromium-linux.png

@@ -1,27 +1,16 @@
 import type { PropTests } from '../types';
 
-export const validationStatePropTest = (useUndefined: boolean = false): PropTests => {
-  const propTests = [
-    {
-      name: 'validationState=valid',
-      props: { validationState: 'valid' },
-    },
-    {
-      name: 'validationState=warning',
-      props: { validationState: 'warning' },
-    },
-    {
-      name: 'validationState=invalid',
-      props: { validationState: 'invalid' },
-    },
-  ];
-
-  if (useUndefined === true) {
-    propTests.push({
-      name: 'validationState=undefined',
-      props: { validationState: undefined },
-    });
-  }
-
-  return propTests;
-};
+export const validationStatePropTest: PropTests = [
+  {
+    name: 'validationState=valid',
+    props: { validationState: 'valid' },
+  },
+  {
+    name: 'validationState=warning',
+    props: { validationState: 'warning' },
+  },
+  {
+    name: 'validationState=invalid',
+    props: { validationState: 'invalid' },
+  },
+];

src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-false-validationText-long-helpText-undefined-1-chromium-linux.png

@@ -1,23 +1,12 @@
 import type { PropTests } from '../types';
 
-export const validationTextPropTest = (useUndefined: boolean = false): PropTests => {
-  const propTests = [
-    {
-      name: 'validationText=long',
-      props: { validationText: 'Extra long validationText that exceeds regular length that anyone would expect to input in this property.' },
-    },
-    {
-      name: 'validationText=normal',
-      props: { validationText: 'Some normal validationText.' },
-    },
-  ];
-
-  if (useUndefined === true) {
-    propTests.push({
-      name: 'validationText=undefined',
-      props: { validationText: undefined },
-    });
-  }
-
-  return propTests;
-};
+export const validationTextPropTest: PropTests = [
+  {
+    name: 'validationText=long',
+    props: { validationText: 'Extra long validationText that exceeds regular length that anyone would expect to input in this property.' },
+  },
+  {
+    name: 'validationText=normal',
+    props: { validationText: 'Some normal validationText.' },
+  },
+];