Create /confirm-account route

middleware/confirm-account.ts

@@ -0,0 +1,29 @@
+import { useConfirmAccount } from 'composables/api'
+import { useModalAlert } from 'composables/useModalAlert'
+
+export default defineNuxtRouteMiddleware((_to, from) => {
+  const route = useRoute()
+  const confirmationCode = route.query.code as string
+  const modalAlertState = useModalAlert().value
+
+  if (from !== `/confirm-account?code=${confirmationCode}`) {
+    navigateTo('/', { replace: true })
+  }
+
+  useConfirmAccount(confirmationCode, {
+    onError: () => {
+      modalAlertState.show = true
+      modalAlertState.title = 'Something went wrong...'
+      modalAlertState.body = 'Unable to confirm account.'
+      modalAlertState.type = 'error'
+      navigateTo('/', { replace: true })
+    },
+    onOkay: () => {
+      modalAlertState.show = true
+      modalAlertState.title = 'Success!'
+      modalAlertState.body = 'Account confirmed successfully!'
+      modalAlertState.type = 'success'
+      navigateTo('/', { replace: true })
+    },
+  })
+})

pages/confirm-account.test.ts

@@ -0,0 +1,23 @@
+import { mount, enableAutoUnmount } from '@vue/test-utils'
+import { getByClass } from 'root/testUtils'
+import confirmAccount from 'pages/confirm-account.vue'
+
+function getConfirmAccountWrapper() {
+  return mount(confirmAccount)
+}
+
+vi.stubGlobal('definePageMeta', () => {})
+
+enableAutoUnmount(afterEach)
+
+describe('/confirm-account?code=<CONFIRMATION_CODE>', () => {
+  it('should render without crashing', () => {
+    const wrapper = getConfirmAccountWrapper()
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it('should render the loader', () => {
+    const wrapper = getConfirmAccountWrapper()
+    expect(getByClass(wrapper, 'loader__container').isVisible()).toBe(true)
+  })
+})

pages/confirm-account.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Loader from 'blocks/Loader/Loader.vue'
+
+definePageMeta({
+  layout: false,
+  middleware: 'confirm-account',
+})
+</script>
+
+<template>
+  <Loader />
+</template>

pages/index.test.ts

@@ -3,13 +3,7 @@ import { mount, enableAutoUnmount } from '@vue/test-utils'
 import index from 'pages/index.vue'
 
 function getIndexWrapper() {
-  return mount(index, {
-    global: {
-      mocks: {
-        $t: (msg: any) => msg,
-      },
-    },
-  })
+  return mount(index)
 }
 
 enableAutoUnmount(afterEach)