Skip to content

Commit

Permalink
✨ add storybook testing
Browse files Browse the repository at this point in the history
  • Loading branch information
Yago committed Aug 11, 2020
1 parent 5aab1b4 commit ea2fcfa
Show file tree
Hide file tree
Showing 16 changed files with 6,764 additions and 187 deletions.
13 changes: 11 additions & 2 deletions .github/workflows/ci.yml
Expand Up @@ -14,12 +14,21 @@ jobs:
node-version: '14.x'
- name: Build project
run: yarn install && yarn build
# Comment the following line if your project is in your root folder
working-directory: playground
- name: Cypress tests
- name: Unit tests
run: yarn jest:run
- name: Cypress App tests
uses: cypress-io/github-action@v2
with:
start: yarn start
wait-on: http://localhost:3000
browser: chrome
config: baseUrl=http://localhost:3000,integrationFolder=cypress/integration,testFiles=**/*.*
- name: Cypress Storybook tests
uses: cypress-io/github-action@v2
with:
start: yarn storybook:start
wait-on: http://localhost:6006
browser: chrome
config: baseUrl=http://localhost:6006,integrationFolder=playground,testFiles=**/*.e2e.*

3 changes: 2 additions & 1 deletion .gitignore
@@ -1,3 +1,4 @@
node_modules
cypress/videos/*
cypress/screenshots/*
cypress/screenshots/*
storybook-static
10 changes: 10 additions & 0 deletions .storybook/main.js
@@ -0,0 +1,10 @@
module.exports = {
"stories": [
"../**/*.stories.mdx",
"../**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
}
5 changes: 5 additions & 0 deletions .storybook/preview.js
@@ -0,0 +1,5 @@
import '../playground/src/styles/base.css';

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}
4 changes: 3 additions & 1 deletion cypress.json
@@ -1,3 +1,5 @@
{
"baseUrl": "http://localhost:3000"
"baseUrl": "http://localhost:3000",
"integrationFolder": ".",
"testFiles": "**/*.e2e.*"
}
File renamed without changes.
5 changes: 5 additions & 0 deletions cypress/support/commands.js
@@ -1,3 +1,4 @@
/* globals Cypress, cy */
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
Expand All @@ -23,3 +24,7 @@
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

Cypress.Commands.add('visitStorybook', id => {
cy.visit(`http://localhost:6006/iframe.html?id=${id}&viewMode=story`);
});
10 changes: 9 additions & 1 deletion package.json
Expand Up @@ -12,13 +12,21 @@
"cypress:run": "cypress run",
"jest:start": "jest --watchAll",
"jest:run": "jest",
"start": "cd playground && node_modules/.bin/next start"
"start": "cd playground && node_modules/.bin/next start",
"storybook:start": "NODE_PATH=playground/src start-storybook -p 6006",
"storybook:build": "NODE_PATH=playground/src build-storybook"
},
"devDependencies": {
"@babel/core": "^7.11.1",
"@storybook/addon-actions": "^6.0.0",
"@storybook/addon-essentials": "^6.0.0",
"@storybook/addon-links": "^6.0.0",
"@storybook/react": "^6.0.0",
"@types/jest": "^26.0.9",
"@typescript-eslint/eslint-plugin": "^3.8.0",
"@typescript-eslint/parser": "^3.8.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"cypress": "^4.12.1",
"eslint": "^7.2.0",
"eslint-config-airbnb-typescript": "^9.0.0",
Expand Down
1 change: 1 addition & 0 deletions playground/package.json
Expand Up @@ -19,6 +19,7 @@
"twin.macro": "^1.7.0"
},
"devDependencies": {
"@types/jest": "^26.0.9",
"@types/node": "^12.12.21",
"@types/react": "^16.9.16",
"@types/react-dom": "^16.9.4",
Expand Down
19 changes: 19 additions & 0 deletions playground/src/components/Counter/Counter.e2e.ts
@@ -0,0 +1,19 @@
/* globals cy */

describe('Counter', () => {
beforeEach(() => cy.visitStorybook('counter--default'));

it('should display the count', () => {
cy.get('#counter > span').should('have.length', 1);
});

it('should increase the count', () => {
cy.get('#counter > button:last-child').click();
cy.get('#counter > span').should('contain', '1');
});

it('should decrease the count', () => {
cy.get('#counter > button:first-child').click();
cy.get('#counter > span').should('contain', '-1');
});
});
19 changes: 19 additions & 0 deletions playground/src/components/Counter/Counter.stories.tsx
@@ -0,0 +1,19 @@
import React from 'react';
import { Meta, Story } from '@storybook/react';

import Counter, { CounterProps } from './Counter';

export default {
title: 'Counter',
component: Counter,
argTypes: {
count: { control: 'number' },
},
} as Meta;

const Template: Story<CounterProps> = args => <Counter {...args} />;

export const Default = Template.bind({});
Default.args = {
count: 0,
};
16 changes: 11 additions & 5 deletions playground/src/components/Counter/Counter.tsx
Expand Up @@ -5,22 +5,26 @@ import tw from 'twin.macro';

import { add, subtract } from 'utils';

const Counter = (): JSX.Element => {
const [count, setCount] = useState(0);
export interface CounterProps {
count: number;
}

const Counter = ({ count: defaultCount }: CounterProps): JSX.Element => {
const [count, setCount] = useState(defaultCount);

return (
<div id="counter" tw="flex items-center justify-center w-full h-screen">
<button
type="button"
onClick={() => setCount(i => subtract(i, 1))}
onClick={() => setCount(subtract(count, 1))}
tw="bg-blue-500 text-white rounded py-2 px-4"
>
-
</button>
<span tw="px-4 font-bold text-2xl">{count}</span>
<button
type="button"
onClick={() => setCount(i => add(i, 1))}
onClick={() => setCount(add(count, 1))}
tw="bg-blue-500 text-white rounded py-2 px-4"
>
+
Expand All @@ -29,6 +33,8 @@ const Counter = (): JSX.Element => {
);
};

Counter.defaultProps = {};
Counter.defaultProps = {
count: 0,
};

export default Counter;
7 changes: 5 additions & 2 deletions playground/tsconfig.json
Expand Up @@ -4,14 +4,17 @@
"./src/types/twin.d.ts"
],
"compilerOptions": {
"baseUrl": "src",
"baseUrl": "src"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
"node_modules",
"**/*.spec.*",
"**/*.e2e.*",
"**/*.stories.*"
]
}
92 changes: 90 additions & 2 deletions playground/yarn.lock
Expand Up @@ -1127,6 +1127,16 @@
postcss "7.0.32"
purgecss "^2.3.0"

"@jest/types@^25.5.0":
version "25.5.0"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
dependencies:
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^15.0.0"
chalk "^3.0.0"

"@next/react-dev-overlay@9.5.1":
version "9.5.1"
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.1.tgz#534e84fbd67f8b2ad0f7b8363ae069943a6b5e12"
Expand All @@ -1153,6 +1163,34 @@
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==

"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
version "2.0.3"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==

"@types/istanbul-lib-report@*":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
dependencies:
"@types/istanbul-lib-coverage" "*"

"@types/istanbul-reports@^1.1.1":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2"
integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
dependencies:
"@types/istanbul-lib-coverage" "*"
"@types/istanbul-lib-report" "*"

"@types/jest@^26.0.9":
version "26.0.9"
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.9.tgz#0543b57da5f0cd949c5f423a00c56c492289c989"
integrity sha512-k4qFfJ5AUKrWok5KYXp2EPm89b0P/KZpl7Vg4XuOTVVQEhLDBDBU3iBFrjjdgd8fLw96aAtmnwhXHl63bWeBQQ==
dependencies:
jest-diff "^25.2.1"
pretty-format "^25.2.1"

"@types/json-schema@^7.0.4":
version "7.0.5"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
Expand Down Expand Up @@ -1193,6 +1231,18 @@
"@types/prop-types" "*"
csstype "^3.0.2"

"@types/yargs-parser@*":
version "15.0.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==

"@types/yargs@^15.0.0":
version "15.0.5"
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.5.tgz#947e9a6561483bdee9adffc983e91a6902af8b79"
integrity sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==
dependencies:
"@types/yargs-parser" "*"

"@webassemblyjs/ast@1.9.0":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
Expand Down Expand Up @@ -1448,7 +1498,7 @@ ansi-styles@^3.2.1:
dependencies:
color-convert "^1.9.0"

ansi-styles@^4.1.0:
ansi-styles@^4.0.0, ansi-styles@^4.1.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
Expand Down Expand Up @@ -1966,6 +2016,14 @@ chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"

chalk@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
dependencies:
ansi-styles "^4.1.0"
supports-color "^7.1.0"

"chalk@^3.0.0 || ^4.0.0", chalk@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
Expand Down Expand Up @@ -2577,6 +2635,11 @@ detective@^5.2.0:
defined "^1.0.0"
minimist "^1.1.1"

diff-sequences@^25.2.6:
version "25.2.6"
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==

diffie-hellman@^5.0.0:
version "5.0.3"
resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
Expand Down Expand Up @@ -3512,6 +3575,21 @@ isobject@^3.0.0, isobject@^3.0.1:
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

jest-diff@^25.2.1:
version "25.5.0"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
dependencies:
chalk "^3.0.0"
diff-sequences "^25.2.6"
jest-get-type "^25.2.6"
pretty-format "^25.5.0"

jest-get-type@^25.2.6:
version "25.2.6"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==

jest-worker@24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
Expand Down Expand Up @@ -4764,6 +4842,16 @@ prepend-http@^1.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=

pretty-format@^25.2.1, pretty-format@^25.5.0:
version "25.5.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
dependencies:
"@jest/types" "^25.5.0"
ansi-regex "^5.0.0"
ansi-styles "^4.0.0"
react-is "^16.12.0"

pretty-hrtime@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
Expand Down Expand Up @@ -4917,7 +5005,7 @@ react-dom@^16.12.0:
prop-types "^15.6.2"
scheduler "^0.19.1"

react-is@16.13.1, react-is@^16.8.1:
react-is@16.13.1, react-is@^16.12.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
Expand Down
15 changes: 9 additions & 6 deletions tsconfig.json
Expand Up @@ -18,13 +18,16 @@
"skipLibCheck": true,
"strict": true,
"target": "esnext",
"types": ["jest"],
"types": ["jest"]
},
"exclude": ["node_modules"],
"include": [
"./**/*.ts",
"./**/*.tsx",
"./**/*.js",
"./**/*.jsx"
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules",
"**/*.spec.*",
"**/*.e2e.*",
"**/*.stories.*"
]
}

0 comments on commit ea2fcfa

Please sign in to comment.