Feature/cdd 2285 - Addition of About Tab and dropdown functionality on mobile

e2e/fixtures/app.fixture.ts

@@ -1,7 +1,7 @@
 import AxeBuilder from '@axe-core/playwright'
 import { expect, Locator, Page, test as base } from '@playwright/test'
 import * as fs from 'fs'
-import { kebabCase } from 'lodash'
+import { kebabCase, lowerCase } from 'lodash'
 
 import { relatedLinksMock } from '@/mock-server/handlers/cms/pages/fixtures/elements'
 import { downloadsCsvFixture } from '@/mock-server/handlers/downloads/fixtures/downloads-csv'
@@ -286,9 +286,8 @@ export class App {
     }
   }
 
-  async hasTopicCard({ name, description }: { name: string; description: string }) {
+  async hasTopicCard({ name }: { name: string }) {
     const card = this.page.getByRole('article', { name, exact: true })
-    await expect(card.getByRole('paragraph')).toContainText(description)
     await expect(card.getByAltText(`Mocked alt text - Refer to tabular data.`)).toBeVisible()
   }
 
@@ -368,11 +367,17 @@ export class App {
 
   // Chart downloads
 
-  async canDownloadChart(cards: string[], format: 'csv' | 'json') {
+  async canDownloadChart(cards: string[], format: 'csv' | 'json', device: 'desktop' | 'mobile' | 'tablet') {
     for (const name of cards) {
       const card = this.page.getByTestId(`chart-row-card-${name}`)
 
-      await card.getByRole('tab', { name: 'Download' }).click()
+      if (device === 'mobile') {
+        await card
+          .getByRole('combobox', { name: `Choose display option for '${lowerCase(name)}' data` })
+          .selectOption('Download')
+      } else {
+        await card.getByRole('tab', { name: 'Download' }).click()
+      }
 
       await card.getByLabel(format.toUpperCase()).click()
 
@@ -401,6 +406,34 @@ export class App {
     }
   }
 
+  async navigateChartTabsByKeyboardAndSelectWithEnterKey(cards: string[]) {
+    for (const name of cards) {
+      const card = this.page.getByTestId(`chart-row-card-${name}`)
+
+      await card.getByRole('tab', { name: 'Chart' }).click()
+
+      await this.page.keyboard.press('Tab')
+      await this.page.keyboard.press('Tab')
+      await this.page.keyboard.press('Enter')
+
+      await expect(card.getByText(/Download data/)).toBeVisible()
+    }
+  }
+
+  async navigateChartTabsByKeyboardAndSelectWithSpaceKey(cards: string[]) {
+    for (const name of cards) {
+      const card = this.page.getByTestId(`chart-row-card-${name}`)
+
+      await card.getByRole('tab', { name: 'Chart' }).click()
+
+      await this.page.keyboard.press('Tab')
+      await this.page.keyboard.press('Tab')
+      await this.page.keyboard.press('Space')
+
+      await expect(card.getByText(/Download data/)).toBeVisible()
+    }
+  }
+
   // Pagination
 
   async hasPagination() {

e2e/tests/topics/respiratory-viruses/covid-19.e2e.ts

@@ -35,78 +35,53 @@ test.describe('COVID-19 page', () => {
     await test.step('displays chart cards for "Cases"', async () => {
       await app.hasTopicCard({
         name: 'Cases by specimen date',
-        description: 'Number of cases by specimen date. Data for the last 5 days, highlighted in grey, are incomplete.',
       })
       await app.hasTopicCard({
         name: '7-day case rates by specimen date',
-        description: 'Rate of cases per 100,000 people in the rolling 7-day period ending on the dates shown.',
       })
       await app.hasTopicCard({
         name: 'Case rates by age',
-        description: 'Rates per 100,000 people of the total number of cases since the start of the pandemic, by age.',
       })
     })
     await test.step('displays chart cards for "Deaths"', async () => {
       await app.hasTopicCard({
         name: 'Daily deaths with COVID-19 on the death certificate by date of death',
-        description:
-          'Daily numbers of deaths of people whose death certificate mentioned COVID-19 as one of the causes, and 7-day rolling average. Because of the time it takes for deaths to be registered, there is a lag in reporting of at least 11 days, and data are not shown for the 14 days before the most recent reported date as they are considered incomplete. Data are shown by date of death.',
       })
     })
     await test.step('displays chart cards for "Healthcare"', async () => {
       await app.hasTopicCard({
         name: 'Bar chart with overlaying line comparing patients admitted to hospital with COVID-19',
-        description:
-          'Daily and total numbers of COVID-19 patients admitted to hospital. The overlaying line shows the 7-day average.',
       })
       await app.hasTopicCard({
         name: 'Patients in hospital',
-        description:
-          'Daily count of confirmed COVID-19 patients in hospital at 8am. The overlaying line shows the 7-day average.',
       })
       await app.hasTopicCard({
         name: 'Admissions rate by age',
-        description:
-          'Age breakdown of people admitted to hospital, shown as the rate per 100,000 people, since the start of the pandemic. There are fewer people in the oldest age group so the rates show the relative impact on different age groups.',
       })
       await app.hasTopicCard({
         name: 'Patients in mechanical ventilation beds',
-        description:
-          'Daily count of COVID-19 patients in mechanical ventilation beds, and 7-day rolling average. Data are not updated every day.',
       })
     })
     await test.step('displays chart cards for "Testing"', async () => {
       await app.hasTopicCard({
         name: 'Total daily number of PCR tests reported',
-        description:
-          'The daily number of new polymerase chain reaction (PCR) tests reported. Data is shown by specimen date (the date the sample was collected from the person).',
       })
       await app.hasTopicCard({
         name: 'Weekly positivity of people receiving a PCR test',
-        description:
-          'The percentage positivity of people who received a polymerase chain reaction (PCR) and had at least one positive COVID-19 PCR test result in the same 7 days. Data is shown by specimen date (the date the sample was collected). People tested more than once in the period are only counted once in the denominator. People with more than one positive result in the period are only included once in the numerator.',
       })
     })
     await test.step('displays chart cards for "Vaccinations"', async () => {
       await app.hasTopicCard({
         name: 'People aged 50 and over who have received autumn booster vaccinations, by vaccination date',
-        description:
-          'The number of people aged 50 and over who have received an autumn booster COVID-19 vaccination. Data for the latest 2 days, marked in grey, are incomplete. Data are shown by date of vaccination.',
       })
       await app.hasTopicCard({
         name: 'Autumn booster vaccination uptake (50+), by vaccination date',
-        description:
-          'The percentage of people aged 50 and over who have received an autumn booster COVID-19 vaccination. The denominator is the number of people aged 50 and over on the National Immunisation Management Service (NIMS) database.',
       })
       await app.hasTopicCard({
         name: 'People aged 75 and over who have received spring booster vaccinations, by vaccination date',
-        description:
-          'The number of people aged 75 and over who have received a spring booster COVID-19 vaccination. Data for the latest 2 days, marked in grey, are incomplete. Data are shown by date of vaccination.',
       })
       await app.hasTopicCard({
         name: 'Spring booster vaccination uptake (75+), by vaccination date',
-        description:
-          'The percentage of people aged 75 and over who have received a spring booster COVID-19 vaccination. The denominator is the number of people aged 75 and over on the National Immunisation Management Service (NIMS) database.',
       })
     })
     await test.step('displays related links', async () => {
@@ -117,60 +92,6 @@ test.describe('COVID-19 page', () => {
     })
   })
 
-  test('Downloads a csv version of each chart', async ({ covid19Page, app }) => {
-    await test.step('loads the page', async () => {
-      await covid19Page.goto()
-    })
-    await test.step('downloads charts', async () => {
-      await app.canDownloadChart(
-        [
-          'cases-by-specimen-date',
-          '7-day-case-rates-by-specimen-date',
-          'case-rates-by-age',
-          'daily-deaths-with-covid-19-on-the-death-certificate-by-date-of-death',
-          'bar-chart-with-overlaying-line-comparing-patients-admitted-to-hospital-with-covid-19',
-          'patients-in-hospital',
-          'admissions-rate-by-age',
-          'patients-in-mechanical-ventilation-beds',
-          'total-daily-number-of-pcr-tests-reported',
-          'weekly-positivity-of-people-receiving-a-pcr-test',
-          'people-aged-50-and-over-who-have-received-autumn-booster-vaccinations-by-vaccination-date',
-          'autumn-booster-vaccination-uptake-50-by-vaccination-date',
-          'people-aged-75-and-over-who-have-received-spring-booster-vaccinations-by-vaccination-date',
-          'spring-booster-vaccination-uptake-75-by-vaccination-date',
-        ],
-        'csv'
-      )
-    })
-  })
-
-  test('Downloads a json version of each chart', async ({ covid19Page, app }) => {
-    await test.step('loads the page', async () => {
-      await covid19Page.goto()
-    })
-    await test.step('downloads charts', async () => {
-      await app.canDownloadChart(
-        [
-          'cases-by-specimen-date',
-          '7-day-case-rates-by-specimen-date',
-          'case-rates-by-age',
-          'daily-deaths-with-covid-19-on-the-death-certificate-by-date-of-death',
-          'bar-chart-with-overlaying-line-comparing-patients-admitted-to-hospital-with-covid-19',
-          'patients-in-hospital',
-          'admissions-rate-by-age',
-          'patients-in-mechanical-ventilation-beds',
-          'total-daily-number-of-pcr-tests-reported',
-          'weekly-positivity-of-people-receiving-a-pcr-test',
-          'people-aged-50-and-over-who-have-received-autumn-booster-vaccinations-by-vaccination-date',
-          'autumn-booster-vaccination-uptake-50-by-vaccination-date',
-          'people-aged-75-and-over-who-have-received-spring-booster-vaccinations-by-vaccination-date',
-          'spring-booster-vaccination-uptake-75-by-vaccination-date',
-        ],
-        'json'
-      )
-    })
-  })
-
   test('Area selection already chosen upon visiting the page', async ({ covid19Page, app }) => {
     await test.step('loads the page', async () => {
       await app.goto('/topics/covid-19?areaType=Lower+Tier+Local+Authority&areaName=Southampton')
@@ -290,13 +211,48 @@ test.describe('COVID-19 page', () => {
   })
 })
 
+const chartIdentifiers = [
+  'cases-by-specimen-date',
+  '7-day-case-rates-by-specimen-date',
+  'case-rates-by-age',
+  'daily-deaths-with-covid-19-on-the-death-certificate-by-date-of-death',
+  'bar-chart-with-overlaying-line-comparing-patients-admitted-to-hospital-with-covid-19',
+  'patients-in-hospital',
+  'admissions-rate-by-age',
+  'patients-in-mechanical-ventilation-beds',
+  'total-daily-number-of-pcr-tests-reported',
+  'weekly-positivity-of-people-receiving-a-pcr-test',
+  'people-aged-50-and-over-who-have-received-autumn-booster-vaccinations-by-vaccination-date',
+  'autumn-booster-vaccination-uptake-50-by-vaccination-date',
+  'people-aged-75-and-over-who-have-received-spring-booster-vaccinations-by-vaccination-date',
+  'spring-booster-vaccination-uptake-75-by-vaccination-date',
+]
+
 test.describe('COVID-19 page - mobile @mobileOnly', () => {
   test.use({ viewport: viewports.mobile })
 
   test('displays the navigation on mobile', async ({ covid19Page, app }) => {
     await covid19Page.goto()
     await app.hasNav()
   })
+
+  test('Downloads a csv version of each chart', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(chartIdentifiers, 'csv', 'mobile')
+    })
+  })
+
+  test('Downloads a json version of each chart', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(chartIdentifiers, 'json', 'mobile')
+    })
+  })
 })
 
 test.describe('COVID-19 page - tablet @tabletOnly', () => {
@@ -306,6 +262,24 @@ test.describe('COVID-19 page - tablet @tabletOnly', () => {
     await covid19Page.goto()
     await app.hasNav()
   })
+
+  test('Downloads a csv version of each chart', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(chartIdentifiers, 'csv', 'tablet')
+    })
+  })
+
+  test('Downloads a json version of each chart', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(chartIdentifiers, 'json', 'tablet')
+    })
+  })
 })
 
 test.describe('COVID-19 page - desktop @desktopOnly', () => {
@@ -315,6 +289,40 @@ test.describe('COVID-19 page - desktop @desktopOnly', () => {
     await covid19Page.goto()
     await app.hasNav()
   })
+
+  test('Downloads a csv version of each chart', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(chartIdentifiers, 'csv', 'desktop')
+    })
+  })
+
+  test('Downloads a json version of each chart', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(chartIdentifiers, 'json', 'desktop')
+    })
+  })
+  test('Navigates through the chart tabs using Enter Key on keyboard', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('tabs through the tabs and navigates to the download content with Enter Key on keyboard', async () => {
+      await app.navigateChartTabsByKeyboardAndSelectWithEnterKey(chartIdentifiers)
+    })
+  })
+  test('Navigates through the chart tabs using Space Key on keyboard', async ({ covid19Page, app }) => {
+    await test.step('loads the page', async () => {
+      await covid19Page.goto()
+    })
+    await test.step('tabs through the tabs and navigates to the download content with Space Key on keyboard', async () => {
+      await app.navigateChartTabsByKeyboardAndSelectWithSpaceKey(chartIdentifiers)
+    })
+  })
 })
 
 test.describe('COVID-19 page - no JS', () => {
@@ -325,25 +333,7 @@ test.describe('COVID-19 page - no JS', () => {
       await covid19Page.goto()
     })
     await test.step('downloads a csv version of each chart', async () => {
-      await app.canDownloadChart(
-        [
-          'cases-by-specimen-date',
-          '7-day-case-rates-by-specimen-date',
-          'case-rates-by-age',
-          'daily-deaths-with-covid-19-on-the-death-certificate-by-date-of-death',
-          'bar-chart-with-overlaying-line-comparing-patients-admitted-to-hospital-with-covid-19',
-          'patients-in-hospital',
-          'admissions-rate-by-age',
-          'patients-in-mechanical-ventilation-beds',
-          'total-daily-number-of-pcr-tests-reported',
-          'weekly-positivity-of-people-receiving-a-pcr-test',
-          'people-aged-50-and-over-who-have-received-autumn-booster-vaccinations-by-vaccination-date',
-          'autumn-booster-vaccination-uptake-50-by-vaccination-date',
-          'people-aged-75-and-over-who-have-received-spring-booster-vaccinations-by-vaccination-date',
-          'spring-booster-vaccination-uptake-75-by-vaccination-date',
-        ],
-        'csv'
-      )
+      await app.canDownloadChart(chartIdentifiers, 'csv', 'desktop')
     })
   })
 
@@ -352,25 +342,7 @@ test.describe('COVID-19 page - no JS', () => {
       await covid19Page.goto()
     })
     await test.step('downloads a csv version of each chart', async () => {
-      await app.canDownloadChart(
-        [
-          'cases-by-specimen-date',
-          '7-day-case-rates-by-specimen-date',
-          'case-rates-by-age',
-          'daily-deaths-with-covid-19-on-the-death-certificate-by-date-of-death',
-          'bar-chart-with-overlaying-line-comparing-patients-admitted-to-hospital-with-covid-19',
-          'patients-in-hospital',
-          'admissions-rate-by-age',
-          'patients-in-mechanical-ventilation-beds',
-          'total-daily-number-of-pcr-tests-reported',
-          'weekly-positivity-of-people-receiving-a-pcr-test',
-          'people-aged-50-and-over-who-have-received-autumn-booster-vaccinations-by-vaccination-date',
-          'autumn-booster-vaccination-uptake-50-by-vaccination-date',
-          'people-aged-75-and-over-who-have-received-spring-booster-vaccinations-by-vaccination-date',
-          'spring-booster-vaccination-uptake-75-by-vaccination-date',
-        ],
-        'json'
-      )
+      await app.canDownloadChart(chartIdentifiers, 'json', 'desktop')
     })
   })