From b2597b7b80174d8ab4177d27d366c139d85d3214 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Thu, 19 Sep 2024 12:56:13 +0200
Subject: [PATCH] :white_check_mark: [open-formulieren/open-forms#4637] Added
 translation tests to radio, select and selectboxes component tests

---
 .../radio/radio-validation.stories.ts         | 27 +++++++++
 .../select/select-validation.spec.tsx         | 57 +++++++++++++++++++
 .../selectboxes-validation.stories.ts         | 27 +++++++++
 3 files changed, 111 insertions(+)

diff --git a/src/registry/radio/radio-validation.stories.ts b/src/registry/radio/radio-validation.stories.ts
index 2ea45586..89ab87e8 100644
--- a/src/registry/radio/radio-validation.stories.ts
+++ b/src/registry/radio/radio-validation.stories.ts
@@ -57,3 +57,30 @@ export const ManualMinimumOneValue: Story = {
     });
   },
 };
+
+export const TranslationsArentRequired: Story = {
+  name: 'Translations: translations aren\'t required fields',
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step('Translations aren\'t required fields', async () => {
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+      const editForm = within(canvas.getByTestId('componentEditForm'));
+
+      // Check that all translations can be filled
+      const inputs = editForm.getAllByRole('textbox');
+      for (let input of inputs) {
+        await userEvent.type(input, 'manualTranslation');
+        await expect(input).toHaveValue('manualTranslation');
+        await userEvent.clear(input);
+        await expect(input).toHaveValue('');
+      }
+
+      // Removing focus from the last input
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+
+      // Check that none of the inputs have a Required error message
+      await expect(await editForm.queryByText('Required')).toBeNull();
+    });
+  },
+};
diff --git a/src/registry/select/select-validation.spec.tsx b/src/registry/select/select-validation.spec.tsx
index 28e2bdcd..54a5619e 100644
--- a/src/registry/select/select-validation.spec.tsx
+++ b/src/registry/select/select-validation.spec.tsx
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import ComponentEditForm from '@/components/ComponentEditForm';
 import {contextRender, screen} from '@/tests/test-utils';
+import {expect, within} from '@storybook/test';
 
 beforeAll(() => {
   jest.useFakeTimers();
@@ -96,3 +97,59 @@ test('There is always at least one option', async () => {
   const firstValueLabel = await screen.findByTestId('input-data.values[0].label');
   expect(firstValueLabel).toBeVisible();
 });
+
+test('All translations are optional', async () => {
+  const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime});
+  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}
+    />
+  );
+
+  await user.click(screen.getByRole('tab', {name: 'Translations'}));
+  const editForm = within(screen.getByTestId('componentEditForm'));
+
+  // Check that all translations can be filled
+  const inputs = editForm.getAllByRole('textbox');
+  for (let input of inputs) {
+    await user.type(input, 'manualTranslation');
+    await expect(input).toHaveValue('manualTranslation');
+    await user.clear(input);
+    await expect(input).toHaveValue('');
+  }
+
+  // Removing focus from the last input
+  await user.click(screen.getByRole('tab', {name: 'Translations'}));
+
+  // Check that none of the inputs have a Required error message
+  await expect(await editForm.queryByText('Required')).toBeNull();
+});
diff --git a/src/registry/selectboxes/selectboxes-validation.stories.ts b/src/registry/selectboxes/selectboxes-validation.stories.ts
index 5af78ed1..a8cd3443 100644
--- a/src/registry/selectboxes/selectboxes-validation.stories.ts
+++ b/src/registry/selectboxes/selectboxes-validation.stories.ts
@@ -72,6 +72,33 @@ export const ManualMinimumOneValue: Story = {
   },
 };
 
+export const TranslationsArentRequired: Story = {
+  name: 'Translations: translations aren\'t required fields',
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step('Translations aren\'t required fields', async () => {
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+      const editForm = within(canvas.getByTestId('componentEditForm'));
+
+      // Check that all translations can be filled
+      const inputs = editForm.getAllByRole('textbox');
+      for (let input of inputs) {
+        await userEvent.type(input, 'manualTranslation');
+        await expect(input).toHaveValue('manualTranslation');
+        await userEvent.clear(input);
+        await expect(input).toHaveValue('');
+      }
+
+      // Removing focus from the last input
+      await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
+
+      // Check that none of the inputs have a Required error message
+      await expect(await editForm.queryByText('Required')).toBeNull();
+    });
+  },
+};
+
 export const MinAndMaxSelectedInitialValues: Story = {
   name: 'Initial min and max count',
   args: {