From 119bcffbf1772c46e7edf06d2740ff7a073255c7 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 16 Aug 2024 17:32:37 +0200
Subject: [PATCH] :white_check_mark: Replace interaction test with jest test

The focus/blur and race conditions in CI lead to flaky tests.
---
 .../select/select-validation.spec.tsx         | 41 ++++++++++++
 .../select/select-validation.stories.ts       | 62 -------------------
 2 files changed, 41 insertions(+), 62 deletions(-)
 delete mode 100644 src/registry/select/select-validation.stories.ts

diff --git a/src/registry/select/select-validation.spec.tsx b/src/registry/select/select-validation.spec.tsx
index 6c1e9bb5..28e2bdcd 100644
--- a/src/registry/select/select-validation.spec.tsx
+++ b/src/registry/select/select-validation.spec.tsx
@@ -55,3 +55,44 @@ test('Option values and labels are required fields', async () => {
   expect(await screen.findByText('The option label is a required field.')).toBeVisible();
   expect(await screen.findByText('The option value is a required field.')).toBeVisible();
 });
+
+test('There is always at least one option', async () => {
+  const onSubmit = jest.fn();
+  const component = {
+    id: 'wqimsadk',
+    type: 'select',
+    key: 'select',
+    label: 'A select field',
+    dataSrc: 'values',
+    openForms: {
+      dataSrc: 'manual',
+      translations: {},
+    },
+    data: {
+      values: [],
+    },
+    defaultValue: '',
+  } satisfies SelectComponentSchema;
+
+  const builderInfo = {
+    title: 'Select',
+    icon: 'th-list',
+    group: 'basic',
+    weight: 70,
+    schema: {},
+  };
+  contextRender(
+    <ComponentEditForm
+      isNew
+      component={component}
+      builderInfo={builderInfo}
+      onCancel={jest.fn()}
+      onRemove={jest.fn()}
+      onSubmit={onSubmit}
+    />
+  );
+
+  // wait for first value to be added
+  const firstValueLabel = await screen.findByTestId('input-data.values[0].label');
+  expect(firstValueLabel).toBeVisible();
+});
diff --git a/src/registry/select/select-validation.stories.ts b/src/registry/select/select-validation.stories.ts
deleted file mode 100644
index 2b1f9ed9..00000000
--- a/src/registry/select/select-validation.stories.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import {Meta, StoryObj} from '@storybook/react';
-import {expect, userEvent, within} from '@storybook/test';
-
-import ComponentEditForm from '@/components/ComponentEditForm';
-import {BuilderContextDecorator} from '@/sb-decorators';
-
-export default {
-  title: 'Builder components/Select/Validations',
-  component: ComponentEditForm,
-  decorators: [BuilderContextDecorator],
-  parameters: {
-    builder: {enableContext: true},
-  },
-  args: {
-    isNew: true,
-    component: {
-      id: 'wqimsadk',
-      type: 'select',
-      key: 'select',
-      label: 'A select field',
-      dataSrc: 'values',
-      openForms: {
-        dataSrc: 'manual',
-        translations: {},
-      },
-      data: {
-        values: [{value: '', label: ''}],
-      },
-      defaultValue: '',
-    },
-
-    builderInfo: {
-      title: 'Select',
-      icon: 'th-list',
-      group: 'basic',
-      weight: 70,
-      schema: {},
-    },
-  },
-} as Meta<typeof ComponentEditForm>;
-
-type Story = StoryObj<typeof ComponentEditForm>;
-
-export const ManualMinimumOneValue: Story = {
-  name: 'Manual values: must have at least one non-empty value',
-  play: async ({canvasElement, step}) => {
-    const canvas = within(canvasElement);
-
-    await step('Option values and labels are required fields', async () => {
-      // a value must be set, otherwise there's nothing to check and a label must be
-      // set, otherwise there is no clickable/accessible label for an option.
-
-      // we trigger input validation by touching the field and clearing it again
-      const labelInput = canvas.getByLabelText('Option label');
-      await userEvent.type(labelInput, 'Foo');
-      await userEvent.clear(labelInput);
-      await userEvent.keyboard('[Tab]');
-      await expect(await canvas.findByText('The option label is a required field.')).toBeVisible();
-      await expect(await canvas.findByText('The option value is a required field.')).toBeVisible();
-    });
-  },
-};