Test Suites and Test Setup

.babelrc

@@ -16,7 +16,7 @@
   ],
   "env": {
     "production": {
-      "plugins": ["transform-react-remove-prop-types"]
+      "plugins": ["transform-react-remove-prop-types", "graphql-tag"]
     }
   }
 }

.env

@@ -6,7 +6,7 @@ HOST=localhost
 PORT=8000
 
 ## API SETTINGS
-API_HOSTS="https://jsonplaceholder.typicode.com/"
+API_HOSTS="https://jsonplaceholder.typicode.com"
 GQL_HOSTS="https://w5xlvm3vzz.lp.gql.zone/graphql"
 
 ## BASIC CACHE HANDLING

.eslintignore

@@ -1 +1,7 @@
+.github
+dist
+docker
+logs
+node_modules
 package.json
+tmp

package.json

@@ -23,18 +23,23 @@
     }
   ],
   "license": "Apache 2.0",
+  "engines": {
+    "node": ">=8.11.1"
+  },
   "scripts": {
-    "build": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.config.js",
-    "build:analyse": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.analyse.config.js",
-    "build:dev": "webpack --config webpack/dev.config.js",
+    "build": "npm run check:version && cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.config.js",
+    "build:analyse": "npm run check:version && cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.analyse.config.js",
+    "build:dev": "npm run check:version && webpack --config webpack/dev.config.js",
     "build:storybook": "build-storybook -o dist/storybook",
+    "check:version": "check-node-version --package",
     "format": "eslint --fix ./src/**/*.js",
     "format:scss": "stylelint --fix ./src/**/*.scss",
-    "lint": "eslint ./**/*.js",
+    "lint": "eslint ./src/**/*.js",
     "lint:scss": "stylelint ./src/**/*.scss",
     "precommit": "lint-staged",
-    "start": "npm run build && node .",
-    "storybook": "start-storybook -p 9001 -c storybook",
+    "start": "npm run check:version && npm run build && node .",
+    "storybook": "npm run check:version && start-storybook -p 9001 -c storybook",
+    "pretest": "npm run check:version",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "watch:client": "webpack --config webpack/dev.config.js --watch",
@@ -53,20 +58,22 @@
     ]
   },
   "devDependencies": {
-    "@natterstefan/eslint-config-ns": "git+https://github.com/natterstefan/eslint-config-ns.git#8470efb8bf1eac323eaa93b9d969a2c4ea6e38be",
+    "@natterstefan/eslint-config-ns": "git+https://github.com/natterstefan/eslint-config-ns.git#e8998878875382d31a9245797103b6550db8e3be",
     "@storybook/addon-actions": "4.0.0-alpha.14",
     "@storybook/addon-options": "4.0.0-alpha.14",
     "@storybook/react": "4.0.0-alpha.14",
     "apollo-storybook-react": "0.1.5",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.3",
     "babel-loader": "7.1.4",
+    "babel-plugin-graphql-tag": "1.6.0",
     "babel-plugin-react-intl": "2.4.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.13",
     "babel-polyfill": "6.26.0",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
+    "check-node-version": "3.2.0",
     "copy-webpack-plugin": "4.5.1",
     "cross-env": "5.1.6",
     "css-loader": "0.28.11",
@@ -75,7 +82,7 @@
     "enzyme-adapter-react-16": "1.1.1",
     "enzyme-to-json": "3.3.4",
     "error-overlay-webpack-plugin": "0.1.5",
-    "eslint": "4.19.1",
+    "eslint": "5.3.0",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "html-loader": "0.5.5",
     "husky": "0.14.3",
@@ -84,10 +91,12 @@
     "markdown-loader": "3.0.0",
     "node-sass": "4.9.0",
     "nodemon": "1.18.3",
+    "prettier": "1.14.2",
     "react-test-renderer": "16.4.1",
     "redux-mock-store": "1.5.3",
     "sass-loader": "7.0.1",
     "storybook-readme": "3.3.0",
+    "stylelint": "9.4.0",
     "uglifyjs-webpack-plugin": "1.2.7",
     "webpack": "4.9.1",
     "webpack-cli": "2.1.4",

src/client/components/app/component.js

@@ -2,7 +2,6 @@
 import React, { Component } from 'react'
 import BemHelper from 'react-bem-helper'
 import PropTypes from 'prop-types'
-import dbg from 'debug'
 import get from 'lodash.get'
 import invoke from 'lodash.invoke'
 import map from 'lodash.map'
@@ -16,17 +15,7 @@ import { Rates } from '../rates'
 // Styling
 const classes = new BemHelper('app')
 
-const debug = dbg('nb:App')
-
 export class App extends Component {
-  componentDidMount = () => {
-    // Illustration: how to refresh data from Apollo
-    setTimeout(() => {
-      debug('refreshData')
-      invoke(this.props, 'data.refetch')
-    }, 10000)
-  }
-
   onClick = change => {
     const { actions = {} } = this.props
     invoke(actions, 'onClick', change)
@@ -64,7 +53,7 @@ export class App extends Component {
           </List>
         </div>
         <div {...classes('container')}>
-          <Rates />
+          <Rates currency="USD" />
         </div>
       </div>
     )

src/client/components/app/index.js

@@ -62,7 +62,7 @@ AppWrapper.loadData = async store => {
   try {
     const api = services.get('api')
     if (api.fetch) {
-      const preloadedData = await api.fetch('posts')
+      const preloadedData = await api.fetch('/posts')
       store.dispatch(receivePosts(preloadedData))
     }
 

src/client/components/button/__tests__/__snapshots__/index.test.js.snap

@@ -2,9 +2,13 @@
 
 exports[`Components/Button renders without throwing an error 1`] = `
 <Button
-  className=""
+  className="some-class"
   onClick={[Function]}
-  styles={Object {}}
+  styles={
+    Object {
+      "padding": 20,
+    }
+  }
 >
   Click Me
 </Button>

src/client/components/button/__tests__/index.test.js

@@ -1,8 +1,21 @@
 import React from 'react'
+import { shallow } from 'enzyme'
+
 import { Button } from '../'
 
 describe('Components/Button', () => {
   test('renders without throwing an error', () => {
-    expect(<Button>Click Me</Button>).toMatchSnapshot()
+    expect(
+      <Button styles={{ padding: 20 }} className="some-class">
+        Click Me
+      </Button>,
+    ).toMatchSnapshot()
+  })
+
+  test('invokes onClick when button is clicked', () => {
+    const onClick = jest.fn()
+    const wrapper = shallow(<Button onClick={onClick}>Click Me</Button>)
+    wrapper.simulate('click')
+    expect(onClick).toHaveBeenCalledTimes(1)
   })
 })

src/client/components/button/index.js

@@ -8,7 +8,7 @@ const classes = {
 }
 
 export const Button = props => (
-  <button className={cx(classes, props.className)} style={props.styles} onClick={props.onClick}>
+  <button className={cx(classes, props.className)} styles={props.styles} onClick={props.onClick}>
     {props.children}
   </button>
 )

src/client/components/list/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/List should render without throwing an error 1`] = `
+<ul
+  className="list"
+>
+  <ListItem
+    className=""
+    key="1"
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    style={Object {}}
+  >
+    some item
+  </ListItem>
+  <ListItem
+    className=""
+    key="2"
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    style={Object {}}
+  >
+    some other item
+  </ListItem>
+</ul>
+`;

src/client/components/list/__tests__/index.test.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import map from 'lodash.map'
+
+import { List, ListItem } from '../'
+
+describe('Component/List', () => {
+  const listItems = [{ id: 1, title: 'some item' }, { id: 2, title: 'some other item' }]
+
+  test('should render without throwing an error', () => {
+    const wrapper = shallow(
+      <List>{map(listItems, item => <ListItem key={item.id}>{item.title}</ListItem>)}</List>,
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('should attach an onClick and onKeyPress event to ListItems', () => {
+    const onClick = jest.fn()
+    const onKeyPress = jest.fn()
+
+    const wrapper = shallow(
+      <List>
+        {map(listItems, item => (
+          <ListItem key={item.id} onClick={onClick} onKeyPress={onKeyPress}>
+            {item.title}
+          </ListItem>
+        ))}
+      </List>,
+    )
+    const firstItem = wrapper.find(ListItem).first()
+
+    firstItem.simulate('click')
+    firstItem.simulate('keypress')
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onKeyPress).toHaveBeenCalledTimes(1)
+  })
+})

src/client/components/list/index.js

@@ -8,13 +8,6 @@ const classes = {
   name: 'list',
 }
 
-const propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-}
-const defaultProps = {
-  children: null,
-}
-
 export const List = ({ className, children }) => (
   <ul className={cx(classes, className)}>{children}</ul>
 )
@@ -30,6 +23,13 @@ export const ListItem = ({ className, children, onClick, onKeyPress, styles }) =
   </li>
 )
 
+const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+}
+const defaultProps = {
+  children: null,
+}
+
 ListItem.displayName = 'ListItem'
 ListItem.propTypes = {
   ...propTypes,

src/client/components/meta/README.md

@@ -0,0 +1,25 @@
+# COMPONENT META
+
+One can add meta tags to a page with the help of [react-helmet](https://github.com/nfl/react-helmet).
+
+## Example
+
+```js
+import React, { Component } from 'react'
+import { Helmet } from 'react-helmet'
+
+class Application extends Component {
+  render() {
+    return (
+      <div className="application">
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>My Title</title>
+          <link rel="canonical" href="http://mysite.com/example" />
+        </Helmet>
+        ...
+      </div>
+    )
+  }
+}
+```

src/client/components/meta/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/Meta should render without throwing an error 1`] = `
+<HelmetWrapper
+  defer={true}
+  encodeSpecialCharacters={true}
+>
+  <title>
+    Test Title
+  </title>
+  <meta
+    content="Test Description"
+    name="description"
+  />
+</HelmetWrapper>
+`;

src/client/components/meta/__tests__/index.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { Meta } from '..'
+
+const ChildMeta = () => <meta charSet="utf-8" />
+
+describe('Component/Meta', () => {
+  const props = {
+    description: 'Test Description',
+    title: 'Test Title',
+  }
+
+  test('should render without throwing an error', () => {
+    const wrapper = shallow(<Meta {...props} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('should render children', () => {
+    const wrapper = shallow(
+      <Meta {...props}>
+        <ChildMeta />
+      </Meta>,
+    )
+    expect(wrapper.find(ChildMeta)).toHaveLength(1)
+  })
+})

src/client/components/rates/__tests__/__snapshots__/component.test.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/Rates should render without throwing an error 1`] = `
+<div
+  className="rates"
+>
+  <h3>
+    Prefetched Rates (Apollo)
+  </h3>
+  <List
+    className=""
+  >
+    <ListItem
+      className=""
+      key="EUR"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      style={Object {}}
+    >
+      EUR
+    </ListItem>
+    <ListItem
+      className=""
+      key="USD"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      style={Object {}}
+    >
+      USD
+    </ListItem>
+  </List>
+</div>
+`;