MSW: migrate login handlers

src/backend/mocks/default_handlers.js

@@ -1,9 +1,62 @@
-// import { http, HttpResponse } from 'msw'
+import { http } from 'msw'
 
 // implementations for msw v2 handlers go in this file
 // see old.default_handlers.js for reference
 // this note can get removed after migration
 
+const myWikis = JSON.parse(localStorage.getItem('msw-myWikis')) || []
+
+function makeUser (email = 'test@local') {
+  return {
+    id: 1,
+    email,
+    verified: true,
+    created_at: '2020-01-01',
+    updated_at: '2020-01-01',
+  }
+}
+
 export const handlers = [
+  http.get('/api/auth/login', ({ cookies }) => {
+    const { authToken } = cookies
+    if (authToken !== 'token_value') {
+      return Response.json('Unauthorized', {
+        status: 401,
+      })
+    }
+
+    const user = makeUser()
+    return Response.json({ user })
+  }),
+
+  http.post('/api/auth/login', async ({ request }) => {
+    const body = await request.json()
+    const user = makeUser(body.email)
+
+    return Response.json({ user }, {
+      headers: { 'set-cookie': 'authToken=token_value' },
+    })
+  }),
+
+  http.delete('/api/auth/login', () => {
+    return new Response(null, { status: 204 })
+  }),
+
+  http.post('/api/user/forgotPassword', () => {
+    return new Response('Success')
+  }),
+
+  http.post('/api/user/resetPassword', () => {
+    return new Response('Success')
+  }),
+
+  http.post('/api/wiki/mine', () => {
+    const data = { wikis: myWikis, count: myWikis.length, limit: false }
+    return Response.json(data)
+  }),
 
+  http.get('/api/v1/policies/missing', () => {
+    const items = []
+    return Response.json({ items })
+  }),
 ]

src/main.js

@@ -12,53 +12,60 @@ import 'typeface-roboto/index.css'
 import 'vuetify/dist/vuetify.min.css'
 import config from '~/config'
 
-if (process.env.NODE_ENV !== 'production' && config.API_MOCK === '1') {
-  const { worker } = require('./backend/mocks/browser')
-  worker.start()
+async function enableMocking () {
+  if (process.env.NODE_ENV !== 'production' && config.API_MOCK === '1') {
+    const { worker } = await import('./backend/mocks/browser')
+
+    // `worker.start()` returns a Promise that resolves
+    // once the Service Worker is up and ready to intercept requests.
+    return worker.start()
+  }
 }
 
-Vue.config.productionTip = false
+enableMocking().then(() => {
+  Vue.config.productionTip = false
 
-Vue.use(Vuetify)
+  Vue.use(Vuetify)
 
-Vue.use(VueReCaptcha, {
-  siteKey: config.RECAPTCHA_SITE_KEY,
-  loaderOptions: { useRecaptchaNet: true },
-})
+  Vue.use(VueReCaptcha, {
+    siteKey: config.RECAPTCHA_SITE_KEY,
+    loaderOptions: { useRecaptchaNet: true },
+  })
 
-// allow components to access api without importing it
-Vue.prototype.$api = api
+  // allow components to access api without importing it
+  Vue.prototype.$api = api
 
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  store,
-  vuetify: new Vuetify({
-    icons: {
-      iconfont: 'mdi',
-    },
-  }),
-  components: { App },
-  template: '<App/>',
-  created: function () {
-    store.dispatch('login', null)
-    axios.interceptors.response.use(undefined, function (err) {
-      return new Promise(function (resolve, reject) {
+  /* eslint-disable no-new */
+  new Vue({
+    el: '#app',
+    router,
+    store,
+    vuetify: new Vuetify({
+      icons: {
+        iconfont: 'mdi',
+      },
+    }),
+    components: { App },
+    template: '<App/>',
+    created: function () {
+      store.dispatch('login', null)
+      axios.interceptors.response.use(undefined, function (err) {
+        return new Promise(function (resolve, reject) {
         // Unauthenticated. is the exact error message returned by the API for the auth middle ware
         // which is why we check for that message here...
-        if (err.response.config && !err.response.config.__isRetryRequest && err.response.data && err.response.data.error && err.response.data.error === 'Unauthenticated.') {
+          if (err.response.config && !err.response.config.__isRetryRequest && err.response.data && err.response.data.error && err.response.data.error === 'Unauthenticated.') {
           // TODO this IF should also have a condition for is logged in....
-          console.log('Detected logged out state, so logging out...')
-          store
-            .dispatch('logout')
-            .then(() => router.push('/login'))
-            .catch(err => {
-              console.log(err)
-            })
-        }
-        reject(err)
+            console.log('Detected logged out state, so logging out...')
+            store
+              .dispatch('logout')
+              .then(() => router.push('/login'))
+              .catch(err => {
+                console.log(err)
+              })
+          }
+          reject(err)
+        })
       })
-    })
-  },
+    },
+  })
 })