fix: limit max value shifts to min value fields in PT (DHIS2-10235) (#…

…2756)

.github/pull_request_template.md

@@ -18,6 +18,9 @@ _text_
 
 ### TODO
 
+-   [ ] Cypress tests
+-   [ ] Update docs
+-   [ ] Manual testing
 -   [ ] _task_
 
 ---

cypress/elements/dimensionModal/index.js

@@ -76,6 +76,7 @@ export const expectSourceToNotBeLoading = () =>
         .findBySelLike(transferLoadingEl)
         .should('not.exist')
 
+// FIXME: unused, remove?
 export const expectSourceToBeLoading = () =>
     cy
         .getBySelLike(transferLeftContainerEl)

cypress/elements/optionsModal/index.js

@@ -9,6 +9,7 @@ export const OPTIONS_TAB_AXES = 'Axes'
 export const OPTIONS_TAB_OUTLIERS = 'Outliers'
 export const OPTIONS_TAB_SERIES = 'Series'
 export const OPTIONS_TAB_LEGEND = 'Legend'
+export const OPTIONS_TAB_LIMIT_VALUES = 'Limit values'
 
 export const clickOptionsTab = (name) =>
     cy.getBySel(tabBarEl).contains(name).click()
@@ -85,3 +86,14 @@ export {
     expectLegendKeyToBeVisible,
     expectLegedKeyItemAmountToBe,
 } from './legend.js'
+
+export {
+    setMinValue,
+    setMaxValue,
+    changeMinOperator,
+    changeMaxOperator,
+    expectMinValueToBeValue,
+    expectMaxValueToBeValue,
+    expectMinOperatorToBeOption,
+    expectMaxOperatorToBeOption,
+} from './limitValues.js'

cypress/elements/optionsModal/limitValues.js

@@ -0,0 +1,34 @@
+import { typeInput } from '../common.js'
+
+const minValueInput = 'measure-critiera-min-value'
+const maxValueInput = 'measure-critiera-max-value'
+const minOperatorSelect = 'measure-critiera-min-operator'
+const minOperatorSelectOption = 'measure-critiera-min-operator-option'
+const maxOperatorSelect = 'measure-critiera-max-operator'
+const maxOperatorSelectOption = 'measure-critiera-max-operator-option'
+
+export const setMinValue = (text) => typeInput(minValueInput, text)
+
+export const setMaxValue = (text) => typeInput(maxValueInput, text)
+
+export const changeMinOperator = (optionName) => {
+    cy.getBySel(minOperatorSelect).click()
+    cy.getBySelLike(minOperatorSelectOption).contains(optionName).click()
+}
+
+export const changeMaxOperator = (optionName) => {
+    cy.getBySel(maxOperatorSelect).click()
+    cy.getBySelLike(maxOperatorSelectOption).contains(optionName).click()
+}
+
+export const expectMinValueToBeValue = (value) =>
+    cy.getBySel(minValueInput).find('input').should('have.value', value)
+
+export const expectMaxValueToBeValue = (value) =>
+    cy.getBySel(maxValueInput).find('input').should('have.value', value)
+
+export const expectMinOperatorToBeOption = (optionName) =>
+    cy.getBySel(minOperatorSelect).containsExact(optionName)
+
+export const expectMaxOperatorToBeOption = (optionName) =>
+    cy.getBySel(maxOperatorSelect).containsExact(optionName)

cypress/integration/options/limitValues.cy.js

@@ -0,0 +1,260 @@
+import {
+    DIMENSION_ID_DATA,
+    DIMENSION_ID_PERIOD,
+    VIS_TYPE_PIVOT_TABLE,
+    visTypeDisplayNames,
+} from '@dhis2/analytics'
+import { expectVisualizationToBeVisible } from '../../elements/chart.js'
+import { expectAppToNotBeLoading } from '../../elements/common.js'
+import {
+    selectIndicators,
+    clickDimensionModalUpdateButton,
+    unselectAllItemsByButton,
+    selectFixedPeriods,
+} from '../../elements/dimensionModal/index.js'
+import { openDimension } from '../../elements/dimensionsPanel.js'
+import {
+    createNewAO,
+    deleteAO,
+    saveNewAO,
+} from '../../elements/fileMenu/index.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
+import {
+    OPTIONS_TAB_LIMIT_VALUES,
+    changeMaxOperator,
+    changeMinOperator,
+    clickOptionsModalHideButton,
+    clickOptionsModalUpdateButton,
+    expectMaxOperatorToBeOption,
+    expectMaxValueToBeValue,
+    expectMinOperatorToBeOption,
+    expectMinValueToBeValue,
+    setMaxValue,
+    setMinValue,
+} from '../../elements/optionsModal/index.js'
+import {
+    expectStartScreenToBeVisible,
+    goToStartPage,
+} from '../../elements/startScreen.js'
+import { changeVisType } from '../../elements/visualizationTypeSelector.js'
+
+const TEST_INDICATOR = 'ANC visits total'
+const currentYear = new Date().getFullYear().toString()
+const expectTableValueToBe = (value, position) =>
+    cy
+        .getBySel('visualization-container')
+        .find('tbody')
+        .find('tr')
+        .eq(position)
+        .find('td')
+        .invoke('text')
+        .invoke('trim')
+        .should('equal', value)
+
+describe('limit values', () => {
+    beforeEach(() => {
+        goToStartPage()
+        createNewAO()
+        changeVisType(visTypeDisplayNames[VIS_TYPE_PIVOT_TABLE])
+        openDimension(DIMENSION_ID_DATA)
+        selectIndicators([TEST_INDICATOR])
+        clickDimensionModalUpdateButton()
+        openDimension(DIMENSION_ID_PERIOD)
+        unselectAllItemsByButton()
+        selectFixedPeriods(
+            [
+                `January ${currentYear}`,
+                `February ${currentYear}`,
+                `March ${currentYear}`,
+                `April ${currentYear}`,
+                `May ${currentYear}`,
+            ],
+            'Monthly'
+        )
+        clickDimensionModalUpdateButton()
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+
+        const expectedValues = [
+            '49 231',
+            '49 605',
+            '49 500',
+            '55 385',
+            '68 886',
+        ]
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('>')
+        expectMaxOperatorToBeOption('<')
+        expectMinValueToBeValue('')
+        expectMaxValueToBeValue('')
+    })
+    it('min and max value display correctly', () => {
+        // set limits
+        changeMinOperator('>=')
+        changeMaxOperator('<=')
+        setMinValue('49500')
+        setMaxValue('55385')
+        clickOptionsModalUpdateButton()
+
+        // verify limits are applied
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        const expectedValues = ['', '49 605', '49 500', '55 385', '']
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('>=')
+        expectMaxOperatorToBeOption('<=')
+        expectMinValueToBeValue('49500')
+        expectMaxValueToBeValue('55385')
+        clickOptionsModalHideButton()
+
+        // save AO, verify limits are applied
+        saveNewAO(`TEST min max ${new Date().toLocaleString()}`)
+        expectAppToNotBeLoading()
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('>=')
+        expectMaxOperatorToBeOption('<=')
+        expectMinValueToBeValue('49500')
+        expectMaxValueToBeValue('55385')
+        clickOptionsModalHideButton()
+
+        // clean up
+        deleteAO()
+        expectStartScreenToBeVisible()
+    })
+    it('min value only display correctly', () => {
+        // set limits
+        changeMinOperator('>=')
+        setMinValue('49500')
+        clickOptionsModalUpdateButton()
+
+        // verify limits are applied
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        const expectedValues = ['', '49 605', '49 500', '55 385', '68 886']
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('>=')
+        expectMaxOperatorToBeOption('<')
+        expectMinValueToBeValue('49500')
+        expectMaxValueToBeValue('')
+        clickOptionsModalHideButton()
+
+        // save AO, verify limits are applied
+        saveNewAO(`TEST min max ${new Date().toLocaleString()}`)
+        expectAppToNotBeLoading()
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('>=')
+        expectMaxOperatorToBeOption('<')
+        expectMinValueToBeValue('49500')
+        expectMaxValueToBeValue('')
+        clickOptionsModalHideButton()
+
+        // clean up
+        deleteAO()
+        expectStartScreenToBeVisible()
+    })
+    it('max value only display correctly', () => {
+        // set limits
+        changeMaxOperator('<=')
+        setMaxValue('55385')
+        clickOptionsModalUpdateButton()
+
+        // verify limits are applied
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        const expectedValues = ['49 231', '49 605', '49 500', '55 385', '']
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('>')
+        expectMaxOperatorToBeOption('<=')
+        expectMinValueToBeValue('')
+        expectMaxValueToBeValue('55385')
+        clickOptionsModalHideButton()
+
+        // save AO, verify limits are applied
+        saveNewAO(`TEST min max ${new Date().toLocaleString()}`)
+        expectAppToNotBeLoading()
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('>')
+        expectMaxOperatorToBeOption('<=')
+        expectMinValueToBeValue('')
+        expectMaxValueToBeValue('55385')
+        clickOptionsModalHideButton()
+
+        // clean up
+        deleteAO()
+        expectStartScreenToBeVisible()
+    })
+    it('equal value display correctly', () => {
+        // set limits
+        changeMinOperator('=')
+        setMinValue('49500')
+        clickOptionsModalUpdateButton()
+
+        // verify limits are applied
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        const expectedValues = ['', '', '49 500', '', '']
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('=')
+        expectMaxOperatorToBeOption('<')
+        expectMinValueToBeValue('49500')
+        expectMaxValueToBeValue('')
+        clickOptionsModalHideButton()
+
+        // save AO, verify limits are applied
+        saveNewAO(`TEST min max ${new Date().toLocaleString()}`)
+        expectAppToNotBeLoading()
+        expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
+        expectedValues.forEach((value, index) =>
+            expectTableValueToBe(value, index)
+        )
+
+        // verify options are present when reopening modal
+        openOptionsModal(OPTIONS_TAB_LIMIT_VALUES)
+        expectMinOperatorToBeOption('=')
+        expectMaxOperatorToBeOption('<')
+        expectMinValueToBeValue('49500')
+        expectMaxValueToBeValue('')
+        clickOptionsModalHideButton()
+
+        // clean up
+        deleteAO()
+        expectStartScreenToBeVisible()
+    })
+})