Add Husky; Add git hook rule to lint on pre-commit and test on pre-push

Author: thomasgwatson

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test

config/babel.config.js

@@ -27,7 +27,7 @@ module.exports = function (api) {
     presets: [
       [
         '@babel/preset-env',
-        {targets: {node: 'current'}}
+        { targets: { node: 'current' } }
       ],
       '@babel/preset-react'
     ],

config/jest/beforeTestEnvSetup.js

@@ -13,7 +13,7 @@ global.navigator.geolocation = mockGeolocation
 window.Intl = {
   DateTimeFormat: jest.fn().mockImplementation(() => ({
     resolvedOptions: jest.fn().mockImplementation(() => ({
-      timeZone: "Etc/GMT"
+      timeZone: 'Etc/GMT'
     }))
   }))
 }
@@ -24,6 +24,6 @@ window.matchMedia = jest.fn().mockImplementation(query => {
     media: query,
     onchange: null,
     addListener: jest.fn(),
-    removeListener: jest.fn(),
-  };
-});
+    removeListener: jest.fn()
+  }
+})

config/webpack.config.dev.js

@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
-const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
 const getClientEnvironment = require('./env')
 const paths = require('./paths')
 const sharedConfig = require('./webpack.config.shared')

config/webpack.config.prod.js

@@ -5,7 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
 const safePostCssParser = require('postcss-safe-parser')
-const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const paths = require('./paths')

package.json

@@ -12,7 +12,8 @@
     "lint:fix": "yarn exec standard --fix",
     "server": "./node_modules/.bin/babel-node --config-file ./config/babel.config.js scripts/serveUniversal.js",
     "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook"
+    "storybook:build": "build-storybook",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@babel/cli": "7.2.3",
@@ -217,7 +218,8 @@
     "xhr": "^2.5.0"
   },
   "devDependencies": {
-    "standard": "12.0.1"
+    "standard": "12.0.1",
+    "husky": "^7.0.0"
   },
   "engines": {
     "node": "15.5.0",

scripts/start.js

@@ -206,8 +206,8 @@ function addMiddleware (devServer, protocol) {
     // This prevents an issue when developing locally using SSL where the server would crash if the API server wasn't running
     devServer.listeningApp.on('secureConnection', (sock) => {
       sock.on('error', (err) => {
-        console.error("Caught error on secure connect: ", err);
-      });
+        console.error('Caught error on secure connect: ', err)
+      })
     })
   }
 

src/components/Affiliation/Affiliation.test.js

@@ -5,14 +5,14 @@ import Affiliation from './Affiliation'
 describe('Affiliation', () => {
   it('matches last snapshot', () => {
     const props = {
-      affiliation: { 
-        id: "1",
-        orgName: "La Fromagerie",
-        preposition: "at",
-        role: "Cheesemonger",
+      affiliation: {
+        id: '1',
+        orgName: 'La Fromagerie',
+        preposition: 'at',
+        role: 'Cheesemonger',
         url: null,
-        createdAt: "2020-12-09T23:01:17.431Z",
-        updatedAt: "2020-12-09T23:01:17.431Z",
+        createdAt: '2020-12-09T23:01:17.431Z',
+        updatedAt: '2020-12-09T23:01:17.431Z',
         isActive: true }
     }
 

src/components/AttachmentManager/AttachmentManager.store.test.js

@@ -55,7 +55,7 @@ describe('AttachmentManager store', () => {
       it('removes an attachment', () => {
         const state = {
           ...defaultState,
-          ['post-new']: [
+          'post-new': [
             { url: 'a.pdf', attachmentType: 'file' },
             { url: 'b.pdf', attachmentType: 'file' },
             { url: 'c.pdf', attachmentType: 'file' },
@@ -76,13 +76,13 @@ describe('AttachmentManager store', () => {
           attachmentKey: 'post-new',
           attachmentType: 'image',
           position1: 1,
-          position2: 2,
+          position2: 2
         }
       }
       it('switches two attachments', () => {
         const state = {
           ...defaultState,
-          ['post-new']: [
+          'post-new': [
             { url: 'a.pdf', attachmentType: 'file' },
             { url: 'b.pdf', attachmentType: 'file' },
             { url: 'c.pdf', attachmentType: 'file' },
@@ -96,20 +96,20 @@ describe('AttachmentManager store', () => {
       })
     })
   })
-  
-  describe('getUploadAttachmentPending', () => {  
+
+  describe('getUploadAttachmentPending', () => {
     const props = {
       type: 'user-avatar',
       id: '123',
       attachmentType: 'image'
     }
 
     it('returns false when not pending', () => {
-      const state = { pending: {} }  
+      const state = { pending: {} }
 
       expect(getUploadAttachmentPending(state, props)).toEqual(false)
     })
-  
+
     it("returns false when pending doesn't match settings", () => {
       const state = {
         pending: {
@@ -120,10 +120,10 @@ describe('AttachmentManager store', () => {
           }
         }
       }
-  
+
       expect(getUploadAttachmentPending(state, props)).toEqual(false)
     })
-  
+
     it('returns true when pending matches settings', () => {
       const state = {
         pending: {
@@ -134,7 +134,7 @@ describe('AttachmentManager store', () => {
           }
         }
       }
-  
+
       expect(getUploadAttachmentPending(state, props)).toEqual(true)
     })
 
@@ -148,7 +148,7 @@ describe('AttachmentManager store', () => {
           }
         }
       }
-  
+
       expect(getUploadAttachmentPending(state, { type: props.type, id: props.id })).toEqual(true)
     })
   })

src/components/AttachmentManager/AttachmentManager.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-expressions */
 import React from 'react'
 import { shallow } from 'enzyme'
 import AttachmentManager, { ImageManager, ImagePreview, FileManager, FilePreview } from './AttachmentManager'
@@ -17,7 +18,7 @@ const postEditorCaseDefaultProps = {
   type: 'post',
   showLabel: true,
   showLoading: true,
-  showsAddButton: true,
+  showsAddButton: true
 }
 
 const commentFormCaseDefaultProps = {
@@ -42,49 +43,48 @@ const attachments = [
 
 describe('AttachmentManager', () => {
   it('renders with minProps', () => {
-    const wrapper = 
     expect(shallow(
       <AttachmentManager {...minDefaultProps} />
     ).text()).toBe('')
-  }),
+  })
 
   describe('as used with PostEditor (showLabel, showLoading, showAddButtons)', () => {
     test('when empty', () => {
       expect(shallow(
         <AttachmentManager {...postEditorCaseDefaultProps} />
-      )).toMatchSnapshot()  
+      )).toMatchSnapshot()
     })
 
     test('with attachments', () => {
       expect(shallow(
         <AttachmentManager attachments={attachments} {...postEditorCaseDefaultProps} />
-      )).toMatchSnapshot()  
+      )).toMatchSnapshot()
     })
 
     test('when loading', () => {
       expect(shallow(
         <AttachmentManager uploadAttachmentPending {...postEditorCaseDefaultProps} />
-      )).toMatchSnapshot()  
+      )).toMatchSnapshot()
     })
 
     test('when loading, with attachments', () => {
       expect(shallow(
         <AttachmentManager attachments={attachments} uploadAttachmentPending {...postEditorCaseDefaultProps} />
-      )).toMatchSnapshot()  
+      )).toMatchSnapshot()
     })
   })
 
   describe('as used with CommentForm (default case)', () => {
-  test('when empty', () => {
+    test('when empty', () => {
       expect(shallow(
         <AttachmentManager {...commentFormCaseDefaultProps} />
-      )).toMatchSnapshot()  
+      )).toMatchSnapshot()
     })
 
     test('with attachments', () => {
       expect(shallow(
         <AttachmentManager attachments={attachments} {...commentFormCaseDefaultProps} />
-      )).toMatchSnapshot()  
+      )).toMatchSnapshot()
     })
 
     test('when loading', () => {
@@ -96,7 +96,7 @@ describe('AttachmentManager', () => {
     test('when loading, with attachments', () => {
       expect(shallow(
         <AttachmentManager attachments={attachments} uploadAttachmentPending {...commentFormCaseDefaultProps} />
-      )).toMatchSnapshot()  
+      )).toMatchSnapshot()
     })
   })
 
@@ -105,21 +105,21 @@ describe('AttachmentManager', () => {
       test('with attachments (of both types), when loading', () => {
         expect(shallow(
           <AttachmentManager attachmentType='image' attachments={attachments} uploadAttachmentPending {...minDefaultProps} />
-        )).toMatchSnapshot()    
+        )).toMatchSnapshot()
       })
     })
     describe('"file"', () => {
       test('with attachments (of both types), when loading', () => {
         expect(shallow(
           <AttachmentManager attachmentType='file' attachments={attachments} uploadAttachmentPending {...minDefaultProps} />
-        )).toMatchSnapshot()    
+        )).toMatchSnapshot()
       })
     })
     describe('not provided', () => {
       test('with attachments (of both types), when loading', () => {
         expect(shallow(
           <AttachmentManager attachments={attachments} uploadAttachmentPending {...minDefaultProps} />
-        )).toMatchSnapshot()    
+        )).toMatchSnapshot()
       })
     })
   })

src/components/CardImageAttachments/CardImageAttachments.test.js

@@ -5,7 +5,7 @@ import { shallow } from 'enzyme'
 it('renders a single image', () => {
   expect(shallow(<CardImageAttachments attachments={[
     { url: 'foo', type: 'image' }
-   ]} />)).toMatchSnapshot()
+  ]} />)).toMatchSnapshot()
 })
 
 it('renders multiple images', () => {

src/components/CreateGroup/CreateGroup.connector.test.js

@@ -9,7 +9,7 @@ import {
 const defaultProps = {
   match: {
     params: {
-      context:'group',
+      context: 'group',
       groupSlug: 'moderatorgroup'
     }
   },
@@ -26,7 +26,7 @@ describe('CreateGroup.connector', () => {
       const session = orm.session(orm.getEmptyState())
 
       session.Me.create({
-        id: '1',
+        id: '1'
       })
 
       state = {
@@ -49,9 +49,11 @@ describe('CreateGroup.connector', () => {
     })
 
     it('gets the default name and slug from the querystring', () => {
-      const props = { ...defaultProps, location: {
-        search: '?name=weird&slug=banana'
-      }}
+      const props = { ...defaultProps,
+        location: {
+          search: '?name=weird&slug=banana'
+        }
+      }
       const actual = mapStateToProps(state, props)
       expect(actual.initialGroupName).toEqual('weird')
       expect(actual.initialGroupSlug).toEqual('banana')

src/components/CreateGroup/CreateGroup.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme'
 import React from 'react'
 
 describe('CreateGroup', () => {
-
   it('matches snapshot', () => {
     const wrapper = shallow(<CreateGroup />)
     expect(wrapper).toMatchSnapshot()
@@ -13,5 +12,4 @@ describe('CreateGroup', () => {
     const wrapper = shallow(<CreateGroup initialName='Epic Name' initialSlug='bananaslug' />)
     expect(wrapper).toMatchSnapshot()
   })
-
 })