@dhis2-ui/header-bar 10.16.2 → 10.16.3

package/src/features/the_headerbar_contains_a_profile_menu.feature

@@ -0,0 +1,73 @@
+Feature: The HeaderBar contains a profile menu
+
+    Scenario: The HeaderBar shows a text icon if the user does not have an avatar
+        Given the HeaderBar loads without an error and the user does not have an avatar
+        Then the headerbar contains a text icon of size 36px
+        When the user clicks on the text icon
+        Then the profile menu contains a text icon of size 48px
+
+    Scenario: The HeaderBar shows an image icon if the user has an avatar
+        Given the HeaderBar loads without an error and the user has an avatar
+        Then the headerbar contains an image icon of size 36px
+        When the user clicks on the image icon
+        Then the profile menu contains an image icon of size 48px
+
+    Scenario: The menu is closed by default
+        Given the HeaderBar loads without an error
+        Then the HeaderBar does not display the profile menu
+
+    Scenario: The menu opens
+        Given the HeaderBar loads without an error
+        When the user clicks on the profile icons
+        Then the menu opens
+
+    Scenario: The user name and email are displayed
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        And contains the user name
+        And contains the user email
+
+    Scenario: The user can edit his profile
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        Then contains a link to edit the profile
+
+    Scenario: The user can go to the settings
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        Then contains a link to the settings
+
+    Scenario: The user can go to his account
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        Then contains a link to the user account
+
+    Scenario: The user can go to the help page
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        Then contains a link to the help page
+
+    Scenario: The user can go to the About DHIS2 page
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        Then contains a link to the About DHIS2 page
+
+    Scenario: The user can log out
+        Given the HeaderBar loads without an error
+        When the user opens the menu
+        Then contains a link to log out the user
+        And there is no loading mask
+
+    # The following are omitted because of testing complications
+    # around navigation:
+
+    # Then the user clicks the link to log out
+    # Then a loading mask covers the screen
+    # And clearSensitiveCaches is called
+    # Then the window navigates to the logout URL
+
+    Scenario: The profile 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 does not display the profile menu

package/src/features/the_headerbar_displays_a_link_to_interpretations_and_an_unread_count/the_headerbar_displays_a_link_to_the_interpretations.js

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

package/src/features/the_headerbar_displays_a_link_to_interpretations_and_an_unread_count/there_are_no_unread_interpretations.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('there are 0 unread interpretations', () => {
+    cy.visitStory('HeaderBarTesting', 'Zero Unread Interpretations')
+})
+
+Then('the interpretations link does not contain a count', () => {
+    cy.get('[data-test="headerbar-interpretations-count"]').should('not.exist')
+})

package/src/features/the_headerbar_displays_a_link_to_interpretations_and_an_unread_count/there_are_some_unread_interpretations.js

@@ -0,0 +1,12 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then(
+    'the interpretations link contains an icon with a number greater than 0',
+    () => {
+        cy.get('[data-test="headerbar-interpretations-count"]').should(
+            ($count) => {
+                expect(parseInt($count.text(), 10)).to.be.greaterThan(0)
+            }
+        )
+    }
+)

package/src/features/the_headerbar_displays_a_link_to_interpretations_and_an_unread_count.feature

@@ -0,0 +1,13 @@
+Feature: The HeaderBar displays a link to interpretations and an unread count
+
+    Scenario: The HeaderBar displays a link to the interpretations
+        Given the HeaderBar loads without an error
+        Then the HeaderBar contains a link to the interpretations
+
+    Scenario: There are some unread interpretations
+        Given the HeaderBar loads without an error
+        Then the interpretations link contains an icon with a number greater than 0
+
+    Scenario: There are no unread interpretations
+        Given there are 0 unread interpretations
+        Then the interpretations link does not contain a count

package/src/features/the_headerbar_displays_a_link_to_messages_and_an_unread_count/the_headerbar_displays_a_link_to_the_messages.js

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

package/src/features/the_headerbar_displays_a_link_to_messages_and_an_unread_count/there_are_no_unread_messages.js

@@ -0,0 +1,9 @@
+import { Then, Given } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('there are 0 unread messages', () => {
+    cy.visitStory('HeaderBarTesting', 'Zero Unread Messages')
+})
+
+Then('the messages link does not contain a count', () => {
+    cy.get('[data-test="headerbar-messages-count"]').should('not.exist')
+})

package/src/features/the_headerbar_displays_a_link_to_messages_and_an_unread_count/there_are_some_unread_messages.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Then('the messages link contains an icon with a number greater than 0', () => {
+    cy.get('[data-test="headerbar-messages-count"]').should(($count) => {
+        expect(parseInt($count.text(), 10)).to.be.greaterThan(0)
+    })
+})

package/src/features/the_headerbar_displays_a_link_to_messages_and_an_unread_count.feature

@@ -0,0 +1,13 @@
+Feature: The HeaderBar displays a link to messages and an unread count
+
+    Scenario: The HeaderBar displays a link to the messages
+        Given the HeaderBar loads without an error
+        Then the HeaderBar contains a link to the messages
+
+    Scenario: There are some unread messages
+        Given the HeaderBar loads without an error
+        Then the messages link contains an icon with a number greater than 0
+
+    Scenario: There are no unread messages
+        Given there are 0 unread messages
+        Then the messages link does not contain a count

package/src/features/the_headerbar_should_contain_a_logo_that_links_to_the_homepage/headerbar_contains_logo.js

@@ -0,0 +1,12 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+import { baseUrl } from '../common/index.js'
+
+Then('the HeaderBar should display the dhis2 logo', () => {
+    cy.get('[data-test="headerbar-logo"]').should('be.visible')
+})
+
+Then('the logo should link to the homepage', () => {
+    cy.get('[data-test="headerbar-logo"] a').should(($a) => {
+        expect($a.attr('href')).to.equal(baseUrl)
+    })
+})

package/src/features/the_headerbar_should_contain_a_logo_that_links_to_the_homepage.feature

@@ -0,0 +1,6 @@
+Feature: The HeaderBar should contain a logo that links to the homepage
+
+    Scenario: HeaderBar contains logo
+        Given the HeaderBar loads without an error
+        Then the HeaderBar should display the dhis2 logo
+        And the logo should link to the homepage

package/src/features/the_headerbar_should_display_app_update_notification/index.js

@@ -0,0 +1,52 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the HeaderBar is rendered without an available update', () => {
+    cy.visitStory('HeaderBarTesting', 'default')
+})
+
+Given('the HeaderBar is rendered with an available update', () => {
+    cy.visitStory('HeaderBarTesting', 'With Update Available Notification')
+})
+
+Given(
+    'the HeaderBar is rendered with no app name and an available update',
+    () => {
+        cy.visitStory(
+            'HeaderBarTesting',
+            'With Update Available Notification No App Name'
+        )
+    }
+)
+
+When('the user opens the profile menu', () => {
+    cy.get('[data-test="headerbar-profile"] > button').click()
+})
+
+Then('the update notification should not be displayed', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').should(
+        'not.exist'
+    )
+})
+
+Then('the update notification should be displayed', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
+        .should('contain', 'New Data Visualizer version available')
+        .should('contain', 'Click to reload')
+})
+
+Then('the update notification should be displayed without app name', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]')
+        .should('contain', 'New app version available')
+        .should('contain', 'Click to reload')
+})
+
+When('the user clicks the update notification', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').click()
+})
+
+Then('the profile menu should not be shown', () => {
+    cy.get('[data-test="headerbar-profile-menu"]').should('not.exist')
+})
+Then('a callback should display a test div', () => {
+    cy.contains('The callback was successful').should('be.visible')
+})

package/src/features/the_headerbar_should_display_app_update_notification.feature

@@ -0,0 +1,22 @@
+Feature: The HeaderBar should display app update notification
+
+    Scenario: No app update is available
+        Given the HeaderBar is rendered without an available update
+        When the user opens the profile menu
+        Then the update notification should not be displayed
+
+    Scenario: An app update is available
+        Given the HeaderBar is rendered with an available update
+        When the user opens the profile menu
+        Then the update notification should be displayed
+
+    Scenario: A callback is executed when the user click on the update notification
+        Given the HeaderBar is rendered with an available update
+        When the user opens the profile menu
+        When the user clicks the update notification
+        Then a callback should display a test div
+    
+    Scenario: An app update is available but not app name was specified
+        Given the HeaderBar is rendered with no app name and an available update
+        When the user opens the profile menu
+        Then the update notification should be displayed without app name

package/src/features/the_headerbar_should_display_debug_version_infos/index.js

@@ -0,0 +1,130 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'the HeaderBar is rendered without an instance version in runtime context',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'With Unknown Instance Version')
+    }
+)
+
+Given(
+    'the HeaderBar is rendered with an app name and app version in runtime context',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'default')
+    }
+)
+
+Given('the HeaderBar is rendered without app name in runtime context', () => {
+    cy.visitStory('HeaderBarTesting', 'With Unknown App Name')
+})
+
+Given(
+    'the HeaderBar is rendered with an app name but without app version in runtime context',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'With Unknown App Version')
+    }
+)
+
+Given(
+    'the HeaderBar is rendered without app name or app version in runtime context',
+    () => {
+        cy.visitStory('HeaderBarTesting', 'With Unknown App Name And Version')
+    }
+)
+
+When('the user opens the profile menu', () => {
+    cy.get('[data-test="headerbar-profile"] > button').click()
+})
+
+Then("the app's name and version should be displayed", () => {
+    cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should(
+        'contain',
+        'TestApp 101.2.3-beta.4'
+    )
+})
+
+Then("the app's name with unknown version should be displayed", () => {
+    cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should(
+        'contain',
+        'TestApp version unknown'
+    )
+})
+
+Then("the unknown app with app's version should be displayed", () => {
+    cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should(
+        'contain',
+        'App 101.2.3-beta.4'
+    )
+})
+
+Then('the unknown app with unknown version should be displayed', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should(
+        'contain',
+        'App version unknown'
+    )
+})
+
+Then('the instance version should be displayed', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should(
+        'contain',
+        'DHIS2 2.39.2.1-SNAPSHOT'
+    )
+})
+
+Then('the instance version should show as unknown', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should(
+        'contain',
+        'DHIS2 version unknown'
+    )
+})
+
+When('the user clicks the debug info menu item', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-debuginfo"] > a').click()
+})
+
+Then('the debug info modal should be shown', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-debuginfomodal"]').should(
+        'be.visible'
+    )
+})
+Then('the debug info modal should not be shown', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-debuginfomodal"]').should(
+        'not.exist'
+    )
+})
+
+Then('the debug info modal should contain debug info', () => {
+    cy.get('[data-test="dhis2-ui-headerbar-debuginfotable"]')
+        .should(
+            'contain',
+            '2.39.2.1-SNAPSHOT' // DHIS2 version
+        )
+        .should(
+            'contain',
+            '6607c3c' // Revision
+        )
+        .should(
+            'contain',
+            'TestApp' // App name
+        )
+        .should(
+            'contain',
+            '101.2.3-beta.4' // App version
+        )
+})
+
+When('the user clicks the copy debug info button', () => {
+    cy.contains('Copy debug info').click()
+})
+
+Then('the debug info should be copied to clipboard', () => {
+    cy.window().then((win) => {
+        win.navigator.clipboard.readText().then((text) => {
+            expect(text).to.contain('2.39.2.1-SNAPSHOT')
+        })
+    })
+})
+
+Then('the debug info copied to clipboard alert should be shown', () => {
+    cy.contains('Debug information copied to clipboard').should('exist')
+})

package/src/features/the_headerbar_should_display_debug_version_infos.feature

@@ -0,0 +1,52 @@
+Feature: The HeaderBar should display debug version infos
+
+    Scenario: The debug version infos are displayed in the profile menu
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the app's name and version should be displayed
+        
+    Scenario: The debug version info modal is displayed when clicking on the menu item
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        When the user clicks the debug info menu item
+        Then the debug info modal should be shown
+
+    Scenario: The debug version info modal displays debug info
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        When the user clicks the debug info menu item
+        Then the debug info modal should contain debug info
+
+    Scenario: The debug version info should be copied to clipboard
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        When the user clicks the debug info menu item
+        When the user clicks the copy debug info button
+        Then the debug info should be copied to clipboard
+        And the debug info copied to clipboard alert should be shown
+        And the debug info modal should not be shown
+
+    Scenario: The debug version infos are displayed with unknown dhis2 version in the profile menu
+        Given the HeaderBar is rendered without an instance version in runtime context
+        When the user opens the profile menu
+        Then the instance version should show as unknown
+        And the app's name and version should be displayed
+
+    Scenario: The debug version infos are displayed with unknown app name and version in the profile menu
+        Given the HeaderBar is rendered without app name or app version in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the unknown app with unknown version should be displayed
+
+    Scenario: The debug version infos are displayed with unknown app name in the profile menu
+        Given the HeaderBar is rendered without app name in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the unknown app with app's version should be displayed
+
+    Scenario: The debug version infos are displayed with unknown app version in the profile menu
+        Given the HeaderBar is rendered with an app name but without app version in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the app's name with unknown version should be displayed

package/src/features/the_headerbar_should_display_the_title_provided_by_the_backend_and_the_app/the_headerbar_displays_the_custom_title.js

@@ -0,0 +1,11 @@
+import { Then, Given } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the custom title is "Barbaz" and the app title is "Example!"', () => {
+    cy.visitStory('HeaderBarTesting', 'Custom Application Title')
+})
+
+Then('the displayed title should be "Barbaz - Example!"', () => {
+    cy.get('[data-test="headerbar-title"]').should(($title) => {
+        expect($title.text()).to.equal('Barbaz - Example!')
+    })
+})

package/src/features/the_headerbar_should_display_the_title_provided_by_the_backend_and_the_app.feature

@@ -0,0 +1,5 @@
+Feature: The HeaderBar should display the title provided by the backend and the app
+
+    Scenario: The HeaderBar displays the custom title
+        Given the custom title is "Barbaz" and the app title is "Example!"
+        Then the displayed title should be "Barbaz - Example!"

package/src/features/the_search_should_escape_regexp_character/common.js

@@ -0,0 +1,6 @@
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(/the search contains a (.*)/, (character) => {
+    cy.get('[data-test="headerbar-apps-icon"]').click()
+    cy.get('#filter').type(character)
+})

package/src/features/the_search_should_escape_regexp_character/the_modules_do_not_contain_items_with_special_chars.js

@@ -0,0 +1,23 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(/no app name contains a (.*)/, (character) => {
+    // Needs to be wrapped, otherwise for some reason the wrong char is in the scope
+    cy.all(
+        () => cy.window(),
+        () => cy.wrap(character)
+    ).then(([win, char]) => {
+        const { dataProviderData } = win
+        const { modules } = dataProviderData['action::menu/getModules']
+        const modulesWithSpecialChar = modules.filter(
+            (module) => module.displayName.indexOf(char) !== -1
+        )
+
+        expect(modulesWithSpecialChar).to.have.length(0)
+    })
+})
+
+Then('no results should be shown', () => {
+    cy.get('[data-test="headerbar-apps-menu-list"] > a > div').should(
+        'not.exist'
+    )
+})

package/src/features/the_search_should_escape_regexp_character/the_user_searches_for_an_app_with_a_regex_character.js

@@ -0,0 +1,29 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { modulesWithSpecialCharacters } from '../../__e2e__/stories/modulesWithSpecialCharacters.js'
+
+Given(/some app names contain a (.*)/, (character) => {
+    // Needs to be wrapped, otherwise for some reason the wrong char is in the scope
+    cy.wrap(character).then((char) => {
+        cy.visitStory('HeaderBarTesting', 'With Special App Name Characters')
+
+        // verify that there's a module with the special char in its name
+        const modulesWithSpecialChar = modulesWithSpecialCharacters.filter(
+            (module) => {
+                return module.displayName.indexOf(char) !== -1
+            }
+        )
+
+        expect(modulesWithSpecialChar).to.have.length.of.at.least(1)
+    })
+})
+
+Then(/only apps with (.*) in their name should be shown/, (character) => {
+    cy.get('[data-test="headerbar-apps-menu-list"] > a > div').should(
+        ($modules) => {
+            $modules.each((index, module) => {
+                const displayName = Cypress.$(module).text()
+                expect(displayName.indexOf(character)).to.not.eql(-1)
+            })
+        }
+    )
+})

package/src/features/the_search_should_escape_regexp_character.feature

@@ -0,0 +1,48 @@
+Feature: The search should escape regexp characters
+
+    Scenario Outline: The user searches for an app with a regex character
+        Given some app names contain a <char>
+        And the search contains a <char>
+        Then only apps with <char> in their name should be shown
+
+        Examples:
+            | char |
+            | /    |
+            | (    |
+            | )    |
+            | [    |
+            | ]    |
+            | {    |
+            | }    |
+            | *    |
+            | +    |
+            | ?    |
+            | .    |
+            | ^    |
+            | $    |
+            | \|   |
+            | \\   |
+
+    Scenario Outline: The modules do not contain items with special chars
+        Given the HeaderBar loads without an error
+        And the search contains a <char>
+        And no app name contains a <char>
+        Then no results should be shown
+
+        Examples:
+            | char |
+            | /    |
+            | (    |
+            | )    |
+            | [    |
+            | ]    |
+            | {    |
+            | }    |
+            | *    |
+            | +    |
+            | ?    |
+            | .    |
+            | ^    |
+            | $    |
+            | \|   |
+            | \\   |

package/src/header-bar-context.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import React, { createContext, useContext } from 'react'
+
+const headerBarContext = createContext({
+    updateAvailable: false,
+    onApplyAvailableUpdate: () => {},
+})
+
+export const HeaderBarContextProvider = ({
+    updateAvailable,
+    onApplyAvailableUpdate,
+    children,
+}) => {
+    return (
+        <headerBarContext.Provider
+            value={{ updateAvailable, onApplyAvailableUpdate }}
+        >
+            {children}
+        </headerBarContext.Provider>
+    )
+}
+HeaderBarContextProvider.propTypes = {
+    children: PropTypes.node,
+    updateAvailable: PropTypes.bool,
+    onApplyAvailableUpdate: PropTypes.func,
+}
+
+export const useHeaderBarContext = () => useContext(headerBarContext)