This repository has been archived by the owner on Nov 6, 2020. It is now read-only.
chore: enable cucumber, rewrite existing tests #513
Merged
Merged
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
c12372a
test: enable cucumber, rewrite existing tests & add scripts
Mohammer5 b9562bb
refactor: remove fetch polyfill and fetch-overwriting logic
Mohammer5 2122a14
chore: remove unused cypress fixture example file
Mohammer5 42097c9
refactor: use concurrently and wait-on to run storybook & cypress
Mohammer5 971a27a
chore: remove unused port env var from cypress commands
Mohammer5 0995562
chore: create cypress specific eslint rules
Mohammer5 7808e0f
chore: rename test files to match feature and scenario description
Mohammer5 d30f4a1
chore: remove unused fixtures example file
Mohammer5 b061fb6
chore: git ignore cypress videos
Mohammer5 13e4432
chore(cypress): record videos on test failure
Mohammer5 ba82104
chore: adding fixture gitkeep to prevent example file to be created
Mohammer5 549c6ad
chore: default to no video recording and no screenshots on failure
Mohammer5 cd1c28b
chore: use 2-space indents in package.json
Mohammer5 758270f
chore: add SCREENSHOT env var
Mohammer5 4ad0a56
chore(testing): update README
Mohammer5 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -28,3 +28,4 @@ bundle.stats.json | |
|
||
# cypress | ||
cypress/screenshots | ||
cypress/videos |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,5 @@ | ||
{ | ||
"screenshots": { | ||
"screenshotOnRunFailure": false | ||
}, | ||
"projectId": "65oh1u" | ||
"testFiles": "**/*.feature", | ||
"video": false, | ||
"projectId": "65oh1u" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
const config = require('../.eslintrc.js') | ||
|
||
module.exports = { | ||
...config, | ||
env: { es6: true }, | ||
globals: { | ||
Cypress: 'readonly', | ||
cy: 'readonly', | ||
}, | ||
} |
Empty file.
This file was deleted.
Oops, something went wrong.
6 changes: 6 additions & 0 deletions
6
cypress/integration/AlertBar/The_AlertBar_will_hide_when_the_user_clicks_an_action.feature
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
14 changes: 14 additions & 0 deletions
14
...he_AlertBar_will_hide_when_the_user_clicks_an_action/The_user_clicks_the_Cancel_action.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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() | ||
}) |
11 changes: 11 additions & 0 deletions
11
cypress/integration/AlertBar/The_AlertBars_will_hide_automatically.feature
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
14 changes: 14 additions & 0 deletions
14
...he_AlertBars_will_hide_automatically/AlertBars_hides_automatically_after_a_custom_time.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
}) |
15 changes: 15 additions & 0 deletions
15
...AlertBars_will_hide_automatically/AlertBars_hides_automatically_after_the_default_time.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { Then } from 'cypress-cucumber-preprocessor/steps' | ||
|
||
Then('the AlertBar will not be visible', () => { | ||
cy.get('@AlertBar').should('not.exist') | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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()) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
import './screenshots' | ||
import './visitStory' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
const takeScreenshots = !!Cypress.env('SCREENSHOT') | ||
|
||
Cypress.Screenshot.defaults({ | ||
screenshotOnRunFailure: takeScreenshots, | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}`) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are we setting
video: false
here? Seems like we want videos when doing recorded CI runs...There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same reason as for the screenshots: I think this should be explicitly turned on for CI. During development this won't be needed as we're probably debugging in the browser anyways.
These files will be git-ignored, so on the one hand devs won't necessarily notice these files have been created and on the other hand is the amount of disk space used by videos quite a bit.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah you're right, totally fair! I'd used the
--video false
flag for that, but putting it in the config file is definitely better if we can override it explicitly when running in CI. Nice.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok.. seems like right now that's not an option: kimmobrunfeldt/concurrently#33
So I'm inclined to remove these options from cypress.json until this 3.5 year old issue has been solved..... Do you agree?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://docs.cypress.io/guides/guides/environment-variables.html#Setting
Looks like an env bar would work too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's a bit more complicated. We'd have to set the config with code, depending on an env var, and I wasn't successful in doing so (I didn't try extensively though).
I think for now it's ok to remove it from the config and do this on a new/another branch/PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This works (with
"video": false
incypress.json
)I think you're right, it's better not to create screenshots or videos on a dev machine so let's default those to false in
cypress.json
(as you had done) and override them with the env vars in.travis.yml
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(no configuration with code required)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
^ @Mohammer5 (and yeah, not sure about the Semantic status check, think @varl might have changed the settings for this repo to require all commits to be semantic, since this is merge-rebased?)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added this functionality for taking screenshots manually as that didn't work.
Works for videos out of the box.