From 796db440d4522539bb7616a45d1ca14a8f1732bf Mon Sep 17 00:00:00 2001 From: martinkrulltott Date: Tue, 3 Oct 2023 15:14:31 +0200 Subject: [PATCH] test: add tests for limit values --- cypress/elements/optionsModal/index.js | 12 + cypress/elements/optionsModal/limitValues.js | 34 +++ cypress/integration/options/limitValues.cy.js | 260 ++++++++++++++++++ .../Options/MeasureCriteria.js | 25 +- 4 files changed, 327 insertions(+), 4 deletions(-) create mode 100644 cypress/elements/optionsModal/limitValues.js create mode 100644 cypress/integration/options/limitValues.cy.js diff --git a/cypress/elements/optionsModal/index.js b/cypress/elements/optionsModal/index.js index 8405186eb1..1f8f7f6bdd 100644 --- a/cypress/elements/optionsModal/index.js +++ b/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() @@ -89,3 +90,14 @@ export { expectLegendKeyToBeVisible, expectLegedKeyItemAmountToBe, } from './legend.js' + +export { + setMinValue, + setMaxValue, + changeMinOperator, + changeMaxOperator, + expectMinValueToBeValue, + expectMaxValueToBeValue, + expectMinOperatorToBeOption, + expectMaxOperatorToBeOption, +} from './limitValues.js' diff --git a/cypress/elements/optionsModal/limitValues.js b/cypress/elements/optionsModal/limitValues.js new file mode 100644 index 0000000000..26ab4a33c4 --- /dev/null +++ b/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) diff --git a/cypress/integration/options/limitValues.cy.js b/cypress/integration/options/limitValues.cy.js new file mode 100644 index 0000000000..6166d55858 --- /dev/null +++ b/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 = [ + '97 481', + '98 338', + '98 041', + '108 919', + '135 067', + ] + 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('98041') + setMaxValue('124494') + clickOptionsModalUpdateButton() + + // verify limits are applied + expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE) + const expectedValues = ['', '98 338', '98 041', '108 919', ''] + expectedValues.forEach((value, index) => + expectTableValueToBe(value, index) + ) + + // verify options are present when reopening modal + openOptionsModal(OPTIONS_TAB_LIMIT_VALUES) + expectMinOperatorToBeOption('>=') + expectMaxOperatorToBeOption('<=') + expectMinValueToBeValue('98041') + expectMaxValueToBeValue('124494') + 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('98041') + expectMaxValueToBeValue('124494') + clickOptionsModalHideButton() + + // clean up + deleteAO() + expectStartScreenToBeVisible() + }) + it('min value only display correctly', () => { + // set limits + changeMinOperator('>=') + setMinValue('98041') + clickOptionsModalUpdateButton() + + // verify limits are applied + expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE) + const expectedValues = ['', '98 338', '98 041', '108 919', '135 067'] + expectedValues.forEach((value, index) => + expectTableValueToBe(value, index) + ) + + // verify options are present when reopening modal + openOptionsModal(OPTIONS_TAB_LIMIT_VALUES) + expectMinOperatorToBeOption('>=') + expectMaxOperatorToBeOption('<') + expectMinValueToBeValue('98041') + 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('98041') + expectMaxValueToBeValue('') + clickOptionsModalHideButton() + + // clean up + deleteAO() + expectStartScreenToBeVisible() + }) + it('max value only display correctly', () => { + // set limits + changeMaxOperator('<=') + setMaxValue('124494') + clickOptionsModalUpdateButton() + + // verify limits are applied + expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE) + const expectedValues = ['97 481', '98 338', '98 041', '108 919', ''] + expectedValues.forEach((value, index) => + expectTableValueToBe(value, index) + ) + + // verify options are present when reopening modal + openOptionsModal(OPTIONS_TAB_LIMIT_VALUES) + expectMinOperatorToBeOption('>') + expectMaxOperatorToBeOption('<=') + expectMinValueToBeValue('') + expectMaxValueToBeValue('124494') + 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('124494') + clickOptionsModalHideButton() + + // clean up + deleteAO() + expectStartScreenToBeVisible() + }) + it('equal value display correctly', () => { + // set limits + changeMinOperator('=') + setMinValue('98041') + clickOptionsModalUpdateButton() + + // verify limits are applied + expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE) + const expectedValues = ['', '', '98 041', '', ''] + expectedValues.forEach((value, index) => + expectTableValueToBe(value, index) + ) + + // verify options are present when reopening modal + openOptionsModal(OPTIONS_TAB_LIMIT_VALUES) + expectMinOperatorToBeOption('=') + expectMaxOperatorToBeOption('<') + expectMinValueToBeValue('98041') + 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('98041') + expectMaxValueToBeValue('') + clickOptionsModalHideButton() + + // clean up + deleteAO() + expectStartScreenToBeVisible() + }) +}) diff --git a/src/components/VisualizationOptions/Options/MeasureCriteria.js b/src/components/VisualizationOptions/Options/MeasureCriteria.js index a0c4a4bd36..f983007b2d 100644 --- a/src/components/VisualizationOptions/Options/MeasureCriteria.js +++ b/src/components/VisualizationOptions/Options/MeasureCriteria.js @@ -36,7 +36,7 @@ const MAX_OPERATORS = [ { id: LESS_THAN_OR_EQUAL_OPERATOR_ID, label: '<=' }, ] -const OperatorSelect = ({ name, value, onChange, operators }) => { +const OperatorSelect = ({ name, value, onChange, operators, dataTest }) => { return (
{ tabIndex="0" inputMaxWidth="106px" dense + dataTest={dataTest} > {operators.map(({ id, label }) => ( - + ))}
@@ -62,9 +68,10 @@ OperatorSelect.propTypes = { operators: PropTypes.array.isRequired, value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, + dataTest: PropTypes.string, } -const ValueInput = ({ name, value, onChange }) => ( +const ValueInput = ({ name, value, onChange, dataTest }) => ( ( onChange={({ value }) => onChange(value)} width="72px" dense + dataTest={dataTest} /> ) @@ -79,6 +87,7 @@ ValueInput.propTypes = { name: PropTypes.string.isRequired, value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, + dataTest: PropTypes.string, } class MeasureCriteria extends Component { @@ -152,11 +161,13 @@ class MeasureCriteria extends Component { value={op1} onChange={this.onChange('op1')} operators={MIN_OPERATORS} + dataTest="measure-critiera-min-operator" /> @@ -170,17 +181,23 @@ class MeasureCriteria extends Component { value={op2} onChange={this.onChange('op2')} operators={MAX_OPERATORS} + dataTest="measure-critiera-max-operator" />
-