test: add tests for dashboard filter and item context menu (#1325)

This PR includes:

New tests:
* added tests for dashboard item context menu
* added tests for dashboard filter

Refactoring:
* ItemFooter is now a functional component (modified this file since I was adding a data-test attribute)
* Move common cypress test functions to common.js using cucumber's reusable syntax (using curly braces in step titles)
* Start capturing all data specific to Sierra Leone db backend in a single place.
* Keep cypress selector strings in separate files under /selectors (e.g. dashboardItem) so that there is just one place to update the value if needed

cypress/assets/backends/index.js

@@ -0,0 +1 @@
+export { dashboards } from './sierraLeone_236'

cypress/assets/backends/sierraLeone_236.js

@@ -0,0 +1,16 @@
+export const dashboards = {
+    'Antenatal Care': {
+        route: '#/nghVC4wtyzi',
+    },
+    Delivery: {
+        route: '#/iMnYyBfSxmM',
+        items: {
+            chart: { itemUid: 'GaVhJpqABYX', visUid: 'HDEDqV3yv3H' },
+            table: { itemUid: 'qXsjttMYuoZ' },
+            map: { itemUid: 'G3EtzSWNP9o' },
+        },
+    },
+    Immunization: {
+        route: '#/TAMlzYkstb7',
+    },
+}

cypress/integration/common/common.js

@@ -0,0 +1,23 @@
+import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+import { dashboards } from '../../assets/backends'
+import { EXTENDED_TIMEOUT } from '../../support/utils'
+import { chartSel } from '../../selectors/dashboardItem'
+import { dashboardTitleSel } from '../../selectors/titleBar'
+import { dashboardChipSel } from '../../selectors/dashboardsBar'
+
+beforeEach(() => {
+    cy.visit('/', EXTENDED_TIMEOUT)
+})
+
+Given('I open the {string} dashboard', title => {
+    cy.get(dashboardChipSel, EXTENDED_TIMEOUT).contains(title).click()
+})
+
+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)
+    cy.get(chartSel).should('exist')
+})

cypress/integration/ui/create_dashboard/index.js

@@ -27,12 +27,6 @@ const toggleShowMoreButton = () => {
     cy.get('[data-test="showmore-button"]').click()
 }
 
-beforeEach(() => {
-    cy.visit('/', {
-        timeout: 15000,
-    })
-})
-
 Given('I choose to create new dashboard', () => {
     cy.get('[data-test="link-new-dashboard"]', {
         timeout: 15000,

cypress/integration/ui/dashboard_filter.feature

@@ -0,0 +1,21 @@
+Feature: Dashboard filter
+
+    Background:
+        Given I open the "Delivery" dashboard
+        And the "Delivery" dashboard displays in view mode
+
+    @nonmutating
+    Scenario: I add a Period filter
+        When I add a "Period" filter
+        Then the Period filter is applied to the dashboard
+
+    @nonmutating
+    Scenario: I add a Organisation Unit filter
+        When I add a "Organisation Unit" filter
+        Then the Organisation Unit filter is applied to the dashboard
+
+
+    @nonmutating
+    Scenario: I add a Facility Type filter
+        When I add a "Facility Type" filter
+        Then the Facility Type filter is applied to the dashboard

cypress/integration/ui/dashboard_filter/dashboard_filter.js

@@ -0,0 +1,89 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import {
+    getDashboardItem,
+    chartSubtitleSel,
+    chartXAxisLabelSel,
+} from '../../../selectors/dashboardItem'
+import {
+    unselectedItemsSel,
+    filterDimensionsPanelSel,
+    filterBadgeSel,
+    orgUnitHierarchySel,
+    orgUnitCheckboxesSel,
+} from '../../../selectors/dashboardFilter'
+import { dashboards } from '../../../assets/backends'
+import { EXTENDED_TIMEOUT } from '../../../support/utils'
+
+const PERIOD = 'Last 6 months'
+const OU = 'Sierra Leone'
+const FACILITY_TYPE = 'Clinic'
+
+const chartItemUid = dashboards.Delivery.items.chart.itemUid
+
+When('I add a {string} filter', dimensionType => {
+    cy.contains('Add filter').click()
+
+    // open the dimensions modal
+    cy.get(filterDimensionsPanelSel).contains(dimensionType).click()
+
+    // select an item in the modal
+    if (dimensionType === 'Period') {
+        cy.get(unselectedItemsSel).contains(PERIOD).dblclick()
+    } else if (dimensionType === 'Organisation Unit') {
+        cy.get(orgUnitHierarchySel, EXTENDED_TIMEOUT).find('.arrow').click()
+        cy.get(orgUnitHierarchySel, EXTENDED_TIMEOUT)
+            .find(orgUnitCheckboxesSel, EXTENDED_TIMEOUT)
+            .contains(OU, EXTENDED_TIMEOUT)
+            .click()
+    } else {
+        cy.get(unselectedItemsSel).contains(FACILITY_TYPE).dblclick()
+    }
+
+    // confirm to apply the filter
+    cy.get('button').contains('Confirm').click()
+})
+
+/*
+Scenario: I add a Period filter
+*/
+
+Then('the Period filter is applied to the dashboard', () => {
+    cy.get(filterBadgeSel).contains(`Period: ${PERIOD}`).should('be.visible')
+
+    getDashboardItem(chartItemUid)
+        .find(chartSubtitleSel, EXTENDED_TIMEOUT)
+        .scrollIntoView()
+        .contains(PERIOD, EXTENDED_TIMEOUT)
+        .should('be.visible')
+})
+
+/*
+Scenario: I add an Organisation Unit filter
+*/
+
+Then('the Organisation Unit filter is applied to the dashboard', () => {
+    cy.get(filterBadgeSel)
+        .contains(`Organisation Unit: ${OU}`)
+        .should('be.visible')
+
+    getDashboardItem(chartItemUid)
+        .find(chartXAxisLabelSel, EXTENDED_TIMEOUT)
+        .scrollIntoView()
+        .contains(OU, EXTENDED_TIMEOUT)
+        .should('be.visible')
+})
+
+/*
+Scenario: I add a Facility Type filter
+*/
+Then('the Facility Type filter is applied to the dashboard', () => {
+    cy.get(filterBadgeSel)
+        .contains(`Facility Type: ${FACILITY_TYPE}`)
+        .should('be.visible')
+
+    getDashboardItem(chartItemUid)
+        .find(chartSubtitleSel, EXTENDED_TIMEOUT)
+        .scrollIntoView()
+        .contains(FACILITY_TYPE, EXTENDED_TIMEOUT)
+        .should('be.visible')
+})

cypress/integration/ui/item_context_menu.feature

@@ -0,0 +1,34 @@
+Feature: Item context menu
+
+    Background:
+        Given I open the "Delivery" dashboard
+        And the "Delivery" dashboard displays in view mode
+        And the chart dashboard item displays as a chart
+        And the table dashboard item displays as a table
+
+    @nonmutating
+    Scenario: View chart as 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
+        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
+        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
+        When I click Open in Data Visualizer app on a chart dashboard item
+        Then the chart is opened in the Data Visualizer app
+
+    @nonmutating
+    Scenario: Open the interpretations panel
+        When I click Show interpretations and details on a chart dashboard item
+        Then the interpretations panel is displayed
+
+

cypress/integration/ui/item_context_menu/item_context_menu.js

@@ -0,0 +1,139 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import {
+    chartSel,
+    mapSel,
+    tableSel,
+    itemDetailsSel,
+    clickMenuButton,
+    getDashboardItem,
+} from '../../../selectors/dashboardItem'
+import { dashboards } from '../../../assets/backends'
+
+// these tests being run on the "Delivery" dashboard
+const chartItemUid = dashboards.Delivery.items.chart.itemUid
+const tableItemUid = dashboards.Delivery.items.table.itemUid
+const chartItemVisUrl = `dhis-web-data-visualizer/#/${dashboards.Delivery.items.chart.visUid}`
+
+/*
+Background
+*/
+
+Then('the chart dashboard item displays as a chart', () => {
+    getDashboardItem(chartItemUid)
+        .find(chartSel)
+        .should('exist')
+        .and('be.visible')
+})
+
+Then('the table dashboard item displays as a table', () => {
+    getDashboardItem(tableItemUid)
+        .find(tableSel)
+        .should('exist')
+        .and('be.visible')
+})
+
+/*
+Scenario: View chart as table
+*/
+
+When('I click View As Table on a chart dashboard item', () => {
+    clickMenuButton(chartItemUid)
+    cy.contains('View as Table').click()
+})
+
+Then('the chart dashboard item displays as a table', () => {
+    getDashboardItem(chartItemUid)
+        .find(tableSel)
+        .should('exist')
+        .and('be.visible')
+})
+
+/*
+Scenario: View chart as map
+*/
+
+When('I click View As Map on a chart dashboard item', () => {
+    clickMenuButton(chartItemUid)
+    cy.contains('View as Map').click()
+})
+
+Then('the chart dashboard item displays as a map', () => {
+    getDashboardItem(chartItemUid)
+        .find(mapSel)
+        .should('exist')
+        .and('be.visible')
+})
+
+/*
+Scenario: View table as chart
+*/
+
+When('I click View As Chart on a table dashboard item', () => {
+    clickMenuButton(tableItemUid)
+    cy.contains('View as Chart').click()
+})
+
+Then('the table dashboard item displays as a chart', () => {
+    getDashboardItem(tableItemUid)
+        .find(chartSel)
+        .should('exist')
+        .and('be.visible')
+})
+
+/*
+Scenario: Open chart in Data Visualizer app
+*/
+
+When('I click Open in Data Visualizer app on a chart dashboard item', () => {
+    clickMenuButton(chartItemUid)
+
+    cy.contains('Open in Data Visualizer app')
+        .should('have.attr', 'href')
+        .and('include', chartItemVisUrl)
+
+    /**
+     * Since Cypress cannot work with multiple tabs and more
+     * than one domain in a single test, modify the link to:
+     *  1) open in the current Cypress tab instead of new tab
+     *  2) open on the test domain instead of the api domain
+     */
+    cy.contains('Open in Data Visualizer app')
+        .invoke('removeAttr', 'target')
+        .invoke(
+            'attr',
+            'href',
+            `${Cypress.config().baseUrl}/${chartItemVisUrl}`
+        )
+        .click()
+})
+
+Then('the chart is opened in the Data Visualizer app', () => {
+    // This url is a 404, but the goal is to confirm that
+    // clicking on the link actually navigates to another url.
+    cy.url().should('include', chartItemVisUrl)
+})
+
+/*
+Scenario: Open the interpretations panel
+*/
+
+When(
+    'I click Show interpretations and details on a chart dashboard item',
+    () => {
+        clickMenuButton(chartItemUid)
+        cy.contains('Show interpretations and details').click()
+    }
+)
+Then('the interpretations panel is displayed', () => {
+    getDashboardItem(chartItemUid)
+        .find(itemDetailsSel)
+        .contains('Chart details')
+        .scrollIntoView()
+        .should('be.visible')
+
+    getDashboardItem(chartItemUid)
+        .find(itemDetailsSel)
+        .contains('Interpretations')
+        .scrollIntoView()
+        .should('be.visible')
+})

cypress/integration/ui/view_dashboard.feature

@@ -2,39 +2,39 @@ Feature: Viewing dashboards
 
     @nonmutating
     Scenario: I switch between dashboards
-        Given I open the Antenatal Care dashboard
-        Then the Antenatal Care dashboard displays in view mode
+        Given I open the "Antenatal Care" dashboard
+        Then the "Antenatal Care" dashboard displays in view mode
         When I select the Immunization dashboard
-        Then the Immunization dashboard displays in view mode
+        Then the "Immunization" dashboard displays in view mode
 
     @nonmutating
     Scenario: I search for a dashboard
-        Given I open the Antenatal Care dashboard
+        Given I open the "Antenatal Care" dashboard
         When I search for dashboards containing Immunization
         Then Immunization and Immunization data dashboards are choices
         When I press enter in the search dashboard field
-        Then the Immunization dashboard displays in view mode
+        Then the "Immunization" dashboard displays in view mode
 
     @nonmutating
     Scenario: I search for a dashboard with nonmatching search text
-        Given I open the Antenatal Care dashboard
+        Given I open the "Antenatal Care" dashboard
         When I search for dashboards containing Noexist
         Then no dashboards are choices
         When I press enter in the search dashboard field
         Then dashboards list restored and dashboard doesn't change
 
     @nonmutating
     Scenario: I view the print layout preview
-        Given I open the Antenatal Care dashboard
+        Given I open the "Antenatal Care" dashboard
         When I click to preview the print layout
         Then the print layout displays
         When I click to exit print preview
-        Then the Antenatal Care dashboard displays in view mode
+        Then the "Antenatal Care" dashboard displays in view mode
 
     @nonmutating
     Scenario: I view the print one-item-per-page preview
-        Given I open the Antenatal Care dashboard
+        Given I open the "Antenatal Care" dashboard
         When I click to preview the print one-item-per-page
         Then the print one-item-per-page displays
         When I click to exit print preview
-        Then the Antenatal Care dashboard displays in view mode
+        Then the "Antenatal Care" dashboard displays in view mode