Merge branch 'feat/header-bar-design-ui-update' of github.com:dhis2/dashboard-app into feat/header-bar-design-ui-update

Author: janhenrikoverland

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('button').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 {
-    dashboardsNavMenuButtonSel,
-    dashboardTitleSel,
-} from '../../elements/viewDashboard.js'
+import { getNavigationMenuItem } from '../../elements/navigationMenu.js'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
 import {
     EXTENDED_TIMEOUT,
     createDashboardTitle,
@@ -79,8 +77,7 @@ When('I add items and save', () => {
 })
 
 Given('I open an existing dashboard', () => {
-    cy.get(dashboardsNavMenuButtonSel, EXTENDED_TIMEOUT).click()
-    cy.get('[role="menu"]').find('li').contains(TEST_DASHBOARD_TITLE).click()
+    getNavigationMenuItem(TEST_DASHBOARD_TITLE).click()
 })
 
 // Some map visualization load very slowly:

cypress/e2e/dashboard_filter/dashboard_filter.js

@@ -23,7 +23,6 @@ Scenario: I add a Period filter
 */
 
 Then('the Period filter is applied to the dashboard', () => {
-    console.log('HENKIE!!!!!!!!!!')
     cy.get(filterBadgeSel).contains(`Period: ${PERIOD}`).should('be.visible')
 
     // check the CHART

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.contains('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', () => {