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

e2e/fixtures/app.fixture.ts

@@ -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,15 @@ 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.getByTestId('DropdownSelect').selectOption('Download')
+      } else {
+        await card.getByRole('tab', { name: 'Download' }).click()
+      }
 
       await card.getByLabel(format.toUpperCase()).click()
 

e2e/tests/topics/respiratory-viruses/influenza.e2e.ts

@@ -35,33 +35,24 @@ test.describe('Influenza page', () => {
     await test.step('displays chart cards for "Healthcare"', async () => {
       await app.hasTopicCard({
         name: 'Line chart with overlaying line comparing hospital admission rates of patients admitted to hospital with Influenza',
-        description:
-          'Weekly admissions rates of patients admitted to hospital with Influenza as a weekly time series, shown as the rate per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing Influenza hospital admission rates by age',
-        description: 'Age breakdown of people admitted to hospital, shown as the rate per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart with overlaying line comparing ICU admission rates of patients admitted to hospital with Influenza',
-        description:
-          'Weekly admissions rates of patients admitted to ICU with Influenza as a weekly time series, shown as the rate per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing Influenza ICU admission rates by age',
-        description: 'Age breakdown of people admitted to ICU, shown as the rate per 100,000 people.',
       })
     })
     await test.step('displays chart cards for "Testing"', async () => {
       7
       await app.hasTopicCard({
         name: 'Bar chart with overlaying line comparing positivity for Influenza tests',
-        description:
-          'Weekly admissions rates of patients admitted to hospital with Influenza as a weekly time series, shown as the rate per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing weekly positivity for Influenza tests by age',
-        description: 'Weekly time series of positivity for people testing positive for Influenza broken down by age.',
       })
     })
 
@@ -73,44 +64,6 @@ test.describe('Influenza page', () => {
     })
   })
 
-  test('downloads a csv version of each chart', async ({ influenzaPage, app }) => {
-    await test.step('loads the page', async () => {
-      await influenzaPage.goto()
-    })
-    await test.step('downloads charts', async () => {
-      await app.canDownloadChart(
-        [
-          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
-          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
-          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
-          'line-chart-comparing-influenza-icu-admission-rates-by-age',
-          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
-          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
-        ],
-        'csv'
-      )
-    })
-  })
-
-  test('downloads a json version of each chart', async ({ influenzaPage, app }) => {
-    await test.step('loads the page', async () => {
-      await influenzaPage.goto()
-    })
-    await test.step('downloads charts', async () => {
-      await app.canDownloadChart(
-        [
-          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
-          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
-          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
-          'line-chart-comparing-influenza-icu-admission-rates-by-age',
-          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
-          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
-        ],
-        'json'
-      )
-    })
-  })
-
   test('Area selection already chosen upon visiting the page', async ({ influenzaPage, app }) => {
     await test.step('loads the page', async () => {
       await app.goto('/topics/influenza?areaType=Lower+Tier+Local+Authority&areaName=Southampton')
@@ -218,6 +171,45 @@ test.describe('Influenza page - mobile @mobileOnly', () => {
     await influenzaPage.goto()
     await app.hasNav()
   })
+  test('downloads a json version of each chart', async ({ influenzaPage, app }) => {
+    await test.step('loads the page', async () => {
+      await influenzaPage.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(
+        [
+          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
+          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-icu-admission-rates-by-age',
+          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
+          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
+        ],
+        'json',
+        'mobile'
+      )
+    })
+  })
+
+  test('downloads a csv version of each chart', async ({ influenzaPage, app }) => {
+    await test.step('loads the page', async () => {
+      await influenzaPage.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(
+        [
+          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
+          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-icu-admission-rates-by-age',
+          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
+          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
+        ],
+        'csv',
+        'mobile'
+      )
+    })
+  })
 })
 
 test.describe('Influenza page - tablet @tabletOnly', () => {
@@ -227,6 +219,46 @@ test.describe('Influenza page - tablet @tabletOnly', () => {
     await influenzaPage.goto()
     await app.hasNav()
   })
+
+  test('downloads a json version of each chart', async ({ influenzaPage, app }) => {
+    await test.step('loads the page', async () => {
+      await influenzaPage.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(
+        [
+          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
+          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-icu-admission-rates-by-age',
+          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
+          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
+        ],
+        'json',
+        'tablet'
+      )
+    })
+  })
+
+  test('downloads a csv version of each chart', async ({ influenzaPage, app }) => {
+    await test.step('loads the page', async () => {
+      await influenzaPage.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(
+        [
+          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
+          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-icu-admission-rates-by-age',
+          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
+          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
+        ],
+        'csv',
+        'tablet'
+      )
+    })
+  })
 })
 
 test.describe('Influenza page - desktop @desktopOnly', () => {
@@ -236,6 +268,46 @@ test.describe('Influenza page - desktop @desktopOnly', () => {
     await influenzaPage.goto()
     await app.hasNav()
   })
+
+  test('downloads a json version of each chart', async ({ influenzaPage, app }) => {
+    await test.step('loads the page', async () => {
+      await influenzaPage.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(
+        [
+          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
+          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-icu-admission-rates-by-age',
+          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
+          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
+        ],
+        'json',
+        'desktop'
+      )
+    })
+  })
+
+  test('downloads a csv version of each chart', async ({ influenzaPage, app }) => {
+    await test.step('loads the page', async () => {
+      await influenzaPage.goto()
+    })
+    await test.step('downloads charts', async () => {
+      await app.canDownloadChart(
+        [
+          'line-chart-with-overlaying-line-comparing-hospital-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-hospital-admission-rates-by-age',
+          'line-chart-with-overlaying-line-comparing-icu-admission-rates-of-patients-admitted-to-hospital-with-influenza',
+          'line-chart-comparing-influenza-icu-admission-rates-by-age',
+          'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
+          'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
+        ],
+        'csv',
+        'desktop'
+      )
+    })
+  })
 })
 
 test.describe('Influenza page - no JS', () => {
@@ -255,7 +327,8 @@ test.describe('Influenza page - no JS', () => {
           'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
           'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
         ],
-        'csv'
+        'csv',
+        'desktop'
       )
     })
   })
@@ -274,7 +347,8 @@ test.describe('Influenza page - no JS', () => {
           'bar-chart-with-overlaying-line-comparing-positivity-for-influenza-tests',
           'line-chart-comparing-weekly-positivity-for-influenza-tests-by-age',
         ],
-        'json'
+        'json',
+        'desktop'
       )
     })
   })