From 66fc81a513756e29c2e7bf6e35a1d6bd1d664423 Mon Sep 17 00:00:00 2001 From: Jim O'Donnell Date: Thu, 3 Oct 2024 13:29:43 +0100 Subject: [PATCH] test(frontend): test sidebar components (#148) Some basic tests to check that sidebar sections render in the storybook. --- .../buildings/sidebar/BuildingsSection.stories.tsx | 5 +++++ .../droughtRisks/sidebar/DroughtsSection.stories.tsx | 5 +++++ .../hazards/sidebar/HazardsSection.stories.tsx | 9 +++++++++ .../data-layers/marine/sidebar/MarineSection.stories.tsx | 5 +++++ .../networks/sidebar/NetworksSection.stories.tsx | 3 +++ .../regions/sidebar/RegionsSection.stories.tsx | 5 +++++ .../terrestrial/sidebar/TerrestrialSection.stories.tsx | 5 +++++ 7 files changed, 37 insertions(+) diff --git a/frontend/src/data-layers/buildings/sidebar/BuildingsSection.stories.tsx b/frontend/src/data-layers/buildings/sidebar/BuildingsSection.stories.tsx index 81434c13..9a4a1f85 100644 --- 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 index cd15b94a..77126792 100644 --- 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 index bf102847..30dc1ef9 100644 --- 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 index 30b5ecb6..f98da273 100644 --- 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 index 9f9a8129..347d3df1 100644 --- 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 index 19d91d6a..0d18d299 100644 --- 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 index acd7e962..7989da76 100644 --- 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(); + }, };