Merge pull request #3169 from dhis2/feat/release-DHIS2-18441-and-DHIS…

…2-13038

feat: release DHIS2-18441 and DHIS2-13038

.eslintrc.js

@@ -2,4 +2,15 @@ const { config } = require('@dhis2/cli-style')
 
 module.exports = {
     extends: [config.eslintReact, 'plugin:cypress/recommended'],
+    overrides: [
+        {
+            files: ['src/**/*.spec.js'],
+            rules: {
+                'react/prop-types': 'off',
+                'react/display-name': 'off',
+                'react/no-unknown-property': 'off',
+                'no-unused-vars': ['error', { ignoreRestSiblings: true }],
+            },
+        },
+    ],
 }

config/testSetup.js

@@ -0,0 +1,9 @@
+import { configure } from '@testing-library/dom'
+import '@testing-library/jest-dom'
+import ResizeObserver from 'resize-observer-polyfill'
+
+global.ResizeObserver = ResizeObserver
+
+configure({
+    testIdAttribute: 'data-test',
+})

cypress/e2e/common/add_a_FILTERTYPE_filter.js

@@ -11,7 +11,7 @@ const OU_ID = 'ImspTQPwCqd' //Sierra Leone
 const FACILITY_TYPE = 'Clinic'
 
 When('I add a {string} filter', (dimensionType) => {
-    cy.contains('Add filter').click()
+    cy.containsExact('Filter').click()
 
     // select an item in the modal
     switch (dimensionType) {

cypress/e2e/common/click_on_the_FILTERTYPE_filter_badge.js

@@ -2,5 +2,8 @@ import { When } from '@badeball/cypress-cucumber-preprocessor'
 import { filterBadgeSel } from '../../elements/dashboardFilter.js'
 
 When('I click on the {string} filter badge', (filterName) => {
-    cy.get(filterBadgeSel).find('span:visible').contains(filterName).click()
+    cy.get(filterBadgeSel)
+        .find('button')
+        .contains(filterName)
+        .click({ force: true })
 })

cypress/e2e/common/open_print_layout.js

@@ -1,8 +1,7 @@
 import { When } from '@badeball/cypress-cucumber-preprocessor'
-import { clickViewActionButton } from '../../elements/viewDashboard.js'
 
 When('I click to preview the print layout', () => {
-    clickViewActionButton('More')
+    cy.get('[data-test="more-actions-button"]').click()
     cy.get('[data-test="print-menu-item"]').click()
     cy.get('[data-test="print-layout-menu-item"]').click()
 })

cypress/e2e/common/open_the_SL_dashboard.js

@@ -1,14 +1,11 @@
 import { Given } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboards } from '../../assets/backends/index.js'
 // import { gridItemSel, chartSel } from '../../elements/dashboardItem.js'
-import {
-    dashboardTitleSel,
-    dashboardChipSel,
-} from '../../elements/viewDashboard.js'
-import { EXTENDED_TIMEOUT } from '../../support/utils.js'
+import { getNavigationMenuItem } from '../../elements/navigationMenu.js'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
 
 Given('I open the {string} dashboard', (title) => {
-    cy.get(dashboardChipSel, EXTENDED_TIMEOUT).contains(title).click()
+    getNavigationMenuItem(title).click()
 
     cy.location().should((loc) => {
         expect(loc.hash).to.equal(dashboards[title].route)

cypress/e2e/dashboard_filter/create_dashboard.js

@@ -1,9 +1,7 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { gridItemSel } from '../../elements/dashboardItem.js'
-import {
-    dashboardChipSel,
-    dashboardTitleSel,
-} from '../../elements/viewDashboard.js'
+import { getNavigationMenuItem } from '../../elements/navigationMenu.js'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
 import {
     EXTENDED_TIMEOUT,
     createDashboardTitle,
@@ -79,9 +77,7 @@ When('I add items and save', () => {
 })
 
 Given('I open an existing dashboard', () => {
-    cy.get(dashboardChipSel, EXTENDED_TIMEOUT)
-        .contains(TEST_DASHBOARD_TITLE)
-        .click()
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE).click()
 })
 
 // Some map visualization load very slowly:

cypress/e2e/dashboard_filter/dashboard_filter.js

@@ -2,6 +2,7 @@ import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
 import {
     filterBadgeSel,
     dimensionsModalSel,
+    filterBadgeDeleteBtnSel,
 } from '../../elements/dashboardFilter.js'
 // import {
 //     gridItemSel,
@@ -128,7 +129,7 @@ Then('the filter modal is opened', () => {
 })
 
 When('I remove the {string} filter', () => {
-    cy.get(filterBadgeSel).find('button').contains('Remove').click()
+    cy.get(filterBadgeDeleteBtnSel).click()
 })
 
 Then('the filter is removed from the dashboard', () => {

cypress/e2e/edit_dashboard/edit_dashboard.js

@@ -9,9 +9,10 @@ import {
     titleInputSel,
     clickEditActionButton,
 } from '../../elements/editDashboard.js'
+import { getNavigationMenuItem } from '../../elements/navigationMenu.js'
 import {
-    dashboardChipSel,
     dashboardTitleSel,
+    dashboardsNavMenuButtonSel,
 } from '../../elements/viewDashboard.js'
 import { EXTENDED_TIMEOUT, createDashboardTitle } from '../../support/utils.js'
 
@@ -79,9 +80,8 @@ Then('different valid dashboard displays in view mode', () => {
 })
 
 Given('I open existing dashboard', () => {
-    cy.get(dashboardChipSel, EXTENDED_TIMEOUT)
-        .contains(TEST_DASHBOARD_TITLE)
-        .click()
+    cy.get(dashboardsNavMenuButtonSel, EXTENDED_TIMEOUT).click()
+    cy.get('[role="menu"]').find('li').contains(TEST_DASHBOARD_TITLE).click()
 
     cy.location().should((loc) => {
         const currentRoute = getRouteFromHash(loc.hash)
@@ -124,8 +124,7 @@ Scenario: I delete a dashboard
 */
 
 Then('the dashboard is deleted and first starred dashboard displayed', () => {
-    cy.get(dashboardChipSel).contains(TEST_DASHBOARD_TITLE).should('not.exist')
-
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE).should('not.exist')
     cy.get(dashboardTitleSel).should('exist').should('not.be.empty')
 })
 

cypress/e2e/edit_dashboard/star_dashboard.js

@@ -1,25 +1,27 @@
 import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import {
-    starSel,
+    getNavigationMenuItem,
+    closeNavigationMenu,
+} from '../../elements/navigationMenu.js'
+import {
     dashboardStarredSel,
     dashboardUnstarredSel,
-    dashboardChipSel,
-    chipStarSel,
+    navMenuItemStarIconSel,
 } from '../../elements/viewDashboard.js'
 import { TEST_DASHBOARD_TITLE } from './edit_dashboard.js'
 
 // Scenario: I star the dashboard
 When('I click to star the dashboard', () => {
     cy.intercept('POST', '**/favorite').as('starDashboard')
 
-    cy.get(starSel).click()
+    cy.get(dashboardUnstarredSel).click()
     cy.wait('@starDashboard').its('response.statusCode').should('eq', 200)
 })
 
 When('I click to unstar the dashboard', () => {
     cy.intercept('DELETE', '**/favorite').as('unstarDashboard')
 
-    cy.get(starSel).click()
+    cy.get(dashboardStarredSel).click()
     cy.wait('@unstarDashboard').its('response.statusCode').should('eq', 200)
 })
 
@@ -28,22 +30,21 @@ Then('the dashboard is starred', () => {
     cy.get(dashboardStarredSel).should('be.visible')
     cy.get(dashboardUnstarredSel).should('not.exist')
 
-    cy.get(dashboardChipSel)
-        .contains(TEST_DASHBOARD_TITLE)
-        .parent()
-        .siblings(chipStarSel)
-        .first()
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE)
+        .find(navMenuItemStarIconSel)
         .should('be.visible')
+
+    closeNavigationMenu()
 })
 
 Then('the dashboard is not starred', () => {
     // check for the unfilled star next to the title
     cy.get(dashboardUnstarredSel).should('be.visible')
     cy.get(dashboardStarredSel).should('not.exist')
 
-    cy.get(dashboardChipSel)
-        .contains(TEST_DASHBOARD_TITLE)
-        .parent()
-        .siblings()
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE)
+        .find(navMenuItemStarIconSel)
         .should('not.exist')
+
+    closeNavigationMenu()
 })

cypress/e2e/filter_restrict/filter_restrict.js

@@ -146,7 +146,7 @@ When('I save the dashboard', () => {
 })
 
 When('I click Add Filter', () => {
-    clickViewActionButton('Add filter')
+    clickViewActionButton('Filter')
 })
 
 Then('I see Facility Ownership and no other dimensions', () => {
@@ -168,7 +168,7 @@ Scenario: I restrict filters to no dimensions and do not see Add Filter in dashb
 */
 
 Then('Add Filter button is not visible', () => {
-    cy.contains('Add filter').should('not.exist')
+    cy.containsExact('Filter').should('not.exist')
 })
 
 When('I delete the dashboard', () => {

cypress/e2e/offline/offline.js

@@ -212,7 +212,7 @@ Then(
         // edit, sharing, starring, filtering, all options under more
         getViewActionButton('Edit').should('be.disabled')
         getViewActionButton('Share').should('be.disabled')
-        getViewActionButton('Add filter').should('be.disabled')
+        getViewActionButton('Filter').should('be.disabled')
         getViewActionButton('More').should('be.enabled')
 
         checkCorrectMoreOptionsEnabledState(false, cacheState)

cypress/e2e/responsive_dashboard/responsive_dashboard.js

@@ -27,10 +27,7 @@ Then('the small screen view is shown', () => {
     //titlebar - only the More button and the title
     cy.get('button').contains('Edit').should('not.be.visible')
     cy.get('button').contains('Share').should('not.be.visible')
-    cy.get('button').contains('Add filter').should('not.be.visible')
-
-    cy.get('button.small').contains('More').should('be.visible')
-    cy.get('button').not('.small').contains('More').should('not.be.visible')
+    cy.get('button').contains('Filter').should('not.be.visible')
 })
 
 When('I restore the wide screen', () => {
@@ -44,10 +41,7 @@ Then('the wide screen view is shown', () => {
 
     cy.get('button').contains('Edit').should('be.visible')
     cy.get('button').contains('Share').should('be.visible')
-    cy.get('button').contains('Add filter').should('be.visible')
-
-    cy.get('button').not('.small').contains('More').should('be.visible')
-    cy.get('button.small').contains('More').should('not.be.visible')
+    cy.get('button').contains('Filter').should('be.visible')
 })
 
 Then('the small screen edit view is shown', () => {

cypress/e2e/slideshow.feature

@@ -0,0 +1,31 @@
+Feature: Slideshow
+
+    Scenario: I view a dashboard in slideshow
+        Given I open the "Delivery" dashboard
+        When I click the slideshow button
+        Then item 1 is shown in fullscreen
+        When I click the next slide button
+        Then item 2 is shown in fullscreen
+        When I click the previous slide button
+        Then item 1 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown
+
+
+    Scenario: I view fullscreen on the second item of the dashboard
+        Given I open the "Delivery" dashboard
+        When I click the fullscreen button on the second item
+        Then item 2 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown
+
+    Scenario: I view fullscreen on the third item of the dashboard and navigate backwards
+        Given I open the "Delivery" dashboard
+        When I click the fullscreen button on the third item
+        Then item 3 is shown in fullscreen
+        When I click the previous slide button
+        Then item 2 is shown in fullscreen
+        When I click the previous slide button
+        Then item 1 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown

cypress/e2e/slideshow/index.js

@@ -0,0 +1 @@
+'../common/index.js'

cypress/e2e/slideshow/slideshow.js

@@ -0,0 +1,103 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import {
+    getDashboardItem,
+    clickMenuButton,
+} from '../../elements/dashboardItem.js'
+
+const sortedDashboardItemIds = ['GaVhJpqABYX', 'qXsjttMYuoZ', 'Rwb3oXJ3bZ9']
+
+const assertItemIsVisible = (slideshowItemIndex) => {
+    getDashboardItem(sortedDashboardItemIds[slideshowItemIndex]).should(
+        'have.css',
+        'opacity',
+        '1'
+    )
+}
+
+const assertItemIsNotVisible = (slideshowItemIndex) => {
+    getDashboardItem(sortedDashboardItemIds[slideshowItemIndex]).should(
+        'have.css',
+        'opacity',
+        '0'
+    )
+}
+
+const getSlideshowExitButton = () =>
+    cy.getByDataTest('slideshow-exit-button', { timeout: 15000 })
+
+When('I click the slideshow button', () => {
+    cy.get('button').contains('Slideshow').realClick()
+})
+
+Then('item 1 is shown in fullscreen', () => {
+    getSlideshowExitButton().should('be.visible')
+
+    // check that only the first item is shown
+    assertItemIsVisible(0)
+    assertItemIsNotVisible(1)
+    assertItemIsNotVisible(2)
+
+    cy.getByDataTest('slideshow-page-counter').should('have.text', '1 / 11')
+
+    // visible item does not have context menu button
+    getDashboardItem(sortedDashboardItemIds[0])
+        .findByDataTest('dashboarditem-menu-button')
+        .should('not.exist')
+})
+
+When('I click the exit slideshow button', () => {
+    getSlideshowExitButton().realClick()
+})
+
+Then('the normal view is shown', () => {
+    getSlideshowExitButton().should('not.exist')
+
+    // check that multiple items are shown
+    assertItemIsVisible(0)
+    assertItemIsVisible(1)
+    assertItemIsVisible(2)
+
+    // items have context menu button
+    getDashboardItem(sortedDashboardItemIds[0])
+        .findByDataTest('dashboarditem-menu-button')
+        .should('be.visible')
+
+    getDashboardItem(sortedDashboardItemIds[1])
+        .findByDataTest('dashboarditem-menu-button')
+        .should('be.visible')
+})
+
+// When I click the next slide button
+When('I click the next slide button', () => {
+    cy.getByDataTest('slideshow-next-button').realClick()
+})
+
+Then('item 2 is shown in fullscreen', () => {
+    assertItemIsNotVisible(0)
+    assertItemIsVisible(1)
+    assertItemIsNotVisible(2)
+
+    cy.getByDataTest('slideshow-page-counter').should('have.text', '2 / 11')
+})
+
+When('I click the previous slide button', () => {
+    cy.getByDataTest('slideshow-prev-button').realClick()
+})
+
+When('I click the fullscreen button on the second item', () => {
+    clickMenuButton(sortedDashboardItemIds[1])
+    cy.contains('View fullscreen').realClick()
+})
+
+When('I click the fullscreen button on the third item', () => {
+    clickMenuButton(sortedDashboardItemIds[2])
+    cy.contains('View fullscreen').realClick()
+})
+
+Then('item 3 is shown in fullscreen', () => {
+    assertItemIsNotVisible(0)
+    assertItemIsNotVisible(1)
+    assertItemIsVisible(2)
+
+    cy.getByDataTest('slideshow-page-counter').should('have.text', '3 / 11')
+})