v5.1.0

* fix(app): update jest config and dependencies so that `yarn test` command runs - #170 * fix(app): use correct logout method (`signOut`) when not using redux * fix(app): remove `node-sass` and other unnecessary dependencies * feat(route): add option to include hook with new route
prescottprue · Dec 22, 2019 · 8fa0789 · 8fa0789
1 parent 04f8a06
commit 8fa0789
Show file tree

Hide file tree

Showing 35 changed files with 4,092 additions and 3,537 deletions.
diff --git a/examples/react-firebase-redux/package.json b/examples/react-firebase-redux/package.json
@@ -8,6 +8,7 @@
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
+    "start:dist": "npm run build && firebase serve --only hosting -p 3000",
     "build:config": "firebase-ci createConfig",
     "build:testConfig": "cypress-firebase createTestEnvFile",
     "deploy": "firebase-ci deploy -s",
@@ -36,7 +37,7 @@
   "dependencies": {
     "@material-ui/core": "^4.7.1",
     "@material-ui/icons": "^4.5.1",
-    "firebase": "^7.5.0",
+    "firebase": "^7.6.0",
     "formik": "^2.0.6",
     "formik-material-ui": "^1.0.0",
     "history": "^4.10.1",
@@ -56,15 +57,15 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",
-    "cypress": "^3.7.0",
+    "cypress": "^3.8.0",
     "cypress-firebase": "0.5.0",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.5.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-config-standard-react": "^9.2.0",
     "eslint-plugin-chai-friendly": "^0.5.0",
     "eslint-plugin-cypress": "^2.7.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsdoc": "^18.4.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-node": "^10.0.0",
@@ -73,15 +74,25 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^2.3.0",
     "eslint-plugin-standard": "^4.0.1",
-    "firebase-ci": "^0.9.1",
-    "firebase-tools": "^7.9.0",
+    "firebase-ci": "^0.10.0",
+    "firebase-tools": "^7.11.0",
     "husky": "^3.1.0",
-    "node-sass": "^4.12.0",
     "prettier": "^1.19.1",
-    "react-scripts": "3.2.0"
+    "react-scripts": "3.3.0"
   },
   "eslintConfig": {
     "extends": "./eslintrc.js"
   },
-  "browserslist": []
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }
diff --git a/examples/react-firebase-redux/src/routes/Account/components/AccountEditor/AccountEditor.js b/examples/react-firebase-redux/src/routes/Account/components/AccountEditor/AccountEditor.js
@@ -33,7 +33,7 @@ function AccountEditor() {
         return Promise.reject(error)
       })
   }
-  
+
   return (
     <Grid container spacing={2} justify="center">
       <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>

diff --git a/examples/react-firebase-redux/src/routes/Account/components/AccountPage/AccountPage.js b/examples/react-firebase-redux/src/routes/Account/components/AccountPage/AccountPage.js
@@ -15,9 +15,7 @@ function AccountPage() {
     <Grid container className={classes.root} justify="center">
       <Grid item xs={10} md={8} lg={6} className={classes.gridItem}>
         <Paper className={classes.pane}>
-          <Typography variant="h4">
-            Account
-          </Typography>
+          <Typography variant="h4">Account</Typography>
           <AccountEditor />
         </Paper>
       </Grid>

diff --git a/examples/react-firebase/.env.test b/examples/react-firebase/.env.test
@@ -0,0 +1,2 @@
+# Needed to skip warnings from jest@beta in package.json
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/react-firebase/.eslintrc.js b/examples/react-firebase/.eslintrc.js
@@ -45,6 +45,26 @@ module.exports = {
       globals: {
         self: true
       }
+    },{
+      files: ['./src/**/*.test.js', './src/**/*.spec.js'],
+      env: {
+        jest: true
+      }
+    },
+    {
+      files: ['./scripts/*'],
+      rules: {
+        'no-console': 0,
+        'func-names': 0,
+        'prefer-destructuring': 0,
+        'no-use-before-define': 0,
+        'import/order': 0,
+        'consistent-return': 0,
+        'no-param-reassign': 0,
+        'import/no-extraneous-dependencies': 0,
+        'global-require': 0,
+        'import/no-dynamic-require': 0
+      }
     }
   ]
 }
diff --git a/examples/react-firebase/.gitignore b/examples/react-firebase/.gitignore
@@ -11,3 +11,5 @@
 build
 src/config.js
 .env
+
+# Tests
diff --git a/examples/react-firebase/.gitlab-ci.yml b/examples/react-firebase/.gitlab-ci.yml
@@ -1,5 +1,6 @@
 stages:
   - build
+  - unit_tests
   - deploy_staging
   - build_production
   - deploy_production
@@ -51,6 +52,28 @@ Build:
     - npm run lint
     - npm run build
 
+## React Components Unit + Snapshot Tests (Jest)
+Component Tests:
+  stage: unit_tests
+  image: node:10
+  when: on_success
+  allow_failure: true
+  except:
+    variables:
+      - $CI_COMMIT_MESSAGE =~ /skip-tests/
+      - $CI_COMMIT_MESSAGE =~ /skip-unit-tests/
+      - $CI_COMMIT_MESSAGE =~ /skip-component-tests/
+  artifacts:
+    name: $CI_JOB_STAGE-$CI_COMMIT_REF_SLUG
+    expire_in: 2 weeks
+    when: always
+    paths:
+      - coverage
+  dependencies:
+    - Build
+  script:
+    - npm run test
+
 # Deploy Staging Stage
 ## Deploy React App and Firebase Functions
 Deploy Staging:

diff --git a/examples/react-firebase/.yo-rc.json b/examples/react-firebase/.yo-rc.json
@@ -7,7 +7,8 @@
       "includeRedux": false,
       "includeFirestore": false,
       "otherFeatures": [
-        "Continuous Integration config"
+        "Continuous Integration config",
+        "Tests for React Components (Jest)"
       ],
       "ciProvider": "gitlab",
       "deployTo": "firebase"

diff --git a/examples/react-firebase/README.md b/examples/react-firebase/README.md
@@ -1,5 +1,7 @@
 # react-firebase
 
+[![Code Coverage][coverage-image]][coverage-url]
+[![Code Climate][climate-image]][climate-url]
 [![License][license-image]][license-url]
 [![Code Style][code-style-image]][code-style-url]
 
@@ -11,6 +13,7 @@
 1. [Application Structure](#application-structure)
 1. [Development](#development)
     1. [Routing](#routing)
+1. [Testing](#testing)
 1. [Configuration](#configuration)
 1. [Production](#production)
 1. [Deployment](#deployment)
@@ -47,6 +50,8 @@ While developing, you will probably rely mostly on `npm start`; however, there a
 |`start`            |Serves your app at `localhost:3000` with automatic refreshing and hot module replacement|
 |`start:dist`       |Builds the application to `./dist` then serves at `localhost:3000` using `firebase serve`|
 |`build`            |Builds the application to `./dist`|
+|`test`             |Runs unit tests with Jest. See [testing](#testing)|
+|`test:watch`       |Runs `test` in watch mode to re-run tests when changed|
 |`lint`             |[Lints](http://stackoverflow.com/questions/8503559/what-is-linting) the project for potential errors|
 |`lint:fix`         |Lints the project and [fixes all correctable errors](http://eslint.org/docs/user-guide/command-line-interface.html#fix)|
 
@@ -156,6 +161,11 @@ With this setting, the name of the file (called a "chunk") is defined as part of
 
 More about how routing works is available in [the react-router-dom docs](https://reacttraining.com/react-router/web/guides/quick-start).
 
+## Testing
+
+#### Component Tests
+
+To add a unit test, create a `.spec.js` or `.test.js` file anywhere inside of `src`. Jest will automatically find these files and generate snapshots to the `__snapshots` folder.
 
 ## FAQ
 

diff --git a/examples/react-firebase/package.json b/examples/react-firebase/package.json
@@ -8,6 +8,8 @@
     "build": "react-scripts build",
     "eject": "react-scripts eject",
     "start": "react-scripts start",
+    "start:dist": "npm run build && firebase serve --only hosting -p 3000",
+    "test": "react-scripts test",
     "build:config": "firebase-ci createConfig",
     "deploy": "firebase-ci deploy -s",
     "lint": "eslint .",
@@ -27,7 +29,7 @@
   "dependencies": {
     "@material-ui/core": "^4.7.1",
     "@material-ui/icons": "^4.5.1",
-    "firebase": "^7.5.0",
+    "firebase": "^7.6.0",
     "formik": "^2.0.6",
     "formik-material-ui": "^1.0.0",
     "history": "^4.10.1",
@@ -43,11 +45,11 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.5.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsdoc": "^18.4.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-node": "^10.0.0",
@@ -56,15 +58,26 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^2.3.0",
     "eslint-plugin-standard": "^4.0.1",
-    "firebase-ci": "^0.9.1",
-    "firebase-tools": "^7.9.0",
+    "firebase-ci": "^0.10.0",
+    "firebase-tools": "^7.11.0",
     "husky": "^3.1.0",
-    "node-sass": "^4.12.0",
     "prettier": "^1.19.1",
-    "react-scripts": "3.2.0"
+    "react-scripts": "3.3.0",
+    "react-test-renderer": "^16.12.0"
   },
   "eslintConfig": {
     "extends": "./eslintrc.js"
   },
-  "browserslist": []
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }
diff --git a/examples/react-firebase/src/components/LoadingSpinner/LoadingSpinner.test.js b/examples/react-firebase/src/components/LoadingSpinner/LoadingSpinner.test.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import renderer from 'react-test-renderer'
+import LoadingSpinner from './index'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<LoadingSpinner />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})
+
+it('renders a spinner', () => {
+  const tree = renderer.create(<LoadingSpinner />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
diff --git a/...es/react-firebase/src/components/LoadingSpinner/__snapshots__/LoadingSpinner.test.js.snap b/...es/react-firebase/src/components/LoadingSpinner/__snapshots__/LoadingSpinner.test.js.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a spinner 1`] = `
+<div
+  className="makeStyles-root-15"
+>
+  <div
+    className="makeStyles-progress-16"
+  >
+    <div
+      className="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+      mode="indeterminate"
+      role="progressbar"
+      style={
+        Object {
+          "height": 80,
+          "width": 80,
+        }
+      }
+    >
+      <svg
+        className="MuiCircularProgress-svg"
+        viewBox="22 22 44 44"
+      >
+        <circle
+          className="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+          cx={44}
+          cy={44}
+          fill="none"
+          r={20.2}
+          strokeWidth={3.6}
+          style={Object {}}
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
diff --git a/examples/react-firebase/src/config.js b/examples/react-firebase/src/config.js
@@ -8,9 +8,13 @@ export const env = 'dev'
 
 // Config for firebase
 export const firebase = {
-  apiKey: 'AIzaSyCTUERDM-Pchn_UDTsfhVPiwM4TtNIxots',
-  authDomain: 'redux-firebasev3.firebaseapp.com',
-  databaseURL: 'https://redux-firebasev3.firebaseio.com',
-  projectId: 'redux-firebasev3',
-  storageBucket: 'redux-firebasev3.appspot.com'
+  "projectId": "redux-firebasev3",
+  "appId": "1:823357791673:web:e53b561c7e36427fe06a68",
+  "databaseURL": "https://redux-firebasev3.firebaseio.com",
+  "storageBucket": "redux-firebasev3.appspot.com",
+  "locationId": "us-central",
+  "apiKey": "AIzaSyCTUERDM-Pchn_UDTsfhVPiwM4TtNIxots",
+  "authDomain": "redux-firebasev3.firebaseapp.com",
+  "messagingSenderId": "823357791673",
+  "measurementId": "G-QB2GP30FWW"
 }
diff --git a/examples/react-firebase/src/containers/Navbar/AccountMenu.js b/examples/react-firebase/src/containers/Navbar/AccountMenu.js
@@ -29,7 +29,7 @@ function AccountMenu() {
   function handleLogout() {
     closeAccountMenu()
     // redirect to '/' handled by UserIsAuthenticated HOC
-    return firebase.logout()
+    return firebase.auth().signOut()
   }
   function goToAccount() {
     closeAccountMenu()

diff --git a/examples/react-firebase/src/routes/Account/components/AccountEditor/AccountEditor.js b/examples/react-firebase/src/routes/Account/components/AccountEditor/AccountEditor.js
@@ -25,7 +25,7 @@ function AccountEditor() {
         return Promise.reject(error)
       })
   }
-  
+
   return (
     <Grid container spacing={2} justify="center">
       <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>

diff --git a/examples/react-firebase/src/routes/Account/components/AccountPage/AccountPage.js b/examples/react-firebase/src/routes/Account/components/AccountPage/AccountPage.js
@@ -17,10 +17,10 @@ function AccountPage() {
     <Grid container className={classes.root} justify="center">
       <Grid item xs={10} md={8} lg={6} className={classes.gridItem}>
         <Paper className={classes.pane}>
-          <Typography variant="h4">
-            Account
-          </Typography>
-          <SuspenseWithPerf fallback={<LoadingSpinner />} traceId="load-account">
+          <Typography variant="h4">Account</Typography>
+          <SuspenseWithPerf
+            fallback={<LoadingSpinner />}
+            traceId="load-account">
             <AccountEditor />
           </SuspenseWithPerf>
         </Paper>

diff --git a/examples/react-firebase/src/routes/Projects/components/ProjectsPage/ProjectsPage.js b/examples/react-firebase/src/routes/Projects/components/ProjectsPage/ProjectsPage.js
@@ -17,7 +17,9 @@ function ProjectsPage({ match }) {
         exact
         path={match.path}
         render={() => (
-          <SuspenseWithPerf fallback={<LoadingSpinner />} traceId="load-projects">
+          <SuspenseWithPerf
+            fallback={<LoadingSpinner />}
+            traceId="load-projects">
             <ProjectsList />
           </SuspenseWithPerf>
         )}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Needed to skip warnings from jest@beta in package.json
		SKIP_PREFLIGHT_CHECK=true
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,5 @@ @@
     build
     src/config.js
     .env
+    # Tests