feature/CDD-2285: Updated the e2e tests for playwright

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()
   }
 

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 () => {

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.',
       })
     })
 

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

@@ -35,61 +35,44 @@ test.describe('Other respiratory viruses page', () => {
     await test.step('displays chart cards for "Healthcare"', async () => {
       await app.hasTopicCard({
         name: 'Line chart comparing RSV hospital (ICU or HDU) admission rates of positive cases per 100,000 population reported through SARI Watch, England',
-        description:
-          'RSV SARI Watch surveillance has run from week 40 to week 20. In the 2022 to 2023 season onwards this was extended to run throughout the year, to allow for surveillance of out-of-season trends.',
       })
       await app.hasTopicCard({
         name: 'Bar chart comparing RSV hospital admissions count by week',
-        description: 'Weekly admissions rates of patients admitted to hospital with RSV as a weekly time series.',
       })
       await app.hasTopicCard({
         name: 'Bar chart comparing weekly RSV ICU/HDU admissions count by week',
-        description: 'Weekly admission rates of patients admitted to ICU/HDU with RSV as a weekly time series.',
       })
     })
     await test.step('displays chart cards for "Testing"', async () => {
       await app.hasTopicCard({
         name: 'Line chart comparing Adenovirus test positivity count by week',
-        description:
-          'Weekly admissions rates of patients admitted to hospital with Adenovirus as a weekly time series.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing Adenovirus test positivity count by week broken down by age',
-        description: 'Age breakdown of people testing positive for Adenovirus per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing hMPV test positivity count by week',
-        description: 'Weekly admissions rates of patients admitted to hospital with hMPV as a weekly time series.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing hMPV test positivity count by week broken down by age',
-        description: 'Age breakdown of people testing positive for hMPV per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing Parainfluenza test positivity count by week',
-        description:
-          'Weekly admissions rates of patients admitted to hospital with Parainfluenza as a weekly time series.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing Parainfluenza test positivity count by week broken down by age',
-        description: 'Age breakdown of people testing positive for Parainfluenza per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing Rhinovirus test positivity count by week',
-        description:
-          'Weekly admissions rates of patients admitted to hospital with Rhinovirus as a weekly time series.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing Rhinovirus test positivity count by week broken down by age',
-        description: 'Age breakdown of people testing positive for Rhinovirus per 100,000 people.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing RSV test positivity count by week',
-        description: 'Weekly admissions rates of patients admitted to hospital with RSV as a weekly time series.',
       })
       await app.hasTopicCard({
         name: 'Line chart comparing RSV test positivity count by week broken down by age',
-        description: 'Age breakdown of people testing positive for Rhinovirus per 100,000 people.',
       })
     })
     await test.step('displays related links', async () => {

src/app/components/ui/ukhsa/Tabs/DropdownTab.spec.tsx

@@ -24,7 +24,7 @@ describe('DropdownTab Component', () => {
         chartIdentifier={chartIdentifier}
       />
     )
-    expect(screen.getByRole('tab')).toBeInTheDocument()
+    expect(screen.getByTestId('DropdownSelect')).toBeInTheDocument()
   })
 
   it('renders all dropdown options', () => {
@@ -48,7 +48,7 @@ describe('DropdownTab Component', () => {
       />
     )
 
-    const dropdown = screen.getByRole('tab') as HTMLSelectElement
+    const dropdown = screen.getByTestId('DropdownSelect') as HTMLSelectElement
     fireEvent.change(dropdown, { target: { value: 'table' } })
 
     expect(document.getElementById(`chart-${chartIdentifier}-content`)).toHaveAttribute('data-state', 'inactive')
@@ -63,7 +63,7 @@ describe('DropdownTab Component', () => {
       />
     )
 
-    fireEvent.change(screen.getByRole('tab'), { target: { value: 'download' } })
+    fireEvent.change(screen.getByTestId('DropdownSelect'), { target: { value: 'download' } })
 
     expect(document.getElementById(`chart-${chartIdentifier}-content`)).toHaveAttribute('data-state', 'inactive')
     expect(document.getElementById(`table-${chartIdentifier}-content`)).toHaveAttribute('data-state', 'inactive')

src/app/components/ui/ukhsa/Tabs/DropdownTab.tsx

@@ -50,7 +50,7 @@ const DropdownTab = ({ className, chartIdentifier }: DropdownProps) => {
       defaultValue={`#chart-${chartIdentifier}`}
       onChange={onChangeFunction}
       className={className}
-      role="tab"
+      data-testid="DropdownSelect"
     >
       {dropdownOptions.map(({ value, displayText }: DropdownOptionsProps, index) => (
         <option key={`option-${index}`} value={value}>

src/app/utils/cms.utils.tsx

@@ -120,37 +120,57 @@ export const renderCard = (
                     </ChartRowCardHeader>
                     <Tabs defaultValue="chart" className="govuk-!-margin-bottom-0">
                       <TabsList>
-                        <TabsTrigger asChild value="chart" className="hidden sm:block">
+                        <TabsTrigger
+                          asChild
+                          value="chart"
+                          className="hidden sm:block"
+                          aria-controls={`chart-${kebabCase(column.value.title)}-content`}
+                        >
                           <Link href={`#chart-${kebabCase(column.value.title)}`}>
                             <span>Chart</span>
                           </Link>
                         </TabsTrigger>
-                        <TabsTrigger asChild value="table" className="hidden sm:block">
+                        <TabsTrigger
+                          asChild
+                          value="table"
+                          className="hidden sm:block"
+                          aria-controls={`table-${kebabCase(column.value.title)}-content`}
+                        >
                           <Link href={`#table-${kebabCase(column.value.title)}`}>
                             <span className="govuk-visually-hidden">Tabular data</span>
                             <span aria-hidden>
                               Tabular <span className="hidden lg:inline">data</span>
                             </span>
                           </Link>
                         </TabsTrigger>
-                        <TabsTrigger asChild value="download" className="hidden sm:block">
+                        <TabsTrigger
+                          asChild
+                          value="download"
+                          className="hidden sm:block"
+                          aria-controls={`download-${kebabCase(column.value.title)}-content`}
+                        >
                           <Link href={`#download-${kebabCase(column.value.title)}`}>
                             <span>Download</span>
                           </Link>
                         </TabsTrigger>
-                        <TabsTrigger asChild value="about" className="hidden sm:block">
+                        <TabsTrigger
+                          asChild
+                          value="about"
+                          className="hidden sm:block"
+                          aria-controls={`about-${kebabCase(column.value.title)}-content`}
+                        >
                           <Link href={`#about-${kebabCase(column.value.title)}`}>
                             <span>About</span>
                           </Link>
                         </TabsTrigger>
 
                         <DropdownTab
+                          aria-label="Select for selecting chart content"
                           className="govuk-select relative mb-[-1px] block min-w-[7em] rounded-none border border-b-0 border-mid-grey py-0 sm:hidden"
                           chartIdentifier={kebabCase(column.value.title)}
                         />
                       </TabsList>
                       <TabsContent
-                        aria-hidden
                         value="chart"
                         className="min-h-[var(--ukhsa-chart-card-tab-min-height)] no-js:mb-7"
                         data-type="chart"
@@ -178,7 +198,6 @@ export const renderCard = (
                         </AreaSelectorLoader>
                       </TabsContent>
                       <TabsContent
-                        aria-hidden
                         value="table"
                         className="max-h-[var(--ukhsa-chart-card-table-scroll-height)] min-h-[var(--ukhsa-chart-card-tab-min-height)] overflow-y-auto no-js:mb-4"
                         id={`table-${kebabCase(column.value.title)}-content`}
@@ -192,7 +211,6 @@ export const renderCard = (
                         <Table data={column.value} size={size} />
                       </TabsContent>
                       <TabsContent
-                        aria-hidden
                         value="download"
                         className="min-h-[var(--ukhsa-chart-card-tab-min-height)]"
                         id={`download-${kebabCase(column.value.title)}-content`}
@@ -206,7 +224,6 @@ export const renderCard = (
                         <Download data={column.value} />
                       </TabsContent>
                       <TabsContent
-                        aria-hidden
                         value="about"
                         className="min-h-[var(--ukhsa-chart-card-tab-min-height)]"
                         id={`about-${kebabCase(column.value.title)}-content`}