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

Author: lukasbriza

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

@@ -19,6 +19,12 @@ test.describe('Button', () => {
       ...propTests.afterLabelPropTest,
       ...propTests.beforeLabelPropTest,
       ...propTests.blockPropTest,
+      ...propTests.endCornerPropTest,
+      ...propTests.feedbackIconPropTest,
+      ...propTests.labelPropTest,
+      ...propTests.labelVisibilityPropTest,
+      ...propTests.sizePropTest,
+      ...propTests.startCornerPropTest,
       ...mixPropTests([
         [
           ...propTests.actionColorPropTest,
@@ -28,12 +34,6 @@ test.describe('Button', () => {
         propTests.disabledPropTest,
         propTests.priorityPropTest,
       ]),
-      ...propTests.endCornerPropTest,
-      ...propTests.feedbackIconPropTest,
-      ...propTests.labelPropTest,
-      ...propTests.labelVisibilityPropTest,
-      ...propTests.sizePropTest,
-      ...propTests.startCornerPropTest,
     ].forEach(({
       name,
       onBeforeTest,

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

@@ -19,25 +19,25 @@ test.describe('CheckboxField', () => {
     test.describe('visual', () => {
       [
         ...propTests.defaultComponentPropTest,
-        ...propTests.labelPropTest,
-        ...propTests.renderAsRequiredPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
         ...propTests.isLabelVisiblePropTest,
         ...propTests.labelPositionPropTest,
-        ...propTests.helperTextAndValidationTextPropType,
+        ...propTests.labelPropTest,
+        ...propTests.renderAsRequiredPropTest,
         ...mixPropTests([
-          propTests.checkedPropTest,
           propTests.disabledPropTest,
+          propTests.checkedPropTest,
           propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.checkedPropTest,
-          propTests.validationStatePropTest,
           propTests.requiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.checkedPropTest,
-          propTests.validationStatePropTest,
           propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.checkedPropTest,

src/components/Radio/__tests__/Radio.spec.tsx

@@ -39,24 +39,24 @@ test.describe('Radio', () => {
     test.describe('visual', () => {
       [
         ...propTests.defaultComponentPropTest,
-        ...propTests.requiredPropTest,
-        ...propTests.labelPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
         ...propTests.isLabelVisiblePropTest,
-        ...propTests.renderAsRequiredPropTest,
+        ...propTests.labelPropTest,
         ...propTests.layoutPropTest,
-        ...propTests.helperTextAndValidationTextPropType,
+        ...propTests.renderAsRequiredPropTest,
+        ...propTests.requiredPropTest,
         ...mixPropTests([
+          propTests.disabledPropTest,
           propTests.validationStatePropTest,
           propTests.validationTextPropTest,
-          propTests.disabledPropTest,
         ]),
         ...mixPropTests([
-          propTests.validationStatePropTest,
           propTests.requiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
-          propTests.validationStatePropTest,
           propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           partialDisabledOptionsPropTest,

src/components/SelectField/__tests__/SelectField.spec.tsx

@@ -53,28 +53,28 @@ test.describe('SelectField', () => {
     test.describe('visual', () => {
       [
         ...propTests.defaultComponentPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
+        ...propTests.isLabelVisiblePropTest,
         ...propTests.labelPropTest,
         ...propTests.renderAsRequiredPropTest,
-        ...propTests.isLabelVisiblePropTest,
         ...propTests.requiredPropTest,
-        ...propTests.helperTextAndValidationTextPropType,
         ...propTests.sizePropTest,
         ...mixPropTests([
-          propTests.layoutPropTest,
           propTests.fullWidthPropTest,
+          propTests.layoutPropTest,
         ]),
         ...mixPropTests([
-          propTests.validationStatePropTest,
           propTests.requiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
-          propTests.validationStatePropTest,
           propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.disabledPropTest,
-          propTests.variantPropTest,
           propTests.validationStatePropTest,
+          propTests.variantPropTest,
         ]),
       ].forEach(({
         name,

src/components/TextArea/__tests__/TextArea.spec.tsx

@@ -19,23 +19,23 @@ test.describe('TextArea', () => {
     test.describe('visual', () => {
       [
         ...propTests.defaultComponentPropTest,
-        ...propTests.labelPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
         ...propTests.isLabelVisiblePropTest,
-        ...propTests.sizePropTest,
+        ...propTests.labelPropTest,
         ...propTests.requiredPropTest,
-        ...propTests.helperTextAndValidationTextPropType,
+        ...propTests.sizePropTest,
         ...mixPropTests([
-          propTests.layoutPropTest,
           propTests.fullWidthPropTest,
+          propTests.layoutPropTest,
         ]),
         ...mixPropTests([
-          propTests.validationStatePropTest,
           propTests.requiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.disabledPropTest,
-          propTests.variantPropTest,
           propTests.validationStatePropTest,
+          propTests.variantPropTest,
         ]),
       ].forEach(({
         name,

src/components/TextField/__tests__/TextField.spec.tsx

@@ -25,25 +25,25 @@ test.describe('TextField', () => {
         ...propTests.isLabelVisiblePropTest,
         ...propTests.sizePropTest,
         ...propTests.requiredPropTest,
-        ...propTests.helperTextAndValidationTextPropType,
+        ...propTests.helpTextAndValidationTextPropType,
         ...inputSizePropTest,
         ...typePropTest,
         ...mixPropTests([
-          propTests.layoutPropTest,
           propTests.fullWidthPropTest,
+          propTests.layoutPropTest,
         ]),
         ...mixPropTests([
-          propTests.validationStatePropTest,
           propTests.requiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
-          propTests.validationStatePropTest,
           propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.disabledPropTest,
-          propTests.variantPropTest,
           propTests.validationStatePropTest,
+          propTests.variantPropTest,
         ]),
       ].forEach(({
         name,

src/components/Toggle/__tests__/Toggle.spec.tsx

@@ -19,21 +19,21 @@ test.describe('Toggle', () => {
     test.describe('visual', () => {
       [
         ...propTests.defaultComponentPropTest,
-        ...propTests.labelPropTest,
+        ...propTests.helpTextAndValidationTextPropType,
         ...propTests.isLabelVisiblePropTest,
         ...propTests.labelPositionPropTest,
+        ...propTests.labelPropTest,
         ...propTests.renderAsRequiredPropTest,
         ...propTests.requiredPropTest,
-        ...propTests.helperTextAndValidationTextPropType,
         ...mixPropTests([
           propTests.checkedPropTest,
-          propTests.validationStatePropTest,
           propTests.requiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.checkedPropTest,
-          propTests.validationStatePropTest,
           propTests.renderAsRequiredPropTest,
+          propTests.validationStatePropTest,
         ]),
         ...mixPropTests([
           propTests.disabledPropTest,

tests/playwright/index.ts

@@ -10,7 +10,7 @@ import { feedbackColorPropTest } from './propTests/feedbackColorPropTest';
 import { feedbackIconPropTest } from './propTests/feedbackIconPropTest';
 import { fullWidthPropTest } from './propTests/fullWidthPropTest';
 import { helpTextPropTest } from './propTests/helpTextPropTest';
-import { helperTextAndValidationTextPropType } from './propTests/helperTextAndValidationTextPropType';
+import { helpTextAndValidationTextPropType } from './propTests/helpTextAndValidationTextPropType';
 import { iconPropTest } from './propTests/iconPropTest';
 import { isLabelVisiblePropTest } from './propTests/isLabelVisiblePropTest';
 import { labelPositionPropTest } from './propTests/labelPositionPropTest';
@@ -43,8 +43,8 @@ export const propTests = {
   feedbackColorPropTest,
   feedbackIconPropTest,
   fullWidthPropTest,
+  helpTextAndValidationTextPropType,
   helpTextPropTest,
-  helperTextAndValidationTextPropType,
   iconPropTest,
   isLabelVisiblePropTest,
   labelPositionPropTest,

tests/playwright/propTests/helpTextAndValidationTextPropType.ts

@@ -0,0 +1,25 @@
+import type { PropTests } from '../types';
+
+export const helpTextAndValidationTextPropType: PropTests = [
+  {
+    name: 'helpText:string & validationText:undefined',
+    props: {
+      helpText: 'Some normal helpText.',
+      validationText: undefined,
+    },
+  },
+  {
+    name: 'helpText:undefined & validationText:string',
+    props: {
+      helpText: undefined,
+      validationText: 'Some normal validationText.',
+    },
+  },
+  {
+    name: 'helpText:string & validationText:string',
+    props: {
+      helpText: 'Some normal helpText.',
+      validationText: 'Some normal validationText.',
+    },
+  },
+];

tests/playwright/propTests/helperTextAndValidationTextPropType.ts

@@ -13,4 +13,8 @@ export const validationStatePropTest: PropTests = [
     name: 'validationState:string=invalid',
     props: { validationState: 'invalid' },
   },
+  {
+    name: 'validationState:undefined',
+    props: { validationState: undefined },
+  },
 ];