chore: update 404 with unocss, fix: tests

mnenie · Dec 5, 2024 · 4f5f3af · 4f5f3af
1 parent bea4110
commit 4f5f3af
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 100 deletions.
diff --git a/core/client/src/pages/NotFoundPage.vue b/core/client/src/pages/NotFoundPage.vue
@@ -2,79 +2,42 @@
 import { RouteNames } from '@/shared/config/consts'
 import { UiButton } from '@/shared/ui'
 import { useHead } from '@unhead/vue'
+import { useWindowSize } from '@vueuse/core'
 
 useHead({
   title: '404 | Not Found :/',
 })
+
+const { width } = useWindowSize()
 </script>
 
 <template>
-  <div :class="$style.container">
-    <div :class="$style.items">
-      <h1>404</h1>
-      <h3>{{ $t('not_found.title') }}</h3>
-      <p>{{ $t('not_found.description') }}</p>
+  <div class="flex justify-center items-center h-dvh">
+    <div
+      class="flex flex-col justify-center mt--20 items-center h-full
+      max-[520px]:mt--10"
+    >
+      <h1
+        class="text-9rem text-neutral-800 dark:text-neutral-200
+        max-[768px]:text-8rem max-[520px]:!text-5rem"
+      >
+        404
+      </h1>
+      <h3
+        class="text-4xl text-neutral-800 mt--28px dark:text-neutral-200
+        max-[768px]:mt--20px max-[520px]:!text-3xl mb-20px"
+      >
+        {{ $t('not_found.title') }}
+      </h3>
+      <p
+        v-if="width > 520"
+        class="mb-20px mt-2px dark:text-neutral-300 max-[520px]:(mt-10px text-neutral-700)"
+      >
+        {{ $t('not_found.description') }}
+      </p>
       <UiButton @click="$router.push({ name: RouteNames.welcome })">
         {{ $t('not_found.btn') }}
       </UiButton>
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-
-  .items {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    & > h1 {
-      font-size: 180px;
-      color: var(--zinc-800);
-    }
-
-    & > h3 {
-      font-size: 40px;
-      color: var(--zinc-800);
-      margin-top: -30px;
-    }
-
-    & > p {
-      margin-top: -2px;
-    }
-
-    & button {
-      margin-top: 20px;
-    }
-  }
-}
-
-@media screen and (max-width: 1560px) {
-  .container {
-    .items {
-      & > h1 {
-        font-size: 160px;
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .container {
-    .items {
-      & h1,
-      & h3 {
-        color: var(--zinc-200);
-      }
-      & p {
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/__tests__/Login.spec.ts b/core/client/src/pages/__tests__/Login.spec.ts
@@ -0,0 +1,22 @@
+import { useHead } from '@unhead/vue'
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import Login from '../LoginPage.vue'
+
+vi.mock('@unhead/vue', () => ({
+  useHead: vi.fn(),
+}))
+
+describe('tests for LoginPage.vue', () => {
+  const wrapper = shallowMount(Login)
+
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should has correct head', () => {
+    expect(useHead).toHaveBeenCalledWith({
+      title: 'Jenda | Login',
+    })
+  })
+})
diff --git a/core/client/src/pages/__tests__/Registration.spec.ts b/core/client/src/pages/__tests__/Registration.spec.ts
@@ -0,0 +1,22 @@
+import { useHead } from '@unhead/vue'
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import Registration from '../RegistrationPage.vue'
+
+vi.mock('@unhead/vue', () => ({
+  useHead: vi.fn(),
+}))
+
+describe('tests for RegistrationPage.vue', () => {
+  const wrapper = shallowMount(Registration)
+
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should has correct head', () => {
+    expect(useHead).toHaveBeenCalledWith({
+      title: 'Jenda | Registration',
+    })
+  })
+})
diff --git a/core/client/src/pages/__tests__/__snapshots__/Login.spec.ts.snap b/core/client/src/pages/__tests__/__snapshots__/Login.spec.ts.snap
@@ -1,28 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for Home.vue > should be render correctly 1`] = `
-"<div class="login">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
-exports[`tests for Login.vue > should be render correctly 1`] = `
-"<div class="login">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
 exports[`tests for LoginPage.vue > should be render correctly 1`] = `
-"<div class="login">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
-exports[`tests for Registration.vue > should be render correctly 1`] = `
-"<div class="login">
+"<div class="w-full h-full flex">
   <auth-container-stub></auth-container-stub>
   <bg-panel-stub></bg-panel-stub>
 </div>"

diff --git a/core/client/src/pages/__tests__/__snapshots__/Registration.spec.ts.snap b/core/client/src/pages/__tests__/__snapshots__/Registration.spec.ts.snap
@@ -1,21 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for Home.vue > should be render correctly 1`] = `
-"<div class="registration">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
-exports[`tests for Registration.vue > should be render correctly 1`] = `
-"<div class="registration">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
 exports[`tests for RegistrationPage.vue > should be render correctly 1`] = `
-"<div class="registration">
+"<div class="w-full h-full flex">
   <auth-container-stub></auth-container-stub>
   <bg-panel-stub></bg-panel-stub>
 </div>"