test(frontend): test sidebar components (#148)

Some basic tests to check that sidebar sections render in the storybook.
nismod · Oct 3, 2024 · 66fc81a · 66fc81a
1 parent 0f746a1
commit 66fc81a
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 0 deletions.
diff --git a/frontend/src/data-layers/buildings/sidebar/BuildingsSection.stories.tsx b/frontend/src/data-layers/buildings/sidebar/BuildingsSection.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 
 import { BuildingsSection } from './BuildingsSection';
 
@@ -23,4 +24,8 @@ export const Default: Story = {
   args: {
     view: 'exposure',
   },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText('Buildings')).toBeTruthy();
+  },
 };
diff --git a/frontend/src/data-layers/droughtRisks/sidebar/DroughtsSection.stories.tsx b/frontend/src/data-layers/droughtRisks/sidebar/DroughtsSection.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 
 import { DroughtsSection } from './DroughtsSection';
 
@@ -23,4 +24,8 @@ export const Default: Story = {
   args: {
     view: 'adaptation',
   },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText('Drought')).toBeTruthy();
+  },
 };
diff --git a/frontend/src/data-layers/hazards/sidebar/HazardsSection.stories.tsx b/frontend/src/data-layers/hazards/sidebar/HazardsSection.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 
 import { HazardsSection } from './HazardsSection';
 
@@ -23,10 +24,18 @@ export const Exposure: Story = {
   args: {
     view: 'exposure',
   },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText('Hazards')).toBeTruthy();
+  },
 };
 
 export const Risk: Story = {
   args: {
     view: 'risk',
   },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText('Hazards')).toBeTruthy();
+  },
 };
diff --git a/frontend/src/data-layers/marine/sidebar/MarineSection.stories.tsx b/frontend/src/data-layers/marine/sidebar/MarineSection.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 
 import { MarineSection } from './MarineSection';
 
@@ -23,4 +24,8 @@ export const Default: Story = {
   args: {
     view: 'nature-based-solutions',
   },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText('Marine')).toBeTruthy();
+  },
 };
diff --git a/frontend/src/data-layers/networks/sidebar/NetworksSection.stories.tsx b/frontend/src/data-layers/networks/sidebar/NetworksSection.stories.tsx
@@ -34,6 +34,7 @@ export const Exposure: Story = {
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    expect(canvas.queryByText('Infrastructure')).toBeTruthy();
     expect(
       canvas.queryByText(
         'Infrastructure layers are currently following the Adaptation Options selection',
@@ -48,6 +49,7 @@ export const Risk: Story = {
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    expect(canvas.queryByText('Infrastructure')).toBeTruthy();
     expect(
       canvas.queryByText(
         'Infrastructure layers are currently following the Adaptation Options selection',
@@ -62,6 +64,7 @@ export const Adaptation: Story = {
   },
   play: ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    expect(canvas.queryByText('Infrastructure')).toBeTruthy();
     expect(
       canvas.queryByText(
         'Infrastructure layers are currently following the Adaptation Options selection',

diff --git a/frontend/src/data-layers/regions/sidebar/RegionsSection.stories.tsx b/frontend/src/data-layers/regions/sidebar/RegionsSection.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 
 import { RegionsSection } from './RegionsSection';
 
@@ -23,4 +24,8 @@ export const Default: Story = {
   args: {
     view: 'exposure',
   },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText('Regions')).toBeTruthy();
+  },
 };
diff --git a/frontend/src/data-layers/terrestrial/sidebar/TerrestrialSection.stories.tsx b/frontend/src/data-layers/terrestrial/sidebar/TerrestrialSection.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 
 import { TerrestrialSection } from './TerrestrialSection';
 
@@ -23,4 +24,8 @@ export const Default: Story = {
   args: {
     view: 'nature-based-solutions',
   },
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByText('Terrestrial')).toBeTruthy();
+  },
 };