Add fix tests without env vars and run app with env.local (#344)

Co-authored-by: Andrew James <[email protected]>

.env.example → .env.local

@@ -1,11 +1,19 @@
+# VWC_ACTIVE_ENV is one of local or remote. 
+# when VWC_ACTIVE_ENV is set to local all external data is 
+# sourced from a local json file
+# <remote> will require all keys to be added to this file.
 VWC_ACTIVE_ENV=local
+
+# Contentful keys
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
-# Optional flag to enable different environments available in Contentful local | master
+
+# Optional flag to enable different environments available in Contentful develop | master
 # Defaults to master environment
+# When VWC_ACTIVE_ENV is set to local NO data is sourced form Contentful
 CONTENTFUL_ENVIRONMENT=master
 
-# api keys
+# API keys for /src/pages/api
 MAILCHIMP_SUBSCRIBE_URL=
 MAILCHIMP_API_KEY=
 MAILCHIMP_LIST_ID=

.husky/pre-commit

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

mocks/handlers.js

@@ -5,11 +5,11 @@ import { rest } from 'msw'
  * @export handlers[] list of handlers
  */
 export const handlers = [
-  // mock slack reuqests
-  rest.post('https://hooks.slack.com/services/*', (req, res, ctx) => {
+  // mock slack requests
+  rest.post('https://hooks.slack.com/services/*', (_, res, ctx) => {
     return res(ctx.status(200), ctx.json({ ok: true }))
   }),
-  rest.post('https://us4.api.mailchimp.com/3.0/lists/*', (req, res, ctx) => {
+  rest.post('https://us4.api.mailchimp.com/3.0/lists/*/*', (_, res, ctx) => {
     return res(ctx.status(200), ctx.json({ ok: true }))
   }),
   rest.get('https://production.shippingapis.com/*', (req, res, ctx) => {

package.json

@@ -50,7 +50,8 @@
     "start": "next start",
     "export": "next export",
     "storybook": "start-storybook -p 6006 -s ./public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@babel/core": "7.16.0",
@@ -80,6 +81,7 @@
     "eslint-plugin-react": "7.27.1",
     "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-storybook": "0.5.7",
+    "husky": "^7.0.4",
     "inquirer": "8.2.0",
     "jest": "27.5.1",
     "lint-staged": "12.1.2",
@@ -92,6 +94,12 @@
     "regenerator-runtime": "0.13.9"
   },
   "lint-staged": {
-    "*": "yarn format"
+    "*.js": ["eslint --fix", "git add ."]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "pre-push": "lint-staged && npm test"
+    }
   }
 }

src/pages/api/subscribe.js

@@ -1,6 +1,13 @@
 import axios from 'axios'
 import { checkParams } from './api-helpers'
 
+const isTest = process.env.NODE_ENV === 'test'
+const MAILCHIMP_SUBSCRIBE_URL = 'https://us4.api.mailchimp.com/3.0/lists'
+const baseURL = MAILCHIMP_SUBSCRIBE_URL
+const MAILCHIMP_LIST_ID = isTest ? 'mock-list-id-1111' : process.env.MAILCHIMP_LIST_ID
+const MAILCHIMP_API_KEY = isTest ? 'mock-api-key-2222' : process.env.MAILCHIMP_API_KEY
+const AUTHORIZATION = `Basic ${Buffer.from(`anystring:${MAILCHIMP_API_KEY}`).toString('base64')}`
+
 export default async function handler(req, res) {
   const parsedBody = JSON.parse(req.body)
   const hasErrors = checkParams(parsedBody, ['email'])
@@ -17,18 +24,14 @@ export default async function handler(req, res) {
     status: 'subscribed',
   }
 
-  const baseURL = `${process.env.MAILCHIMP_SUBSCRIBE_URL}`
-
   try {
     await axios({
       method: 'POST',
       baseURL,
-      url: `${process.env.MAILCHIMP_LIST_ID}/members`,
+      url: `/${MAILCHIMP_LIST_ID}/members`,
       headers: {
         Accept: 'application/json',
-        Authorization: `Basic ${Buffer.from(`anystring:${process.env.MAILCHIMP_API_KEY}`).toString(
-          'base64'
-        )}`,
+        Authorization: AUTHORIZATION,
       },
       data: payload,
     }).catch(err => {

tests/api/subscribe.test.js

@@ -12,6 +12,9 @@ describe('subscribe handler', () => {
       method: 'POST',
       statusCode: 200,
       body: JSON.stringify(body),
+      headers: {
+        Accept: 'application/json',
+      },
     })
 
     await subscribeApiHandler(req, res)