Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add cypress to Storybook CI Co-authored-by: Norbert de Langen <ndelangen@me.com>
- Loading branch information
Showing
19 changed files
with
836 additions
and
274 deletions.
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
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 |
|---|---|---|
|
|
@@ -32,3 +32,5 @@ htpasswd | |
| storybook-out | ||
| /addons/docs/common/config-* | ||
| built-storybooks | ||
| cypress/videos | ||
| cypress/screenshots | ||
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 @@ | ||
| {} |
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 @@ | ||
| { | ||
| "extends": [ | ||
| "plugin:cypress/recommended" | ||
| ] | ||
| } |
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 @@ | ||
| { | ||
| "name": "Using fixtures to represent data", | ||
| "email": "hello@cypress.io", | ||
| "body": "Fixtures are a great way to mock data for responses to routes" | ||
| } |
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,55 @@ | ||
| /* eslint-disable no-unused-expressions */ | ||
| /* eslint-disable jest/valid-expect */ | ||
| const baseUrl = 'http://localhost:8001'; | ||
|
|
||
| type StorybookApps = 'official-storybook'; | ||
|
|
||
| type Addons = 'Knobs'; | ||
|
|
||
| export const visitExample = (app: StorybookApps, route = '') => { | ||
| return cy | ||
| .clearLocalStorage() | ||
| .visit(`${baseUrl}/${app}/${route}`) | ||
| .get(`#storybook-preview-iframe`) | ||
| .then({ timeout: 10000 }, iframe => { | ||
| return cy.wrap(iframe).should(() => { | ||
| const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument; | ||
| const element: HTMLElement | null = content !== null ? content.documentElement : null; | ||
|
|
||
| expect(element).not.null; | ||
|
|
||
| if (element !== null) { | ||
| expect(element.querySelector('#root > *')).not.null; | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
|
|
||
| export const clickAddon = (addonName: Addons) => { | ||
| return cy | ||
| .get(`[role=tablist] button[role=tab]`) | ||
| .contains(addonName) | ||
| .click(); | ||
| }; | ||
|
|
||
| export const getStorybookPreview = () => { | ||
| return cy.get(`#storybook-preview-iframe`).then({ timeout: 10000 }, iframe => { | ||
| const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument; | ||
| const element: HTMLElement | null = content !== null ? content.documentElement : null; | ||
|
|
||
| console.log({ element, content, iframe }); | ||
|
|
||
| return cy | ||
| .wrap(iframe) | ||
| .should(() => { | ||
| expect(element).not.null; | ||
|
|
||
| if (element !== null) { | ||
| expect(element.querySelector('#root > *')).not.null; | ||
| } | ||
| }) | ||
| .then(() => { | ||
| return cy.wrap(element).get('#root'); | ||
| }); | ||
| }); | ||
| }; |
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,21 @@ | ||
| import { clickAddon, visitExample } from '../helper'; | ||
|
|
||
| describe('Knobs', () => { | ||
| beforeEach(() => { | ||
| visitExample('official-storybook', '?path=/story/addons-knobs-withknobs--tweaks-static-values'); | ||
| }); | ||
|
|
||
| it('[text] it should change a string value', () => { | ||
| clickAddon('Knobs'); | ||
|
|
||
| cy.get('#Name') | ||
| .clear() | ||
| .type('John Doe'); | ||
|
|
||
| cy.preview() | ||
| .console('info') | ||
| .find('p') | ||
| .eq(0) | ||
| .should('contain.text', 'My name is John Doe'); | ||
| }); | ||
| }); |
Oops, something went wrong.