From 2056b78efb38b946a236aa269ccab5ecf5d109a4 Mon Sep 17 00:00:00 2001 From: federodes Date: Mon, 7 Jan 2019 11:15:53 +0100 Subject: [PATCH 1/3] email form tests --- client/src/components/auth/email-form/test.js | 4 +++ client/src/setupTests.js | 29 +++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/client/src/components/auth/email-form/test.js b/client/src/components/auth/email-form/test.js index b9b31c3..a907377 100644 --- a/client/src/components/auth/email-form/test.js +++ b/client/src/components/auth/email-form/test.js @@ -23,6 +23,7 @@ describe('EmailForm', () => { const handleClientError = jest.fn(); const wrapper = shallow(); + // Sanity check expect(wrapper.find({ id: 'email' }).props().value).toBe(''); wrapper.find('form').simulate('submit', { preventDefault: () => {} }); @@ -105,6 +106,9 @@ describe('EmailForm', () => { expect(wrapper.find({ id: 'email' }).props().value).toBe(''); wrapper.find({ id: 'email' }).simulate('change', { target: { id: 'email', value: 'valid@email.com' } }); + + expect(wrapper.state().email).toBe('valid@email.com'); + wrapper.find('form').simulate('submit', { preventDefault: () => {} }); expect(handleBefore).toBeCalled(); diff --git a/client/src/setupTests.js b/client/src/setupTests.js index 0f8f430..6d6d60b 100644 --- a/client/src/setupTests.js +++ b/client/src/setupTests.js @@ -14,3 +14,32 @@ const localStorageMock = { clear: jest.fn(), }; global.localStorage = localStorageMock; + +/* +OBS: below config is probably needed when using jest.mount + +const { JSDOM } = require('jsdom'); + +const jsdom = new JSDOM(''); +const { window } = jsdom; + +function copyProps(src, target) { + Object.defineProperties(target, { + ...Object.getOwnPropertyDescriptors(src), + ...Object.getOwnPropertyDescriptors(target), + }); +} + +global.window = window; +global.document = window.document; +global.navigator = { + userAgent: 'node.js', +}; +global.requestAnimationFrame = function (callback) { + return setTimeout(callback, 0); +}; +global.cancelAnimationFrame = function (id) { + clearTimeout(id); +}; +copyProps(window, global); +*/ From 37857a1e6fcb4cef3e17393f98b63afb4dd0973d Mon Sep 17 00:00:00 2001 From: federodes Date: Mon, 7 Jan 2019 11:57:14 +0100 Subject: [PATCH 2/3] configuring storyshots --- client/.storybook/config.js | 4 +- client/package.json | 2 + .../src/__snapshots__/storyshots.test.js.snap | 146 ++++++++++++++++++ client/src/components/common/alert/test.js | 1 - client/src/storyshots.test.js | 6 + client/yarn.lock | 54 ++++++- 6 files changed, 210 insertions(+), 3 deletions(-) create mode 100644 client/src/__snapshots__/storyshots.test.js.snap create mode 100644 client/src/storyshots.test.js diff --git a/client/.storybook/config.js b/client/.storybook/config.js index 6c25b67..71951c9 100644 --- a/client/.storybook/config.js +++ b/client/.storybook/config.js @@ -3,11 +3,13 @@ import { ThemeProvider } from 'styled-components'; import { ApolloProvider } from 'react-apollo'; import { configure, addDecorator } from '@storybook/react'; import { MuiThemeProvider } from '@material-ui/core/styles'; +import requireContext from 'require-context.macro'; import mockClient from '../src/graphql/apollo-mock-client'; import scTheme from '../src/theme/sc'; import muiTheme from '../src/theme/mui'; -const req = require.context('../src', true, /stories\.(js)$/); +// See https://github.com/storybooks/storybook/pull/5015 +const req = requireContext('../src', true, /stories\.(js)$/); function loadStories() { req.keys().forEach(req); diff --git a/client/package.json b/client/package.json index 5215066..8a65a27 100644 --- a/client/package.json +++ b/client/package.json @@ -43,6 +43,7 @@ "@babel/core": "^7.2.0", "@storybook/addon-actions": "^4.0.12", "@storybook/addon-links": "^4.0.12", + "@storybook/addon-storyshots": "^4.1.4", "@storybook/addons": "^4.0.12", "@storybook/react": "^4.0.12", "babel-loader": "^8.0.4", @@ -57,6 +58,7 @@ "get-graphql-schema": "^2.1.2", "jest-dom": "^3.0.0", "react-testing-library": "^5.4.2", + "require-context.macro": "^1.0.4", "sw-precache": "^5.2.1", "waait": "^1.0.2" }, diff --git a/client/src/__snapshots__/storyshots.test.js.snap b/client/src/__snapshots__/storyshots.test.js.snap new file mode 100644 index 0000000..6937ca2 --- /dev/null +++ b/client/src/__snapshots__/storyshots.test.js.snap @@ -0,0 +1,146 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Alert Alert error 1`] = ` +
+ I'm the content +
+`; + +exports[`Storyshots Alert Alert no content 1`] = `null`; + +exports[`Storyshots Alert Alert success 1`] = ` +
+ I'm the content +
+`; + +exports[`Storyshots ButtonLink ButtonLink default 1`] = ` + +`; + +exports[`Storyshots ButtonLink ButtonLink disabled 1`] = ` + +`; + +exports[`Storyshots ButtonLink ButtonLink no underline 1`] = ` + +`; + +exports[`Storyshots ButtonLink ButtonLink no underline disabled 1`] = ` + +`; + +exports[`Storyshots Divider Divider 1`] = ` +
+`; + +exports[`Storyshots Feedback Error 1`] = ` +
+
+ I'm an error msg +
+
+`; + +exports[`Storyshots Feedback Loading 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`Storyshots Feedback Success 1`] = ` +
+
+ I'm a success msg +
+
+`; + +exports[`Storyshots Loading Loading 1`] = ` +
+
+
+
+
+`; + +exports[`Storyshots Subtitle Subtitle 1`] = ` +

+ + I'm the Subtitle  + + +

+`; + +exports[`Storyshots Title Title 1`] = ` +

+ I'm the Title +

+`; diff --git a/client/src/components/common/alert/test.js b/client/src/components/common/alert/test.js index 9e27ece..8ee7581 100644 --- a/client/src/components/common/alert/test.js +++ b/client/src/components/common/alert/test.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { shallow } from 'enzyme'; -// import renderer from 'react-test-renderer'; import Alert from '.'; describe('Alert', () => { diff --git a/client/src/storyshots.test.js b/client/src/storyshots.test.js new file mode 100644 index 0000000..b067ac1 --- /dev/null +++ b/client/src/storyshots.test.js @@ -0,0 +1,6 @@ +import initStoryshots from '@storybook/addon-storyshots'; + +// console.error = (...args) => { throw new Error(args); }; +// console.warn = (...args) => { throw new Error(args); }; + +initStoryshots({ /* configuration options */ }); diff --git a/client/yarn.lock b/client/yarn.lock index cdcd366..1168073 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1242,6 +1242,19 @@ global "^4.3.2" prop-types "^15.6.2" +"@storybook/addon-storyshots@^4.1.4": + version "4.1.4" + resolved "https://registry.yarnpkg.com/@storybook/addon-storyshots/-/addon-storyshots-4.1.4.tgz#c09e467ae0354c18906079591fbbe99243745c33" + integrity sha512-AQk7lYpYqDmBG6rFm0PSffW3mKOSogLci1CQ+vNFBhwvf2INLj4JHU/G7cSKK1NvtZlp9kvl4E8jVzXGNo610A== + dependencies: + "@storybook/addons" "4.1.4" + core-js "^2.5.7" + glob "^7.1.3" + global "^4.3.2" + jest-specific-snapshot "^1.0.0" + read-pkg-up "^4.0.0" + regenerator-runtime "^0.12.1" + "@storybook/addons@4.1.4", "@storybook/addons@^4.0.12": version "4.1.4" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.1.4.tgz#652c494aa448441f182a36d83d8f05a54f5b5c31" @@ -7599,7 +7612,7 @@ jest-serializer@^23.0.1: resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-23.0.1.tgz#a3776aeb311e90fe83fab9e533e85102bd164165" integrity sha1-o3dq6zEekP6D+rnlM+hRAr0WQWU= -jest-snapshot@^23.6.0: +jest-snapshot@>=20.0.3, jest-snapshot@^23.6.0: version "23.6.0" resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-23.6.0.tgz#f9c2625d1b18acda01ec2d2b826c0ce58a5aa17a" integrity sha512-tM7/Bprftun6Cvj2Awh/ikS7zV3pVwjRYU2qNYS51VZHgaAMBs5l4o/69AiDHhQrj5+LA2Lq4VIvK7zYk/bswg== @@ -7615,6 +7628,13 @@ jest-snapshot@^23.6.0: pretty-format "^23.6.0" semver "^5.5.0" +jest-specific-snapshot@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/jest-specific-snapshot/-/jest-specific-snapshot-1.0.0.tgz#157c79e2534a6fea820fd475f5d17740c8f90833" + integrity sha512-EjCK8Ob8eneeQCdBuO06J1v1C1jklKK7VvCOG/iwQx+8byZ7iCY8+d9M7xlUJiu76ubycXtSkIrPrL+nqjJsjA== + dependencies: + jest-snapshot ">=20.0.3" + jest-util@^23.4.0: version "23.4.0" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-23.4.0.tgz#4d063cb927baf0a23831ff61bec2cbbf49793561" @@ -8058,6 +8078,16 @@ load-json-file@^2.0.0: pify "^2.0.0" strip-bom "^3.0.0" +load-json-file@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b" + integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs= + dependencies: + graceful-fs "^4.1.2" + parse-json "^4.0.0" + pify "^3.0.0" + strip-bom "^3.0.0" + loader-fs-cache@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc" @@ -10744,6 +10774,14 @@ read-pkg-up@^2.0.0: find-up "^2.0.0" read-pkg "^2.0.0" +read-pkg-up@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978" + integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA== + dependencies: + find-up "^3.0.0" + read-pkg "^3.0.0" + read-pkg@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28" @@ -10762,6 +10800,15 @@ read-pkg@^2.0.0: normalize-package-data "^2.3.2" path-type "^2.0.0" +read-pkg@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389" + integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k= + dependencies: + load-json-file "^4.0.0" + normalize-package-data "^2.3.2" + path-type "^3.0.0" + "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6: version "2.3.6" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf" @@ -11097,6 +11144,11 @@ request@^2.87.0, request@^2.88.0: tunnel-agent "^0.6.0" uuid "^3.3.2" +require-context.macro@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/require-context.macro/-/require-context.macro-1.0.4.tgz#c2d9140971cc7e54f6a7b69bad41849d8bef493b" + integrity sha512-eoHxT3FeMRcq7cJqJAm+vAgWAMjIWiSOS87zNDSB6wqapkcqosqx7pQhQYdkTrAOJAU1aMMOGIQJZ4jUv3VljA== + require-directory@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" From 6eef387297112cd65fa772910ca23624b17ca52f Mon Sep 17 00:00:00 2001 From: federodes Date: Mon, 7 Jan 2019 12:04:14 +0100 Subject: [PATCH 3/3] README --- README.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0069887..5a8848c 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,26 @@ This project is the result of putting together some really nice articles ([see]( [https://crae-apollo-heroku.herokuapp.com/](https://crae-apollo-heroku.herokuapp.com/) This project includes the following libraries/functionality -- Express +- React 16 (Create React App) - Apollo 2 -- React 16 +- Express +- Mongoose - Authentication: passwordless via JWT - ES6 syntax +- service workers + +Testing: +- Apollo Client Mock +- jest +- enzyme +- storybook +- storyshots + +Styling: - material-ui -- styled components -- jest-enzyme +- styled-components +- storybook - basscss -- service workers ## Step by step guide to get started with this boilerplate