From 86602c55ce79accaaba8a57bd8e4b0d75745fb4b Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 18 Oct 2019 23:45:01 +0200 Subject: [PATCH 1/6] Storybook: Add storyshots integration to generate unit tests --- babel.config.js | 5 +- package-lock.json | 416 ++++ package.json | 2 + storybook/.babelrc | 7 +- storybook/config.js | 6 +- storybook/test/__snapshots__/index.js.snap | 2554 ++++++++++++++++++++ storybook/test/index.js | 10 + test/unit/config/register-context.js | 6 + test/unit/jest.config.js | 1 + 9 files changed, 3003 insertions(+), 4 deletions(-) create mode 100644 storybook/test/__snapshots__/index.js.snap create mode 100644 storybook/test/index.js create mode 100644 test/unit/config/register-context.js diff --git a/babel.config.js b/babel.config.js index f950b6603a5127..83d78a0eeadb6d 100644 --- a/babel.config.js +++ b/babel.config.js @@ -3,6 +3,9 @@ module.exports = function( api ) { return { presets: [ '@wordpress/babel-preset-default' ], - plugins: [ 'babel-plugin-emotion', 'babel-plugin-inline-json-import' ], + plugins: [ + 'babel-plugin-emotion', + 'babel-plugin-inline-json-import', + ], }; }; diff --git a/package-lock.json b/package-lock.json index 04df161db31987..5acfb2af0aa7f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5367,6 +5367,395 @@ } } }, + "@storybook/addon-storyshots": { + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-5.2.4.tgz", + "integrity": "sha512-MPTeTdvyHUyvUPUEX7vFtnUkZJTJlyhwiUm/pEaRRj+QNemKD2k3YwudxUI0UI0Jt+AJP4EYxiSwvc31yjkK2A==", + "dev": true, + "requires": { + "@jest/transform": "^24.9.0", + "@storybook/addons": "5.2.4", + "core-js": "^3.0.1", + "glob": "^7.1.3", + "global": "^4.3.2", + "jest-specific-snapshot": "^2.0.0", + "read-pkg-up": "^6.0.0", + "regenerator-runtime": "^0.12.1", + "ts-dedent": "^1.1.0" + }, + "dependencies": { + "@jest/console": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz", + "integrity": "sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==", + "dev": true, + "requires": { + "@jest/source-map": "^24.9.0", + "chalk": "^2.0.1", + "slash": "^2.0.0" + } + }, + "@jest/fake-timers": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-24.9.0.tgz", + "integrity": "sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==", + "dev": true, + "requires": { + "@jest/types": "^24.9.0", + "jest-message-util": "^24.9.0", + "jest-mock": "^24.9.0" + } + }, + "@jest/source-map": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-24.9.0.tgz", + "integrity": "sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==", + "dev": true, + "requires": { + "callsites": "^3.0.0", + "graceful-fs": "^4.1.15", + "source-map": "^0.6.0" + } + }, + "@jest/test-result": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-24.9.0.tgz", + "integrity": "sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==", + "dev": true, + "requires": { + "@jest/console": "^24.9.0", + "@jest/types": "^24.9.0", + "@types/istanbul-lib-coverage": "^2.0.0" + } + }, + "@jest/transform": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-24.9.0.tgz", + "integrity": "sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==", + "dev": true, + "requires": { + "@babel/core": "^7.1.0", + "@jest/types": "^24.9.0", + "babel-plugin-istanbul": "^5.1.0", + "chalk": "^2.0.1", + "convert-source-map": "^1.4.0", + "fast-json-stable-stringify": "^2.0.0", + "graceful-fs": "^4.1.15", + "jest-haste-map": "^24.9.0", + "jest-regex-util": "^24.9.0", + "jest-util": "^24.9.0", + "micromatch": "^3.1.10", + "pirates": "^4.0.1", + "realpath-native": "^1.1.0", + "slash": "^2.0.0", + "source-map": "^0.6.1", + "write-file-atomic": "2.4.1" + } + }, + "@jest/types": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz", + "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==", + "dev": true, + "requires": { + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^1.1.1", + "@types/yargs": "^13.0.0" + } + }, + "@types/yargs": { + "version": "13.0.3", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.3.tgz", + "integrity": "sha512-K8/LfZq2duW33XW/tFwEAfnZlqIfVsoyRB3kfXdPXYhl0nfM8mmh7GS0jg7WrX2Dgq/0Ha/pR1PaR+BvmWwjiQ==", + "dev": true, + "requires": { + "@types/yargs-parser": "*" + } + }, + "find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "requires": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + } + }, + "glob": { + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz", + "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "graceful-fs": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz", + "integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==", + "dev": true + }, + "jest-haste-map": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-24.9.0.tgz", + "integrity": "sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==", + "dev": true, + "requires": { + "@jest/types": "^24.9.0", + "anymatch": "^2.0.0", + "fb-watchman": "^2.0.0", + "fsevents": "^1.2.7", + "graceful-fs": "^4.1.15", + "invariant": "^2.2.4", + "jest-serializer": "^24.9.0", + "jest-util": "^24.9.0", + "jest-worker": "^24.9.0", + "micromatch": "^3.1.10", + "sane": "^4.0.3", + "walker": "^1.0.7" + } + }, + "jest-message-util": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.9.0.tgz", + "integrity": "sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@jest/test-result": "^24.9.0", + "@jest/types": "^24.9.0", + "@types/stack-utils": "^1.0.1", + "chalk": "^2.0.1", + "micromatch": "^3.1.10", + "slash": "^2.0.0", + "stack-utils": "^1.0.1" + } + }, + "jest-mock": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-24.9.0.tgz", + "integrity": "sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==", + "dev": true, + "requires": { + "@jest/types": "^24.9.0" + } + }, + "jest-regex-util": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-24.9.0.tgz", + "integrity": "sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==", + "dev": true + }, + "jest-serializer": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-24.9.0.tgz", + "integrity": "sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==", + "dev": true + }, + "jest-util": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz", + "integrity": "sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==", + "dev": true, + "requires": { + "@jest/console": "^24.9.0", + "@jest/fake-timers": "^24.9.0", + "@jest/source-map": "^24.9.0", + "@jest/test-result": "^24.9.0", + "@jest/types": "^24.9.0", + "callsites": "^3.0.0", + "chalk": "^2.0.1", + "graceful-fs": "^4.1.15", + "is-ci": "^2.0.0", + "mkdirp": "^0.5.1", + "slash": "^2.0.0", + "source-map": "^0.6.0" + } + }, + "jest-worker": { + "version": "24.9.0", + "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz", + "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==", + "dev": true, + "requires": { + "merge-stream": "^2.0.0", + "supports-color": "^6.1.0" + } + }, + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "requires": { + "p-locate": "^4.1.0" + } + }, + "merge-stream": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", + "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", + "dev": true + }, + "normalize-package-data": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", + "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", + "dev": true, + "requires": { + "hosted-git-info": "^2.1.4", + "resolve": "^1.10.0", + "semver": "2 || 3 || 4 || 5", + "validate-npm-package-license": "^3.0.1" + } + }, + "p-limit": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz", + "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==", + "dev": true, + "requires": { + "p-try": "^2.0.0" + } + }, + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "requires": { + "p-limit": "^2.2.0" + } + }, + "p-try": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", + "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "dev": true + }, + "parse-json": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", + "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1", + "lines-and-columns": "^1.1.6" + } + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true + }, + "path-parse": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", + "dev": true + }, + "read-pkg": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", + "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==", + "dev": true, + "requires": { + "@types/normalize-package-data": "^2.4.0", + "normalize-package-data": "^2.5.0", + "parse-json": "^5.0.0", + "type-fest": "^0.6.0" + }, + "dependencies": { + "type-fest": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", + "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", + "dev": true + } + } + }, + "read-pkg-up": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-6.0.0.tgz", + "integrity": "sha512-odtTvLl+EXo1eTsMnoUHRmg/XmXdTkwXVxy4VFE9Kp6cCq7b3l7QMdBndND3eAFzrbSAXC/WCUOQQ9rLjifKZw==", + "dev": true, + "requires": { + "find-up": "^4.0.0", + "read-pkg": "^5.1.1", + "type-fest": "^0.5.0" + } + }, + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", + "dev": true + }, + "resolve": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", + "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + }, + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + }, + "slash": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz", + "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "type-fest": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.5.2.tgz", + "integrity": "sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==", + "dev": true + }, + "write-file-atomic": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.1.tgz", + "integrity": "sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.11", + "imurmurhash": "^0.1.4", + "signal-exit": "^3.0.2" + } + } + } + }, "@storybook/addon-storysource": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-5.2.4.tgz", @@ -6889,6 +7278,12 @@ "integrity": "sha512-CXlavd8Q7ZQkB7sMpx9QKC/B7gUsjtftxMHNr7qGJaDiZZ+Qmhwe4Zt3aS9aXF7cn6BYQuFlKU1UlrebyKsh9g==", "dev": true }, + "@types/yargs-parser": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.1.0.tgz", + "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==", + "dev": true + }, "@typescript-eslint/experimental-utils": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-1.13.0.tgz", @@ -9579,6 +9974,12 @@ "@babel/template": "^7.0.0-beta.49" } }, + "babel-plugin-require-context-hook": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz", + "integrity": "sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==", + "dev": true + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -19872,6 +20273,15 @@ } } }, + "jest-specific-snapshot": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/jest-specific-snapshot/-/jest-specific-snapshot-2.0.0.tgz", + "integrity": "sha512-aXaNqBg/svwEpY5iQEzEHc5I85cUBKgfeVka9KmpznxLnatpjiqjr7QLb/BYNYlsrZjZzgRHTjQJ+Svx+dbdvg==", + "dev": true, + "requires": { + "jest-snapshot": "^24.1.0" + } + }, "jest-util": { "version": "24.7.1", "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.7.1.tgz", @@ -31698,6 +32108,12 @@ "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==", "dev": true }, + "ts-dedent": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-1.1.0.tgz", + "integrity": "sha512-CVCvDwMBWZKjDxpN3mU/Dx1v3k+sJgE8nrhXcC9vRopRfoa7vVzilNvHEAUi5jQnmFHpnxDx5jZdI1TpG8ny2g==", + "dev": true + }, "ts-pnp": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.4.tgz", diff --git a/package.json b/package.json index 11d03c86e8c7a1..d9fc01c5f058ea 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "@storybook/addon-a11y": "5.2.4", "@storybook/addon-docs": "5.2.4", "@storybook/addon-knobs": "5.2.4", + "@storybook/addon-storyshots": "5.2.4", "@storybook/addon-storysource": "5.2.4", "@storybook/addon-viewport": "5.2.4", "@storybook/react": "5.2.4", @@ -102,6 +103,7 @@ "babel-plugin-inline-json-import": "0.3.2", "babel-plugin-react-native-classname-to-style": "1.2.2", "babel-plugin-react-native-platform-specific-extensions": "1.1.1", + "babel-plugin-require-context-hook": "1.0.0", "benchmark": "2.1.4", "browserslist": "4.7.0", "chalk": "2.4.2", diff --git a/storybook/.babelrc b/storybook/.babelrc index fe77bd84598748..b2b3e792e2f972 100644 --- a/storybook/.babelrc +++ b/storybook/.babelrc @@ -3,5 +3,10 @@ "plugins": [ "babel-plugin-emotion", "babel-plugin-inline-json-import" - ] + ], + "env": { + "test": { + "plugins": [ "babel-plugin-require-context-hook" ] + } + } } diff --git a/storybook/config.js b/storybook/config.js index 78a2ad8a01cde8..8e14fe8cadc66c 100644 --- a/storybook/config.js +++ b/storybook/config.js @@ -16,8 +16,10 @@ addDecorator( withA11y ); addDecorator( withKnobs ); configure( [ - require.context( './stories/', true, /\/.+\.(js|mdx)$/ ), + // StoryShots addon doesn't support MDX files at the moment. + // It should ignore the playground in the initial pass as well. + process.env.NODE_ENV !== 'test' && require.context( './stories/', true, /\/.+\.(js|mdx)$/ ), require.context( '../packages/components/src/', true, /\/stories\/.+\.js$/ ), - ], + ].filter( Boolean ), module ); diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..33845d6d3381fc --- /dev/null +++ b/storybook/test/__snapshots__/index.js.snap @@ -0,0 +1,2554 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@wordpress/components Components|Animate Appear Bottom Left 1`] = ` +
+
+

+ Appear animation. Origin: + bottom left + . +

+
+ +
+`; + +exports[`@wordpress/components Components|Animate Appear Bottom Right 1`] = ` +
+
+

+ Appear animation. Origin: + bottom right + . +

+
+ +
+`; + +exports[`@wordpress/components Components|Animate Appear Top Left 1`] = ` +
+
+

+ Appear animation. Origin: + top left + . +

+
+ +
+`; + +exports[`@wordpress/components Components|Animate Appear Top Right 1`] = ` +
+
+

+ Appear animation. Origin: + top right + . +

+
+ +
+`; + +exports[`@wordpress/components Components|Animate Default 1`] = ` +
+
+

+ No default animation. Use one of type = "appear", "slide-in", or "loading". +

+
+ +
+`; + +exports[`@wordpress/components Components|Animate Loading 1`] = ` +
+
+

+ Loading animation. +

+
+ +
+`; + +exports[`@wordpress/components Components|Animate Slide In 1`] = ` +
+
+

+ Slide-in animation. +

+
+ +
+`; + +exports[`@wordpress/components Components|Button Default 1`] = ` + +`; + +exports[`@wordpress/components Components|Button Disabled 1`] = ` + +`; + +exports[`@wordpress/components Components|Button Disabled Link 1`] = ` + +`; + +exports[`@wordpress/components Components|Button Large 1`] = ` + +`; + +exports[`@wordpress/components Components|Button Large Primary 1`] = ` + +`; + +exports[`@wordpress/components Components|Button Link 1`] = ` + + Link Button + +`; + +exports[`@wordpress/components Components|Button Primary 1`] = ` + +`; + +exports[`@wordpress/components Components|Button Small 1`] = ` + +`; + +exports[`@wordpress/components Components|Button Toggled 1`] = ` + +`; + +exports[`@wordpress/components Components|ButtonGroup Default 1`] = ` +
+ + +
+`; + +exports[`@wordpress/components Components|CheckboxControl All 1`] = ` +
+
+ + + + + + +
+

+ Is the user an author or not? +

+
+`; + +exports[`@wordpress/components Components|CheckboxControl Default 1`] = ` +
+
+ + + + + +
+
+`; + +exports[`@wordpress/components Components|ColorPalette Default 1`] = ` +
+
+
+
+
+
+
+
+
+ +
+ +
+
+`; + +exports[`@wordpress/components Components|ColorPalette With Knobs 1`] = ` +
+
+
+
+
+
+
+
+
+ +
+ +
+
+`; + +exports[`@wordpress/components Components|ColorPicker Alpha Enabled 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ Move the arrow left or right to change hue. +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+
+
+
+`; + +exports[`@wordpress/components Components|ColorPicker Default 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ Move the arrow left or right to change hue. +

+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+
+
+
+`; + +exports[`@wordpress/components Components|Dashicon Default 1`] = ` + +`; + +exports[`@wordpress/components Components|Draggable Default 1`] = ` +
+

+ Is Dragging? + No +

+
+
+ +
+
+
+`; + +exports[`@wordpress/components Components|ExternalLink Default 1`] = ` + + WordPress + + (opens in a new tab) + + + +`; + +exports[`@wordpress/components Components|FontSizePicker Default 1`] = ` +
+ + Font Size + +
+
+
+ + +
+
+ + +
+
+`; + +exports[`@wordpress/components Components|FontSizePicker With Slider 1`] = ` +
+ + Font Size + +
+
+
+ + +
+
+ +
+
+
+ + + + + +
+
+
+`; + +exports[`@wordpress/components Components|FontSizePicker Without Custom Sizes 1`] = ` +
+ + Font Size + +
+
+
+ + +
+
+ +
+
+`; + +exports[`@wordpress/components Components|Icon Colors 1`] = ` +Array [ +
+ +
+ 24 + px +
+
, +
+ +
+ 24 + px +
+
, +
+ +
+ 24 + px +
+
, +] +`; + +exports[`@wordpress/components Components|Icon Default 1`] = ` +
+ +
+ 24 + px +
+
+`; + +exports[`@wordpress/components Components|Icon Sizes 1`] = ` +Array [ +
+ +
+ 14 + px +
+
, +
+ +
+ 16 + px +
+
, +
+ +
+ 20 + px +
+
, +
+ +
+ 24 + px +
+
, +
+ +
+ 28 + px +
+
, +
+ +
+ 32 + px +
+
, +
+ +
+ 40 + px +
+
, +
+ +
+ 48 + px +
+
, +
+ +
+ 56 + px +
+
, +] +`; + +exports[`@wordpress/components Components|Icon With A Component 1`] = ` + +`; + +exports[`@wordpress/components Components|Icon With A Function 1`] = ` + +`; + +exports[`@wordpress/components Components|Icon With An SVG 1`] = ` + +`; + +exports[`@wordpress/components Components|IconButton Default 1`] = ` + +`; + +exports[`@wordpress/components Components|IconButton Grouped 1`] = ` +
+ + + +
+`; + +exports[`@wordpress/components Components|Modal Default 1`] = ` + +`; + +exports[`@wordpress/components Components|RangeControl Default 1`] = ` +
+
+ + + +
+
+`; + +exports[`@wordpress/components Components|RangeControl With Help 1`] = ` +
+
+ + + +
+

+ Please select the number of columns you would like this to contain. +

+
+`; + +exports[`@wordpress/components Components|RangeControl With Icon After 1`] = ` +
+
+ + + + +
+
+`; + +exports[`@wordpress/components Components|RangeControl With Icon Before 1`] = ` +
+
+ + + + +
+
+`; + +exports[`@wordpress/components Components|RangeControl With Minimum And Maximum Limits 1`] = ` +
+
+ + + +
+
+`; + +exports[`@wordpress/components Components|RangeControl With Reset 1`] = ` +
+
+ + + + +
+
+`; + +exports[`@wordpress/components Components|ResizableBox Default 1`] = ` +
+
+
+ + Resize + +
+ +
+
+
+ +
+
+`; + +exports[`@wordpress/components Components|ScrollLock Default 1`] = ` +
+
+ Start scrolling down... +
+
+
+ +

+ Scroll locked: + + No + +

+
+
+
+`; + +exports[`@wordpress/components Components|Snackbar Default 1`] = ` +
+
+ Use Snackbars to communicate low priority, non-interruptive messages to the user. +
+
+`; + +exports[`@wordpress/components Components|Snackbar With Actions 1`] = ` +
+
+ Use Snackbars with an action link to an external page. + + Open WP.org + +
+
+`; + +exports[`@wordpress/components Components|Spinner Default 1`] = ` + +`; + +exports[`@wordpress/components Components|ToggleControl Default 1`] = ` +
+
+ + + + + + + +
+
+`; + +exports[`@wordpress/components Components|ToggleControl With Help Text 1`] = ` +
+
+ + + + + + + +
+

+ Has fixed background. +

+
+`; + +exports[`@wordpress/components Components|VisuallyHidden Default 1`] = ` +Array [ +
+ This should not show. +
, +
+ This text will + + but not inline + + always show. +
, +] +`; diff --git a/storybook/test/index.js b/storybook/test/index.js new file mode 100644 index 00000000000000..b07222ec870996 --- /dev/null +++ b/storybook/test/index.js @@ -0,0 +1,10 @@ +/** + * External dependencies + */ +import initStoryshots from '@storybook/addon-storyshots'; +import path from 'path'; + +initStoryshots( { + configPath: path.resolve( __dirname, '../' ), + suite: '@wordpress/components', +} ); diff --git a/test/unit/config/register-context.js b/test/unit/config/register-context.js new file mode 100644 index 00000000000000..b73423550f42c6 --- /dev/null +++ b/test/unit/config/register-context.js @@ -0,0 +1,6 @@ +/** + * External dependencies + */ +import registerRequireContextHook from 'babel-plugin-require-context-hook/register'; + +registerRequireContextHook(); diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js index 6ad2de76e69ef2..4b86746cf90b69 100644 --- a/test/unit/jest.config.js +++ b/test/unit/jest.config.js @@ -15,6 +15,7 @@ module.exports = { preset: '@wordpress/jest-preset-default', setupFiles: [ '/test/unit/config/gutenberg-phase.js', + '/test/unit/config/register-context.js', ], testURL: 'http://localhost', testPathIgnorePatterns: [ From 0746ae57ae4ba091f1e1d4aa64329454608484ff Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 21 Oct 2019 14:38:13 +0200 Subject: [PATCH 2/6] Update StoryShots to work with the existing configuration --- storybook/test/__snapshots__/index.js.snap | 11 +++++++++++ storybook/test/index.js | 13 +++++++++++++ 2 files changed, 24 insertions(+) diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 33845d6d3381fc..210d1baca3392e 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -466,6 +466,17 @@ exports[`@wordpress/components Components|CheckboxControl Default 1`] = `
`; +exports[`@wordpress/components Components|ColorIndicator Default 1`] = ` + +`; + exports[`@wordpress/components Components|ColorPalette Default 1`] = `
Date: Wed, 13 Nov 2019 09:51:37 +0100 Subject: [PATCH 3/6] Mock refs for ClipboadButton --- .../components/src/clipboard-button/index.js | 16 +-- storybook/test/__snapshots__/index.js.snap | 119 ++++++++++-------- storybook/test/index.js | 29 +++-- 3 files changed, 86 insertions(+), 78 deletions(-) diff --git a/packages/components/src/clipboard-button/index.js b/packages/components/src/clipboard-button/index.js index cd6e9a6472bff1..596750e41b1d50 100644 --- a/packages/components/src/clipboard-button/index.js +++ b/packages/components/src/clipboard-button/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; +import { Component, createRef } from '@wordpress/element'; /** * Internal dependencies @@ -19,16 +19,16 @@ class ClipboardButton extends Component { constructor() { super( ...arguments ); - this.bindContainer = this.bindContainer.bind( this ); + this.containerRef = createRef(); this.onCopy = this.onCopy.bind( this ); this.getText = this.getText.bind( this ); } componentDidMount() { - const { container, getText, onCopy } = this; - const button = container.firstChild; + const { getText, onCopy } = this; + const container = this.containerRef.current; - this.clipboard = new Clipboard( button, { + this.clipboard = new Clipboard( container.firstChild, { text: getText, container, } ); @@ -42,10 +42,6 @@ class ClipboardButton extends Component { clearTimeout( this.onCopyTimeout ); } - bindContainer( container ) { - this.container = container; - } - onCopy( args ) { // Clearing selection will move focus back to the triggering button, // ensuring that it is not reset to the body, and further that it is @@ -93,7 +89,7 @@ class ClipboardButton extends Component { }; return ( - + { children } diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 210d1baca3392e..6f639bf9503e2c 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`@wordpress/components Components|Animate Appear Bottom Left 1`] = ` +exports[`Storyshots Components|Animate Appear Bottom Left 1`] = `
@@ -37,7 +37,7 @@ exports[`@wordpress/components Components|Animate Appear Bottom Left 1`] = `
`; -exports[`@wordpress/components Components|Animate Appear Bottom Right 1`] = ` +exports[`Storyshots Components|Animate Appear Bottom Right 1`] = `
@@ -74,7 +74,7 @@ exports[`@wordpress/components Components|Animate Appear Bottom Right 1`] = `
`; -exports[`@wordpress/components Components|Animate Appear Top Left 1`] = ` +exports[`Storyshots Components|Animate Appear Top Left 1`] = `
@@ -111,7 +111,7 @@ exports[`@wordpress/components Components|Animate Appear Top Left 1`] = `
`; -exports[`@wordpress/components Components|Animate Appear Top Right 1`] = ` +exports[`Storyshots Components|Animate Appear Top Right 1`] = `
@@ -148,7 +148,7 @@ exports[`@wordpress/components Components|Animate Appear Top Right 1`] = `
`; -exports[`@wordpress/components Components|Animate Default 1`] = ` +exports[`Storyshots Components|Animate Default 1`] = `
@@ -183,7 +183,7 @@ exports[`@wordpress/components Components|Animate Default 1`] = `
`; -exports[`@wordpress/components Components|Animate Loading 1`] = ` +exports[`Storyshots Components|Animate Loading 1`] = `
@@ -218,7 +218,7 @@ exports[`@wordpress/components Components|Animate Loading 1`] = `
`; -exports[`@wordpress/components Components|Animate Slide In 1`] = ` +exports[`Storyshots Components|Animate Slide In 1`] = `
@@ -253,7 +253,7 @@ exports[`@wordpress/components Components|Animate Slide In 1`] = `
`; -exports[`@wordpress/components Components|Button Default 1`] = ` +exports[`Storyshots Components|Button Default 1`] = ` + +`; + +exports[`Storyshots Components|ColorIndicator Default 1`] = ` `; -exports[`@wordpress/components Components|ColorPalette Default 1`] = ` +exports[`Storyshots Components|ColorPalette Default 1`] = `
@@ -571,7 +584,7 @@ exports[`@wordpress/components Components|ColorPalette Default 1`] = `
`; -exports[`@wordpress/components Components|ColorPalette With Knobs 1`] = ` +exports[`Storyshots Components|ColorPalette With Knobs 1`] = `
@@ -665,7 +678,7 @@ exports[`@wordpress/components Components|ColorPalette With Knobs 1`] = `
`; -exports[`@wordpress/components Components|ColorPicker Alpha Enabled 1`] = ` +exports[`Storyshots Components|ColorPicker Alpha Enabled 1`] = `
@@ -876,7 +889,7 @@ exports[`@wordpress/components Components|ColorPicker Alpha Enabled 1`] = `
`; -exports[`@wordpress/components Components|ColorPicker Default 1`] = ` +exports[`Storyshots Components|ColorPicker Default 1`] = `
@@ -1050,7 +1063,7 @@ exports[`@wordpress/components Components|ColorPicker Default 1`] = `
`; -exports[`@wordpress/components Components|Dashicon Default 1`] = ` +exports[`Storyshots Components|Dashicon Default 1`] = `

Is Dragging? @@ -1116,7 +1129,7 @@ exports[`@wordpress/components Components|Draggable Default 1`] = `

`; -exports[`@wordpress/components Components|ExternalLink Default 1`] = ` +exports[`Storyshots Components|ExternalLink Default 1`] = ` `; -exports[`@wordpress/components Components|FontSizePicker Default 1`] = ` +exports[`Storyshots Components|FontSizePicker Default 1`] = `
@@ -1217,7 +1230,7 @@ exports[`@wordpress/components Components|FontSizePicker Default 1`] = `
`; -exports[`@wordpress/components Components|FontSizePicker With Slider 1`] = ` +exports[`Storyshots Components|FontSizePicker With Slider 1`] = `
@@ -1342,7 +1355,7 @@ exports[`@wordpress/components Components|FontSizePicker With Slider 1`] = `
`; -exports[`@wordpress/components Components|FontSizePicker Without Custom Sizes 1`] = ` +exports[`Storyshots Components|FontSizePicker Without Custom Sizes 1`] = `
@@ -1406,7 +1419,7 @@ exports[`@wordpress/components Components|FontSizePicker Without Custom Sizes 1`
`; -exports[`@wordpress/components Components|Icon Colors 1`] = ` +exports[`Storyshots Components|Icon Colors 1`] = ` Array [