feat(components): split up tests to avoid timout

GenSpectrum · Jan 14, 2025 · 2538257 · 2538257
1 parent e6c1b0c
commit 2538257
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/components/src/preact/textInput/text-input.tsx b/components/src/preact/textInput/text-input.tsx
@@ -93,7 +93,10 @@ const TextSelector = ({
         if (inputValue === undefined || inputValue === null || inputValue === '') {
             return true;
         }
-        return item === inputValue;
+        return (
+            item?.toLowerCase().includes(inputValue?.toLowerCase() || '') ||
+            item?.toLowerCase().includes(inputValue?.toLowerCase() || '')
+        );
     }
 
     const {

diff --git a/components/src/web-components/input/gs-text-input.stories.ts b/components/src/web-components/input/gs-text-input.stories.ts
@@ -97,7 +97,7 @@ export const Default: StoryObj<Required<TextInputProps>> = {
     },
 };
 
-export const FiresEvent: StoryObj<Required<TextInputProps>> = {
+export const FiresEventNoValidInput: StoryObj<Required<TextInputProps>> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
@@ -126,19 +126,47 @@ export const FiresEvent: StoryObj<Required<TextInputProps>> = {
                 host: null,
             });
         });
+    },
+    args: {
+        ...Default.args,
+        initialValue: '',
+    },
+};
+
+export const FiresEventValidInput: StoryObj<Required<TextInputProps>> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter host name');
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-text-input-changed', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField()).toBeEnabled();
+            });
+        });
 
         await step('Enter a valid host name', async () => {
             await userEvent.type(inputField(), 'Homo s');
+
             const dropdownOption = await canvas.findByText('Homo sapiens');
             await userEvent.click(dropdownOption);
+        });
 
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        host: 'Homo',
-                    },
-                }),
-            );
+        await step('Verify event is fired with correct detail', async () => {
+            await waitFor(() => {
+                expect(listenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: 'Homo sapiens',
+                        },
+                    }),
+                );
+            });
         });
     },
     args: {