Skip to content

Commit

Permalink
Merge pull request #10702 from storybookjs/tech/ci-example-overhaul-c…
Browse files Browse the repository at this point in the history
…lean

Tech/ci example overhaul clean
  • Loading branch information
tooppaaa authored May 19, 2020
2 parents 4c1a662 + 95380d3 commit 8fd3ca6
Show file tree
Hide file tree
Showing 61 changed files with 1,732 additions and 836 deletions.
111 changes: 87 additions & 24 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
version: 2.1

aliases:
- &defaults
working_directory: /tmp/storybook
Expand All @@ -15,6 +15,7 @@ jobs:
name: Restore core dependencies cache
keys:
- core-dependencies-v5-{{ checksum "yarn.lock" }}
- core-dependencies-v5-
- run:
name: Install dependencies
command: yarn install
Expand All @@ -25,9 +26,7 @@ jobs:
name: Cache core dependencies
key: core-dependencies-v5-{{ checksum "yarn.lock" }}
paths:
- ~/.cache
- node_modules
- /root/.cache
- persist_to_workspace:
root: .
paths:
Expand Down Expand Up @@ -91,26 +90,89 @@ jobs:
root: .
paths:
- built-storybooks
e2e:
publish:
<<: *defaults
steps:
- checkout
- attach_workspace:
at: .
- run:
name: running local registry
command: yarn local-registry --publish
- persist_to_workspace:
root: .
paths:
- .verdaccio-cache
examples-v2:
docker:
- image: cypress/included:4.5.0
environment:
TERM: xterm
working_directory: /tmp/storybook
parallelism: 10
steps:
- checkout
- attach_workspace:
at: .
- run:
name: running local registry
command: yarn local-registry --port 6000 --open
background: true
- run:
name: wait for registry
command: yarn wait-on http://localhost:6000
- run:
name: set registry
command: yarn config set registry http://localhost:6000/
- run:
name: test local registry
command: yarn info @storybook/core
- run:
name: run e2e tests
command: yarn test:e2e-framework
- store_artifacts:
path: /tmp/storybook/cypress
destination: cypress
examples-v2-yarn-2:
docker:
- image: cypress/base:8
- image: cypress/included:4.5.0
environment:
TERM: xterm
working_directory: /tmp/storybook
# parallelism: 10
steps:
- checkout
- attach_workspace:
at: .
- run:
name: install cypress
command: yarn cypress install
- save_cache:
name: Cache core dependencies
key: core-dependencies-v5-{{ checksum "yarn.lock" }}
paths:
- ~/.cache
- node_modules
- /root/.cache
name: running local registry
command: yarn local-registry --port 6000 --open
background: true
- run:
name: wait for registry
command: yarn wait-on http://localhost:6000
- run:
name: set registry
command: yarn config set registry http://localhost:6000/
- run:
name: test local registry
command: yarn info @storybook/core
- run:
name: run e2e tests
command: yarn test:e2e-framework yarn2Cra
- store_artifacts:
path: /tmp/storybook/cypress
destination: cypress
e2e:
working_directory: /tmp/storybook
docker:
- image: cypress/included:4.5.0
environment:
TERM: xterm
steps:
- checkout
- attach_workspace:
at: .
- run:
name: running example
command: yarn serve-storybooks
Expand All @@ -120,7 +182,7 @@ jobs:
command: yarn await-serve-storybooks
- run:
name: cypress run
command: yarn cypress run
command: yarn test:e2e

smoke-tests:
<<: *defaults
Expand Down Expand Up @@ -206,10 +268,6 @@ jobs:
<<: *defaults
steps:
- checkout
- restore_cache:
name: Restore docs dependencies cache
keys:
- docs-dependencies-v3-{{ checksum "docs/yarn.lock" }}
- run:
name: Install dependencies
command: |
Expand All @@ -220,11 +278,6 @@ jobs:
command: |
cd docs
yarn build
- save_cache:
name: Cache docs dependencies
key: docs-dependencies-v3-{{ checksum "docs/yarn.lock" }}
paths:
- ~/.cache
lint:
<<: *defaults
steps:
Expand Down Expand Up @@ -256,6 +309,7 @@ jobs:
- run:
name: Upload coverage
command: yarn coverage

workflows:
test:
jobs:
Expand Down Expand Up @@ -287,6 +341,15 @@ workflows:
- chromatic:
requires:
- examples
- publish:
requires:
- build
- examples-v2:
requires:
- publish
- examples-v2-yarn-2:
requires:
- publish
deploy:
jobs:
- docs
Expand Down
2 changes: 2 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ module.exports = {
{
files: [
'**/__tests__/**',
'scripts/**',
'**/__testfixtures__/**',
'**/*.test.*',
'**/*.stories.*',
Expand All @@ -26,6 +27,7 @@ module.exports = {
},
},
{ files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
{ files: 'cypress/**', rules: { 'jest/expect-expect': 'off' } },
{
files: ['**/*.stories.*'],
rules: {
Expand Down
8 changes: 1 addition & 7 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,13 @@ node_modules
*.log
.idea
*.iml
.vscode/*
!.vscode/launch.json
*.sw*
npm-shrinkwrap.json
dist
ts3.5
.tern-port
*.DS_Store
.cache
junit.xml
coverage/
*.lerna_backup
build
Expand All @@ -27,13 +24,10 @@ integration/__image_snapshots__/__diff_output__
/examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
lib/*.jar
lib/**/dll
.expo/packager-info.json
scripts/storage
htpasswd
/false
storybook-out
/addons/docs/common/config-*
built-storybooks
cypress/videos
cypress/screenshots
examples/ember-cli/ember-output
.verdaccio-cache
2 changes: 1 addition & 1 deletion app/marko/src/demo/Welcome.marko
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,5 @@ a {
</style>

<div id="app">
<h1>Welcome to Storybook for Marko</h1>
<h1>Welcome to storybook</h1>
</div>
1 change: 0 additions & 1 deletion app/server/src/typings.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
declare module '@storybook/core/*';
declare module 'global';
declare module 'fs-extra';

// will be provided by the webpack define plugin
declare var NODE_ENV: string | undefined;
6 changes: 5 additions & 1 deletion cypress.json
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
{}
{
"defaultCommandTimeout": 20000,
"requestTimeout": 20000,
"responseTimeout": 60000
}
4 changes: 3 additions & 1 deletion cypress/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
"plugin:cypress/recommended"
],
"rules": {
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
"import/no-extraneous-dependencies": [
"error", { "devDependencies": true }
]
}
}
31 changes: 31 additions & 0 deletions cypress/generated/addon-action.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { visit, clickAddon } from '../helper';

describe('addon-action', () => {
before(() => {
visit();
cy.get('#button').click();
});

it('should trigger an action', () => {
// click on the button
cy.get('#button--with-some-emoji-and-action').click();

// assert url changes
cy.url().should('include', 'path=/story/button--with-some-emoji-and-action');

// check for selected element
cy.get('#button--with-some-emoji-and-action').should('have.class', 'selected');

// check for content
cy.getStoryElement().find('button').click();

// click on addon
clickAddon('Actions');

// TODO @yannbf improve tab identifier on addons
// get the logs
cy.get('#storybook-panel-root')
.contains(/This was clicked/)
.should('be.visible');
});
});
25 changes: 25 additions & 0 deletions cypress/generated/addon-link.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { visit, clickAddon } from '../helper';

describe('addon-link', () => {
before(() => {
visit();
cy.get('#button').click();
});

it('should redirect to another story', () => {
// click on the button
cy.get('#button--button-with-link-to-another-story').click();

// assert url changes
cy.url().should('include', 'path=/story/button--button-with-link-to-another-story');

// check for selected element
cy.get('#button--button-with-link-to-another-story').should('have.class', 'selected');

// check for content
cy.getStoryElement().find('button').click();

// assert url changes
cy.url().should('include', 'path=/story/welcome--to-storybook');
});
});
35 changes: 35 additions & 0 deletions cypress/generated/basic.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { visit } from '../helper';

describe('Basic Flow', () => {
before(() => {
visit();
});

it('should load welcome flow', () => {
// assert url changes
cy.url().should('include', 'path=/story/welcome--to-storybook');

// check for selected element
cy.get('#welcome--to-storybook').should('have.class', 'selected');

// check for content
cy.getStoryElement().should('contain.text', 'Welcome to storybook');
});

describe('Button story', () => {
before(() => {
cy.get('#button').click();
});

it('should be visited succesfully', () => {
// assert url changes
cy.url().should('include', 'path=/story/button--text');

// check for selected element
cy.get('#button--text').should('have.class', 'selected');

// check for content
cy.getStoryElement().find('button').should('contain.text', 'Hello Button');
});
});
});
14 changes: 9 additions & 5 deletions cypress/helper.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
/* eslint-disable no-unused-expressions */
/* eslint-disable jest/valid-expect */
const baseUrl = 'http://localhost:8001';

type StorybookApps = 'official-storybook';

type Addons = 'Knobs';
type Addons = 'Actions' | 'Knobs';

const getUrl = (route: string) => {
const host = Cypress.env('location') || 'http://localhost:8001';

return `${host}/${route}`;
};

export const visitExample = (app: StorybookApps, route = '') => {
export const visit = (route = '') => {
return cy
.clearLocalStorage()
.visit(`${baseUrl}/${app}/${route}`)
.visit(getUrl(route))
.get(`#storybook-preview-iframe`)
.then({ timeout: 10000 }, (iframe) => {
return cy.wrap(iframe, { timeout: 10000 }).should(() => {
Expand Down
Loading

0 comments on commit 8fd3ca6

Please sign in to comment.