test(frontend): add tests for Details sidebar components (#147)

Storybook tests for the Details sidebar stories.
nismod · Oct 3, 2024 · 0f746a1 · 0f746a1
1 parent 38dd4b2
commit 0f746a1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/frontend/src/details/features/FeatureSidebar.stories.tsx b/frontend/src/details/features/FeatureSidebar.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 import { http, HttpResponse } from 'msw';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
@@ -62,4 +63,11 @@ export const Default: Story = {
       ],
     },
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Roads (Class B)');
+    expect(await canvas.findByText('Risk')).toBeTruthy();
+    expect(await canvas.findByText('Return Period Damages')).toBeTruthy();
+    expect(await canvas.findByText('Adaptation Options')).toBeTruthy();
+  },
 };
diff --git a/frontend/src/details/regions/RegionDetails.stories.tsx b/frontend/src/details/regions/RegionDetails.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
@@ -36,4 +37,11 @@ export const Default: Story = {
   args: {
     region: mockRegion,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Enumeration District');
+    expect(canvas.queryByText('Population')).toBeTruthy();
+    expect(canvas.queryByText('Area (km²)')).toBeTruthy();
+    expect(canvas.queryByText('Population per km²')).toBeTruthy();
+  },
 };
diff --git a/frontend/src/details/solutions/SolutionsSidebar.stories.tsx b/frontend/src/details/solutions/SolutionsSidebar.stories.tsx
@@ -1,4 +1,5 @@
 import { StoryObj, Meta } from '@storybook/react';
+import { expect, within } from '@storybook/test';
 import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
@@ -52,11 +53,26 @@ export const Terrestrial: Story = {
     feature: mockTerrestrialFeature,
     id: 'terrestrial',
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Terrestrial');
+    expect(canvas.queryByText('Cell ID')).toBeTruthy();
+    expect(canvas.queryByText('Land Use')).toBeTruthy();
+    expect(canvas.queryByText('Slope (deg)')).toBeTruthy();
+    expect(canvas.queryByText('Elevation (m)')).toBeTruthy();
+  },
 };
 
 export const Marine: Story = {
   args: {
     feature: mockMarineFeature,
     id: 'marine',
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Marine');
+    expect(canvas.queryByText('Habitat')).toBeTruthy();
+    expect(canvas.queryByText('Mangrove Type')).toBeTruthy();
+    expect(canvas.queryByText('Proximity')).toBeTruthy();
+  },
 };