Merge pull request #589 from UKHSA-Internal/chore/CDD-2370-minimap-ca…

…rd-test

Add test for MiniMapCard component

e2e/fixtures/pages/landing/landing.fixture.ts

@@ -151,6 +151,27 @@ export class LandingPage {
     await expect(card.getByRole('button', { name: 'Enter fullscreen' })).toBeVisible()
   }
 
+  async navigatesToWeatherHealthAlertsPageOnClick(
+    name: string,
+    { tagline, map = true }: { tagline: string; map?: boolean }
+  ) {
+    const section = this.page.getByRole('link', { name: 'Weather and climate risks' })
+    const card = this.page.getByRole('link', { name })
+
+    await expect(section).toBeVisible()
+    await expect(card).toBeVisible()
+    await expect(card.getByRole('heading', { name, level: 3 })).toBeVisible()
+    await expect(card.getByText(tagline)).toBeVisible()
+
+    if (map) {
+      await expect(card.getByRole('application', { name: 'Map of weather health alerts' })).toBeVisible()
+    } else {
+      await expect(card.getByRole('application', { name: 'Map of weather health alerts' })).toBeHidden()
+    }
+
+    await section.click()
+  }
+
   async clickMinimapCard(name: string) {
     const card = await this.getButtonInSection('Weather and climate risks', name)
     await card.click()

e2e/tests/landing/landing.e2e.ts

@@ -158,6 +158,21 @@ test.describe('Landing page - desktop @desktopOnly', () => {
     await landingPage.hasWeatherHealthAlertsCard('Cold health alerts', { tagline: 'Alerts in England', map: true })
   })
 
+  test('weather health alerts card opens health alert page when clicked', async ({
+    landingPage,
+    weatherHealthAlertsChildPage,
+  }) => {
+    await test.step('click minimap card', async () => {
+      await landingPage.navigatesToWeatherHealthAlertsPageOnClick('Cold health alerts', {
+        tagline: 'Alerts in England',
+        map: true,
+      })
+    })
+    await test.step('shows View map of weather health alert button', async () => {
+      await weatherHealthAlertsChildPage.hasMapLink('cold')
+    })
+  })
+
   test('Open map after clicking a minimap region', async ({ landingPage, weatherHealthAlertsMapPage }) => {
     await test.step('click minimap card', async () => {
       await landingPage.clickMinimapCardRegionByMap('Cold health alerts', 'E12000004')

src/app/components/ui/ukhsa/MiniMap/MiniMapCard.spec.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@/config/test-utils'
+
+import { MiniMapCard } from './MiniMapCard'
+
+//
+jest.mock('./MiniMap', () => ({
+  MiniMap: jest.fn(() => <div>MiniMap Mock Component</div>),
+}))
+
+const renderMinimapComponent = (type: 'heat' | 'cold') => {
+  const title = `${type} Health Alert`
+  const subTitle = `${type} temperatures expected`
+  const alertType = type
+
+  const { container } = render(<MiniMapCard title={title} subTitle={subTitle} alertType={alertType} />)
+  return {
+    container,
+  }
+}
+
+describe('MiniMapCard Component', () => {
+  it('renders the heading with the correct title text', () => {
+    renderMinimapComponent('heat')
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('heat Health Alert')
+  })
+
+  it('renders the subtitle correctly', () => {
+    renderMinimapComponent('cold')
+    expect(screen.getByText('cold temperatures expected')).toBeInTheDocument()
+  })
+
+  it('links to the correct summary page based on alertType (heat)', () => {
+    renderMinimapComponent('heat')
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/weather-health-alerts/heat')
+  })
+
+  it('links to the correct summary page based on alertType (cold)', () => {
+    renderMinimapComponent('cold')
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/weather-health-alerts/cold')
+  })
+
+  it('renders the MiniMap component with the correct alertType', () => {
+    renderMinimapComponent('cold')
+    expect(screen.getByText('MiniMap Mock Component')).toBeInTheDocument()
+  })
+
+  it('has the correct aria-labelledby attribute for accessibility', () => {
+    renderMinimapComponent('heat')
+    expect(screen.getByRole('link')).toHaveAttribute('aria-labelledby', 'chart-row-card-heading-x4')
+  })
+
+  it('applies the correct CSS classes to minimap card', () => {
+    const { container } = renderMinimapComponent('heat')
+    const card = container.querySelector('a')
+    expect(card).toHaveClass(
+      'govuk-link--no-visited-state govuk-!-padding-5 ukhsa-chart-card bg-[var(--colour-chart-background)]'
+    )
+    expect(card).toHaveClass(
+      'no-underline transition-colors duration-200 ukhsa-focus hover:bg-[var(--colour-chart-background-hover)] focus:bg-[var(--colour-chart-background-hover)]'
+    )
+  })
+})