test(components): number of sequences over time: add story and visual…

… tests Refs: #318
GenSpectrum · Jul 11, 2024 · 39f923d · 39f923d
1 parent 621f06e
commit 39f923d
Show file tree

Hide file tree

Showing 12 changed files with 3,653 additions and 3 deletions.
diff --git a/components/src/preact/numberSequencesOverTime/__mockData__/oneVariantEG.json b/components/src/preact/numberSequencesOverTime/__mockData__/oneVariantEG.json
diff --git a/components/src/preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json b/components/src/preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json
diff --git a/components/src/preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json b/components/src/preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json
diff --git a/components/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx b/components/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx
@@ -1,7 +1,10 @@
 import { type StoryObj } from '@storybook/preact';
 
 import { NumberSequencesOverTime, type NumberSequencesOverTimeProps } from './number-sequences-over-time';
-import { LAPIS_URL } from '../../constants';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import oneVariantEG from '../../preact/numberSequencesOverTime/__mockData__/oneVariantEG.json';
+import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json';
+import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 
 export default {
@@ -42,7 +45,7 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
     args: {
         views: ['bar', 'line', 'table'],
         lapisFilter: [
-            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-12-01' } },
         ],
         lapisDateField: 'date',
         width: '100%',
@@ -52,6 +55,28 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         granularity: 'month',
         pageSize: 10,
     },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregated',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'EG*',
+                            dateFrom: '2022-12-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: oneVariantEG,
+                    },
+                },
+            ],
+        },
+    },
 };
 
 export const Table = {
@@ -67,4 +92,42 @@ export const TwoVariants = {
             { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
     },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedEG',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'EG*',
+                            dateTo: '2023-06-30',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsEG,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregatedJN.1',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsJN1,
+                    },
+                },
+            ],
+        },
+    },
 };
diff --git a/components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx b/components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx
@@ -21,7 +21,7 @@ type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
 export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
     width: string;
     height: string;
-    headline?: string;
+    headline: string;
 }
 
 interface NumberSequencesOverTimeInnerProps {

diff --git a/components/src/web-components/visualization/gs-number-sequences-over-time.stories.ts b/components/src/web-components/visualization/gs-number-sequences-over-time.stories.ts
@@ -0,0 +1,168 @@
+import { expect, fireEvent, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../app';
+import './gs-number-sequences-over-time';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import oneVariantEG from '../../preact/numberSequencesOverTime/__mockData__/oneVariantEG.json';
+import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json';
+import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
+import type { NumberSequencesOverTimeProps } from '../../preact/numberSequencesOverTime/number-sequences-over-time';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const codeExample = String.raw`
+<gs-number-sequences-over-time
+    lapisFilter='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    lapisDateField="date"
+    views='["bar", "line", "table"]'
+    headline="Number of sequences of time"
+    width="100%"
+    height="700px"
+    granularity="month"
+    smoothingWindow="0"
+    pageSize="10"
+></gs-number-sequences-over-time>`;
+
+const meta: Meta<NumberSequencesOverTimeProps> = {
+    title: 'Visualization/Number sequences over time',
+    component: 'gs-number-sequences-over-time',
+    argTypes: {
+        granularity: {
+            options: ['day', 'week', 'month', 'year'],
+            control: { type: 'radio' },
+        },
+        views: {
+            options: ['bar', 'line', 'table'],
+            control: { type: 'check' },
+        },
+        pageSize: { control: 'object' },
+    },
+    parameters: withComponentDocs({
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryObj<NumberSequencesOverTimeProps> = {
+    render: (args) => html`
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-number-sequences-over-time
+                .lapisFilter=${args.lapisFilter}
+                .lapisDateField=${args.lapisDateField}
+                .views=${args.views}
+                .width=${args.width}
+                .height=${args.height}
+                .headline=${args.headline}
+                .granularity=${args.granularity}
+                .smoothingWindow=${args.smoothingWindow}
+                .pageSize=${args.pageSize}
+            ></gs-number-sequences-over-time>
+        </gs-app>
+    `,
+    args: {
+        views: ['bar', 'line', 'table'],
+        lapisFilter: [
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2022-12-01' } },
+        ],
+        lapisDateField: 'date',
+        width: '100%',
+        height: '700px',
+        headline: 'Number of sequences of time',
+        smoothingWindow: 0,
+        granularity: 'month',
+        pageSize: 10,
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregated',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'EG*',
+                            dateFrom: '2022-12-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: oneVariantEG,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const OneDatasetTable: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-number-sequences-over-time');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());
+
+        await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));
+    },
+};
+
+export const TwoDatasets: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: [
+            {
+                displayName: 'EG until 2023-06',
+                lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateTo: '2023-06-30' },
+            },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
+        ],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedEG',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'EG*',
+                            dateTo: '2023-06-30',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsEG,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregatedJN.1',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            country: 'USA',
+                            pangoLineage: 'JN.1*',
+                            dateFrom: '2023-01-01',
+                            fields: ['date'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: twoVariantsJN1,
+                    },
+                },
+            ],
+        },
+    },
+};
diff --git a/components/src/web-components/visualization/gs-number-sequences-over-time.tsx b/components/src/web-components/visualization/gs-number-sequences-over-time.tsx
@@ -7,6 +7,9 @@ import {
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
+/**
+ * TODO(#330) write docs
+ */
 @customElement('gs-number-sequences-over-time')
 export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     // prettier-ignore

diff --git a/...izatio-d679d-me--one-dataset-table-should-match-screenshot-1-chromium-linux.png b/...izatio-d679d-me--one-dataset-table-should-match-screenshot-1-chromium-linux.png
diff --git a/...lizatio-d679d-me--one-dataset-table-should-match-screenshot-1-firefox-linux.png b/...lizatio-d679d-me--one-dataset-table-should-match-screenshot-1-firefox-linux.png
diff --git a/...izatio-ffd47-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png b/...izatio-ffd47-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png
diff --git a/...lizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png b/...lizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png
diff --git a/components/tests/visualizationStories.ts b/components/tests/visualizationStories.ts
@@ -30,4 +30,6 @@ export const visualizationStories = [
     },
     { id: 'visualization-mutation-comparison--venn-diagram', title: 'Mutation comparison' },
     { id: 'visualization-aggregate--table', title: 'Aggregate', testDownloadWithFilename: 'aggregate.csv' },
+    { id: 'visualization-number-sequences-over-time--one-dataset-table', title: 'Number of sequences of time' },
+    { id: 'visualization-number-sequences-over-time--two-datasets', title: 'Number of sequences of time' },
 ];