fix: avoid duplicate path in get link URL DHIS2-14535 [v39]

cypress/elements/chart.js

@@ -115,3 +115,12 @@ export const clickChartItem = (index) =>
 
 export const expectChartItemsToHaveLength = (length) =>
     cy.get(highchartsChartItemEl).children().should('have.length', length)
+
+export const expectSVTitleToHaveColor = (color) =>
+    cy.getBySel(visualizationTitleEl).invoke('attr', 'fill').should('eq', color)
+
+export const expectSVSubtitleToHaveColor = (color) =>
+    cy
+        .getBySel(visualizationSubtitleEl)
+        .invoke('attr', 'fill')
+        .should('eq', color)

cypress/elements/common.js

@@ -10,7 +10,7 @@ import { clickMenuBarUpdateButton } from './menuBar.js'
 const loadingEl = 'dhis2-uicore-circularloader'
 
 export const expectAppToNotBeLoading = () =>
-    cy.getBySel(loadingEl).should('not.exist')
+    cy.getBySel(loadingEl, { timeout: 15000 }).should('not.exist')
 
 export const clickCheckbox = (target) =>
     cy.getBySel(target).click().find('[type="checkbox"]').should('be.checked')

cypress/elements/optionsModal/fontStyles.js

@@ -6,6 +6,7 @@ const getFontSizeSelectEl = (prefix) => `${prefix}-text-style-font-size-select`
 const getFontSizeOptionEl = (prefix) => `${prefix}-text-style-font-size-option`
 const getBoldButtonEl = (prefix) => `${prefix}-text-style-bold-toggle`
 const getItalicButtonEl = (prefix) => `${prefix}-text-style-italic-toggle`
+const getColorButtonEl = (prefix) => `${prefix}-text-style-text-color-picker`
 
 export const changeTextAlignOption = (prefix, optionName) => {
     cy.getBySel(getTextAlignSelectEl(prefix)).click()
@@ -25,10 +26,11 @@ export const clickBoldButton = (prefix) =>
 export const clickItalicButton = (prefix) =>
     cy.getBySel(getItalicButtonEl(prefix)).click()
 
-/*FIXME: Find a way to test the color picker
-    export const changeTitleColorOption = color => 
-        cy.getBySel('option-chart-title-text-style-text-color-picker')
-            .invoke('val', color)
-            .trigger('change')
-            .blur()
-*/
+export const changeColor = (prefix, color) => {
+    cy.getBySelLike(getColorButtonEl(prefix))
+        .find('input[type=color]')
+        .invoke('val', color)
+        .trigger('input', { force: true }) // use force as the input has style "pointer-events: none"
+        .invoke('attr', 'value')
+        .should('eq', color)
+}

cypress/elements/optionsModal/index.js

@@ -33,6 +33,7 @@ export {
     changeFontSizeOption,
     clickBoldButton,
     clickItalicButton,
+    changeColor,
 } from './fontStyles.js'
 
 export {
@@ -71,13 +72,16 @@ export {
     expectLegendDisplayStrategyToBeByDataItem,
     expectLegendDisplayStrategyToBeFixed,
     changeDisplayStrategyToFixed,
+    changeDisplayStrategyToByDataItem,
     changeFixedLegendSet,
     expectFixedLegendSetToBe,
     changeDisplayStyleToText,
+    changeDisplayStyleToFill,
     expectLegendDisplayStyleToBeText,
     expectLegendDisplayStyleToBeFill,
-    expectSingleValueToNotBeColor,
-    expectSingleValueToBeColor,
+    expectSingleValueToHaveTextColor,
+    expectSingleValueToNotHaveBackgroundColor,
+    expectSingleValueToHaveBackgroundColor,
     toggleLegendKeyOption,
     expectLegendKeyOptionToBeEnabled,
     expectLegendKeyOptionToBeDisabled,

cypress/elements/optionsModal/legend.js

@@ -3,7 +3,8 @@ const legendKeyOptionEl = 'option-legend-key'
 const legendKeyEl = 'visualization-legend-key'
 const legendKeyContainerEl = 'legend-key-container'
 const legendKeyItemEl = 'legend-key-item'
-const singleValueOutputEl = 'visualization-primary-value'
+const singleValueTextEl = 'visualization-primary-value'
+const singleValueOutputEl = 'visualization-container'
 const legendDisplayStrategyByDataItemEl = 'legend-display-strategy-BY_DATA_ITEM'
 const legendDisplayStrategyFixedEl = 'legend-display-strategy-FIXED'
 const legendDisplayStyleOptionTextEl = 'legend-display-style-option-TEXT'
@@ -23,12 +24,24 @@ export const changeDisplayStrategyToFixed = () =>
         .contains('Select a single legend for the entire visualization')
         .click()
 
+export const changeDisplayStrategyToByDataItem = () =>
+    cy
+        .getBySel(optionsModalContentEl)
+        .contains('Use pre-defined legend per data item')
+        .click()
+
 export const changeDisplayStyleToText = () =>
     cy
         .getBySel(optionsModalContentEl)
         .contains('Legend changes text color')
         .click()
 
+export const changeDisplayStyleToFill = () =>
+    cy
+        .getBySel(optionsModalContentEl)
+        .contains('Legend changes background color')
+        .click()
+
 export const expectLegendToBeEnabled = () =>
     cy.getBySel(optionsModalContentEl).should('contain', 'Legend type')
 
@@ -64,14 +77,17 @@ export const changeFixedLegendSet = (legendSetName) => {
 export const expectFixedLegendSetToBe = (legendSetName) =>
     cy.getBySel(fixedLegendSetSelectEl).should('contain', legendSetName)
 
-export const expectSingleValueToNotBeColor = (color) =>
+export const expectSingleValueToHaveTextColor = (color) =>
+    cy.getBySel(singleValueTextEl).invoke('attr', 'fill').should('eq', color)
+
+export const expectSingleValueToNotHaveBackgroundColor = () =>
+    cy.getBySel(singleValueOutputEl).should('not.have.attr', 'style')
+
+export const expectSingleValueToHaveBackgroundColor = (color) =>
     cy
         .getBySel(singleValueOutputEl)
-        .invoke('attr', 'fill')
-        .should('not.eq', color)
-
-export const expectSingleValueToBeColor = (color) =>
-    cy.getBySel(singleValueOutputEl).invoke('attr', 'fill').should('eq', color)
+        .invoke('attr', 'style')
+        .should('contain', `background-color: ${color}`)
 
 export const toggleLegendKeyOption = () =>
     cy.getBySel(optionsModalContentEl).contains('Show legend key').click()