Skip to content

Commit 2166d51

Browse files
author
Daniel Antelo
committed
Add storybook 7 support
1 parent 0d5d147 commit 2166d51

File tree

13 files changed

+4712
-8647
lines changed

13 files changed

+4712
-8647
lines changed

‎README.md‎

Lines changed: 6 additions & 245 deletions
Original file line numberDiff line numberDiff line change
@@ -1,252 +1,13 @@
11
# Cypress Storybook Commands
22

3-
This package registers a set of cypress commands that will allow you to test components in storybook visually and functionally.
3+
## Workspace
44

5-
Now supports projects using cypress 10 and Storybook 6.
5+
This repo contains a cypress and storybook sandbox for the development of the `cypress-storybook-commands` plugin.
66

7-
## Installation
7+
For plugin usage [view the package documentation](packages/cypress-storybook-commands/README.md)
88

9-
```
10-
yarn add cypress-storybook-commands --dev
11-
```
9+
For contributing to this plugin continue reading below.
1210

13-
or
11+
## Modifying the plugin
1412

15-
```
16-
npm i cypress-storybook-commands --dev
17-
```
18-
19-
### Setup
20-
21-
You must include the `cypress-image-snapshot` plugin in `cypress/plugins/index.js` (create the folder and file if not there)
22-
23-
```js
24-
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
25-
26-
module.exports = (on, config) => {
27-
addMatchImageSnapshotPlugin(on, config)
28-
}
29-
```
30-
31-
and ensure that your root `cypress.config.js` is configured to load the plugins
32-
33-
```js
34-
const { defineConfig } = require('cypress');
35-
36-
module.exports = defineConfig({
37-
e2e: {
38-
setupNodeEvents(on, config) {
39-
return require('./cypress/plugins/index.js')(on, config);
40-
},
41-
},
42-
});
43-
```
44-
45-
#### Add the commands
46-
47-
In your `cypress/support/commands.js` add the following:
48-
49-
```js
50-
import addStoryBookCommands from 'cypress-storybook-commands';
51-
52-
addStoryBookCommands({
53-
version: 6, // currently compatible with version 5 and 6 of storybook, and native
54-
viewportPresets: { // see https://docs.cypress.io/api/commands/viewport.html#Arguments
55-
mobile: 'iphone-x',
56-
tablet: 'ipad-2',
57-
laptop: 'macbook-13',
58-
desktop: [1920, 1080],
59-
},
60-
registerSnapshotCommands: true, // false if you already include cypress-image-snapshot/command
61-
preSnapshotFunc: () => { console.log('code before snapshot: hide elements, etc' )},
62-
postSnapshotFunc: () => { console.log('code after snapshot: reset elements, etc' )},
63-
snapshotSelector: '#root' // selector of element to use for snapshots,
64-
})
65-
66-
```
67-
68-
#### Add the run scripts
69-
70-
In your `cypress/package.json` add a new script for storybook tests:
71-
72-
```
73-
"scripts": {
74-
...
75-
"cy:storybook": "cypress open --e2e --config baseUrl=http://localhost:9002/,specPattern='cypress/storybook/*'",
76-
"cy:storybook:headless": "cypress run --e2e --browser chrome --headless --config baseUrl=http://localhost:9002/,specPattern='cypress/storybook/*'"
77-
}
78-
```
79-
80-
Note we will put storybook tests in their own folder so they do not run with the rest of your `e2e` tests, and we specify the baseUrl of where your storybook can be found.
81-
82-
83-
## Usage
84-
85-
### Visual regression tests
86-
87-
In your test file e.g. `cypress/storybook/visual-regression.cy.js` you can simply:
88-
89-
```js
90-
context('Storybook', () => {
91-
it('render components as expected', () => {
92-
cy.visit('/')
93-
.runStorybookVisualRegression({storiesToSkip: []});
94-
});
95-
});
96-
```
97-
98-
this will iterate over all the stories and capture visual snapshots.
99-
100-
Note: `runStorybookVisualRegression` has optional settings `storiesToSkip`, `storyWaits` and `storyActions`. You can use full story ids or story prefixes e.g. `accordion--primary` or `accordion--`
101-
102-
```js
103-
cy.visit('/')
104-
.runStorybookVisualRegression({
105-
// array of story ids or prefixes (found in url of story or the data-item-id in the nav)
106-
storiesToSkip: ['button-disabled'],
107-
// map of story matches to wait times in ms before screenshot (e.g. avoid capturing snapshots mid animation, etc));
108-
storyWaits: {'chart--': 1000}
109-
// map of story matches to actions to execute before screenshot
110-
storyActions: {
111-
'core-dialog': () => cy.contains('Open dialog').click(),
112-
'core-modal': () => cy.contains('Open Modal').click(),
113-
},
114-
});
115-
```
116-
117-
### Functional tests
118-
119-
In your test file e.g. `cypress/storybook/accordion.cy.js` you can load the story to carry out functional testing as follows:
120-
121-
```js
122-
context('Storybook: Accordion', () => {
123-
beforeEach(() => {
124-
cy.visit('/')
125-
.loadStory('Accordion.default')
126-
});
127-
128-
it('toggles content as expected', () => {
129-
cy.get('div[data-testid="tab"]').click()
130-
... etc ...
131-
});
132-
});
133-
```
134-
135-
Note: `Accordion.default` is the testID set in the navigator for that story via the `data-testid` attribute.
136-
137-
### Running
138-
139-
Ensure storybook is available on a url (should match baseUrl in the above added scripts). Then run `yarn run cy:storybook` or `yarn run cy:storybook:headless` as preferred.
140-
141-
On CI if you build your storybook you can use `npx serve` to serve the distribution files generated by storybook, alternatively just run the storybook app in the background. You will then want to use `npx start-server-and-test` to wait for storybook to be ready before running the cypress headless command.
142-
143-
```
144-
APPCMD="yarn storybook"
145-
CYPRESSCMD="yarn cy:storybook:headless --env requireSnapshots=true"
146-
npx start-server-and-test "$APPCMD" 9002 "$CYPRESSCMD"
147-
```
148-
149-
Note the use of `--env requireSnapshots=true` so that any missing snapshots in the branch cause a CI fail.
150-
151-
#### Parallelism
152-
153-
If you are using storybook 6+ we can make use of the `/stories.json` endpoint to get and split all the stories in the storybook instance.
154-
155-
This means you can pass a comma separated list of stories to include in the parallel instance (injected via the environment):
156-
157-
```js
158-
context('Storybook', () => {
159-
it('render components as expected', () => {
160-
cy.visit('/')
161-
.runStorybookVisualRegression({
162-
storyList: Cypress.env('storyList') || null,
163-
storiesToSkip: []
164-
});
165-
});
166-
});
167-
```
168-
169-
Your CI to run different set of stories in parallel could look something like:
170-
171-
```yml
172-
visual-regression-storybook:
173-
docker:
174-
- image: cypress/included:10.7.0
175-
parallelism: 3
176-
steps:
177-
- attach_workspace:
178-
at: .
179-
- run:
180-
name: Run Cypress on Storybook
181-
command: |
182-
FULLSTORYLIST=$(node -e "console.log(Object.keys(require('./devtools/storybook/dist/stories.json').stories).join('\n'))")
183-
TESTS=$(echo $FULLSTORYLIST | circleci tests split)
184-
APPCMD="npx serve@13 --listen 9002 ./devtools/storybook/dist"
185-
CYPRESSCMD="CYPRESS_storyList='${TESTS// /,}' yarn cy:storybook:headless --env requireSnapshots=true"
186-
npx start-server-and-test "$APPCMD" 9002 "$CYPRESSCMD"
187-
- store_artifacts:
188-
path: devtools/cypress/cypress/snapshots
189-
destination: snapshots
190-
- store_artifacts:
191-
path: stories.json
192-
destination: stories.json
193-
194-
```
195-
196-
#### Advance usage
197-
198-
Composition and splitting of stories in cy tests). You can get and filter stories as follows:
199-
200-
```js
201-
const storiesWithLoopingAnimations = ['loading', 'zerostate'];
202-
203-
const storyList = (stories, filter) => stories.filter(filter).join(',');
204-
205-
it('renders forms as expected', () => {
206-
cy.getStories().then((stories) => {
207-
cy.runStorybookVisualRegression({
208-
storyList: storyList(stories, (storyId) => storyId.includes('forms-')),
209-
storiesToSkip: [...storiesWithLoopingAnimations, 'forms-somestory-to-skip'],
210-
});
211-
});
212-
});
213-
```
214-
215-
216-
## Minimising Cross OS visual differences
217-
218-
If you are running the snapshots locally on a different OS to what you run on CI, you can minimise visual differences with the following in `cypress/plugins/index.js`
219-
220-
```js
221-
const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
222-
223-
module.exports = (on, config) => {
224-
addMatchImageSnapshotPlugin(on, config);
225-
226-
on('before:browser:launch', (browser = {}, launchOptions) => {
227-
// https://github.com/cypress-io/cypress/issues/5240
228-
const args = Array.isArray(launchOptions) ? launchOptions : launchOptions.args;
229-
230-
if (browser.name === 'chrome' || browser.name === 'chromium') {
231-
// In headless mode, Cypress fixes the scale factor to 1, and this forces
232-
// screenshots to be taken with an image size matching the viewport size
233-
// instead of the viewport size multiplied by the scale factor.
234-
//
235-
// Since we also want to run the image regression tests in development mode,
236-
// we need to set the device scale factor to 1 in chrome / chromium.
237-
//
238-
// See: https://github.com/cypress-io/cypress/issues/2102#issuecomment-521299946
239-
// See: https://github.com/cypress-io/cypress/blame/a7dfda986531f9176468de4156e3f1215869c342/packages/server/lib/cypress.coffee#L132-L137
240-
args.push('--force-device-scale-factor=1');
241-
242-
// Force the colour profile - should reduce colour differences in diffs between MacOS and Linux (CI)
243-
args.push('--force-color-profile=srgb');
244-
245-
// Force font rendering - should reduce differences in diffs between MacOS and Linux (CI)
246-
args.push('--font-render-hinting=none');
247-
}
248-
249-
return launchOptions;
250-
});
251-
}
252-
```
13+
Code is found in `packages/cypress-storybook-commands` and can be tested via the `sandbox/cypress` instance. A storybook instance is also provided in `sandbox/storybook` but you can run against any instance by modifying the `baseUrl` in the cypress setup.

‎packages/cypress-storybook-commands/LICENSE‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
This Open Software License (the “License”) applies to any original work of authorship (the “Original Work”) whose owner (the “Licensor”) has placed the following licensing notice adjacent to the copyright notice for the Original Work:
2+
3+
Licensed under the Open Software License version 3.0
4+
5+
1) Grant of Copyright License. Licensor grants You a worldwide, royalty-free, non-exclusive, sublicensable license, for the duration of the copyright, to do the following:
6+
7+
a) to reproduce the Original Work in copies, either alone or as part of a collective work;
8+
9+
b) to translate, adapt, alter, transform, modify, or arrange the Original Work, thereby creating derivative works (“Derivative Works”) based upon the Original Work;
10+
11+
c) to distribute or communicate copies of the Original Work and Derivative Works to the public, with the proviso that copies of Original Work or Derivative Works that You distribute or communicate shall be licensed under this Open Software License;
12+
13+
d) to perform the Original Work publicly; and
14+
15+
e) to display the Original Work publicly.
16+
17+
2) Grant of Patent License. Licensor grants You a worldwide, royalty-free, non-exclusive, sublicensable license, under patent claims owned or controlled by the Licensor that are embodied in the Original Work as furnished by the Licensor, for the duration of the patents, to make, use, sell, offer for sale, have made, and import the Original Work and Derivative Works.
18+
19+
3) Grant of Source Code License. The term “Source Code” means the preferred form of the Original Work for making modifications to it and all available documentation describing how to modify the Original Work. Licensor agrees to provide a machine-readable copy of the Source Code of the Original Work along with each copy of the Original Work that Licensor distributes. Licensor reserves the right to satisfy this obligation by placing a machine-readable copy of the Source Code in an information repository reasonably calculated to permit inexpensive and convenient access by You for as long as Licensor continues to distribute the Original Work.
20+
21+
4) Exclusions From License Grant. Neither the names of Licensor, nor the names of any contributors to the Original Work, nor any of their trademarks or service marks, may be used to endorse or promote products derived from this Original Work without express prior permission of the Licensor. Except as expressly stated herein, nothing in this License grants any license to Licensor’s trademarks, copyrights, patents, trade secrets or any other intellectual property. No patent license is granted to make, use, sell, offer for sale, have made, or import embodiments of any patent claims other than the licensed claims defined in Section 2. No license is granted to the trademarks of Licensor even if such marks are included in the Original Work. Nothing in this License shall be interpreted to prohibit Licensor from licensing under terms different from this License any Original Work that Licensor otherwise would have a right to license.
22+
23+
5) External Deployment. The term “External Deployment” means the use, distribution, or communication of the Original Work or Derivative Works in any way such that the Original Work or Derivative Works may be used by anyone other than You, whether those works are distributed or communicated to those persons or made available as an application intended for use over a network. As an express condition for the grants of license hereunder, You must treat any External Deployment by You of the Original Work or a Derivative Work as a distribution under section 1(c).
24+
25+
6) Attribution Rights. You must retain, in the Source Code of any Derivative Works that You create, all copyright, patent, or trademark notices from the Source Code of the Original Work, as well as any notices of licensing and any descriptive text identified therein as an “Attribution Notice.” You must cause the Source Code for any Derivative Works that You create to carry a prominent Attribution Notice reasonably calculated to inform recipients that You have modified the Original Work.
26+
27+
7) Warranty of Provenance and Disclaimer of Warranty. Licensor warrants that the copyright in and to the Original Work and the patent rights granted herein by Licensor are owned by the Licensor or are sublicensed to You under the terms of this License with the permission of the contributor(s) of those copyrights and patent rights. Except as expressly stated in the immediately preceding sentence, the Original Work is provided under this License on an “AS IS” BASIS and WITHOUT WARRANTY, either express or implied, including, without limitation, the warranties of non-infringement, merchantability or fitness for a particular purpose. THE ENTIRE RISK AS TO THE QUALITY OF THE ORIGINAL WORK IS WITH YOU. This DISCLAIMER OF WARRANTY constitutes an essential part of this License. No license to the Original Work is granted by this License except under this disclaimer.
28+
29+
8) Limitation of Liability. Under no circumstances and under no legal theory, whether in tort (including negligence), contract, or otherwise, shall the Licensor be liable to anyone for any indirect, special, incidental, or consequential damages of any character arising as a result of this License or the use of the Original Work including, without limitation, damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses. This limitation of liability shall not apply to the extent applicable law prohibits such limitation.
30+
31+
9) Acceptance and Termination. If, at any time, You expressly assented to this License, that assent indicates your clear and irrevocable acceptance of this License and all of its terms and conditions. If You distribute or communicate copies of the Original Work or a Derivative Work, You must make a reasonable effort under the circumstances to obtain the express assent of recipients to the terms of this License. This License conditions your rights to undertake the activities listed in Section 1, including your right to create Derivative Works based upon the Original Work, and doing so without honoring these terms and conditions is prohibited by copyright law and international treaty. Nothing in this License is intended to affect copyright exceptions and limitations (including “fair use” or “fair dealing”). This License shall terminate immediately and You may no longer exercise any of the rights granted to You by this License upon your failure to honor the conditions in Section 1(c).
32+
33+
10) Termination for Patent Action. This License shall terminate automatically and You may no longer exercise any of the rights granted to You by this License as of the date You commence an action, including a cross-claim or counterclaim, against Licensor or any licensee alleging that the Original Work infringes a patent. This termination provision shall not apply for an action alleging patent infringement by combinations of the Original Work with other software or hardware.
34+
35+
11) Jurisdiction, Venue and Governing Law. Any action or suit relating to this License may be brought only in the courts of a jurisdiction wherein the Licensor resides or in which Licensor conducts its primary business, and under the laws of that jurisdiction excluding its conflict-of-law provisions. The application of the United Nations Convention on Contracts for the International Sale of Goods is expressly excluded. Any use of the Original Work outside the scope of this License or after its termination shall be subject to the requirements and penalties of copyright or patent law in the appropriate jurisdiction. This section shall survive the termination of this License.
36+
37+
12) Attorneys’ Fees. In any action to enforce the terms of this License or seeking damages relating thereto, the prevailing party shall be entitled to recover its costs and expenses, including, without limitation, reasonable attorneys’ fees and costs incurred in connection with such action, including any appeal of such action. This section shall survive the termination of this License.
38+
39+
13) Miscellaneous. If any provision of this License is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable.
40+
41+
14) Definition of “You” in This License. “You” throughout this License, whether in upper or lower case, means an individual or a legal entity exercising rights under, and complying with all of the terms of, this License. For legal entities, “You” includes any entity that controls, is controlled by, or is under common control with you. For purposes of this definition, “control” means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
42+
43+
15) Right to Use. You may use the Original Work in all ways not otherwise restricted or conditioned by this License or by law, and Licensor promises not to interfere with or be responsible for such uses by You.
44+
45+
16) Modification of This License. This License is Copyright © 2005 Lawrence Rosen. Permission is granted to copy, distribute, or communicate this License without modification. Nothing in this License permits You to modify this License as applied to the Original Work or to Derivative Works. However, You may modify the text of this License and copy, distribute or communicate your modified version (the “Modified License”) and apply it to other original works of authorship subject to the following conditions: (i) You may not indicate in any way that your Modified License is the “Open Software License” or “OSL” and you may not use those names in the name of your Modified License; (ii) You must replace the notice specified in the first paragraph above with the notice “Licensed under <insert your license name here>” or with a notice of your own that is not confusingly similar to the notice in this License; and (iii) You may not claim that your original works are open source software unless your Modified License has been approved by Open Source Initiative (OSI) and You comply with its license review and certification process.

0 commit comments

Comments
 (0)