test: add Cypress tests for SV icon (DHIS2-10496)

cypress/elements/chart.js

@@ -21,7 +21,7 @@ const unsavedVisualizationTitleText = 'Unsaved visualization'
 const AOTitleEl = 'AO-title'
 const AOTitleDirtyEl = 'AO-title-dirty'
 const timeout = {
-    timeout: 20000,
+    timeout: 40000,
 }
 const nonHighchartsTypes = [VIS_TYPE_PIVOT_TABLE, VIS_TYPE_SINGLE_VALUE]
 

cypress/elements/dimensionModal/dataDimension.js

@@ -26,6 +26,15 @@ const rightHeaderEl = 'data-dimension-transfer-rightheader'
 const searchFieldEl = 'data-dimension-left-header-filter-input-field-content'
 const emptySourceEl = 'data-dimension-empty-source'
 
+const expectItemsToBeInSource = (items) => {
+    cy.getBySelLike('transfer-sourceoptions').should(($elems) => {
+        const $container = $elems.first()
+        expect($container).to.have.class('container')
+        const $options = $container.find('[data-test*="transfer-option"]')
+        items.forEach((item) => expect($options).to.contain(item))
+    })
+}
+
 export const expectDataDimensionModalToBeVisible = () =>
     expectDimensionModalToBeVisible(DIMENSION_ID_DATA)
 
@@ -46,17 +55,19 @@ export const scrollSourceToBottom = () => {
 }
 
 export const selectDataElements = (dataElements) => {
-    switchDataTypeTo('Data elements')
     expectSourceToNotBeLoading()
+    switchDataTypeTo('Data elements')
+    expectItemsToBeInSource(dataElements)
     dataElements.forEach((item) => selectItemByDoubleClick(item))
 }
 
 export const selectFirstDataItem = () =>
     cy.getBySel(selectableItemsEl).findBySel(optionContentEl).eq(0).dblclick()
 
 export const selectIndicators = (indicators) => {
-    switchDataTypeTo('Indicators')
     expectSourceToNotBeLoading()
+    switchDataTypeTo('Indicators')
+    expectItemsToBeInSource(indicators)
     indicators.forEach((item) => selectItemByDoubleClick(item))
 }
 
@@ -78,6 +89,8 @@ export const expectGroupSelectToBe = (group) =>
 
 export const switchGroupTo = (group) => {
     cy.getBySel(groupSelectButtonEl).click()
+    cy.getBySelLike(groupSelectOptionEl).should('have.length.least', 2)
+    cy.getBySelLike('singleselect-loading').should('not.exist')
     cy.getBySelLike(groupSelectOptionEl).contains(group).click()
 }
 
@@ -127,6 +140,22 @@ export const clickEDIEditButton = (item) =>
         .findBySel('data-dimension-transfer-option-edit-button')
         .click()
 
+export const expectSelectableDataItemsAmountToBe = (amount) =>
+    cy.getBySelLike('transfer-sourceoptions').should(($elems) => {
+        const $container = $elems.first()
+        expect(
+            $container.find('[data-test="data-dimension-transfer-option"]')
+        ).to.have.lengthOf(amount)
+    })
+
+export const expectSelectableDataItemsAmountToBeLeast = (amount) =>
+    cy.getBySelLike('transfer-sourceoptions').should(($elems) => {
+        const $container = $elems.first()
+        expect(
+            $container.find('[data-test="data-dimension-transfer-option"]')
+        ).to.have.length.of.at.least(amount)
+    })
+
 /* TODO: Find a way to use random items
     export const replaceDataItemsWithRandomDataElements = amount => {
         expectDataDimensionModalToBeVisible()

cypress/elements/dimensionModal/index.js

@@ -97,20 +97,6 @@ export const expectSelectedItemsAmountToBeLeast = (amount) =>
         .filter('.wrapper')
         .should('have.length.least', amount)
 
-export const expectSelectableItemsAmountToBeLeast = (amount) =>
-    cy
-        .getBySelLike(transferSelectableItemsEl)
-        .findBySelLike(transferOptionEl)
-        .filter('.wrapper')
-        .should('have.length.least', amount)
-
-export const expectSelectableItemsAmountToBe = (amount) =>
-    cy
-        .getBySelLike(transferSelectableItemsEl)
-        .findBySelLike(transferOptionEl)
-        .filter('.wrapper')
-        .should('have.length', amount)
-
 export const expectSelectedItemsAmountToBe = (amount) =>
     cy
         .getBySelLike(transferSelectedItemsEl)
@@ -143,6 +129,8 @@ export {
     expectSubGroupSelectToBe,
     switchSubGroupTo,
     clickEDIEditButton,
+    expectSelectableDataItemsAmountToBeLeast,
+    expectSelectableDataItemsAmountToBe,
 } from './dataDimension.js'
 
 export {
@@ -161,6 +149,8 @@ export {
     expectRelativePeriodTypeSelectToNotContain,
     expectFixedPeriodTypeSelectToNotContain,
     expectFixedPeriodTypeToBe,
+    expectSelectablePeriodItemsAmountToBeLeast,
+    expectSelectablePeriodItemsAmountToBe,
 } from './periodDimension.js'
 
 export {

cypress/elements/dimensionModal/periodDimension.js

@@ -101,3 +101,19 @@ export const openRelativePeriodsTypeSelect = () =>
 
 export const openFixedPeriodsTypeSelect = () =>
     cy.getBySel(fixedPeriodsPeriodTypeButtonEl).click()
+
+export const expectSelectablePeriodItemsAmountToBe = (amount) =>
+    cy.getBySelLike('transfer-sourceoptions').should(($elems) => {
+        const $container = $elems.first()
+        expect(
+            $container.find('[data-test="period-dimension-transfer-option"]')
+        ).to.have.lengthOf(amount)
+    })
+
+export const expectSelectablePeriodItemsAmountToBeLeast = (amount) =>
+    cy.getBySelLike('transfer-sourceoptions').should(($elems) => {
+        const $container = $elems.first()
+        expect(
+            $container.find('[data-test="period-dimension-transfer-option"]')
+        ).to.have.length.of.at.least(amount)
+    })

cypress/elements/optionsModal/legend.js

@@ -4,6 +4,7 @@ const legendKeyEl = 'visualization-legend-key'
 const legendKeyContainerEl = 'legend-key-container'
 const legendKeyItemEl = 'legend-key-item'
 const singleValueTextEl = 'visualization-primary-value'
+const singleValueIconEl = 'visualization-icon'
 const singleValueOutputEl = 'visualization-container'
 const legendDisplayStrategyByDataItemEl = 'legend-display-strategy-BY_DATA_ITEM'
 const legendDisplayStrategyFixedEl = 'legend-display-strategy-FIXED'
@@ -89,6 +90,12 @@ export const expectSingleValueToHaveBackgroundColor = (color) =>
         .invoke('attr', 'style')
         .should('contain', `background-color: ${color}`)
 
+export const expectSingleValueToHaveIconColor = (color) =>
+    cy
+        .getBySel(singleValueIconEl)
+        .invoke('attr', 'style')
+        .should('contain', `color: ${color}`)
+
 export const toggleLegendKeyOption = () =>
     cy.getBySel(optionsModalContentEl).contains('Show legend key').click()
 

cypress/integration/dimensions/data.cy.js

@@ -13,11 +13,11 @@ import {
     expectSelectedItemsAmountToBeLeast,
     expectSelectedItemsAmountToBe,
     expectItemToBeSelectable,
-    expectSelectableItemsAmountToBe,
+    expectSelectableDataItemsAmountToBe,
     inputSearchTerm,
     switchDataTypeTo,
     clearSearchTerm,
-    expectSelectableItemsAmountToBeLeast,
+    expectSelectableDataItemsAmountToBeLeast,
     expectGroupSelectToBeVisible,
     switchGroupTo,
     selectFirstDataItem,
@@ -106,7 +106,7 @@ describe('Data dimension', () => {
             expectSourceToNotBeLoading()
         })
         it('more items are fetched', () => {
-            expectSelectableItemsAmountToBeLeast(PAGE_SIZE)
+            expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE)
             expectItemToBeSelectable(secondPageItemName)
         })
         it('all items can be unselected', () => {
@@ -122,7 +122,7 @@ describe('Data dimension', () => {
                 expect(response.body.dataItems.length).to.eq(PAGE_SIZE)
             })
             expectSourceToNotBeLoading()
-            expectSelectableItemsAmountToBeLeast(PAGE_SIZE * 3)
+            expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE * 3)
         })
     })
     describe('global search', () => {
@@ -140,7 +140,7 @@ describe('Data dimension', () => {
         })
         // TODO: Test that the search is only called once, i.e. debounce works
         it('search result is displayed', () => {
-            expectSelectableItemsAmountToBe(1)
+            expectSelectableDataItemsAmountToBe(1)
             expectItemToBeSelectable(testSearchTerm)
         })
         it('search result is maintained when switching data type', () => {
@@ -152,7 +152,7 @@ describe('Data dimension', () => {
                 expect(response.body.dataElements.length).to.be.eq(1)
             })
             expectSourceToNotBeLoading()
-            expectSelectableItemsAmountToBe(1)
+            expectSelectableDataItemsAmountToBe(1)
             expectItemToBeSelectable(testSearchTerm)
             clearSearchTerm()
             cy.wait('@dataElements').then(({ request, response }) => {
@@ -169,7 +169,7 @@ describe('Data dimension', () => {
                 expect(response.body.dataItems.length).to.eq(PAGE_SIZE)
             })
             expectSourceToNotBeLoading()
-            expectSelectableItemsAmountToBeLeast(PAGE_SIZE)
+            expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE)
         })
         it('search displays a correct error message', () => {
             const testSearchTermWithNoMatch = 'nomatch'
@@ -195,7 +195,7 @@ describe('Data dimension', () => {
                 expect(response.body.dataItems.length).to.be.eq(PAGE_SIZE)
             })
             expectSourceToNotBeLoading()
-            expectSelectableItemsAmountToBeLeast(PAGE_SIZE)
+            expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE)
         })
         it('modal is closed', () => {
             clickDimensionModalHideButton()
@@ -289,7 +289,7 @@ describe('Data dimension', () => {
                     ).to.be.least(1)
                 })
                 expectSourceToNotBeLoading()
-                expectSelectableItemsAmountToBeLeast(PAGE_SIZE)
+                expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE)
             })
             it('group select is visible', () => {
                 expectGroupSelectToBeVisible()
@@ -310,7 +310,7 @@ describe('Data dimension', () => {
                         ).to.be.least(1)
                     })
                     expectSourceToNotBeLoading()
-                    expectSelectableItemsAmountToBeLeast(PAGE_SIZE + 1)
+                    expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE + 1)
                 })
             }
             it('an item can be selected', () => {
@@ -328,15 +328,15 @@ describe('Data dimension', () => {
                 })
                 expectSourceToNotBeLoading()
                 expectGroupSelectToBe(testDataType.testGroup.name)
-                expectSelectableItemsAmountToBe(
+                expectSelectableDataItemsAmountToBe(
                     testDataType.testGroup.itemAmount
                 )
                 expectItemToBeSelected(testDataType.testItem.name)
             })
             it('the first item can be selected', () => {
                 selectFirstDataItem()
                 expectSelectedItemsAmountToBe(2)
-                expectSelectableItemsAmountToBe(
+                expectSelectableDataItemsAmountToBe(
                     testDataType.testGroup.itemAmount - 1
                 )
             })
@@ -366,7 +366,7 @@ describe('Data dimension', () => {
                     })
                     expectSourceToNotBeLoading()
                     expectSubGroupSelectToBe(testDataType.testSubGroup.name)
-                    expectSelectableItemsAmountToBe(
+                    expectSelectableDataItemsAmountToBe(
                         testDataType.testSubGroup.itemAmount
                     )
                     expectItemToBeSelected(testDataType.testItem.name)
@@ -382,7 +382,7 @@ describe('Data dimension', () => {
                     })
                     expectSourceToNotBeLoading()
                     expectSubGroupSelectToBe(testDataType.defaultSubGroup.name)
-                    expectSelectableItemsAmountToBe(
+                    expectSelectableDataItemsAmountToBe(
                         testDataType.testGroup.itemAmount - 1
                     )
                     expectItemToBeSelected(testDataType.testItem.name)
@@ -421,7 +421,7 @@ describe('Data dimension', () => {
                     }
                 )
                 expectSourceToNotBeLoading()
-                expectSelectableItemsAmountToBe(
+                expectSelectableDataItemsAmountToBe(
                     testDataType.testGroup.itemAmount
                 )
                 switchGroupToAll()
@@ -432,7 +432,7 @@ describe('Data dimension', () => {
                     }
                 )
                 expectSourceToNotBeLoading()
-                expectSelectableItemsAmountToBeLeast(PAGE_SIZE)
+                expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE)
                 if (testDataType.endpoint.requestUrl !== DATA_ITEMS_URL) {
                     cy.intercept('GET', DATA_ITEMS_URL).as('**/dataItems*')
                 }
@@ -444,7 +444,7 @@ describe('Data dimension', () => {
                     expect(response.body.dataItems.length).to.eq(PAGE_SIZE)
                 })
                 expectSourceToNotBeLoading()
-                expectSelectableItemsAmountToBeLeast(PAGE_SIZE)
+                expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE)
             })
             it('modal is closed', () => {
                 clickDimensionModalHideButton()

cypress/integration/dimensions/period.cy.js

@@ -26,8 +26,8 @@ import {
     clickMoveUpButton,
     clickMoveDownButton,
     singleClickSelectedItem,
-    expectSelectableItemsAmountToBeLeast,
-    expectSelectableItemsAmountToBe,
+    expectSelectablePeriodItemsAmountToBeLeast,
+    expectSelectablePeriodItemsAmountToBe,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
 import { goToStartPage } from '../../elements/startScreen.js'
@@ -129,7 +129,7 @@ describe('Period dimension', () => {
             it(`relative period type '${type.name}' has ${type.amountOfChildren} items`, () => {
                 openRelativePeriodsTypeSelect()
                 selectPeriodType(type.name)
-                expectSelectableItemsAmountToBe(type.amountOfChildren)
+                expectSelectablePeriodItemsAmountToBe(type.amountOfChildren)
             })
         )
         it('can switch to fixed periods', () => {
@@ -162,10 +162,12 @@ describe('Period dimension', () => {
                 openFixedPeriodsTypeSelect()
                 selectPeriodType(type.name)
                 type.amountOfChildren > 50
-                    ? expectSelectableItemsAmountToBeLeast(
+                    ? expectSelectablePeriodItemsAmountToBeLeast(
+                          type.amountOfChildren
+                      )
+                    : expectSelectablePeriodItemsAmountToBe(
                           type.amountOfChildren
                       )
-                    : expectSelectableItemsAmountToBe(type.amountOfChildren)
             })
         )
     })