Merge pull request #68 from fede-rodes/fede

storyshots

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
 

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);

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"
   },

client/src/__snapshots__/storyshots.test.js.snap

@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Alert Alert error 1`] = `
+<div
+  className="sc-bdVaJa hpRNIi"
+  type="error"
+>
+  I'm the content
+</div>
+`;
+
+exports[`Storyshots Alert Alert no content 1`] = `null`;
+
+exports[`Storyshots Alert Alert success 1`] = `
+<div
+  className="sc-bdVaJa hYbELy"
+  type="success"
+>
+  I'm the content
+</div>
+`;
+
+exports[`Storyshots ButtonLink ButtonLink default 1`] = `
+<button
+  className="sc-bwzfXH kcEXvM"
+  type="button"
+>
+  I'm the content
+</button>
+`;
+
+exports[`Storyshots ButtonLink ButtonLink disabled 1`] = `
+<button
+  className="sc-bwzfXH gOKVPy"
+  disabled={true}
+  type="button"
+>
+  I'm the content
+</button>
+`;
+
+exports[`Storyshots ButtonLink ButtonLink no underline 1`] = `
+<button
+  className="sc-bwzfXH cfMBPB"
+  type="button"
+>
+  I'm the content
+</button>
+`;
+
+exports[`Storyshots ButtonLink ButtonLink no underline disabled 1`] = `
+<button
+  className="sc-bwzfXH gOKVPy"
+  disabled={true}
+  type="button"
+>
+  I'm the content
+</button>
+`;
+
+exports[`Storyshots Divider Divider 1`] = `
+<div
+  className="sc-htpNat eFAgQT"
+/>
+`;
+
+exports[`Storyshots Feedback Error 1`] = `
+<div
+  className=""
+>
+  <div
+    className="sc-bdVaJa hpRNIi"
+    type="error"
+  >
+    I'm an error msg
+  </div>
+</div>
+`;
+
+exports[`Storyshots Feedback Loading 1`] = `
+<div
+  className=""
+>
+  <div
+    className="center sc-bxivhb dhgYHr"
+  >
+    <div
+      className="inline-block sc-ifAKCX dlVqMw"
+    />
+    <div
+      className="inline-block sc-ifAKCX gqsWgi"
+    />
+    <div
+      className="inline-block sc-ifAKCX hynpqH"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Feedback Success 1`] = `
+<div
+  className=""
+>
+  <div
+    className="sc-bdVaJa hYbELy"
+    type="success"
+  >
+    I'm a success msg
+  </div>
+</div>
+`;
+
+exports[`Storyshots Loading Loading 1`] = `
+<div
+  className="flex justify-center items-center sc-bxivhb dhgYHr"
+>
+  <div
+    className="inline-block sc-ifAKCX dlVqMw"
+  />
+  <div
+    className="inline-block sc-ifAKCX gqsWgi"
+  />
+  <div
+    className="inline-block sc-ifAKCX hynpqH"
+  />
+</div>
+`;
+
+exports[`Storyshots Subtitle Subtitle 1`] = `
+<p
+  className="center"
+>
+  <span>
+    I'm the Subtitle 
+  </span>
+   
+</p>
+`;
+
+exports[`Storyshots Title Title 1`] = `
+<h1
+  className="center"
+>
+  I'm the Title
+</h1>
+`;

client/src/components/auth/email-form/test.js

@@ -23,6 +23,7 @@ describe('EmailForm', () => {
     const handleClientError = jest.fn();
     const wrapper = shallow(<EmailForm onClientErrorHook={handleClientError} />);
 
+    // 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: '[email protected]' } });
+
+    expect(wrapper.state().email).toBe('[email protected]');
+
     wrapper.find('form').simulate('submit', { preventDefault: () => {} });
 
     expect(handleBefore).toBeCalled();

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', () => {

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('<!doctype html><html><body></body></html>');
+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);
+*/

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 */ });

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/[email protected]", "@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"