chore: Resolving upstream conflicts;

Merge remote-tracking branch 'origin/main' into rogeruiz/1277/section-table-improvements

Author: rogeruiz

client/e2e/activity-log.spec.ts

@@ -10,7 +10,11 @@ test.describe('Activity log', () => {
     await deleteAllConfigurations();
   });
 
-  test('Check empty state', async ({ activityLogPage, page }) => {
+  test('Check empty state', async ({
+    activityLogPage,
+    page,
+    makeAxeBuilder,
+  }) => {
     await activityLogPage.goto();
 
     await expect(page.getByLabel('Condition').getByRole('option')).toHaveText([
@@ -22,12 +26,14 @@ test.describe('Activity log', () => {
     await expect(
       page.getByRole('navigation', { name: 'Pagination' }).getByRole('button')
     ).toHaveCount(1);
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 
   test('Check that condition filters are sorted alphabetically by name', async ({
     activityLogPage,
     api,
     page,
+    makeAxeBuilder,
   }) => {
     const conditionOne = 'Coal Workers’ Pneumoconiosis (CWP)';
     const conditionTwo = 'COVID-19';
@@ -43,11 +49,13 @@ test.describe('Activity log', () => {
       conditionTwo,
       conditionThree,
     ]);
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 
   test('Check entries from configuration creation', async ({
     activityLogPage,
     api,
+    makeAxeBuilder,
   }) => {
     const conditionOne = 'COVID-19';
     const conditionTwo = 'Zika Virus Disease';
@@ -70,22 +78,26 @@ test.describe('Activity log', () => {
     await activityLogPage.selectConditionFromDropdown(conditionOne);
     const conditionOneOnlyRows = await activityLogPage.getTableRows();
     expect(conditionOneOnlyRows).toHaveLength(1);
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 
   test('Check individual custom code entries from CSV upload', async ({
     page,
     api,
     activityLogPage,
+    makeAxeBuilder,
   }) => {
     const condition = 'Lead in Blood';
     const config = await api.createConfiguration(condition);
 
     // Create 50 codes to upload
-    const systems = ['LOINC', 'ICD-10', 'SNOMED', 'RxNorm', 'CVX'];
+    const systems = ['loinc', 'icd10', 'snomed', 'rxnorm', 'cvx', 'other'];
+    const systemNames = ['LOINC', 'ICD-10', 'SNOMED', 'RxNorm', 'CVX', 'Other'];
     const customCodes = Array.from({ length: 50 }, (_, i) => ({
       code: `mc-${i + 1}`,
       name: `mock code ${i + 1}`,
-      system: systems[i % systems.length],
+      system_key: systems[i % systems.length],
+      system_display_name: systemNames[i % systems.length],
     }));
 
     await api.uploadCustomCodeCsv(config.id, customCodes);
@@ -97,6 +109,7 @@ test.describe('Activity log', () => {
     expect(expectedRow?.action).toContain(expectedAction);
 
     const modalButton = page.getByRole('button', { name: 'View all' });
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
     await expect(modalButton).toBeVisible();
     await expect(modalButton).toBeEnabled();
     await modalButton.click();
@@ -124,5 +137,6 @@ test.describe('Activity log', () => {
     await expect(
       page.getByRole('heading', { name: 'Activity log' })
     ).toBeVisible();
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 });

client/e2e/configuration.spec.ts

@@ -10,6 +10,23 @@ test.describe('Configuration detail flow', () => {
     await deleteAllConfigurations();
   });
 
+  test('Validate code set table appearance', async ({
+    page,
+    configurationsPage,
+    configurationPage,
+  }) => {
+    const condition = 'Anotia';
+    await configurationsPage.createConfiguration(condition);
+    await configurationPage.goToBuildTab();
+    await page.getByLabel('View TES code set information for Anotia').click();
+
+    await expect(page.getByRole('columnheader')).toHaveText([
+      'Code',
+      'Code system',
+      'Display name',
+    ]);
+  });
+
   test('Check code set status and individual grouper statuses', async ({
     page,
     configurationsPage,
@@ -272,6 +289,9 @@ test.describe('Configuration detail flow', () => {
     await test.step('Configure standard sections', async () => {
       await test.step('Select and check options', async () => {
         await page.getByRole('button', { name: 'Sections' }).click();
+
+        await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
         const admissionDiagnosisCheckboxText = 'Include Admission Diagnosis';
         await page
           .getByRole('checkbox', { name: admissionDiagnosisCheckboxText })
@@ -353,6 +373,8 @@ test.describe('Configuration detail flow', () => {
       await configurationPage.goToBuildTab();
       await configurationPage.deleteCodeSet(additionalCodeSetName);
 
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await page.getByRole('button', { name: 'Custom codes' }).click();
       await configurationPage.deleteCustomCode(customCodeName);
       await expect(page.getByText('Deleted code')).toBeVisible();
@@ -363,6 +385,9 @@ test.describe('Configuration detail flow', () => {
 
     await test.step('Delete custom section', async () => {
       await page.getByRole('button', { name: 'Sections' }).click();
+
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await page
         .getByRole('button', {
           name: `Delete custom section ${customSectionName}`,
@@ -402,7 +427,11 @@ test.describe('Configuration detail flow', () => {
 
     await test.step('Upload custom code CSV', async () => {
       await page.getByRole('button', { name: 'Custom codes' }).click();
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await page.getByRole('button', { name: 'Import from CSV' }).click();
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await expect(
         page.getByRole('heading', {
           name: 'Import from CSV',
@@ -419,6 +448,9 @@ test.describe('Configuration detail flow', () => {
       const deleteAllButton = page.getByRole('button', {
         name: 'Undo & delete codes',
       });
+
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await expect(saveAllButton).toBeVisible();
       await expect(deleteAllButton).toBeVisible();
 
@@ -438,6 +470,8 @@ test.describe('Configuration detail flow', () => {
       await expect(deleteButton).toBeVisible();
 
       await editButton.click();
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await expect(
         page.getByRole('heading', { name: 'Edit 12345', level: 2 })
       ).toBeVisible();
@@ -472,6 +506,8 @@ test.describe('Configuration detail flow', () => {
           level: 2,
         })
       ).toBeVisible();
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await page.getByRole('button', { name: 'Yes, save codes' }).click();
 
       const savedCodeTableRows = page.locator('table tbody tr');
@@ -483,6 +519,8 @@ test.describe('Configuration detail flow', () => {
 
     await test.step('Activate modified draft', async () => {
       await configurationPage.goToActivateTab();
+      await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
       await expect(page.getByText('Switch to version 2')).toBeVisible();
       await expect(page.getByText('Turn off configuration')).toBeVisible();
 

client/e2e/configurations.spec.ts

@@ -9,7 +9,7 @@ test.describe('Configurations screen', () => {
 
   test.afterEach(async () => await deleteAllConfigurations());
 
-  test('Check empty page state', async ({ page }) => {
+  test('Check empty page state', async ({ page, makeAxeBuilder }) => {
     await expect(
       page.getByRole('heading', {
         name: 'Configurations',
@@ -25,12 +25,14 @@ test.describe('Configurations screen', () => {
     await expect(page.getByRole('cell')).toHaveText(
       'No configurations available'
     );
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 
   test('Check table with configurations', async ({
     page,
     api,
     configurationsPage,
+    makeAxeBuilder,
   }) => {
     const config = await api.createConfiguration('Anotia');
 
@@ -46,20 +48,27 @@ test.describe('Configurations screen', () => {
     await configurationsPage.search('ano');
     await expect(conditionCell).toHaveText(config.name);
 
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
     await configurationsPage.search('covid');
     await expect(conditionCell).toHaveText('No configurations available');
 
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
+
     await configurationsPage.clearSearch();
 
     await conditionCell.click();
     await expect(
       page.getByRole('heading', { name: config.name, level: 1 })
     ).toBeVisible();
+
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 
   test('Navigates to the active config when one exists', async ({
     api,
     page,
+    makeAxeBuilder,
   }) => {
     // create and activate config
     const condition = 'Anotia';
@@ -75,11 +84,14 @@ test.describe('Configurations screen', () => {
 
     await expect(page.getByText('Viewing: Version 1')).toBeVisible();
     await expect(page.getByRole('link', { name: 'Go to draft' })).toBeVisible();
+
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 
   test('Navigates to the draft config when only a draft and inactive configs exist', async ({
     api,
     page,
+    makeAxeBuilder,
   }) => {
     // create and activate config
     const condition = 'Anotia';
@@ -96,11 +108,14 @@ test.describe('Configurations screen', () => {
     await page.getByText(condition).click();
 
     await expect(page.getByText('Editing: Version 2')).toBeVisible();
+
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 
   test('Navigates to the latest inactive config when only inactive configs exist', async ({
     api,
     page,
+    makeAxeBuilder,
   }) => {
     // create and activate config
     const condition = 'Anotia';
@@ -117,5 +132,7 @@ test.describe('Configurations screen', () => {
     await page.getByText(condition).click();
 
     await expect(page.getByText('Viewing: Version 2')).toBeVisible();
+
+    await expect(makeAxeBuilder).toHaveNoAxeViolations();
   });
 });

client/e2e/fixtures/api.ts

@@ -10,7 +10,12 @@ type Condition = {
   display_name: string;
 };
 
-type CustomCode = { code: string; system: string; name: string };
+type CustomCode = {
+  code: string;
+  system_key: string;
+  system_display_name: string;
+  name: string;
+};
 
 export class Api {
   constructor(private request: APIRequestContext) {}

client/e2e/fixtures/index.ts

@@ -23,7 +23,9 @@ type Fixtures = {
 const extendedTest = baseTest.extend<Fixtures>({
   makeAxeBuilder: async ({ page }, use) => {
     const makeAxeBuilder = () =>
-      new AxeBuilder({ page }).withTags(['wcag21aa']);
+      new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag21aa'])
+        .exclude('#refinement-diff'); // react-diff-viewer has known a11y issues we can't fix ourselves
     await use(makeAxeBuilder);
   },
   api: async ({ request }, use) => {
@@ -47,17 +49,16 @@ const extendedExpect = baseExpect.extend({
   async toHaveNoAxeViolations(makeAxeBuilder: () => AxeBuilder) {
     const assertionName = 'toHaveNoAxeViolations';
     const axe = makeAxeBuilder();
-    let pass: boolean;
+    let pass = false;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let results: any;
+    let violations: any[] = [];
     try {
-      results = await axe.analyze();
+      const results = await axe.analyze();
+      violations = results.violations ?? [];
+      pass = violations.length === 0;
     } catch {
       pass = false;
     }
-    const violations = results.violations ?? [];
-
-    pass = violations.length === 0;
 
     const message = pass
       ? () =>

client/e2e/pages/ConfigurationPage.ts

@@ -50,7 +50,8 @@ export class ConfigurationPage {
     await this.page
       .getByRole('listitem')
       .filter({ hasText: conditionName })
-      .click();
+      .hover();
+    await this.page.getByLabel(`Add ${conditionName}`).click();
     await this.page.getByRole('button', { name: 'Close drawer' }).click();
   }