test: enhance tests, options and sorting

cypress/elements/pivotTable.js

@@ -1,4 +1,5 @@
 const valueCellEl = 'visualization-value-cell'
+const headerCellEl = 'visualization-column-header'
 
 export const clickTableValueCell = (index) =>
     cy.getBySel(valueCellEl).eq(index).click()
@@ -8,3 +9,6 @@ export const expectTableValueCellsToHaveLength = (length) =>
 
 export const expectTableValueCellToContainValue = (index, value) =>
     cy.getBySel(valueCellEl).eq(index).contains(value)
+
+export const clickTableHeaderCell = (name) =>
+    cy.getBySel(headerCellEl).contains(name).click()

cypress/integration/options/cumulativeValues.cy.js

@@ -14,14 +14,22 @@ import {
     typeInNumberField,
 } from '../../elements/calculationsModal.js'
 import { checkCheckbox, uncheckCheckbox } from '../../elements/common.js'
-import { clickDimensionModalUpdateButton } from '../../elements/dimensionModal/index.js'
+import {
+    clickDimensionModalHideButton,
+    clickDimensionModalUpdateButton,
+    selectDataElements,
+    selectFixedPeriods,
+    unselectAllItemsByButton,
+} from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
 import { clickContextMenuMove, openContextMenu } from '../../elements/layout.js'
 import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     OPTIONS_TAB_DATA,
+    OPTIONS_TAB_LEGEND,
     clickOptionsModalHideButton,
     clickOptionsModalUpdateButton,
+    clickOptionsTab,
 } from '../../elements/optionsModal/index.js'
 import {
     colTotalsOptionEl,
@@ -35,9 +43,13 @@ import {
     expectRowsTotalsToBeEnabled,
     expectRowsSubTotalsToBeEnabled,
 } from '../../elements/optionsModal/totals.js'
-import { expectTableValueCellToContainValue } from '../../elements/pivotTable.js'
+import {
+    expectTableValueCellToContainValue,
+    clickTableHeaderCell,
+} from '../../elements/pivotTable.js'
 import { goToStartPage } from '../../elements/startScreen.js'
 import { changeVisType } from '../../elements/visualizationTypeSelector.js'
+import { TEST_DATA_ELEMENTS } from '../../utils/data.js'
 
 const cumulativeValuesOptionEl = 'option-cumulative-values'
 
@@ -46,29 +58,62 @@ describe('Options - Cumulative values', () => {
         beforeEach(() => {
             goToStartPage()
             changeVisType(visTypeDisplayNames[VIS_TYPE_PIVOT_TABLE])
-            // TODO make a dimensions selection
         })
 
-        it('disables/enables Totals and numberType options when cumulativeValues is checked/unchecked', () => {
+        it('disables/enables Totals, Number type and Legend options when cumulativeValues is checked/unchecked', () => {
             openOptionsModal(OPTIONS_TAB_DATA)
             checkCheckbox(cumulativeValuesOptionEl)
 
+            // Totals
             expectColumnsTotalsToBeDisabled()
             expectColumnsSubTotalsToBeDisabled()
             expectRowsTotalsToBeDisabled()
             expectRowsSubTotalsToBeDisabled()
 
+            // Number type
+            cy.getBySel('option-number-type-select')
+                .should('contain', 'Not supported when using cumulative values')
+                .find('[data-test="dhis2-uicore-select-input"]')
+                .should('have.class', 'disabled')
+
+            // Legend
+            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            cy.getBySel('option-legend')
+                .should('contain', 'Not supported when using cumulative values')
+                .find('[type="checkbox"]')
+                .should('be.disabled')
+
+            clickOptionsTab(OPTIONS_TAB_DATA)
             uncheckCheckbox(cumulativeValuesOptionEl)
 
+            // Totals
             expectColumnsTotalsToBeEnabled()
             expectColumnsSubTotalsToBeEnabled()
             expectRowsTotalsToBeEnabled()
             expectRowsSubTotalsToBeEnabled()
 
+            // Number type
+            cy.getBySel('option-number-type-select')
+                .should(
+                    'not.contain',
+                    'Not supported when using cumulative values'
+                )
+                .find('[data-test="dhis2-uicore-select-input"]')
+                .should('not.have.class', 'disabled')
+
+            // Legend
+            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            cy.getBySel('option-legend')
+                .should(
+                    'not.contain',
+                    'Not supported when using cumulative values'
+                )
+                .find('[type="checkbox"]')
+                .should('not.be.disabled')
+
             clickOptionsModalHideButton()
         })
 
-        // XXX this might need to change because currently the disabled options are still applied
         it('disables/enables a total option preserving its state', () => {
             openOptionsModal(OPTIONS_TAB_DATA)
             checkCheckbox(colTotalsOptionEl)
@@ -90,6 +135,11 @@ describe('Options - Cumulative values', () => {
     })
 
     describe('Applying cumulativeValues: Pivot table', () => {
+        beforeEach(() => {
+            goToStartPage()
+            changeVisType(visTypeDisplayNames[VIS_TYPE_PIVOT_TABLE])
+        })
+
         it('correctly shows the cumulative values', () => {
             openContextMenu(DIMENSION_ID_DATA)
             clickContextMenuMove(DIMENSION_ID_DATA, AXIS_ID_ROWS)
@@ -101,7 +151,7 @@ describe('Options - Cumulative values', () => {
             clickNewCalculationButton()
             selectOperatorFromListByDoubleClick('Number')
             typeInNumberField(1, 1)
-            inputCalculationLabel('test data for cumulativeValues')
+            inputCalculationLabel('test data for cumulativeValues sorting')
             clickSaveButton()
 
             clickDimensionModalUpdateButton()
@@ -114,5 +164,54 @@ describe('Options - Cumulative values', () => {
                 expectTableValueCellToContainValue(i, i + 1)
             )
         })
+
+        it('correctly sort a column with cumulative values', () => {
+            openContextMenu(DIMENSION_ID_DATA)
+            clickContextMenuMove(DIMENSION_ID_DATA, AXIS_ID_ROWS)
+            openContextMenu(DIMENSION_ID_PERIOD)
+            clickContextMenuMove(DIMENSION_ID_PERIOD, AXIS_ID_COLUMNS)
+
+            openDimension(DIMENSION_ID_PERIOD)
+            unselectAllItemsByButton()
+            selectFixedPeriods(
+                ['October 2023', 'November 2023', 'December 2023'],
+                'Monthly'
+            )
+            clickDimensionModalHideButton()
+
+            // create a calculation to facilitate testing the cumulative values
+            openDimension(DIMENSION_ID_DATA)
+            clickNewCalculationButton()
+            selectOperatorFromListByDoubleClick('Number')
+            typeInNumberField(1, 6000)
+            inputCalculationLabel('test data for sorting cumulative values')
+            clickSaveButton()
+
+            selectDataElements([TEST_DATA_ELEMENTS[4].name])
+
+            clickDimensionModalUpdateButton()
+
+            // sort before cumulative
+            expectTableValueCellToContainValue(2, '6 000')
+            expectTableValueCellToContainValue(5, '5 266')
+
+            clickTableHeaderCell('December 2023')
+
+            expectTableValueCellToContainValue(2, '5 266')
+            expectTableValueCellToContainValue(5, '6 000')
+
+            // sort after cumulative
+            openOptionsModal(OPTIONS_TAB_DATA)
+            checkCheckbox(cumulativeValuesOptionEl)
+            clickOptionsModalUpdateButton()
+
+            expectTableValueCellToContainValue(2, '18 000')
+            expectTableValueCellToContainValue(5, '18 488')
+
+            clickTableHeaderCell('December 2023')
+
+            expectTableValueCellToContainValue(2, '18 000')
+            expectTableValueCellToContainValue(5, '18 488')
+        })
     })
 })

src/components/VisualizationOptions/Options/Legend.js

@@ -74,7 +74,7 @@ const Legend = ({
     }
 
     return (
-        <div className={tabSectionOption.className}>
+        <div className={tabSectionOption.className} data-test="option-legend">
             <Checkbox
                 checked={legendEnabled}
                 disabled={disabled}

src/components/VisualizationOptions/Options/NumberType.js

@@ -6,6 +6,7 @@ const NumberType = () => (
     <SelectBaseOption
         label={i18n.t('Number type')}
         helpText={i18n.t('Display the value of percentages of the total')}
+        dataTest={'option-number-type'}
         option={{
             name: 'numberType',
             items: [