fix(components): move flaky date range test to playwright

GenSpectrum · Apr 3, 2024 · 74308f3 · 74308f3
1 parent 1e198b1
commit 74308f3
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 69 deletions.
diff --git a/components/src/preact/dateRangeSelector/date-range-selector.tsx b/components/src/preact/dateRangeSelector/date-range-selector.tsx
@@ -4,6 +4,7 @@ import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
+import { toYYYYMMDD } from './dateConversion';
 
 export type CustomSelectOption = { label: string; dateFrom: string; dateTo: string };
 
@@ -224,12 +225,3 @@ const getDatesForSelectorValue = (
             return { dateFrom: today, dateTo: today };
     }
 };
-
-export const toYYYYMMDD = (date?: Date) => {
-    if (!date) {
-        return undefined;
-    }
-
-    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
-    return date.toLocaleDateString('en-CA', options);
-};
diff --git a/components/src/preact/dateRangeSelector/dateConversion.ts b/components/src/preact/dateRangeSelector/dateConversion.ts
@@ -0,0 +1,8 @@
+export const toYYYYMMDD = (date?: Date) => {
+    if (!date) {
+        return undefined;
+    }
+
+    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
+    return date.toLocaleDateString('en-CA', options);
+};
diff --git a/components/src/web-components/input/date-range-selector-component.stories.ts b/components/src/web-components/input/date-range-selector-component.stories.ts
@@ -1,12 +1,12 @@
 import { LAPIS_URL } from '../../constants';
 import type { Meta, StoryObj } from '@storybook/web-components';
-import { withActions } from '@storybook/addon-actions/decorator';
 import { html } from 'lit';
-import { DateRangeSelectorProps, toYYYYMMDD } from '../../preact/dateRangeSelector/date-range-selector';
+import { DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import './date-range-selector-component';
 import '../app';
 import { withinShadowRoot } from '../withinShadowRoot.story';
-import { expect, fn, userEvent, waitFor } from '@storybook/test';
+import { expect, waitFor } from '@storybook/test';
+import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
 
 const meta: Meta<DateRangeSelectorProps> = {
     title: 'Input/DateRangeSelector',
@@ -17,7 +17,6 @@ const meta: Meta<DateRangeSelectorProps> = {
         },
         fetchMock: {},
     },
-    decorators: [withActions],
 };
 
 export default meta;
@@ -49,59 +48,3 @@ export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps> = {
         earliestDate: '1970-01-01',
     },
 };
-
-export const DateRangeSelectorWithSelectedRange: StoryObj<DateRangeSelectorProps> = {
-    ...DateRangeSelectorStory,
-    play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');
-        const dateFrom = canvas.getByPlaceholderText('Date from');
-        const dateTo = canvas.getByPlaceholderText('Date to');
-
-        const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
-            canvasElement.addEventListener('gs-date-range-changed', listenerMock);
-        });
-
-        const someDateInThePast = '2021-10-01';
-        await step(`Set custom date from: ${someDateInThePast}`, async () => {
-            await userEvent.type(dateFrom, '{backspace>10/}');
-            await userEvent.type(dateFrom, `${someDateInThePast}`);
-            await userEvent.click(dateTo);
-            await waitFor(() => {
-                expect(dateFrom).toHaveValue(someDateInThePast);
-                expect(canvas.getByRole('combobox')).toHaveValue('custom');
-            });
-        });
-
-        await step('Expect correct event in thrown', async () => {
-            await expect(listenerMock).toHaveBeenCalled();
-
-            const firstCall = listenerMock.mock.calls[0][0];
-            const detail = firstCall.detail;
-
-            const dateFrom = detail.dateFrom;
-            await expect(dateFrom).toEqual(someDateInThePast);
-
-            const dateTo = detail.dateTo;
-            const expectedDateTo = new Date();
-            await expect(dateTo).toEqual(toYYYYMMDD(expectedDateTo));
-        });
-
-        await step('Select last 3 months', async () => {
-            await userEvent.selectOptions(canvas.getByRole('combobox'), 'last3Months');
-
-            await expect(canvas.getByRole('combobox')).toHaveValue('last3Months');
-
-            const today = new Date();
-            const todayString = today.toISOString().split('T')[0];
-            const threeMonthAgo = today;
-            threeMonthAgo.setMonth(threeMonthAgo.getMonth() - 3);
-            const threeMonthAgoString = threeMonthAgo.toISOString().split('T')[0];
-
-            await expect(dateFrom).toHaveValue(threeMonthAgoString);
-            await expect(dateTo).toHaveValue(todayString);
-
-            await expect(listenerMock).toHaveBeenCalledTimes(2);
-        });
-    },
-};
diff --git a/components/tests/dateRangeSelector.spec.ts b/components/tests/dateRangeSelector.spec.ts
@@ -0,0 +1,54 @@
+import { expect, Page, test } from '@playwright/test';
+import { toYYYYMMDD } from '../src/preact/dateRangeSelector/dateConversion';
+
+interface DateRangeDetail {
+    dateFrom: string;
+    dateTo: string;
+}
+
+const getEventPromiseInsideTestBrowser = async (page: Page) => {
+    return page.evaluate(() => {
+        return new Promise<DateRangeDetail>((executor) => {
+            document.addEventListener('gs-date-range-changed', (event) => {
+                const customEvent = event as CustomEvent<DateRangeDetail>;
+                return executor(customEvent.detail);
+            });
+        });
+    });
+};
+
+test('date selector should switch to custom and back', async ({ page }) => {
+    await page.goto(
+        'http://localhost:6006/iframe.html?args=&id=input-daterangeselector--date-range-selector-story&viewMode=story',
+    );
+
+    const dateFrom = page.getByPlaceholder('Date from');
+    const selectBox = page.locator('#root-inner').getByRole('combobox');
+    const dateTo = page.getByPlaceholder('Date to');
+
+    const firstEventPromise = getEventPromiseInsideTestBrowser(page);
+    const someDateInThePast = '2021-10-01';
+    await dateFrom.fill(someDateInThePast);
+    await dateFrom.press('Enter');
+
+    expect(await selectBox.inputValue()).toBe('custom');
+    expect(await dateFrom.inputValue()).toBe(someDateInThePast);
+
+    const today = new Date();
+    const firstEvent = await firstEventPromise;
+    expect(firstEvent.dateFrom).toBe(someDateInThePast);
+    expect(firstEvent.dateTo).toBe(toYYYYMMDD(today));
+
+    const secondEventPromise = getEventPromiseInsideTestBrowser(page);
+    await selectBox.selectOption('last3Months');
+
+    const threeMonthAgo = new Date();
+    threeMonthAgo.setMonth(threeMonthAgo.getMonth() - 3);
+
+    expect(await dateFrom.inputValue()).toBe(toYYYYMMDD(threeMonthAgo));
+    expect(await dateTo.inputValue()).toBe(toYYYYMMDD(today));
+    expect(await selectBox.inputValue()).toBe('last3Months');
+    const secondEvent = await secondEventPromise;
+    expect(secondEvent.dateFrom).toBe(toYYYYMMDD(threeMonthAgo));
+    expect(secondEvent.dateTo).toBe(toYYYYMMDD(today));
+});