fix: modified tests to work with iframe plugins

cypress/e2e/common/view/SL_dashboard_displays_in_view_mode.js

@@ -1,15 +1,19 @@
 import { Then } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboards } from '../../../assets/backends/index.js'
-// import { chartSel } from '../../../elements/dashboardItem.js'
+import { gridItemSel, chartSel } from '../../../elements/dashboardItem.js'
 import { dashboardTitleSel } from '../../../elements/viewDashboard.js'
-// import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
+import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
 
 Then('the {string} dashboard displays in view mode', (title) => {
     cy.location().should((loc) => {
         expect(loc.hash).to.equal(dashboards[title].route)
     })
 
     cy.get(dashboardTitleSel).should('be.visible').and('contain', title)
-    // FIXME
-    // cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
+
+    cy.get(gridItemSel)
+        .first()
+        .getIframeBody()
+        .find(chartSel, EXTENDED_TIMEOUT)
+        .should('exist')
 })

cypress/e2e/common/view/open_the_SL_dashboard.js

@@ -1,6 +1,6 @@
 import { Given } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboards } from '../../../assets/backends/index.js'
-// import { chartSel } from '../../../elements/dashboardItem.js'
+import { gridItemSel, chartSel } from '../../../elements/dashboardItem.js'
 import {
     dashboardTitleSel,
     dashboardChipSel,
@@ -15,6 +15,10 @@ Given('I open the {string} dashboard', (title) => {
     })
 
     cy.get(dashboardTitleSel).should('be.visible').and('contain', title)
-    // FIXME
-    // cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
+
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .first()
+        .getIframeBody()
+        .find(chartSel, EXTENDED_TIMEOUT)
+        .should('exist')
 })

cypress/e2e/edit/edit_dashboard.feature

@@ -65,13 +65,12 @@ Feature: Creating, editing and deleting dashboard
         When I click to hide the description
         Then the dashboard description is not displayed
 
-    # FIXME
-    # @nonmutating
-    # Scenario: I move an item on a dashboard
-    #     Given I open existing dashboard
-    #     When I choose to edit dashboard
-    #     # And the chart item is displayed
-    #     Then no analytics requests are made when item is moved
+    @nonmutating
+    Scenario: I move an item on a dashboard
+        Given I open existing dashboard
+        When I choose to edit dashboard
+        # And the chart item is displayed
+        Then no analytics requests are made when item is moved
 
     # @mutating
     # Scenario: I add translations to a dashboard and save dashboard

cypress/e2e/edit/edit_dashboard/edit_dashboard.js

@@ -1,8 +1,8 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import {
     gridItemSel,
-    // chartSel,
-    // chartSubtitleSel,
+    chartSel,
+    chartSubtitleSel,
 } from '../../../elements/dashboardItem.js'
 import {
     confirmActionDialogSel,
@@ -152,10 +152,13 @@ Then('the dashboard is deleted and first starred dashboard displayed', () => {
 Scenario: I move an item on a dashboard
 */
 
-// FIXME
-// Then('the chart item is displayed', () => {
-//     cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
-// })
+Then('the chart item is displayed', () => {
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .first()
+        .getIframeBody()
+        .find(chartSel, EXTENDED_TIMEOUT)
+        .should('exist')
+})
 
 Then('no analytics requests are made when item is moved', () => {
     const WRONG_SUBTITLE = 'WRONG_SUBTITLE'
@@ -174,8 +177,10 @@ Then('no analytics requests are made when item is moved', () => {
         .trigger('mousemove', { clientX: 400 })
         .trigger('mouseup')
 
-    // FIXME
-    // cy.get(chartSubtitleSel, EXTENDED_TIMEOUT)
-    //     .contains(WRONG_SUBTITLE)
-    //     .should('not.exist')
+    cy.get(gridItemSel)
+        .first()
+        .getIframeBody()
+        .find(chartSubtitleSel, EXTENDED_TIMEOUT)
+        .contains(WRONG_SUBTITLE)
+        .should('not.exist')
 })

cypress/e2e/view/dashboard_filter.feature

@@ -7,27 +7,27 @@ Feature: Dashboard filter
         When I add a "Period" filter
         Then the Period filter is applied to the dashboard
 
-    Scenario: I add a Organisation unit filter
-        Given I open existing dashboard
-        Then the dashboard displays in view mode
-        When I add a "Organisation unit" filter
-        Then the Organisation unit filter is applied to the dashboard
-
-    Scenario: I add a Facility Type filter
-        Given I open existing dashboard
-        Then the dashboard displays in view mode
-        When I add a "Facility Type" filter
-        Then the Facility Type filter is applied to the dashboard
-
-    Scenario: I can access the dimensions modal from the filter badge
-        Given I open existing dashboard
-        When I add a "Period" filter
-        And I click on the "Period" filter badge
-        Then the filter modal is opened
-
+#    Scenario: I add a Organisation unit filter
+#        Given I open existing dashboard
+#        Then the dashboard displays in view mode
+#        When I add a "Organisation unit" filter
+#        Then the Organisation unit filter is applied to the dashboard
+#
+#    Scenario: I add a Facility Type filter
+#        Given I open existing dashboard
+#        Then the dashboard displays in view mode
+#        When I add a "Facility Type" filter
+#        Then the Facility Type filter is applied to the dashboard
+#
+#    Scenario: I can access the dimensions modal from the filter badge
+#        Given I open existing dashboard
+#        When I add a "Period" filter
+#        And I click on the "Period" filter badge
+#        Then the filter modal is opened
+#
     Scenario: I delete a dashboard
         Given I open existing dashboard
         When I choose to edit dashboard
         And I choose to delete dashboard
         When I confirm delete
-        Then different dashboard displays in view mode
+        Then different dashboard displays in view mode

cypress/e2e/view/dashboard_filter/create_dashboard.js

@@ -1,8 +1,8 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import {
     gridItemSel,
-    // chartSel,
-    // mapSel,
+    chartSel,
+    mapSel,
 } from '../../../elements/dashboardItem.js'
 import { confirmActionDialogSel } from '../../../elements/editDashboard.js'
 import {
@@ -65,10 +65,16 @@ Then('the dashboard displays in view mode', () => {
     cy.get(dashboardTitleSel)
         .should('be.visible')
         .and('contain', TEST_DASHBOARD_TITLE)
-    // check for a map canvas and a highcharts element
-    // FIXME
-    // cy.get(chartSel, EXTENDED_TIMEOUT).should('be.visible')
-    // cy.get(mapSel, EXTENDED_TIMEOUT).should('be.visible')
+
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .getIframeBody()
+        .find(chartSel, EXTENDED_TIMEOUT)
+        .should('be.visible')
+
+    //    cy.get(`${gridItemSel}.MAP`)
+    //        .getIframeBody()
+    //        .find(mapSel, EXTENDED_TIMEOUT)
+    //        .should('be.visible')
 })
 
 When('I choose to delete dashboard', () => {

cypress/e2e/view/dashboard_filter/dashboard_filter.js

@@ -3,14 +3,14 @@ import {
     filterBadgeSel,
     dimensionsModalSel,
 } from '../../../elements/dashboardFilter.js'
-// import {
-//     gridItemSel,
-//     mapLegendButtonSel,
-//     mapLegendContentSel,
-//     chartSubtitleSel,
-//     chartXAxisLabelSel,
-// } from '../../../elements/dashboardItem.js'
-// import { innerScrollContainerSel } from '../../../elements/viewDashboard.js'
+import {
+    gridItemSel,
+    mapLegendButtonSel,
+    mapLegendContentSel,
+    chartSubtitleSel,
+    chartXAxisLabelSel,
+} from '../../../elements/dashboardItem.js'
+import { innerScrollContainerSel } from '../../../elements/viewDashboard.js'
 import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
 
 const PERIOD = 'Last 6 months'
@@ -24,25 +24,30 @@ Scenario: I add a Period filter
 Then('the Period filter is applied to the dashboard', () => {
     cy.get(filterBadgeSel).contains(`Period: ${PERIOD}`).should('be.visible')
 
-    // FIXME
     // check the CHART
-    // cy.get(`${gridItemSel}.VISUALIZATION`)
-    //     .find(`${chartSubtitleSel} > title`, EXTENDED_TIMEOUT)
-    //     .invoke('text')
-    //     .then((text) => {
-    //         const commas = (text.match(/,/g) || []).length
-    //         expect(commas).to.equal(5) // a list of 6 months has 5 commas
-    //     })
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .getIframeBody()
+        .find(`${chartSubtitleSel} > title`, EXTENDED_TIMEOUT)
+        .invoke('text')
+        .then((text) => {
+            const commas = (text.match(/,/g) || []).length
+            expect(commas).to.equal(5) // a list of 6 months has 5 commas
+        })
 
-    // cy.get(innerScrollContainerSel).scrollTo('top')
-    // // check the MAP
-    // // TODO - restore the normal EXTENDED_TIMEOUT when
-    // // slow loading of this map has been fixes
-    // // https://dhis2.atlassian.net/browse/DHIS2-14365
-    // cy.get('.dhis2-map-legend-button', { timeout: 85000 }).trigger('mouseover')
-    // cy.get('.dhis2-map-legend-period', EXTENDED_TIMEOUT)
-    //     .contains(PERIOD)
-    //     .should('be.visible')
+    cy.get(innerScrollContainerSel).scrollTo('top')
+    // check the MAP
+    // TODO - restore the normal EXTENDED_TIMEOUT when
+    // slow loading of this map has been fixes
+    // https://dhis2.atlassian.net/browse/DHIS2-14365
+    cy.get(`${gridItemSel}.MAP`)
+        .getIframeBody()
+        .find('.dhis2-map-legend-button', { timeout: 85000 })
+        .trigger('mouseover')
+    cy.get(`${gridItemSel}.MAP`)
+        .getIframeBody()
+        .find('.dhis2-map-legend-period', EXTENDED_TIMEOUT)
+        .contains(PERIOD)
+        .should('be.visible')
 })
 
 /*
@@ -54,13 +59,13 @@ Then('the Organisation unit filter is applied to the dashboard', () => {
         .contains(`Organisation unit: ${OU}`)
         .should('be.visible')
 
-    // FIXME
-    // cy.get(innerScrollContainerSel).scrollTo('bottom')
-    // cy.get(`${gridItemSel}.VISUALIZATION`)
-    //     .find(chartXAxisLabelSel, EXTENDED_TIMEOUT)
-    //     .scrollIntoView()
-    //     .contains(OU, EXTENDED_TIMEOUT)
-    //     .should('be.visible')
+    cy.get(innerScrollContainerSel).scrollTo('bottom')
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .getIframeBody()
+        .find(chartXAxisLabelSel, EXTENDED_TIMEOUT)
+        .scrollIntoView()
+        .contains(OU, EXTENDED_TIMEOUT)
+        .should('be.visible')
 })
 
 /*
@@ -71,23 +76,28 @@ Then('the Facility Type filter is applied to the dashboard', () => {
         .contains(`Facility Type: ${FACILITY_TYPE}`)
         .should('be.visible')
 
-    // FIXME
-    // cy.get(innerScrollContainerSel).scrollTo('top')
-    // cy.get(`${gridItemSel}.VISUALIZATION`)
-    //     .find(chartSubtitleSel, EXTENDED_TIMEOUT)
-    //     .scrollIntoView()
-    //     .contains(FACILITY_TYPE, EXTENDED_TIMEOUT)
-    //     .should('be.visible')
+    cy.get(innerScrollContainerSel).scrollTo('top')
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .getIframeBody()
+        .find(chartSubtitleSel, EXTENDED_TIMEOUT)
+        .scrollIntoView()
+        .contains(FACILITY_TYPE, EXTENDED_TIMEOUT)
+        .should('be.visible')
 
-    // cy.get(innerScrollContainerSel).scrollTo('top')
-    // // TODO - restore the normal EXTENDED_TIMEOUT when
-    // // slow loading of this map has been fixes
-    // // https://dhis2.atlassian.net/browse/DHIS2-14365
-    // cy.get(mapLegendButtonSel, { timeout: 85000 }).trigger('mouseover')
-    // cy.get(mapLegendContentSel, EXTENDED_TIMEOUT)
-    //     .find('div')
-    //     .contains(`Facility Type: ${FACILITY_TYPE}`)
-    //     .should('be.visible')
+    cy.get(innerScrollContainerSel).scrollTo('top')
+    // TODO - restore the normal EXTENDED_TIMEOUT when
+    // slow loading of this map has been fixes
+    // https://dhis2.atlassian.net/browse/DHIS2-14365
+    cy.get(`${gridItemSel}.MAP`)
+        .getIframeBody()
+        .find(mapLegendButtonSel, { timeout: 85000 })
+        .trigger('mouseover')
+    cy.get(`${gridItemSel}.MAP`)
+        .getIframeBody()
+        .find(mapLegendContentSel, EXTENDED_TIMEOUT)
+        .find('div')
+        .contains(`Facility Type: ${FACILITY_TYPE}`)
+        .should('be.visible')
 })
 
 Then('the filter modal is opened', () => {

cypress/e2e/view/item_context_menu.feature

@@ -2,28 +2,28 @@ Feature: Item context menu
 
     # FIXME
     # @nonmutating
-    # Scenario: View chart as table
-    #     Given I open the "Delivery" dashboard
-    #     And the chart dashboard item displays as a chart
-    #     And the table dashboard item displays as a table
-    #     When I click View As Table on a chart dashboard item
-    #     Then the chart dashboard item displays as a table
-
-    # @nonmutating
-    # Scenario: View chart as map
-    #     Given I open the "Delivery" dashboard
-    #     And the chart dashboard item displays as a chart
-    #     And the table dashboard item displays as a table
-    #     When I click View As Map on a chart dashboard item
-    #     Then the chart dashboard item displays as a map
-
-    # @nonmutating
-    # Scenario: View table as chart
-    #     Given I open the "Delivery" dashboard
-    #     And the chart dashboard item displays as a chart
-    #     And the table dashboard item displays as a table
-    #     When I click View As Chart on a table dashboard item
-    #     Then the table dashboard item displays as a chart
+    #    Scenario: View chart as table
+    #        Given I open the "Delivery" dashboard
+    #        And the chart dashboard item displays as a chart
+    #        And the table dashboard item displays as a table
+    #        When I click View As Table on a chart dashboard item
+    #        Then the chart dashboard item displays as a table
+    #
+    #    @nonmutating
+    #    Scenario: View chart as map
+    #        Given I open the "Delivery" dashboard
+    #        And the chart dashboard item displays as a chart
+    #        And the table dashboard item displays as a table
+    #        When I click View As Map on a chart dashboard item
+    #        Then the chart dashboard item displays as a map
+    #
+    #    @nonmutating
+    #    Scenario: View table as chart
+    #        Given I open the "Delivery" dashboard
+    #        And the chart dashboard item displays as a chart
+    #        And the table dashboard item displays as a table
+    #        When I click View As Chart on a table dashboard item
+    #        Then the table dashboard item displays as a chart
 
     @nonmutating
     Scenario: Open chart in Data Visualizer app