update based on egghead lessons

Author: Kent C. Dodds

.eslintignore

@@ -2,3 +2,4 @@ coverage
 node_modules
 public
 dist
+other

.prettierignore

@@ -1,3 +1,4 @@
 coverage
 node_modules
 dist
+other

other/utils.coverage.js

@@ -0,0 +1,230 @@
+// npx -p @babel/cli -p @babel/core -c "babel --plugins babel-plugin-istanbul --preset ./.babelrc.js src/shared/utils.js"
+var cov_2e1x39rbgn = function () {
+  var path = "/Users/kdodds/Developer/jest-cypress-react-babel-webpack/src/utils.js",
+      hash = "11d29cc5894ffec96585bad5b940d9b13baa3ea3",
+      Function = function () {}.constructor,
+      global = new Function('return this')(),
+      gcv = "__coverage__",
+      coverageData = {
+    path: "/Users/kdodds/Developer/jest-cypress-react-babel-webpack/src/utils.js",
+    statementMap: {
+      "0": {
+        start: {
+          line: 2,
+          column: 23
+        },
+        end: {
+          line: 5,
+          column: 4
+        }
+      },
+      "1": {
+        start: {
+          line: 8,
+          column: 16
+        },
+        end: {
+          line: 8,
+          column: 42
+        }
+      },
+      "2": {
+        start: {
+          line: 10,
+          column: 2
+        },
+        end: {
+          line: 12,
+          column: 3
+        }
+      },
+      "3": {
+        start: {
+          line: 11,
+          column: 4
+        },
+        end: {
+          line: 11,
+          column: 66
+        }
+      },
+      "4": {
+        start: {
+          line: 13,
+          column: 2
+        },
+        end: {
+          line: 13,
+          column: 23
+        }
+      }
+    },
+    fnMap: {
+      "0": {
+        name: "getFormattedValue",
+        decl: {
+          start: {
+            line: 1,
+            column: 9
+          },
+          end: {
+            line: 1,
+            column: 26
+          }
+        },
+        loc: {
+          start: {
+            line: 1,
+            column: 54
+          },
+          end: {
+            line: 14,
+            column: 1
+          }
+        },
+        line: 1
+      }
+    },
+    branchMap: {
+      "0": {
+        loc: {
+          start: {
+            line: 1,
+            column: 34
+          },
+          end: {
+            line: 1,
+            column: 52
+          }
+        },
+        type: "default-arg",
+        locations: [{
+          start: {
+            line: 1,
+            column: 45
+          },
+          end: {
+            line: 1,
+            column: 52
+          }
+        }],
+        line: 1
+      },
+      "1": {
+        loc: {
+          start: {
+            line: 10,
+            column: 2
+          },
+          end: {
+            line: 12,
+            column: 3
+          }
+        },
+        type: "if",
+        locations: [{
+          start: {
+            line: 10,
+            column: 2
+          },
+          end: {
+            line: 12,
+            column: 3
+          }
+        }, {
+          start: {
+            line: 10,
+            column: 2
+          },
+          end: {
+            line: 12,
+            column: 3
+          }
+        }],
+        line: 10
+      },
+      "2": {
+        loc: {
+          start: {
+            line: 11,
+            column: 22
+          },
+          end: {
+            line: 11,
+            column: 66
+          }
+        },
+        type: "cond-expr",
+        locations: [{
+          start: {
+            line: 11,
+            column: 47
+          },
+          end: {
+            line: 11,
+            column: 55
+          }
+        }, {
+          start: {
+            line: 11,
+            column: 58
+          },
+          end: {
+            line: 11,
+            column: 66
+          }
+        }],
+        line: 11
+      }
+    },
+    s: {
+      "0": 0,
+      "1": 0,
+      "2": 0,
+      "3": 0,
+      "4": 0
+    },
+    f: {
+      "0": 0
+    },
+    b: {
+      "0": [0],
+      "1": [0, 0],
+      "2": [0, 0]
+    },
+    _coverageSchema: "332fd63041d2c1bcb487cc26dd0d5f7d97098a6c"
+  },
+      coverage = global[gcv] || (global[gcv] = {});
+ 
+  if (coverage[path] && coverage[path].hash === hash) {
+    return coverage[path];
+  }
+ 
+  coverageData.hash = hash;
+  return coverage[path] = coverageData;
+}();
+ 
+function getFormattedValue(value) {
+  var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (cov_2e1x39rbgn.b[0][0]++, 'en-US');
+  cov_2e1x39rbgn.f[0]++;
+  var formattedValue = (cov_2e1x39rbgn.s[0]++, parseFloat(value).toLocaleString(language, {
+    useGrouping: true,
+    maximumFractionDigits: 6
+  })); // Add back missing .0 in e.g. 12.0
+ 
+  var match = (cov_2e1x39rbgn.s[1]++, value.match(/\.\d*?(0*)$/));
+  cov_2e1x39rbgn.s[2]++;
+ 
+  if (match) {
+    cov_2e1x39rbgn.b[1][0]++;
+    cov_2e1x39rbgn.s[3]++;
+    formattedValue += /[1-9]/.test(match[0]) ? (cov_2e1x39rbgn.b[2][0]++, match[1]) : (cov_2e1x39rbgn.b[2][1]++, match[0]);
+  } else {
+    cov_2e1x39rbgn.b[1][1]++;
+  }
+ 
+  cov_2e1x39rbgn.s[4]++;
+  return formattedValue;
+}
+ 
+export { getFormattedValue };

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "calculator.solution",
+  "name": "calculator",
   "version": "1.0.0",
   "description": "See how to configure Jest and Cypress with React, Babel, and Webpack",
   "main": "index.js",
@@ -20,12 +20,13 @@
     "postbuild": "cp ./public/index.html ./dist/index.html",
     "start": "serve --no-clipboard --listen 8080 dist",
     "format": "prettier \"**/*.js\" --write",
+    "lint": "jest --config test/jest.lint.js",
     "validate": "npm run test:coverage && npm run test:e2e:run",
     "setup": "npm run setup && npm run validate"
   },
   "keywords": [],
   "author": "Kent C. Dodds <[email protected]> (http://kentcdodds.com/)",
-  "license": "GPLv3",
+  "license": "GPL-3.0",
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.51",
     "@babel/plugin-proposal-class-properties": "7.0.0-beta.51",
@@ -34,7 +35,7 @@
     "@babel/preset-env": "^7.0.0-beta.51",
     "@babel/preset-react": "^7.0.0-beta.51",
     "babel-core": "7.0.0-bridge.0",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^8.0.0-beta.4",
     "babel-plugin-dynamic-import-node": "^2.0.0",
     "babel-plugin-emotion": "^9.2.4",
     "css-loader": "^0.28.11",
@@ -71,5 +72,13 @@
     "react-emotion": "^9.2.4",
     "react-loadable": "^5.4.0",
     "react-point": "^3.0.1"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kentcdodds/jest-cypress-react-babel-webpack.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kentcdodds/jest-cypress-react-babel-webpack/issues"
+  },
+  "homepage": "https://github.com/kentcdodds/jest-cypress-react-babel-webpack#readme"
 }

src/shared/__tests__/__snapshots__/calculator-display.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`mounts 1`] = `
+exports[`renders 1`] = `
 .emotion-0 {
   color: white;
   background: #1c191c;
@@ -12,7 +12,7 @@ exports[`mounts 1`] = `
 }
 
 <div
-  class="emotion-0"
+  class="emotion-0 emotion-1"
 >
   <div
     class="autoScalingText"

src/shared/__tests__/auto-scaling-text.js

@@ -2,6 +2,6 @@ import React from 'react'
 import {render} from 'calculator-test-utils'
 import AutoScalingText from '../auto-scaling-text'
 
-test('mounts', () => {
+test('renders', () => {
   render(<AutoScalingText />)
 })

src/shared/__tests__/calculator-display.js

@@ -2,7 +2,7 @@ import React from 'react'
 import {render} from 'calculator-test-utils'
 import CalculatorDisplay from '../calculator-display'
 
-test('mounts', () => {
+test('renders', () => {
   const {container} = render(<CalculatorDisplay value="0" />)
   expect(container.firstChild).toMatchSnapshot()
 })

src/shared/__tests__/utils.js

@@ -1,5 +1,5 @@
 import {getFormattedValue} from '../utils'
 
-test('adds missing .0', () => {
+test('formats the value', () => {
   expect(getFormattedValue('1234.0')).toBe('1,234.0')
 })

src/shared/calculator-display.js

@@ -1,8 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import styled from 'react-emotion'
 import AutoScalingText from './auto-scaling-text'
 import {getFormattedValue} from './utils'
 
+const DisplayContainer = styled.div(({theme}) => ({
+  color: theme.displayTextColor,
+  background: theme.displayBackgroundColor,
+  lineHeight: '130px',
+  fontSize: '6em',
+  flex: '1',
+}))
+
 class CalculatorDisplay extends React.Component {
   static propTypes = {
     value: PropTypes.string.isRequired,
@@ -15,18 +24,9 @@ class CalculatorDisplay extends React.Component {
     )
 
     return (
-      <div
-        {...props}
-        css={{
-          color: 'white',
-          background: '#1c191c',
-          lineHeight: '130px',
-          fontSize: '6em',
-          flex: '1',
-        }}
-      >
+      <DisplayContainer {...props}>
         <AutoScalingText>{formattedValue}</AutoScalingText>
-      </div>
+      </DisplayContainer>
     )
   }
 }

test/jest-common.js

@@ -6,7 +6,7 @@ module.exports = {
   rootDir: path.join(__dirname, '..'),
   moduleDirectories: [
     'node_modules',
-    path.join(__dirname, 'src'),
+    path.join(__dirname, '../src'),
     'shared',
     __dirname,
   ],

test/jest.lint.js

@@ -5,5 +5,5 @@ module.exports = {
   displayName: 'lint',
   runner: 'jest-runner-eslint',
   testMatch: ['<rootDir>/**/*.js'],
-  testPathIgnorePatterns: ['/node_modules/', '/coverage/', '/dist/'],
+  testPathIgnorePatterns: ['/node_modules/', '/coverage/', '/dist/', '/other/'],
 }