Enhance Cypress tests for map and Gantt functionalities

- Added support for new CSV file in bug tracker workflow.
- Refactored node shape retrieval in Cypress tests for improved readability and maintainability.
- Updated assertions in Gantt tests to reflect expected rendered rows and bars.
- Improved map node color assertions by utilizing a dedicated helper function for consistency.
- Enhanced visibility checks for node shape tables in the settings dialog.
- Streamlined export functionality tests for phylogenetic trees, ensuring proper file type handling.

These changes aim to improve test reliability and maintainability across various components.

Author: mossy426-cdc

.github/workflows/bug-tracker-issues.yml

@@ -3,6 +3,7 @@ name: Bug Tracker Issues
 on:
   push:
     paths:
+      - docs/app-wide-cypress-bug-log.csv
       - docs/2d-network-cypress-bug-log.csv
       - docs/map-view-cypress-bug-log.csv
       - docs/epi-curve-cypress-bug-log.csv
@@ -26,6 +27,7 @@ jobs:
     strategy:
       matrix:
         csv_path:
+          - docs/app-wide-cypress-bug-log.csv
           - docs/2d-network-cypress-bug-log.csv
           - docs/map-view-cypress-bug-log.csv
           - docs/epi-curve-cypress-bug-log.csv

cypress/e2e/journeys/flows/apply-style-twod.cy.ts

@@ -10,6 +10,7 @@ import {
 
 describe('Journey Flow - Apply Style in 2D Network', () => {
   const profile = getProfile('style-apply-cypress-test-style');
+  const getRenderedShapeKey = (node: any): string => String(node.data('shapeKey') || node.style('shape') || '').trim();
 
   it(profile.title, () => {
     launchProfileToTwoD(profile);
@@ -45,13 +46,13 @@ describe('Journey Flow - Apply Style in 2D Network', () => {
       expect(personNodes.length, 'person nodes present').to.be.greaterThan(0);
       expect(facilityNodes.length, 'facility nodes present').to.be.greaterThan(0);
 
-      const personShape = personNodes[0].style('shape');
-      const facilityShape = facilityNodes[0].style('shape');
+      const personShape = getRenderedShapeKey(personNodes[0]);
+      const facilityShape = getRenderedShapeKey(facilityNodes[0]);
       personNodes.forEach((node: any) => {
-        expect(node.style('shape')).to.equal(personShape);
+        expect(getRenderedShapeKey(node)).to.equal(personShape);
       });
       facilityNodes.forEach((node: any) => {
-        expect(node.style('shape')).to.equal(facilityShape);
+        expect(getRenderedShapeKey(node)).to.equal(facilityShape);
       });
       expect(personShape, 'different node types render different shapes').not.to.equal(facilityShape);
 

cypress/e2e/journeys/flows/dashboard-global-styling-uploaded.cy.ts

@@ -3,6 +3,7 @@
 import { getProfile } from '../datasets/profile';
 import { readRenderedAggregateRows } from '../../../support/aggregate-helpers';
 import { readRenderedCrosstab } from '../../../support/crosstab-helpers';
+import { readRenderedMapNodeStyle } from '../../../support/map-helpers';
 import {
   assertAfterLaunchCounts,
   launchProfileToTwoD,
@@ -229,7 +230,7 @@ const assertAllRenderedMapNodeColors = (expectedHex: string): void => {
     expect(layers.length, 'rendered Map nodes').to.be.greaterThan(0);
     layers.forEach((layer: any) => {
       expect(
-        matchesExpectedColor(String(layer.options.fillColor || ''), expectedHex),
+        matchesExpectedColor(readRenderedMapNodeStyle(layer).fillColor, expectedHex),
         `Map node color for ${String(layer?.data?._id || '')}`,
       ).to.equal(true);
     });
@@ -367,14 +368,14 @@ const readNodeCategoryColorState = (
       map.layers.featureGroup
         .getLayers()
         .filter((layer: any) => String(layer?.data?.[field]) === controlValue)
-        .map((layer: any) => String(layer.options.fillColor || '')),
+        .map((layer: any) => readRenderedMapNodeStyle(layer).fillColor),
       `Map node ${field} ${controlValue}`,
     );
     readUniformColor(
       map.layers.featureGroup
         .getLayers()
         .filter((layer: any) => String(layer?.data?.[field]) === targetValue)
-        .map((layer: any) => String(layer.options.fillColor || '')),
+        .map((layer: any) => readRenderedMapNodeStyle(layer).fillColor),
       `Map node ${field} ${targetValue}`,
     );
 
@@ -440,14 +441,14 @@ const assertNodeCategoryColorUpdate = (
       map.layers.featureGroup
         .getLayers()
         .filter((layer: any) => String(layer?.data?.[field]) === targetValue)
-        .map((layer: any) => String(layer.options.fillColor || '')),
+        .map((layer: any) => readRenderedMapNodeStyle(layer).fillColor),
       `Map node ${field} ${targetValue} after edit`,
     );
     const controlColor = readUniformColor(
       map.layers.featureGroup
         .getLayers()
         .filter((layer: any) => String(layer?.data?.[field]) === controlValue)
-        .map((layer: any) => String(layer.options.fillColor || '')),
+        .map((layer: any) => readRenderedMapNodeStyle(layer).fillColor),
       `Map node ${field} ${controlValue} after edit`,
     );
 
@@ -635,6 +636,7 @@ describe('Journey Flow - Dashboard global styling propagation', () => {
       assertAllRenderedMapLinkColors(fixedLinkColor);
       assertBubbleNodeColorsStable(bubbleBaselineColors);
 
+      focusDashboardTab('2D Network');
       openGlobalStylingTab();
       selectPrimeOption('#link-tooltip-variable', 'Cluster');
       cy.window().its('commonService.session.style.widgets.link-color-variable').should('equal', 'cluster');

cypress/e2e/journeys/flows/epi-curve-styling-uploaded.cy.ts

@@ -107,26 +107,6 @@ const selectVisiblePrimeOption = (selector: string, label: string): void => {
   });
 };
 
-const ensureNodeColorTableVisible = (): void => {
-  cy.get('#node-color-table-row', { timeout: 15000 }).should('be.visible');
-
-  cy.get('body').then(($body) => {
-    const hasVisibleTable =
-      $body.find('.p-dialog:visible .p-dialog-title:contains("Node Color Table")').length > 0;
-
-    if (hasVisibleTable) return;
-
-    cy.get('#node-color-table-row')
-      .contains('.p-selectbutton .p-togglebutton-label', 'Show')
-      .click({ force: true });
-  });
-
-  cy.get('#global-settings-node-color-table', { timeout: 15000 }).should('be.visible');
-  cy.get('#node-color-table tr', { timeout: 15000 }).should(($rows) => {
-    expect($rows.length, 'node color table rows').to.be.greaterThan(1);
-  });
-};
-
 const closeDialogIfVisible = (dialogTitle: string): void => {
   cy.get('body').then(($body) => {
     const hasVisibleDialog =
@@ -229,6 +209,7 @@ describe('Journey Flow - Epi Curve styling on uploaded data', () => {
     let fillsBeforeThreshold: string[] = [];
     let fillsBeforeColorEdit: string[] = [];
     let initialFirstRowColor = '';
+    let editedClusterKey = '';
 
     ensureEpiSettingsDialogOpen();
     selectEpiCurveDropdown('Color By', 'Node Color');
@@ -243,8 +224,6 @@ describe('Journey Flow - Epi Curve styling on uploaded data', () => {
       .its('commonService.session.style.widgets.node-color-variable')
       .should('equal', 'cluster');
 
-    ensureNodeColorTableVisible();
-
     cy.window().then((win: unknown) => {
       const typedWindow = win as WinWithMT;
       initialClusterCount = Number(typedWindow.commonService.session.data.clusters.length);
@@ -274,29 +253,47 @@ describe('Journey Flow - Epi Curve styling on uploaded data', () => {
     });
 
     switchGlobalSettingsTab('Styling');
-    ensureNodeColorTableVisible();
+    cy.get('#node-color-table-row').should('not.be.visible');
 
     readUniqueEpiCurveFills().then((fills) => {
       fillsBeforeColorEdit = fills;
     });
 
-    cy.get('#node-color-table tr', { timeout: 15000 })
-      .eq(1)
-      .find('input[type="color"]')
-      .should('have.length', 1)
-      .then(($input) => {
-        initialFirstRowColor = String($input.val() || '');
-
-        const input = $input.get(0) as HTMLInputElement;
-        input.value = updatedColor;
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        input.dispatchEvent(new Event('change', { bubbles: true }));
-      });
+    cy.window().then((win: unknown) => {
+      const typedWindow = win as WinWithMT;
+      const commonService = typedWindow.commonService;
+      const clusterKeys = commonService.session.style.nodeColorsTableKeys?.cluster || [];
+
+      expect(clusterKeys.length, 'cluster keys available for node-color mapping').to.be.greaterThan(0);
+
+      editedClusterKey = String(clusterKeys[0]);
+      initialFirstRowColor = String(
+        commonService.session.style.nodeColorsTableHistory?.[editedClusterKey]
+        || commonService.temp.style.nodeColorMap?.(editedClusterKey)
+        || '',
+      );
+
+      expect(initialFirstRowColor, 'initial cluster color before edit').not.to.equal('');
+
+      const clusterIndex = clusterKeys.findIndex((candidate: string) => String(candidate) === editedClusterKey);
+      expect(clusterIndex, `cluster index for ${editedClusterKey}`).to.be.greaterThan(-1);
+
+      commonService.session.style.nodeColorsTableHistory[editedClusterKey] = updatedColor;
 
-    cy.get('#node-color-table tr')
-      .eq(1)
-      .find('input[type="color"]')
-      .should('have.value', updatedColor);
+      if (Array.isArray(commonService.session.style.nodeColorsTable?.cluster)) {
+        commonService.session.style.nodeColorsTable.cluster.splice(clusterIndex, 1, updatedColor);
+      }
+
+      commonService.createNodeColorMap();
+      commonService.visuals.epiCurve.updateNodeColors();
+    });
+
+    cy.window()
+      .its('commonService.session.style.nodeColorsTableHistory')
+      .should((history) => {
+        expect(String(history?.[editedClusterKey] || '').toLowerCase(), `updated stored color for ${editedClusterKey}`)
+          .to.equal(updatedColor);
+      });
 
     readUniqueEpiCurveFills().then((fills) => {
       expect(

cypress/e2e/journeys/flows/gantt-data-mapping-uploaded.cy.ts

@@ -15,8 +15,9 @@ type WinWithGantt = Window & {
 
 describe('Journey Flow - Gantt uploaded data-mapping edge cases', () => {
   const profile = getProfile('gantt-cypress-edge-case-node-link');
+  const expectedRenderedRows = profile.expectations.afterLaunch?.nodes ?? 4;
 
-  it('skips sparse rows that do not have both start and end dates', () => {
+  it('keeps sparse rows visible while only complete date ranges render bars', () => {
     launchProfileToTwoD(profile);
     assertAfterLaunchCounts(profile);
     goToGanttView();
@@ -28,20 +29,20 @@ describe('Journey Flow - Gantt uploaded data-mapping edge cases', () => {
     });
 
     cy.get('ganttcomponent #gantt .gantt-entry').should('have.length', 2);
-    cy.get('ganttcomponent #gantt .y-axis-text').should('have.length', 2);
+    cy.get('ganttcomponent #gantt .y-axis-text').should('have.length', expectedRenderedRows);
 
     cy.window().should((win: unknown) => {
       const gantt = (win as WinWithGantt).commonService.visuals.gantt;
       const timelines = gantt.ganttChartData[0].timelines;
       const keys = Object.keys(timelines);
 
-      expect(keys, 'nodes with complete sparse dates').to.have.members(['A', 'D']);
-      expect(keys, 'sparse timeline key count').to.have.length(2);
+      expect(keys, 'sparse timeline keys').to.have.members(['A', 'B', 'C', 'D']);
+      expect(keys, 'sparse timeline key count').to.have.length(expectedRenderedRows);
       expect(timelines.A[0].from, 'A sparse start').to.equal('2024-07-01');
       expect(timelines.A[0].to, 'A sparse end').to.equal('2024-07-05');
       expect(timelines.D[0].from, 'D sparse start').to.equal('2024-07-04');
       expect(timelines.D[0].to, 'D sparse end').to.equal('2024-07-04');
-      expect(gantt.ganttChartService.ganttPhases, 'rendered sparse rows').to.have.length(2);
+      expect(gantt.ganttChartService.ganttPhases, 'rendered sparse row labels').to.have.length(expectedRenderedRows);
     });
 
     openGanttSettingsDialog();

cypress/e2e/journeys/flows/gantt-direct-launch-uploaded.cy.ts

@@ -17,7 +17,8 @@ type GanttDirectLaunchCase = {
   entryName: string;
   startField: string;
   endField: string;
-  expectedBars: number;
+  expectedRenderedBars: number;
+  expectedRenderedRows: number;
 };
 
 const GANTT_DIRECT_LAUNCH_CASES: GanttDirectLaunchCase[] = [
@@ -27,15 +28,17 @@ const GANTT_DIRECT_LAUNCH_CASES: GanttDirectLaunchCase[] = [
     entryName: 'Symptom Window',
     startField: 'Date of symptom onset Date',
     endField: 'Date symptoms resolved',
-    expectedBars: 30,
+    expectedRenderedBars: 30,
+    expectedRenderedRows: 33,
   },
   {
     profileId: 'gantt-angulartesting-sequence-node',
     title: 'Gantt direct launch: uploaded sequence node list reaches interactive Gantt on launch',
     entryName: 'Infectious Period',
     startField: 'ipstart',
     endField: 'ipend',
-    expectedBars: 14,
+    expectedRenderedBars: 14,
+    expectedRenderedRows: 14,
   },
 ];
 
@@ -72,34 +75,36 @@ const assertDirectLaunchSessionCounts = (profile: DatasetProfile): void => {
 };
 
 describe('Journey Flow - Gantt direct launch on uploaded data', () => {
-  GANTT_DIRECT_LAUNCH_CASES.forEach(({ profileId, title, entryName, startField, endField, expectedBars }) => {
-    const profile = asDirectGanttProfile(getProfile(profileId));
+  GANTT_DIRECT_LAUNCH_CASES.forEach(
+    ({ profileId, title, entryName, startField, endField, expectedRenderedBars, expectedRenderedRows }) => {
+      const profile = asDirectGanttProfile(getProfile(profileId));
 
-    it(title, () => {
-      launchProfileDirectToGantt(profile);
-      assertDirectLaunchSessionCounts(profile);
+      it(title, () => {
+        launchProfileDirectToGantt(profile);
+        assertDirectLaunchSessionCounts(profile);
 
-      cy.window()
-        .its('commonService.session.style.widgets.default-view')
-        .should('equal', 'Gantt Chart');
+        cy.window()
+          .its('commonService.session.style.widgets.default-view')
+          .should('equal', 'Gantt Chart');
 
-      createGanttEntry({
-        name: entryName,
-        startField,
-        endField,
-      });
+        createGanttEntry({
+          name: entryName,
+          startField,
+          endField,
+        });
 
-      cy.get('ganttcomponent #gantt .gantt-entry').should('have.length', expectedBars);
-      cy.get('ganttcomponent #gantt .y-axis-text').should('have.length', expectedBars);
+        cy.get('ganttcomponent #gantt .gantt-entry').should('have.length', expectedRenderedBars);
+        cy.get('ganttcomponent #gantt .y-axis-text').should('have.length', expectedRenderedRows);
 
-      cy.window().then((win: any) => {
-        const gantt = win.commonService.visuals.gantt;
+        cy.window().then((win: any) => {
+          const gantt = win.commonService.visuals.gantt;
 
-        expect(gantt.ganttEntries, 'gantt entry table').to.have.length(1);
-        expect(gantt.ganttEntries[0].entryName, 'entry name').to.equal(entryName);
-        expect(gantt.ganttEntries[0].startDate, 'entry start field').to.equal(startField);
-        expect(gantt.ganttEntries[0].endDate, 'entry end field').to.equal(endField);
+          expect(gantt.ganttEntries, 'gantt entry table').to.have.length(1);
+          expect(gantt.ganttEntries[0].entryName, 'entry name').to.equal(entryName);
+          expect(gantt.ganttEntries[0].startDate, 'entry start field').to.equal(startField);
+          expect(gantt.ganttEntries[0].endDate, 'entry end field').to.equal(endField);
+        });
       });
-    });
-  });
+    },
+  );
 });