GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 14:11:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19303 from storybookjs/norbert/sb-625-remove-cypress-from-the-monorepo

Browse Source 
Build: Remove cypress from monorepo
This commit is contained in:
Norbert de Langen 2022-10-05 11:10:25 +03:00 committed by GitHub
commit 7ca44733a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 627 additions and 2340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
.circleci/config.yml
View File

@ -27,21 +27,6 @@ executors:
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
sb_cypress_8_node_14:
parameters:
class:
description: The Resource class
type: enum
enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
default: 'medium'
working_directory: /tmp/storybook
docker:
# ⚠️ The Cypress docker image is based on Node.js one so be careful when updating it because it can also
# cause an upgrade of Node.js version too. Cypress 8.5 image is based on Node.js 14
- image: cypress/included:8.7.0
environment:
NODE_OPTIONS: --max_old_space_size=3076
resource_class: <<parameters.class>>
sb_playwright:
parameters:
class:
@ -184,85 +169,6 @@ jobs:
root: .
paths:
- .verdaccio-cache
e2e-tests-extended:
executor:
class: medium
name: sb_cypress_8_node_14
parallelism: 14
steps:
- when:
condition:
and:
- not:
equal: [main, << pipeline.git.branch >>]
- not:
equal: [next, << pipeline.git.branch >>]
steps:
- ensure-pr-is-labeled-with:
label: 'run e2e extended test suite'
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: running local registry
command: |
cd code
yarn local-registry --port 6001 --open
background: true
- run:
name: Wait for registry
command: |
cd code
yarn wait-on http://localhost:6001
- run:
name: Run E2E (extended) tests
command: |
cd code
yarn test:e2e-framework --clean --all --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
no_output_timeout: 5m
- store_artifacts:
path: /tmp/cypress-record
destination: cypress
e2e-tests-core:
executor:
class: large
name: sb_cypress_8_node_14
parallelism: 8
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running local registry
command: |
cd code
yarn local-registry --port 6001 --open
background: true
- run:
name: Wait for registry
command: |
cd code
yarn wait-on http://localhost:6001
- run:
name: Run E2E (core) tests
# Do not test CRA here because it's done in PnP part
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
command: |
cd code
yarn test:e2e-framework vue3 angular130 angular13 angular12 web_components_typescript web_components_lit2 react react_legacy_root_api
no_output_timeout: 5m
- run:
name: prep artifacts
when: always
command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
- store_artifacts:
path: /tmp/cypress-record
destination: cypress
- store_artifacts:
path: /tmp/storybook-e2e-testing-out.zip
destination: e2e
# NOTE: this currently tests each story in docs mode, which doesn't make sense any more as stories
# can no longer run in docs mode. Instead we should probably change the test runner to test each
# docs entry if you run it in `VIEW_MODE=docs`
@ -325,73 +231,6 @@ jobs:
- store_artifacts:
path: /tmp/sb-bench.tar.gz
destination: sb-bench.tar.gz
e2e-tests-pnp:
executor:
class: medium
name: sb_cypress_8_node_14
working_directory: /tmp/storybook
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: Running local registry
command: |
cd code
yarn local-registry --port 6001 --open
background: true
- run:
name: Wait for registry
command: |
cd code
yarn wait-on http://localhost:6001
- run:
name: run e2e tests cra
command: |
cd code
yarn test:e2e-framework --pnp cra
# - run:
# name: run e2e tests vue
# command: yarn test:e2e-framework --pnp sfcVue
- run:
name: prep artifacts
when: always
command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
- store_artifacts:
path: /tmp/cypress-record
destination: cypress
- store_artifacts:
path: /tmp/storybook-e2e-testing-out.zip
destination: e2e
e2e-tests-examples:
executor:
class: small
name: sb_cypress_8_node_14
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
- attach_workspace:
at: .
- run:
name: running example
command: |
cd code
yarn serve-storybooks
background: true
- run:
name: await running examples
command: |
cd code
yarn await-serve-storybooks
- run:
name: cypress run
command: |
cd code
yarn test:e2e-examples
- store_artifacts:
path: /tmp/cypress-record
destination: cypress
smoke-tests:
executor:
class: medium+
@ -591,9 +430,6 @@ workflows:
- examples:
requires:
- build
- e2e-tests-examples:
requires:
- examples
- smoke-tests:
requires:
- build
@ -612,15 +448,6 @@ workflows:
- publish:
requires:
- build
- e2e-tests-extended:
requires:
- publish
- e2e-tests-core:
requires:
- publish
- e2e-tests-pnp:
requires:
- publish
- cra-bench:
requires:
- publish

17
CONTRIBUTING.old.md
View File

@ -6,7 +6,6 @@
- [2a. Run unit tests](#2a-run-unit-tests)
- [Core & Examples Tests](#core--examples-tests)
- [2b. Run Linter](#2b-run-linter)
- [2c. Run Cypress tests](#2c-run-cypress-tests)
- [Reproductions](#reproductions)
- [In the monorepo](#in-the-monorepo)
- [Outside the monorepo](#outside-the-monorepo)
@ -32,8 +31,8 @@
- [Verify your local version is working](#verify-your-local-version-is-working)
- [Documentation](#documentation)
- [Release Guide](#release-guide)
- [Prerelease:](#prerelease)
- [Full release:](#full-release)
- [Prerelease:](#prerelease)
- [Full release:](#full-release)
Thanks for your interest in improving Storybook! We are a community-driven project and welcome contributions of all kinds: from discussion to documentation to bugfixes to feature improvements.
@ -129,18 +128,6 @@ It can be immensely helpful to get feedback in your editor, if you're using VsCo
This should enable auto-fix for all source files, and give linting warnings and errors within your editor.
### 2c. Run Cypress tests
First make sure the repo is bootstrapped.
Then run `yarn build-storybooks --all`, this creates a static website from all examples.
Then run `yarn serve-storybooks`, this will run the static site on the port cypress expects.
Then run `yarn add cypress -W --optional`. When this has completed cypress should be installed on your system. If it is already on your system, this step can be skipped.
Then run `yarn cypress open` if you want to see the tests run in the UI, or `yarn cypress run` to run the tests headless.
### Reproductions
#### In the monorepo

1
code/.eslintrc.js
View File

@ -55,7 +55,6 @@ module.exports = {
},
},
{ files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
{ files: 'cypress/**', rules: { 'jest/expect-expect': 'off' } },
{
files: ['**/*.stories.*'],
rules: {

6
code/cypress/.eslintrc.json
View File

@ -1,6 +0,0 @@
{
"extends": ["plugin:cypress/recommended"],
"rules": {
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
}
}

5
code/cypress/fixtures/example.json
View File

@ -1,5 +0,0 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

19
code/cypress/generated/addon-action.spec.ts
View File

@ -1,19 +0,0 @@
describe('addon-action', () => {
before(() => {
cy.visitStorybook();
});
it('should trigger an action', () => {
// click on the button
cy.navigateToStory('example-button', 'primary');
cy.getStoryElement().contains('Button').click();
cy.viewAddonPanel('Actions');
// TODO @yannbf improve tab identifier on addons
// get the logs
cy.get('#storybook-panel-root')
.contains(/onClick/)
.should('be.visible');
});
});

26
code/cypress/generated/addon-backgrounds.spec.ts
View File

@ -1,26 +0,0 @@
describe('addon-backgrounds', () => {
before(() => {
cy.visitStorybook();
});
it('should have a dark background', () => {
// click on the button
cy.navigateToStory('example-button', 'primary');
// Click on the addon and select dark background
cy.get('[title="Change the background of the preview"]').click();
cy.get('#dark').click();
cy.getCanvasBodyElement().should('have.css', 'background-color', 'rgb(51, 51, 51)');
});
it('should apply a grid', () => {
// click on the button
cy.navigateToStory('example-button', 'primary');
// Toggle grid view
cy.get('[title="Apply a grid to the preview"]').click();
cy.getCanvasBodyElement().should('have.css', 'background-image');
});
});

49
code/cypress/generated/addon-controls.spec.ts
View File

@ -1,49 +0,0 @@
describe('addon-controls', () => {
it('should change component when changing controls', () => {
cy.visitStorybook();
cy.navigateToStory('example-button', 'Primary');
cy.viewAddonPanel('Controls');
// Text input: Label
cy.getStoryElement().find('button').should('contain.text', 'Button');
cy.get('textarea[name=label]').clear().type('Hello world');
cy.getStoryElement().find('button').should('contain.text', 'Hello world');
// Args in URL
cy.url().should('include', 'args=label:Hello+world');
// Boolean toggle: Primary/secondary
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
cy.get('input[name=primary]').click();
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)');
// Color picker: Background color
cy.get('input[placeholder="Choose color..."]').type('red');
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(255, 0, 0)');
// TODO: enable this once the controls for size are aligned in all CLI templates.
// Radio buttons: Size
// cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
// cy.get('label[for="size-large"]').click();
// cy.getStoryElement().find('button').should('have.css', 'font-size', '16px');
// Reset controls: assert that the component is back to original state
cy.get('button[title="Reset controls"]').click();
cy.getStoryElement().find('button').should('have.css', 'font-size', '14px');
cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)');
cy.getStoryElement().find('button').should('contain.text', 'Button');
});
it('should apply controls automatically when passed via url', () => {
cy.visit('/', {
qs: {
path: '/story/example-button--primary',
args: 'label:Hello world',
},
});
cy.getStoryElement().find('button').should('contain.text', 'Hello world');
});
});

30
code/cypress/generated/addon-docs.spec.ts
View File

@ -1,30 +0,0 @@
import { skipOn } from '@cypress/skip-test';
describe('addon-docs', () => {
beforeEach(() => {
cy.visitStorybook();
cy.navigateToStory('example-button', 'docs');
});
skipOn('vue3', () => {
skipOn('html', () => {
it('should provide source snippet', () => {
cy.getDocsElement()
.find('.docblock-code-toggle')
.each(($div) => {
cy.wrap($div)
.should('contain.text', 'Show code')
// use force click so cypress does not automatically scroll, making the source block visible on this step
.click({ force: true });
});
cy.getDocsElement()
.find('pre.prismjs')
.each(($div) => {
const text = $div.text();
expect(text).not.match(/^\(args\) => /);
});
});
});
});
});

53
code/cypress/generated/addon-interactions.spec.ts
View File

@ -1,53 +0,0 @@
/* eslint-disable jest/no-identical-title */
import { onlyOn } from '@cypress/skip-test';
describe('addon-interactions', () => {
before(() => {
cy.visitStorybook();
});
const test = () => {
// click on the button
cy.navigateToStory('example-page', 'logged-in');
cy.viewAddonPanel('Interactions');
cy.getStoryElement().find('.welcome').should('contain.text', 'Welcome, Jane Doe!');
cy.get('#tabbutton-interactions').contains(/(1)/).should('be.visible');
cy.get('#storybook-panel-root')
.contains(/userEvent.click/)
.should('be.visible');
cy.get('[data-testid=icon-done]').should('be.visible');
};
// Having multiple of onlyOn for the same test is a workaround instead
// of having to use skipOn a long list of frameworks
onlyOn('angular', () => {
it('should have interactions', test);
});
onlyOn('react', () => {
it('should have interactions', test);
});
// onlyOn('vite_react', () => {
// it('should have interactions', test);
// });
onlyOn('preact', () => {
it('should have interactions', test);
});
onlyOn('html', () => {
it('should have interactions', test);
});
onlyOn('svelte', () => {
it('should have interactions', test);
});
onlyOn('vue3', () => {
it('should have interactions', test);
});
});

16
code/cypress/generated/addon-viewport.spec.ts
View File

@ -1,16 +0,0 @@
describe('addon-viewport', () => {
before(() => {
cy.visitStorybook();
});
it('should have viewport button in the toolbar', () => {
cy.navigateToStory('example-button', 'Primary');
// Click on viewport button and select small mobile
cy.get('[title="Change the size of the preview"]').click();
cy.get('#mobile1').click();
// Check that Welcome story is still displayed
cy.getStoryElement().should('contain.text', 'Button');
});
});

80
code/cypress/generated/basic.spec.ts
View File

@ -1,80 +0,0 @@
import { skipOn } from '@cypress/skip-test';
describe('Basic CLI', () => {
before(() => {
cy.visitStorybook();
});
describe('Welcome story (MDX)', () => {
it('should load and display', () => {
cy.navigateToStory('example-introduction', 'docs');
cy.getDocsElement().should('contain.text', 'Welcome to Storybook');
});
});
describe('Button story', () => {
it('should load primary story', () => {
cy.navigateToStory('example-button', 'primary');
cy.getStoryElement()
.find('button')
.should('have.class', 'storybook-button')
.and('have.class', 'storybook-button--primary');
});
it('should load secondary story', () => {
cy.navigateToStory('example-button', 'secondary');
cy.getStoryElement()
.find('button')
.should('have.class', 'storybook-button')
.and('have.class', 'storybook-button--secondary');
});
it('should load small story', () => {
cy.navigateToStory('example-button', 'small');
cy.getStoryElement()
.find('button')
.should('have.class', 'storybook-button')
.and('have.class', 'storybook-button--small');
});
it('should load large story', () => {
cy.navigateToStory('example-button', 'large');
cy.getStoryElement()
.find('button')
.should('have.class', 'storybook-button')
.and('have.class', 'storybook-button--large');
});
});
describe('Header story', () => {
it('should load and display logged in', () => {
cy.navigateToStory('example-header', 'logged-in');
cy.getStoryElement().find('header').should('contain.text', 'Acme');
cy.getStoryElement().find('button').should('contain.text', 'Log out');
});
it('should load and display logged out', () => {
cy.navigateToStory('example-header', 'logged-out');
cy.getStoryElement().find('header').should('contain.text', 'Acme');
cy.getStoryElement().find('button').first().should('contain.text', 'Log in');
cy.getStoryElement().find('button').last().should('contain.text', 'Sign up');
});
});
describe('Page story', () => {
skipOn('vue', () => {
it('should load and display logged out', () => {
cy.navigateToStory('example-page', 'logged-out');
cy.getStoryElement().should('contain.text', 'Acme');
cy.getStoryElement().find('button').first().should('contain.text', 'Log in');
cy.getStoryElement().find('button').last().should('contain.text', 'Sign up');
cy.getStoryElement().should('contain.text', 'Pages in Storybook');
});
it('should load and display logged in', () => {
cy.navigateToStory('example-page', 'logged-in');
cy.getStoryElement().find('header').should('contain.text', 'Acme');
cy.getStoryElement().find('button').should('contain.text', 'Log out');
cy.getStoryElement().should('contain.text', 'Pages in Storybook');
});
});
});
});

51
code/cypress/helper.ts
View File

@ -1,51 +0,0 @@
/* eslint-disable no-unused-expressions */
/* eslint-disable jest/valid-expect */
type StorybookApps = 'official-storybook';
type Addons = 'Actions' | 'Knobs';
const getUrl = (route: string) => {
const host = Cypress.env('location') || 'http://localhost:8001';
return `${host}/${route}`;
};
export const visit = (route = '') => {
cy.clearLocalStorage().visit(getUrl(route));
return cy.get(`#storybook-preview-iframe`).then({ timeout: 15000 }, (iframe) => {
return cy.wrap(iframe, { timeout: 10000 }).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('#storybook-root > *, #storybook-docs > *')).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;
return cy
.wrap(iframe)
.should(() => {
expect(element).not.null;
if (element !== null) {
expect(element.querySelector('#storybook-root > *')).not.null;
}
})
.then(() => {
return cy.wrap(element).get('#storybook-root');
});
});
};

40
code/cypress/integration/navigation.spec.ts
View File

@ -1,40 +0,0 @@
import { visit } from '../helper';
describe('Navigation', () => {
before(() => {
visit('official-storybook');
});
it('should search navigation item', () => {
cy.get('#storybook-explorer-searchfield').click({ force: true });
cy.get('#storybook-explorer-searchfield').clear();
cy.get('#storybook-explorer-searchfield').type('syntax');
cy.get('#storybook-explorer-menu button')
.should('contain', 'SyntaxHighlighter')
.and('not.contain', 'a11y');
});
it('should display no results after searching a non-existing navigation item', () => {
cy.get('#storybook-explorer-searchfield').click({ force: true });
cy.get('#storybook-explorer-searchfield').clear();
cy.get('#storybook-explorer-searchfield').type('zzzzzzzzzz');
cy.get('#storybook-explorer-menu button').should('be.hidden');
});
});
describe('Routing', () => {
it('should navigate to sibling story sibling', () => {
visit('official-storybook/?path=/story/basics-actionbar--single-item');
cy.get('#basics-actionbar--many-items').click({ force: true });
cy.url().should('include', 'path=/story/basics-actionbar--many-items');
});
it('should directly visit a certain story and render correctly', () => {
visit('official-storybook/?path=/story/basics-actionbar--single-item');
cy.getStoryElement().should('contain.text', 'Clear');
});
});

22
code/cypress/plugins/index.js
View File

@ -1,22 +0,0 @@
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
const wp = require('@cypress/webpack-preprocessor');
const webpackConfig = require('./webpack.config');
module.exports = (on) => {
const options = {
webpackOptions: webpackConfig,
};
on('file:preprocessor', wp(options));
};

21
code/cypress/plugins/webpack.config.js
View File

@ -1,21 +0,0 @@
module.exports = {
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [
{
test: /\.ts$/,
exclude: [/node_modules/],
use: [
{
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true,
},
},
],
},
],
},
};

70
code/cypress/report-teamcity-metadata.ts
View File

@ -1,70 +0,0 @@
import path from 'path';
import fs from 'fs-extra';
import { findSuitesAndTests } from 'mocha-list-tests';
const testsDir = path.join(__dirname, 'integration');
const videosDir = path.join(__dirname, 'videos');
const screensDir = path.join(__dirname, 'screenshots');
let prevFoundTests: string[] = [];
function getTests(fileName: string) {
const { tests } = findSuitesAndTests(path.join(testsDir, fileName));
const newTests = tests.filter((test: string) => !prevFoundTests.includes(test));
prevFoundTests = tests;
return newTests.map((test: string) => test.split(/\./));
}
const fullTestName = (suite: string, testName: string) => `${suite}: ${testName}`;
async function report() {
const hookFailures: { [file: string]: [string, string][] } = {};
const reports: any[] = [];
try {
const testFiles = await fs.readdir(screensDir);
await Promise.all(
testFiles.map(async (testFile) => {
const files = await fs.readdir(path.join(screensDir, testFile));
files.forEach((file) => {
const match = file.match(/^(.*) \(failed\).png$/);
if (match == null) {
return;
}
const [suite, test, hookPart] = match[1].split(' -- ');
let testName = test;
const hook = hookPart?.match(/^(.*) hook$/)?.[1];
if (hook != null) {
testName = `"${hook}" hook for "${test}"`;
hookFailures[testFile] = hookFailures[testFile] || [];
hookFailures[testFile].push([suite, testName]);
}
reports.push({
name: 'Screenshot',
testName: fullTestName(suite, testName),
type: 'image',
value: `screenshots.tar.gz!${testFile}/${file}`,
});
});
})
);
} catch (e) {
// ignore
}
const videoFiles = await fs.readdir(videosDir);
videoFiles.forEach((videoFile) => {
const testFile = videoFile.replace(/\.mp4$/, '');
const tests = [...getTests(testFile), ...(hookFailures[testFile] || [])];
tests.forEach(([suite, testName]) =>
reports.unshift({
name: 'Video',
testName: fullTestName(suite, testName),
type: 'video',
value: `videos.tar.gz!${videoFile}`,
})
);
});
}
report();

134
code/cypress/support/commands.js
View File

@ -1,134 +0,0 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
const logger = console;
Cypress.Commands.add(
'console',
{
prevSubject: true,
},
(subject, method = 'log') => {
logger[method]('The subject is', subject);
return subject;
}
);
Cypress.Commands.add('visitStorybook', () => {
cy.log('visitStorybook');
const host = Cypress.env('location') || 'http://localhost:8001';
return cy
.clearLocalStorage()
.visit(`${host}/?path=/story/example-introduction--docs`)
.get(`#storybook-preview-iframe`, { log: false })
.its('0.contentDocument.body', { log: false })
.should('not.be.empty')
.then((body) => cy.wrap(body, { log: false }))
.find('#storybook-docs', { log: false })
.should('not.be.empty');
});
Cypress.Commands.add('getStoryElement', {}, () => {
cy.log('getStoryElement');
return cy
.get(`#storybook-preview-iframe`, { log: false })
.its('0.contentDocument.body', { log: false })
.should('not.be.empty')
.then((body) => cy.wrap(body, { log: false }))
.find('#storybook-root', { log: false })
.should('not.be.empty')
.then((storyRoot) => cy.wrap(storyRoot, { log: false }));
});
Cypress.Commands.add('getDocsElement', {}, () => {
cy.log('getDocsElement');
return cy
.get(`#storybook-preview-iframe`, { log: false })
.its('0.contentDocument.body', { log: false })
.should('not.be.empty')
.then((body) => cy.wrap(body, { log: false }))
.find('#storybook-docs', { log: false })
.should('not.be.empty')
.then((storyRoot) => cy.wrap(storyRoot, { log: false }));
});
Cypress.Commands.add('getCanvasElement', {}, () => {
cy.log('getCanvasElement');
return cy
.get(`#storybook-preview-iframe`, { log: false })
.then((iframe) => cy.wrap(iframe, { log: false }));
});
Cypress.Commands.add('getCanvasBodyElement', {}, () => {
cy.log('getCanvasBodyElement');
return cy
.getCanvasElement()
.its('0.contentDocument.body', { log: false })
.should('not.be.empty')
.then((body) => cy.wrap(body, { log: false }));
});
Cypress.Commands.add('navigateToStory', (kind, name) => {
const kindId = kind.replace(/ /g, '-').toLowerCase();
const storyId = name.replace(/ /g, '-').toLowerCase();
const storyLinkId = `#${kindId}--${storyId}`;
cy.log(`navigateToStory ${kind} ${name}`);
// Section might be collapsed
if (Cypress.$(`#${kindId}`).length) {
cy.get(`#${kindId}`).then(async ($item) => {
if ($item.attr('aria-expanded') === 'false') {
await $item.click();
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(300);
}
});
}
cy.get(storyLinkId).click({ force: true });
// FIXME: Find a way to not wait like this but check for an element in the UI
// A pause is good when switching stories
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(300);
// assert url changes
const viewMode = name === 'docs' ? 'docs' : 'story';
cy.url().should('include', `path=/${viewMode}/${kindId}--${storyId}`);
cy.get(storyLinkId).should('have.attr', 'data-selected', 'true');
// A pause is good when switching stories
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(50);
});
Cypress.Commands.add('viewAddonPanel', (name) => {
cy.get(`[role=tablist] button[role=tab]`).contains(name).click();
});
Cypress.Commands.add('viewAddonTab', (name) => {
cy.get(`[role=main] button[type=button]`).contains(name).click();
});

59
code/cypress/support/index.d.ts vendored
View File

@ -1,59 +0,0 @@
/// <reference types="cypress" />
type LoggerMethod = 'log' | 'info' | 'debug';
declare namespace Cypress {
interface Chainable {
/**
* Visit storybook's introduction page
*/
visitStorybook(): Chainable<Element>;
/**
* Custom command to select the DOM element of a story in the canvas tab.
*/
getStoryElement(): Chainable<Element>;
/**
* Custom command to select the DOM element of a docs story in the canvas tab.
*/
getDocsElement(): Chainable<Element>;
/**
* Custom command to select the DOM element of the preview iframe in the canvas tab.
*/
getCanvasElement(): Chainable<Element>;
/**
* Custom command to select the DOM element of the body from the preview iframe in the canvas tab.
*/
getCanvasBodyElement(): Chainable<Element>;
/**
* Navigate to a story.
* 'Storybook Example/Button'
* - kind: `Storybook Example`
* - name: `Button`
* @param kind Story kind
* @param name name of the story
*/
navigateToStory(kind: string, name: string): Chainable<Element>;
/**
* Display addon panel
* @param name of the addon
*/
viewAddonPanel(name: string): Chainable<Element>;
/**
* Display main tab
* @param name of the addon
*/
viewAddonTab(name: string): Chainable<Element>;
/**
* Returns the element while logging it.
*/
console(method: LoggerMethod): Chainable<Element>;
}
}

28
code/cypress/support/index.js
View File

@ -1,28 +0,0 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands';
// Turn off all uncaught exception handling
// https://docs.cypress.io/guides/references/migration-guide#Uncaught-exception-and-unhandled-rejections
Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
return false;
});
// Alternatively you can use CommonJS syntax:
// require('./commands')

11
code/cypress/tsconfig.json
View File

@ -1,11 +0,0 @@
{
"compilerOptions": {
"strict": true,
"baseUrl": "../node_modules",
"target": "es5",
"lib": ["es2017", "dom"],
"types": ["cypress", "node"],
"esModuleInterop": true
},
"include": ["**/*.ts"]
}

1
code/cypress/typings.d.ts vendored
View File

@ -1 +0,0 @@
declare module 'mocha-list-tests';

6
code/package.json
View File

@ -88,8 +88,6 @@
"test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js",
"test-puppeteer": "jest --projects examples/official-storybook/storyshots-puppeteer",
"test:cli": "npm --prefix lib/cli run test",
"test:e2e-examples": "cypress run",
"test:e2e-examples-gui": "concurrently --success first --kill-others \"cypress open\" \"yarn serve-storybooks\"",
"test:e2e-examples-playwright": "playwright test",
"test:e2e-framework": "ts-node --project=../scripts/tsconfig.json ../scripts/run-e2e.ts"
},
@ -284,7 +282,6 @@
"esbuild-loader": "^2.19.0",
"esbuild-plugin-alias": "^0.2.1",
"eslint": "^7.17.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-storybook": "^0.3.5",
@ -380,9 +377,6 @@
}
},
"optionalDependencies": {
"@cypress/skip-test": "^2.6.1",
"@cypress/webpack-preprocessor": "^5.9.1",
"cypress": "8.7.0",
"puppeteer": "^2.1.1",
"ts-loader": "^9.2.8",
"verdaccio": "^4.10.0",

1131
code/yarn.lock
View File

File diff suppressed because it is too large Load Diff

4
scripts/package.json
View File

@ -110,7 +110,6 @@
"esbuild": "^0.14.48",
"esbuild-plugin-alias": "^0.2.1",
"eslint": "^7.17.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-storybook": "^0.3.5",
@ -177,9 +176,6 @@
"@types/lodash": "^4"
},
"optionalDependencies": {
"@cypress/skip-test": "^2.6.1",
"@cypress/webpack-preprocessor": "^5.9.1",
"cypress": "8.7.0",
"puppeteer": "^2.1.1",
"ts-loader": "^9.2.8",
"verdaccio": "^4.10.0",

32
scripts/run-e2e.ts
View File

@ -1,4 +1,4 @@
import path, { join } from 'path';
import path from 'path';
import { ensureDir, pathExists, remove } from 'fs-extra';
import prompts from 'prompts';
import program from 'commander';
@ -13,7 +13,6 @@ import { Parameters } from '../code/lib/cli/src/repro-generators/configs';
import { exec } from '../code/lib/cli/src/repro-generators/scripts';
const logger = console;
let openCypressInUIMode = !process.env.CI;
export interface Options {
/** CLI repro template to use */
@ -24,7 +23,6 @@ export interface Options {
cwd?: string;
}
const rootDir = path.join(__dirname, '..');
const siblingDir = path.join(__dirname, '..', '..', 'storybook-e2e-testing');
program
@ -41,7 +39,6 @@ program
(value, previous) => previous.concat([value]),
[]
)
.option('--test-runner', 'Run Storybook test runner instead of cypress', false)
.option('--docs-mode', 'Run Storybook test runner in docs mode', false)
.option('--all', `run e2e tests for every framework`, false);
program.parse(process.argv);
@ -114,18 +111,6 @@ const serveStorybook = async ({ cwd }: Options, port: string) => {
return serve(staticDirectory, port);
};
const runCypress = async (location: string, name: string) => {
const cypressCommand = openCypressInUIMode ? 'open' : 'run';
await exec(
`CYPRESS_ENVIRONMENT=${name} yarn cypress ${cypressCommand} --config pageLoadTimeout=4000,execTimeout=4000,taskTimeout=4000,responseTimeout=4000,defaultCommandTimeout=4000,integrationFolder="cypress/generated",videosFolder="/tmp/cypress-record/${name}" --env location="${location}"`,
{ cwd: join(rootDir, 'code') },
{
startMessage: `🤖 Running Cypress tests`,
errorMessage: `🚨 E2E tests fails`,
}
);
};
const runStorybookTestRunner = async (options: Options) => {
const viewMode = runTestsInDocsMode ? 'docs' : 'story';
await exec(
@ -194,11 +179,7 @@ const runTests = async ({ name, ...rest }: Parameters) => {
logger.log();
try {
if (shouldUseTestRunner) {
await runStorybookTestRunner(options);
} else {
await runCypress('http://localhost:4000', name);
}
await runStorybookTestRunner(options);
logger.info(`🎉 Storybook is working great with ${name}!`);
} catch (e) {
@ -269,14 +250,6 @@ const getConfig = async (): Promise<Parameters[]> => {
e2eConfigsToRun = e2eConfigsToRun.filter((config) => frameworkArgs.includes(config.name));
} else if (!process.env.CI) {
const selectedValues = await prompts([
{
type: 'toggle',
name: 'openCypressInUIMode',
message: 'Open cypress in UI mode',
initial: false,
active: 'yes',
inactive: 'no',
},
{
type: 'toggle',
name: 'useLocalSbCli',
@ -310,7 +283,6 @@ const getConfig = async (): Promise<Parameters[]> => {
}
useLocalSbCli = selectedValues.useLocalSbCli;
openCypressInUIMode = selectedValues.openCypressInUIMode;
e2eConfigsToRun = selectedValues.frameworks;
}

882
scripts/yarn.lock
View File

File diff suppressed because it is too large Load Diff