From 2325cff96ee79b61fff7f184a81042c30087afcb Mon Sep 17 00:00:00 2001 From: martinkrulltott Date: Fri, 29 Dec 2023 11:17:24 +0000 Subject: [PATCH] test: refactor legend set to a single test case and add a draft for TE testing --- cypress/integration/legendSet.cy.js | 316 +++++++++++++++--- .../Visualization/useAnalyticsData.js | 2 +- 2 files changed, 265 insertions(+), 53 deletions(-) diff --git a/cypress/integration/legendSet.cy.js b/cypress/integration/legendSet.cy.js index 97c6cd4b4..101b21225 100644 --- a/cypress/integration/legendSet.cy.js +++ b/cypress/integration/legendSet.cy.js @@ -9,6 +9,7 @@ import { openDimension, openProgramDimensionsSidebar, selectEventWithProgram, + selectTrackedEntityWithTypeAndProgramDimensions, } from '../helpers/dimensions.js' import { deleteVisualization, saveVisualization } from '../helpers/fileMenu.js' import { @@ -44,39 +45,10 @@ const event = E2E_PROGRAM const dimensionName = TEST_DIM_LEGEND_SET const periodLabel = event[DIMENSION_ID_EVENT_DATE] -// TODO: refactor out sequential tests -// TODO: duplicate and adapt to TE - -/* This files constains sequential tests, which means that some test steps - * depend on a previous step. With test isolation switched on (the default setting) - * each step (`it` block) will start off in a fresh window, and that breaks this kind - * of test. So `testIsolation` was set to false here. */ -describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { +describe('Options - Legend', () => { const defaultBackgroundColor = 'rgb(255, 255, 255)' const defaultTextColor = 'rgb(33, 41, 52)' - const TEST_LEGEND_AGE = { - name: 'Age 10y interval', - cells: [ - { value: 10, color: 'rgb(255, 255, 229)' }, - { value: 56, color: 'rgb(120, 198, 121)' }, - ], - } - - const TEST_LEGEND_E2E = { - name: 'E2E legend', - cells: { - positive: [ - { value: 10, color: 'rgb(209, 229, 240)' }, - { value: 56, color: 'rgb(103, 169, 207)' }, - ], - negative: [ - { value: -10, color: 'rgb(253, 219, 199)' }, - { value: -56, color: 'rgb(239, 138, 98)' }, - ], - }, - } - const assertCellsHaveDefaultColors = (selector) => cy .getBySel('table-body') @@ -93,7 +65,30 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { .should('have.css', 'color', defaultTextColor) }) - it('no legend is applied by default', () => { + it(['>=39'], 'apples legend correctly (event)', () => { + const TEST_LEGEND_AGE = { + name: 'Age 10y interval', + cells: [ + { value: 10, color: 'rgb(255, 255, 229)' }, + { value: 56, color: 'rgb(120, 198, 121)' }, + ], + } + + const TEST_LEGEND_E2E = { + name: 'E2E legend', + cells: { + positive: [ + { value: 10, color: 'rgb(209, 229, 240)' }, + { value: 56, color: 'rgb(103, 169, 207)' }, + ], + negative: [ + { value: -10, color: 'rgb(253, 219, 199)' }, + { value: -56, color: 'rgb(239, 138, 98)' }, + ], + }, + } + + // no legend is applied by default goToStartPage() selectEventWithProgram(E2E_PROGRAM) @@ -121,8 +116,8 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { // all cells have default background and text color assertCellsHaveDefaultColors('tr td') - }) - it('background color legend is applied (per data item)', () => { + + // background color legend is applied (per data item) openLegendOptionsModal() cy.getBySel('options-modal-content') @@ -151,8 +146,8 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { // unaffected cells (date column) have default background and text color assertCellsHaveDefaultColors('tr td:nth-child(1)') - }) - it('text color legend is applied (per data item)', () => { + + // text color legend is applied (per data item) openLegendOptionsModal() cy.getBySel('options-modal-content').should('contain', 'Legend style') @@ -183,11 +178,11 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { // unaffected cells (date column) have default background and text color assertCellsHaveDefaultColors('tr td:nth-child(1)') - }) - it('legend key is hidden by default', () => { + + // legend key is hidden by default expectLegendKeyToBeHidden() - }) - it('legend key displays correctly when enabled', () => { + + // legend key displays correctly when enabled openLegendOptionsModal() expectLegendDisplayStrategyToBeByDataItem() @@ -203,8 +198,8 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { expectLegendKeyToBeVisible() expectLegendKeyToMatchLegendSets([TEST_LEGEND_AGE.name]) - }) - it('text color legend is applied (single legend)', () => { + + // text color legend is applied (single legend) openLegendOptionsModal() cy.getBySel('options-modal-content').should('contain', 'Legend style') @@ -249,8 +244,8 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { // unaffected cells (date column) have default background and text color assertCellsHaveDefaultColors('tr td:nth-child(1)') - }) - it('background color legend is applied (single legend)', () => { + + // background color legend is applied (single legend) openLegendOptionsModal() cy.getBySel('options-modal-content').should('contain', 'Legend style') @@ -281,8 +276,8 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { // unaffected cells (date column) have default background and text color assertCellsHaveDefaultColors('tr td:nth-child(1)') - }) - it('options can be saved and loaded', () => { + + // options can be saved and loaded const AO_NAME = `TEST ${new Date().toLocaleString()}` saveVisualization(AO_NAME) expectAOTitleToContain(AO_NAME) @@ -310,8 +305,8 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { cy.getBySel('fixed-legend-set-select-content').contains( TEST_LEGEND_E2E.name ) - }) - it('legend is applied to negative values (per data item)', () => { + + // legend is applied to negative values (per data item) cy.getBySel('options-modal-content') .contains('Use pre-defined legend per data item') .click() @@ -339,16 +334,16 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { // unaffected cells (date column) have default background and text color assertCellsHaveDefaultColors('tr td:nth-child(1)') - }) - it('legend key displays correctly when two items are in use', () => { + + // legend key displays correctly when two items are in use expectLegendKeyToBeVisible() expectLegendKeyToMatchLegendSets([ TEST_LEGEND_AGE.name, TEST_LEGEND_E2E.name, ]) - }) - it('empty values do not display a legend color', () => { + + // empty values do not display a legend color const currentYear = getCurrentYearStr() unselectAllPeriods({ @@ -383,8 +378,225 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => { .invoke('text') .invoke('trim') .should('not.equal', '') + + // saved AO can be deleted + deleteVisualization() + + expectRouteToBeEmpty() }) - it('saved AO can be deleted', () => { + + // TODO: remove "skip"!! + // currently doesn't work because of a backend issue with returning metadata for "pid.sid.did" (only returns "did" so no legend set is found for the dimension) + it.skip(['>=41'], 'apples legend correctly (TE)', () => { + const TEST_LEGEND_AGE = { + name: 'Age 10y interval', + cells: [{ value: 46, color: 'rgb(173, 221, 142)' }], + } + + const TEST_LEGEND_E2E = { + name: 'E2E legend', + cells: [{ value: 46, color: 'rgb(103, 169, 207)' }], + } + + // no legend is applied by default + goToStartPage() + + selectTrackedEntityWithTypeAndProgramDimensions({ + typeName: 'Person', + programName: E2E_PROGRAM.programName, + dimensions: [dimensionName], + }) + + // add condition to filter out empty values + cy.getBySelLike('layout-chip').contains(dimensionName).click() + cy.getBySel('button-add-condition').click() + cy.contains('Choose a condition type').click() + cy.contains('greater than (>)').click() + cy.getBySel('conditions-modal-content') + .find('input[value=""]') + .type('1') + cy.getBySel('conditions-modal').contains('Update').click() + + expectTableToBeVisible() + + // all cells have default background and text color + assertCellsHaveDefaultColors('tr td') + + // background color legend is applied (per data item) + openLegendOptionsModal() + + cy.getBySel('options-modal-content') + .contains('Use a legend for table cell colors') + .click() + + cy.getBySel('options-modal-content').should('contain', 'Legend style') + + expectLegendDisplayStrategyToBeByDataItem() + + expectLegendDisplayStyleToBeFill() + + clickOptionsModalUpdateButton() + + expectTableToBeVisible() + + // affected cells have default text color and custom background color + TEST_LEGEND_AGE.cells.forEach((cell) => + cy + .getBySel('table-body') + .contains(cell.value) + .should('have.css', 'color', defaultTextColor) + .closest('td') + .should('have.css', 'background-color', cell.color) + ) + + // text color legend is applied (per data item) + openLegendOptionsModal() + + cy.getBySel('options-modal-content').should('contain', 'Legend style') + + expectLegendDisplayStrategyToBeByDataItem() + + expectLegendDisplayStyleToBeFill() + + cy.getBySel('options-modal-content') + .contains('Legend changes text color') + .click() + + expectLegendDisplayStyleToBeText() + + clickOptionsModalUpdateButton() + + expectTableToBeVisible() + + // affected cells have custom text color and default background color + TEST_LEGEND_AGE.cells.forEach((cell) => + cy + .getBySel('table-body') + .contains(cell.value) + .should('have.css', 'color', cell.color) + .closest('td') + .should('have.css', 'background-color', defaultBackgroundColor) + ) + + // legend key is hidden by default + expectLegendKeyToBeHidden() + + // legend key displays correctly when enabled + openLegendOptionsModal() + + expectLegendDisplayStrategyToBeByDataItem() + + cy.getBySel('options-modal-content').contains('Show legend key').click() + + expectLegendKeyOptionToBeEnabled() + + clickOptionsModalUpdateButton() + + expectTableToBeVisible() + + expectLegendKeyToBeVisible() + + expectLegendKeyToMatchLegendSets([TEST_LEGEND_AGE.name]) + + // text color legend is applied (single legend) + openLegendOptionsModal() + + cy.getBySel('options-modal-content').should('contain', 'Legend style') + + expectLegendDisplayStrategyToBeByDataItem() + + expectLegendDisplayStyleToBeText() + + cy.getBySel('options-modal-content') + .contains('Choose a single legend for the entire visualization') + .click() + + cy.getBySel('options-modal-content') + .contains('Select from legends') + .click() + + cy.getBySel('fixed-legend-set-option') + .contains(TEST_LEGEND_E2E.name) + .click() + + cy.getBySel('options-modal-content') + .contains('Legend changes text color') + .click() + + expectLegendDisplayStrategyToBeFixed() + + expectLegendDisplayStyleToBeText() + + clickOptionsModalUpdateButton() + + expectTableToBeVisible() + + // affected cells have fixed text color and default background color + TEST_LEGEND_E2E.cells.forEach((cell) => + cy + .getBySel('table-body') + .contains(cell.value) + .should('have.css', 'color', cell.color) + .closest('td') + .should('have.css', 'background-color', defaultBackgroundColor) + ) + + // background color legend is applied (single legend) + openLegendOptionsModal() + + cy.getBySel('options-modal-content').should('contain', 'Legend style') + + expectLegendDisplayStrategyToBeFixed() + + expectLegendDisplayStyleToBeText() + + cy.getBySel('options-modal-content') + .contains('Legend changes background color') + .click() + + expectLegendDisplayStyleToBeFill() + + clickOptionsModalUpdateButton() + + expectTableToBeVisible() + + // affected cells have default text color and fixed background color + TEST_LEGEND_E2E.cells.forEach((cell) => + cy + .getBySel('table-body') + .contains(cell.value) + .should('have.css', 'color', defaultTextColor) + .closest('td') + .should('have.css', 'background-color', cell.color) + ) + + // options can be saved and loaded + const AO_NAME = `TEST ${new Date().toLocaleString()}` + saveVisualization(AO_NAME) + expectAOTitleToContain(AO_NAME) + expectTableToBeVisible() + + // affected cells have default text color and fixed background color + TEST_LEGEND_E2E.cells.forEach((cell) => + cy + .getBySel('table-body') + .contains(cell.value) + .should('have.css', 'color', defaultTextColor) + .closest('td') + .should('have.css', 'background-color', cell.color) + ) + + openLegendOptionsModal() + + expectLegendDisplayStrategyToBeFixed() + + expectLegendDisplayStyleToBeFill() + + cy.getBySel('fixed-legend-set-select-content').contains( + TEST_LEGEND_E2E.name + ) + + // saved AO can be deleted deleteVisualization() expectRouteToBeEmpty() diff --git a/src/components/Visualization/useAnalyticsData.js b/src/components/Visualization/useAnalyticsData.js index 7814e8e29..1ce7bc354 100644 --- a/src/components/Visualization/useAnalyticsData.js +++ b/src/components/Visualization/useAnalyticsData.js @@ -401,7 +401,7 @@ const useAnalyticsData = ({ if ( visualization.legend?.strategy === LEGEND_DISPLAY_STRATEGY_FIXED && - visualization.legend?.set?.id + visualization.legend.set?.id ) { legendSetIds.push(visualization.legend.set.id) } else if (