chore: enable cucumber, rewrite existing tests

.gitignore

@@ -28,3 +28,4 @@ bundle.stats.json
 
 # cypress
 cypress/screenshots
+cypress/videos

.storybook/config.js

@@ -14,15 +14,15 @@ addDecorator(FrameStylesWrapper)
 const includeTesting = 'STORYBOOK_INCLUDE_TESTING' in process.env
 
 function loadStories() {
-    const req = require.context('../stories', false, /\.stories\.js$/)
+    const req = require.context('../stories', true, /\.stories\.js$/)
     req.keys().forEach(filename => req(filename))
 }
 
 function loadStoriesInclTesting() {
     const req = require.context(
         '../stories',
         true,
-        /(\.testing)?\.stories\.js$/
+        /\.stories(\.testing)?\.js$/
     )
     req.keys().forEach(filename => req(filename))
 }

README.md

@@ -71,19 +71,27 @@ automatically determine the next version.
 
 ## Testing
 
-In order to run the cypress tests:
-1. Run `yarn start:test`
-(This will start the storybook, including testing stories
-and doesn't launch the browser)
-2. Run `yarn cypress:open`
+Testing is done with cypress & cucumber.
 
-Once the storybook is available, you can run the tests from within
-the cypress application that has been launched in step 2.
+* 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: `*.testing.stories.js`
+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,6 +1,5 @@
 {
-  "screenshots": {
-    "screenshotOnRunFailure": false
-  },
-  "projectId": "65oh1u"
+    "testFiles": "**/*.feature",
+    "video": false,
+    "projectId": "65oh1u"
 }

cypress/.eslintrc.js

@@ -0,0 +1,10 @@
+const config = require('../.eslintrc.js')
+
+module.exports = {
+    ...config,
+    env: { es6: true },
+    globals: {
+        Cypress: 'readonly',
+        cy: 'readonly',
+    },
+}

cypress/integration/AlertBar/The_AlertBar_will_hide_when_the_user_clicks_an_action.feature

@@ -0,0 +1,6 @@
+Feature: The AlertBar will hide when the user clicks an action
+
+    Scenario: The user clicks the "Cancel" action
+        Given an AlertBar has a "Cancel" action
+        When the user clicks on the "Cancel" button
+        Then the AlertBar will not be visible

cypress/integration/AlertBar/The_AlertBar_will_hide_when_the_user_clicks_an_action/The_user_clicks_the_Cancel_action.js

@@ -0,0 +1,14 @@
+import '../common/index'
+import { Given, When } from 'cypress-cucumber-preprocessor/steps'
+
+Given('an AlertBar has a "Cancel" action', () => {
+    cy.visitStory('AlertBar', 'With actions')
+        .get('.info')
+        .as('AlertBar')
+
+    cy.get('@AlertBar').should('be.visible')
+})
+
+When('the user clicks on the "Cancel" button', () => {
+    cy.get('span:contains("Cancel")').click()
+})

cypress/integration/AlertBar/The_AlertBars_will_hide_automatically.feature

@@ -0,0 +1,11 @@
+Feature: The AlertBars will hide automatically
+
+    Scenario: AlertBars hides automatically after the default time
+        Given an AlertBar will hide after the default time
+        When the default time has passed
+        Then the AlertBar will not be visible
+
+    Scenario: AlertBars hides automatically after a custom time
+        Given an AlertBar will hide after a custom time
+        When the custom time has passed
+        Then the AlertBar will not be visible

cypress/integration/AlertBar/The_AlertBars_will_hide_automatically/AlertBars_hides_automatically_after_a_custom_time.js

@@ -0,0 +1,14 @@
+import '../common/index'
+import { Given, When } from 'cypress-cucumber-preprocessor/steps'
+
+Given('an AlertBar will hide after a custom time', () => {
+    cy.visitStory('AlertBar', 'Auto hiding')
+        .get('.fourth')
+        .as('AlertBar')
+
+    cy.get('@AlertBar').should('be.visible')
+})
+
+When('the custom time has passed', () => {
+    cy.wait(2000)
+})

cypress/integration/AlertBar/The_AlertBars_will_hide_automatically/AlertBars_hides_automatically_after_the_default_time.js

@@ -0,0 +1,15 @@
+import '../common/index'
+import { Given, When } from 'cypress-cucumber-preprocessor/steps'
+import { AlertBar } from '../../../../src'
+
+Given('an AlertBar will hide after the default time', () => {
+    cy.visitStory('AlertBar', 'auto hiding')
+        .get('.fifth')
+        .as('AlertBar')
+
+    cy.get('@AlertBar').should('be.visible')
+})
+
+When('the default time has passed', () => {
+    cy.wait(AlertBar.defaultProps.duration)
+})

cypress/integration/AlertBar/common/index.js

@@ -0,0 +1,5 @@
+import { Then } from 'cypress-cucumber-preprocessor/steps'
+
+Then('the AlertBar will not be visible', () => {
+    cy.get('@AlertBar').should('not.exist')
+})

cypress/plugins/index.js

@@ -1 +1,6 @@
-module.exports = () => {}
+const cucumber = require('cypress-cucumber-preprocessor').default
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+    on('file:preprocessor', cucumber())
+}

cypress/support/index.js

@@ -0,0 +1,2 @@
+import './screenshots'
+import './visitStory'

cypress/support/screenshots.js

@@ -0,0 +1,5 @@
+const takeScreenshots = !!Cypress.env('SCREENSHOT')
+
+Cypress.Screenshot.defaults({
+    screenshotOnRunFailure: takeScreenshots,
+})

cypress/support/visitStory.js

@@ -0,0 +1,6 @@
+Cypress.Commands.add('visitStory', (namespace, storyName) => {
+    const formattedNamespace = namespace.toLowerCase()
+    const formattedStoryName = storyName.replace(/ /g, '-').toLowerCase()
+    const id = `${formattedNamespace}--${formattedStoryName}`
+    cy.visit(`iframe.html?id=${id}`)
+})

package.json

@@ -18,9 +18,13 @@
     "build": "NODE_ENV=production yarn build:commonjs && NODE_ENV=production yarn build:modules",
     "postbuild": "NODE_ENV=production yarn build-storybook",
     "build-storybook": "build-storybook -c .storybook -o ./build/docs && cp -r ./stories/info/images ./build/docs",
-    "start-storybook": "start-storybook --port 5000 -s ./stories/info",
-    "start": "yarn start-storybook",
-    "cypress:open": "cypress open"
+    "start-storybook": "start-storybook -s ./stories/info",
+    "start": "yarn start-storybook --port 5000",
+    "start:testing": "STORYBOOK_INCLUDE_TESTING=1 yarn start --port $PORT --ci",
+    "cypress:browser": "cypress open --config baseUrl=http://localhost:$PORT",
+    "cypress:ci": "NO_COLOR=1 cypress run -b $BROWSER --config baseUrl=http://localhost:$PORT",
+    "cypress:open": "PORT=12345 concurrently --kill-others -n storybook,cypress 'yarn start:testing' 'wait-on http-get://localhost:$PORT && yarn cypress:browser'",
+    "cypress:run": "PORT=12345 concurrently --kill-others --success first -n storybook,cypress 'yarn start:testing' 'wait-on http-get://localhost:$PORT && yarn cypress:ci'"
   },
   "devDependencies": {
     "@babel/cli": "^7.6.4",
@@ -37,14 +41,17 @@
     "@storybook/react": "^5.2.5",
     "babel-eslint": "10.x",
     "babel-loader": "^8.0.6",
+    "concurrently": "^5.0.0",
     "cypress": "^3.4.1",
+    "cypress-cucumber-preprocessor": "^1.16.2",
     "eslint-plugin-react": "^7.16.0",
     "react": "16.3",
     "react-dev-utils": "^9.1.0",
     "react-dom": "16.3",
     "storybook-addon-jsx": "^7.1.6",
     "storybook-addon-react-docgen": "^1.2.28",
-    "typeface-roboto": "^0.0.75"
+    "typeface-roboto": "^0.0.75",
+    "wait-on": "^3.3.0"
   },
   "peerDependencies": {
     "prop-types": "^15",
@@ -58,5 +65,8 @@
   },
   "files": [
     "build"
-  ]
+  ],
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true
+  }
 }