chore(cypress npm scripts): replace scripts with concurrently & wait-…

…on (#154)

* chore(cypress npm scripts): replace scripts with concurrently & wait-on
* chore: rename test files to match feature and scenario description
* chore: remove unused port env var from cypress commands
* chore(cypress): add support for SCREENSHOT env var
* docs: add Testing section to README

README.md

@@ -4,3 +4,29 @@
 
 **[Online docs and demos (latest master
 build)](https://d2-ci.github.io/ui-widgets/)**
+
+## Testing
+
+Testing is done with cypress & cucumber.
+
+* Run `yarn cypress:run`<br />
+  This will run cypress and exit with either 0 or 1
+
+* Run `yarn cypress:open`<br />
+This will open the cypress gui, which is useful for writing tests
+
+### Recording videos and taking screenshots
+
+When running `yarn cypress:run`, by default no video is recorded and no
+screenshot will be taken.
+* Recording videos can be enabled by supplying the
+`CYPRESS_VIDEO=true` env var.
+* Taking screenshots can be enabled by supplying the
+`CYPRESS_SCREENSHOT=true` env var.
+
+### Storybook stories for testing
+
+Sometimes it's required to add stateful stories to test certain behavior.
+That's why you can add files with the following file name format: `*.stories.testing.js`
+These stories will not be used when generating the docs storybook and can
+contain more sophisticated scenarios for testing.

cypress.json

@@ -1,3 +1,4 @@
 {
-    "testFiles": "**/*.feature"
+    "testFiles": "**/*.feature",
+    "video": false
 }

cypress/assets/unfetch.umd.js

@@ -1,3 +1,12 @@
+/**
+ * See
+ *
+ * * https://github.com/cypress-io/cypress/issues/95
+ * * https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window-fetch
+ * * https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/stubbing-spying__window-fetch/cypress/integration/polyfill-fetch-from-tests-spec.js
+ *
+ * for an explanation why this is currently necessary...
+ */
 !(function(e, n) {
     'object' == typeof exports && 'undefined' != typeof module
         ? (module.exports = n())

cypress/integration/HeaderBar/The_HeaderBar_contains_a_menu_to_all_apps/The_HeaderBar_contains_a_menu_icon.js

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

cypress/integration/HeaderBar/The_HeaderBar_contains_a_menu_to_all_apps/The_app_menu_closes_when_the_user_clicks_outside.js

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

cypress/integration/HeaderBar/The_HeaderBar_contains_a_menu_to_all_apps/The_menu_is_closed_by_default.js

@@ -0,0 +1,6 @@
+import '../common/index'
+import './common'
+
+Then('the HeaderBar dos not display the app menu', () => {
+    cy.get('[data-test-id="headerbar-apps-menu"]').should('not.exist')
+})

cypress/integration/HeaderBar/AppsMenu/index.js → cypress/integration/HeaderBar/The_HeaderBar_contains_a_menu_to_all_apps/The_user_will_be_offered_a_menu_with_5_apps.js

@@ -13,22 +13,6 @@ When('the user clicks on the menu icons', () => {
     cy.get('[data-test-id="headerbar-apps-icon"]').click()
 })
 
-When('the user opens the menu', () => {
-    cy.get('[data-test-id="headerbar-apps-icon"]').click()
-})
-
-When('the user clicks outside of the menu', () => {
-    cy.get('[data-test-id="headerbar-title"]').click()
-})
-
-Then('the HeaderBar displays a menu icon', () => {
-    cy.get('[data-test-id="headerbar-apps-icon"]').should('exist')
-})
-
-Then('the HeaderBar dos not display the app menu', () => {
-    cy.get('[data-test-id="headerbar-apps-menu"]').should('not.exist')
-})
-
 Then('the menu opens', () => {
     cy.get('[data-test-id="headerbar-apps-menu"]').should('be.visible')
 })

cypress/integration/HeaderBar/The_HeaderBar_contains_a_menu_to_all_apps/common.js

@@ -0,0 +1,3 @@
+Then('the HeaderBar dos not display the app menu', () => {
+    cy.get('[data-test-id="headerbar-apps-menu"]').should('not.exist')
+})

cypress/integration/HeaderBar/ProfileMenu.feature → cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu.feature

@@ -8,48 +8,46 @@ Feature: The HeaderBar contains a profile menu
         Given the HeaderBar loads without an error
         Then the HeaderBar does not display the profile menu
 
-    Scenario: The user name and email are displayed
+    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 clicks on the profile icons
-        Then the menu opens
-        And contains a link to edit the profile
+        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 clicks on the profile icons
-        Then the menu opens
-        And contains a link to the settings
+        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 clicks on the profile icons
-        Then the menu opens
-        And contains a link to the user account
+        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 clicks on the profile icons
-        Then the menu opens
-        And contains a link to the help page
+        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 clicks on the profile icons
-        Then the menu opens
-        And contains a link to the About DHIS2 page
+        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 clicks on the profile icons
-        Then the menu opens
-        And contains a link to log out the user
+        When the user opens the menu
+        Then contains a link to log out the user
 
     Scenario: The profile menu closes when the user clicks outside
         Given the HeaderBar loads without an error

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_HeaderBar_contains_a_profile_icon.js

@@ -0,0 +1,10 @@
+import '../common/index'
+
+Then('the HeaderBar displays a profile icon', () => {
+    cy.get(
+        `
+        [data-test-id="headerbar-profile-icon-text"],
+        [data-test-id="headerbar-profile-icon-image"]
+    `
+    ).should('be.visible')
+})

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_menu_is_closed_by_default.js

@@ -0,0 +1,3 @@
+import '../common/index'
+
+// all step definitions are shared with other scenarios

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_menu_opens.js

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

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_profile_menu_closes_when_the_user_clicks_outside.js

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

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_user_can_edit_his_profile.js

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

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_user_can_go_to_his_account.js

@@ -0,0 +1,7 @@
+import '../common/index'
+
+Then('contains a link to the user account', () => {
+    cy.get('[data-test-id="headerbar-profile-menu-link-account"]').should(
+        'be.visible'
+    )
+})

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_user_can_go_to_the_About_DHIS2_page.js

@@ -0,0 +1,7 @@
+import '../common/index'
+
+Then('contains a link to the About DHIS2 page', () => {
+    cy.get('[data-test-id="headerbar-profile-menu-link-about"]').should(
+        'be.visible'
+    )
+})

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_user_can_go_to_the_help_page.js

@@ -0,0 +1,7 @@
+import '../common/index'
+
+Then('contains a link to the help page', () => {
+    cy.get('[data-test-id="headerbar-profile-menu-link-help"]').should(
+        'be.visible'
+    )
+})

cypress/integration/HeaderBar/The_HeaderBar_contains_a_profile_menu/The_user_can_go_to_the_settings.js

@@ -0,0 +1,7 @@
+import '../common/index'
+
+Then('contains a link to the settings', () => {
+    cy.get('[data-test-id="headerbar-profile-menu-link-settings"]').should(
+        'be.visible'
+    )
+})