@dhis2-ui/header-bar 10.16.1 → 10.16.3-alpha.1

package/src/debug-info/use-debug-info.js

@@ -0,0 +1,15 @@
+import { useConfig } from '@dhis2/app-runtime'
+
+export const useDebugInfo = () => {
+    const { appName, appVersion, systemInfo } = useConfig()
+
+    return {
+        app_name: appName || null,
+        app_version: appVersion?.full || null,
+        dhis2_version: systemInfo?.version || null,
+        dhis2_revision: systemInfo?.revision || null,
+    }
+}
+
+export const useFormattedDebugInfo = () =>
+    JSON.stringify(useDebugInfo(), undefined, 2)

package/src/features/common/index.js

@@ -0,0 +1,14 @@
+import { Before, Given } from '@badeball/cypress-cucumber-preprocessor'
+
+export const baseUrl = 'https://domain.tld/'
+export const webCommons = 'https://domain.tld/dhis-web-commons/'
+
+Before(() => {
+    cy.intercept('GET', `${baseUrl}api/fileResources/avatarId/data`, {
+        fixture: 'HeaderBar/avatar.png',
+    }).as('avatar')
+})
+
+Given('the HeaderBar loads without an error', () => {
+    cy.visitStory('HeaderBarTesting', 'Default')
+})

package/src/features/the_headerbar_can_display_online_status/the_headerbar_displays_online_status.js

@@ -0,0 +1,158 @@
+import {
+    Before,
+    After,
+    Given,
+    Then,
+    When,
+} from '@badeball/cypress-cucumber-preprocessor'
+
+// see https://github.com/cypress-io/cypress/issues/17723#issuecomment-1457064322
+const goOffline = () => {
+    cy.log('**go offline**')
+        // stub every request with a StaticResponse to simulate network error
+        .then(() => cy.intercept('*', { forceNetworkError: true }))
+        .then(() =>
+            cy.window().then((win) => win.dispatchEvent(new Event('offline')))
+        )
+}
+const goOnline = () => {
+    // disable offline mode, otherwise we will break our tests :)
+    cy.log('**go online**')
+        // go back to normal network behavior
+        .then(() => cy.intercept('*'))
+        .then(() =>
+            cy.window().then((win) => win.dispatchEvent(new Event('online')))
+        )
+}
+
+Before(() => {
+    goOnline()
+})
+After(() => goOnline())
+
+Given(
+    'the HeaderBar loads without error with showOnlineStatus configured',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'Show Online Status')
+    }
+)
+
+Given('the HeaderBar loads without error when PWA is enabled', () => {
+    cy.visitStory('HeaderBarTesting', 'PWA Enabled')
+    cy.get(':contains("Online")').should('exist')
+})
+
+Given(
+    'the HeaderBar loads and is PWA enabled so online status messages will be visible',
+    () => {
+        cy.visitStory(
+            'HeaderBarTesting',
+            'Online Status Messaging With PWA Enabled'
+        )
+    }
+)
+
+Given('the viewport is narrower than 480px', () => {
+    cy.viewport(460, 660)
+})
+
+Then('the HeaderBar does not render online status', () => {
+    cy.get('[data-test="headerbar-online-status"]').should('not.exist')
+})
+
+Then('the HeaderBar renders online status', () => {
+    cy.get('[data-test="headerbar-online-status"]').should('exist')
+})
+
+Then('the HeaderBar displays only the desktop status badge', () => {
+    // This assumes default viewport size: 1000x660
+    cy.get('[data-test="headerbar-online-status"].badge').should('be.visible')
+    cy.get('[data-test="headerbar-online-status"].bar').should('not.be.visible')
+})
+
+Then('the status badge shows online', () => {
+    cy.get('[data-test="headerbar-online-status"].badge .label').should(
+        ($label) => {
+            expect($label.text()).to.equal('Online')
+        }
+    )
+    cy.get('[data-test="headerbar-online-status"].badge .icon').should(
+        ($icon) => {
+            expect($icon).to.have.class('online')
+        }
+    )
+})
+
+Then('the HeaderBar displays only the mobile status bar', () => {
+    cy.get('[data-test="headerbar-online-status"].bar').should('be.visible')
+    cy.get('[data-test="headerbar-online-status"].badge').should(
+        'not.be.visible'
+    )
+})
+
+Given('the browser goes offline', () => {
+    goOffline()
+})
+
+Then('the status badge shows offline', () => {
+    // cy.get('[data-test="headerbar-online-status"].badge .label')
+    //     .invoke('text')
+    //     .should('equal', 'Offline')
+
+    cy.get('[data-test="headerbar-online-status"].badge .label').should(
+        ($label) => {
+            expect($label.text()).to.equal('Offline')
+        }
+    )
+    cy.get('[data-test="headerbar-online-status"].badge .icon').should(
+        ($icon) => {
+            expect($icon).to.have.class('offline')
+        }
+    )
+})
+
+Then('no online status message text is displayed', () => {
+    cy.get('[data-test="headerbar-online-status"] .info').should('not.exist')
+    cy.get('[data-test="headerbar-online-status"] .info-dense').should(
+        'not.exist'
+    )
+})
+
+When('an online status message is sent', () => {
+    cy.get('button').contains('display online status message').click()
+})
+
+When('an online status message is removed', () => {
+    cy.get('button').contains('remove online status message').click()
+})
+
+Then('an online status message is displayed', () => {
+    cy.get('[data-test="headerbar-online-status"] .info').should(
+        'include.text',
+        '8 offline events'
+    )
+})
+
+Then(
+    'an online status message is displayed with formatting for small screens',
+    () => {
+        cy.get('[data-test="headerbar-online-status"] .info-dense').should(
+            'include.text',
+            '8 offline events'
+        )
+    }
+)
+
+Then('last online text is displayed in the status badge', () => {
+    cy.get('[data-test="headerbar-online-status"].badge .info').should(
+        'include.text',
+        'Last online'
+    )
+})
+
+Then('last online text is displayed in the mobile status bar', () => {
+    cy.get('[data-test="headerbar-online-status"].bar .info-dense').should(
+        'include.text',
+        'Last online'
+    )
+})

package/src/features/the_headerbar_can_display_online_status.feature

@@ -0,0 +1,57 @@
+Feature: The HeaderBar can display online status
+
+    # Configuring to show
+
+    Scenario: The HeaderBar doesn't display online status when not configured
+        Given the HeaderBar loads without an error
+        Then the HeaderBar does not render online status
+
+    Scenario: The HeaderBar displays online status when PWA is enabled
+        Given the HeaderBar loads without error when PWA is enabled
+        Then the HeaderBar renders online status
+
+    # Large / small screens & Online / Offline status
+
+    Scenario: The HeaderBar displays a badge on large screens
+        Given the HeaderBar loads without error when PWA is enabled
+        Then the HeaderBar displays only the desktop status badge
+        And the status badge shows online
+
+    Scenario: The HeaderBar displays a sub-bar on smaller screens
+        Given the HeaderBar loads without error when PWA is enabled
+        And the viewport is narrower than 480px
+        Then the HeaderBar displays only the mobile status bar
+
+    # This is not a complete test of the connection status functionality --
+    # see the app-runtime for detailed tests
+    Scenario: The HeaderBar displays an offline status when offline
+        Given the HeaderBar loads without error when PWA is enabled
+        And the browser goes offline
+        Then the status badge shows offline
+
+    # Online status message
+
+    Scenario: In the HeaderBar no online status message text is displayed by default
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        Then no online status message text is displayed
+
+    Scenario: In the HeaderBar the online status message text is displayed
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        When an online status message is sent
+        Then an online status message is displayed
+
+    Scenario: In the HeaderBar the online status message text can be removed
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        When an online status message is sent
+        Then an online status message is displayed
+        When an online status message is removed
+        Then no online status message text is displayed
+
+    # Online status message - small screens
+
+    Scenario: In the HeaderBar the online status message text can be set on small screens
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        And the viewport is narrower than 480px
+        Then no online status message text is displayed
+        When an online status message is sent
+        Then an online status message is displayed with formatting for small screens

package/src/features/the_headerbar_conditionally_renders_notification_icons/the_headerbar_conditionally_renders_notification_icons.js

@@ -0,0 +1,43 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the user has the ALL authority', () => {
+    cy.visitStory('HeaderBarTesting', 'User Has All Authority')
+})
+
+Given(
+    'the user has the M_dhis-web-interpretation and M_dhis-web-messaging authority',
+    () => {
+        cy.visitStory(
+            'HeaderBarTesting',
+            'User Has Web Interpretation And Messaging Authority'
+        )
+    }
+)
+
+Given('the user has the M_dhis-web-interpretation authority', () => {
+    cy.visitStory('HeaderBarTesting', 'User Has Web Interpretation Authority')
+})
+
+Given('the user has the M_dhis-web-messaging authority', () => {
+    cy.visitStory('HeaderBarTesting', 'User Has Web Messaging Authority')
+})
+
+Given('the user has authority for none of the apps', () => {
+    cy.visitStory('HeaderBarTesting', 'User Has No Authorities')
+})
+
+Then('the messaging app icon is not rendered', () => {
+    cy.get('[data-test="headerbar-messages"]').should('not.exist')
+})
+
+Then('the messaging app icon is rendered', () => {
+    cy.get('[data-test="headerbar-messages"]').should('exist')
+})
+
+Then('the interpretations app icon is not rendered', () => {
+    cy.get('[data-test="headerbar-interpretations"]').should('not.exist')
+})
+
+Then('the interpretations app icon is rendered', () => {
+    cy.get('[data-test="headerbar-interpretations"]').should('exist')
+})

package/src/features/the_headerbar_conditionally_renders_notification_icons.feature

@@ -0,0 +1,26 @@
+Feature: The HeaderBar conditionally renders notification icons
+
+    Scenario: The user has the All authority
+        Given the user has the ALL authority
+        Then the interpretations app icon is rendered
+        And the messaging app icon is rendered
+
+    Scenario: The user has authority for both apps
+        Given the user has the M_dhis-web-interpretation and M_dhis-web-messaging authority
+        Then the interpretations app icon is rendered
+        And the messaging app icon is rendered
+
+    Scenario: The user has authority for the interpretations app only
+        Given the user has the M_dhis-web-interpretation authority
+        Then the interpretations app icon is rendered
+        But the messaging app icon is not rendered
+
+    Scenario: The user has authority for the messaging app only
+        Given the user has the M_dhis-web-messaging authority
+        Then the messaging app icon is rendered
+        But the interpretations app icon is not rendered
+
+    Scenario: The user has authority for none of the apps
+        Given the user has authority for none of the apps
+        Then the messaging app icon is not rendered
+        And the interpretations app icon is not rendered

package/src/features/the_headerbar_contains_a_menu_to_all_apps/common.js

@@ -0,0 +1,5 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('the HeaderBar dos not display the app menu', () => {
+    cy.get('[data-test="headerbar-apps-menu"]').should('not.exist')
+})

package/src/features/the_headerbar_contains_a_menu_to_all_apps/the_app_menu_closes_when_the_user_clicks_outside.js

@@ -0,0 +1,9 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+
+When('the user opens the menu', () => {
+    cy.get('[data-test="headerbar-apps-icon"]').click()
+})
+
+When('the user clicks outside of the menu', () => {
+    cy.get('[data-test="headerbar-title"]').click()
+})

package/src/features/the_headerbar_contains_a_menu_to_all_apps/the_headerbar_contains_a_menu_icon.js

@@ -0,0 +1,5 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('the HeaderBar displays a menu icon', () => {
+    cy.get('[data-test="headerbar-apps-icon"]').should('exist')
+})

package/src/features/the_headerbar_contains_a_menu_to_all_apps/the_user_will_be_offered_a_menu_with_5_apps.js

@@ -0,0 +1,16 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+When('the user clicks on the menu icons', () => {
+    cy.get('[data-test="headerbar-apps-icon"]').click()
+})
+
+Then('the menu opens', () => {
+    cy.get('[data-test="headerbar-apps-menu"]').should('be.visible')
+})
+
+Then('contains items with links', () => {
+    cy.get('[data-test="headerbar-apps-menu-list"]')
+        .find('a')
+        .its('length')
+        .should('be.greaterThan', 0)
+})

package/src/features/the_headerbar_contains_a_menu_to_all_apps.feature

@@ -0,0 +1,21 @@
+Feature: The HeaderBar contains a menu to all apps
+
+    Scenario: The HeaderBar contains a menu icon
+        Given the HeaderBar loads without an error
+        Then the HeaderBar displays a menu icon
+
+    Scenario: The menu is closed by default
+        Given the HeaderBar loads without an error
+        Then the HeaderBar dos not display the app menu
+
+    Scenario: The user will be offered a menu with apps
+        Given the HeaderBar loads without an error
+        When the user clicks on the menu icons
+        Then the menu opens
+        And contains items with links
+
+    Scenario: The app menu closes when the user clicks outside
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        And the user clicks outside of the menu
+        Then the HeaderBar dos not display the app menu

package/src/features/the_headerbar_contains_a_profile_menu/common.js

@@ -0,0 +1,14 @@
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('the HeaderBar does not display the profile menu', () => {
+    cy.get('[data-test="headerbar-profile-menu"]').should('not.exist')
+})
+
+When('the user opens the menu', () => {
+    cy.get(
+        `
+        [data-test="headerbar-profile-icon-text"],
+        [data-test="headerbar-profile-icon-image"]
+    `
+    ).click()
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js

@@ -0,0 +1,30 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'the HeaderBar loads without an error and the user does not have an avatar',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'Default')
+    }
+)
+
+Then(`the headerbar contains a text icon of size 36px`, () => {
+    cy.fixture('HeaderBar/me').then(() => {
+        cy.get('[data-test="headerbar-profile-icon-text"]')
+            .should('be.visible')
+            .and('have.css', 'height', '36px')
+            .and('have.css', 'width', '36px')
+    })
+})
+
+When('the user clicks on the text icon', () => {
+    cy.get('[data-test="headerbar-profile-icon-text"]').click()
+})
+
+Then(`the profile menu contains a text icon of size 48px`, () => {
+    cy.fixture('HeaderBar/me').then(() => {
+        cy.get('[data-test="headerbar-profile-menu-icon-text"]')
+            .should('be.visible')
+            .and('have.css', 'height', '48px')
+            .and('have.css', 'width', '48px')
+    })
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_an_image_icon_if_the_user_has_an_avatar.js

@@ -0,0 +1,23 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the HeaderBar loads without an error and the user has an avatar', () => {
+    cy.visitStory('HeaderBarTesting', 'Me With Avatar')
+})
+
+Then('the headerbar contains an image icon of size 36px', () => {
+    cy.get('[data-test="headerbar-profile-icon-image"]')
+        .should('be.visible')
+        .and('have.css', 'height', '36px')
+        .and('have.css', 'width', '36px')
+})
+
+When('the user clicks on the image icon', () => {
+    cy.get('[data-test="headerbar-profile-icon-image"]').click()
+})
+
+Then('the profile menu contains an image icon of size 48px', () => {
+    cy.get('[data-test="headerbar-profile-menu-icon-image"]')
+        .should('be.visible')
+        .and('have.css', 'height', '48px')
+        .and('have.css', 'width', '48px')
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_menu_is_closed_by_default.js

@@ -0,0 +1 @@
+// all step definitions are shared with other scenarios

package/src/features/the_headerbar_contains_a_profile_menu/the_menu_opens.js

@@ -0,0 +1,14 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+When('the user clicks on the profile icons', () => {
+    cy.get(
+        `
+        [data-test="headerbar-profile-icon-text"],
+        [data-test="headerbar-profile-icon-image"]
+    `
+    ).click()
+})
+
+Then('the menu opens', () => {
+    cy.get('[data-test="headerbar-profile-menu"]').should('be.visible')
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_profile_menu_closes_when_the_user_clicks_outside.js

@@ -0,0 +1,5 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+
+When('the user clicks outside of the menu', () => {
+    cy.get('[data-test="headerbar-title"]').click()
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_user_can_edit_his_profile.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('contains a link to edit the profile', () => {
+    cy.get('[data-test="headerbar-profile-edit-profile-link"]').should(
+        'be.visible'
+    )
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_his_account.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('contains a link to the user account', () => {
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        expect(lis.eq(1)).to.be.visible
+    })
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_about_dhis2_page.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('contains a link to the About DHIS2 page', () => {
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        expect(lis.eq(3)).to.be.visible
+    })
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_help_page.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('contains a link to the help page', () => {
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        expect(lis.eq(2)).to.be.visible
+    })
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_user_can_go_to_the_settings.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('contains a link to the settings', () => {
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        expect(lis.eq(0)).to.be.visible
+    })
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js

@@ -0,0 +1,53 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { baseUrl } from '../common/index.js'
+
+const logoutUrl = `${baseUrl}dhis-web-commons-security/logout.action`
+
+Then('contains a link to log out the user', () => {
+    cy.get('[data-test="headerbar-profile-menu"] > li').should((lis) => {
+        const menuItem = lis.eq(4)
+        expect(menuItem).to.be.visible
+        expect(menuItem.find('a')).to.have.attr('href', logoutUrl)
+    })
+})
+
+When('there is no loading mask', () => {
+    cy.get('[data-test="headerbar-profile-menu-loading-mask"]').should(
+        'not.exist'
+    )
+})
+
+Then('the user clicks the link to log out', () => {
+    cy.get('[data-test="headerbar-profile-menu"] > li:nth-child(5)').trigger(
+        'click'
+    )
+})
+
+Then('a loading mask covers the screen', () => {
+    cy.get('[data-test="headerbar-profile-menu-loading-mask"]').should(
+        'be.visible'
+    )
+})
+
+// Currently not working
+When('clearSensitiveCaches is called', async () => {
+    // Open caches to test 'clearSensitiveCaches':
+    // A keepable cache
+    await caches.open('workbox-precache-v2-asdf')
+    // Other, potentially-sensitive cache
+    await caches.open('test-cache')
+
+    // Todo: wait for function to resolve (loading mask goes away?)
+    const keys = await caches.keys()
+    // Static asset caches are kept
+    expect(keys).to.include('workbox-precache-v2-asdf')
+    // Others are removed
+    expect(keys).not.to.include('test-cache')
+})
+
+// Currently not working
+Then('the window navigates to the logout URL', () => {
+    // (Currently unable to stub window.location.assign;
+    // would be done in 'Then the user clicks link to log out')
+    // cy.get('@locationAssign').should('be.calledWith', logoutUrl)
+})

package/src/features/the_headerbar_contains_a_profile_menu/the_user_name_and_email_are_displayed.js

@@ -0,0 +1,22 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('contains the user name', () => {
+    cy.all(
+        () => cy.window(),
+        () => cy.get('[data-test="headerbar-profile-username"]')
+    ).then(([win, $name]) => {
+        console.log('win.dataProviderData', win.dataProviderData)
+        const { name } = win.dataProviderData.me
+        expect($name.text()).to.equal(name)
+    })
+})
+
+Then('contains the user email', () => {
+    cy.all(
+        () => cy.window(),
+        () => cy.get('[data-test="headerbar-profile-user-email"]')
+    ).then(([win, $email]) => {
+        const { email } = win.dataProviderData.me
+        expect($email.text()).to.equal(email)
+    })
+})