ci: fix test

.github/workflows/ci.yml

@@ -88,3 +88,11 @@ jobs:
 
       - name: Test
         run: nr test
+
+      - name: Save test report as artifact on failure
+        uses: actions/[email protected]
+        if: failure()
+        with:
+          name: test-report
+          path: html/
+          retention-days: 2

.vscode/settings.json

@@ -72,6 +72,16 @@
   "[typescript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "cva\\(([^)]*)\\)",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ],
+    [
+      "cx\\(([^)]*)\\)",
+      "(?:'|\"|`)([^']*)(?:'|\"|`)"
+    ]
+  ],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sourceLanguage": "en-US",
   // "i18n-ally.regex.key": ".*?",

src/main.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@tailwind variants;
 
 @layer base {
   :root {
@@ -72,7 +73,11 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground m-0;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
   }
 }

src/modules/auth/components/login-form/login-form.test.ts

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event'
 import { screen } from '@testing-library/vue'
 import { vi } from 'vitest'
-import LoginForm from '#auth/pages/login/page.vue'
+import LoginForm from '#auth/components/login-form/login-form.vue'
 import { testWrapper } from '#shared/utils/test'
 
 describe('<LoginForm />', () => {

src/modules/home/components/clock-section/clock-section-timer.test.ts

@@ -5,7 +5,15 @@ import { testWrapper } from '#shared/utils/test'
 describe('<ClockSectionTimer />', () => {
   testWrapper('should render clock timer', async ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: ClockSectionTimer })
+    const date = new Date()
+    wrapper<typeof ClockSectionTimer>({
+      component: ClockSectionTimer,
+      props: {
+        hours: date.getHours(),
+        minutes: date.getMinutes(),
+        seconds: date.getSeconds(),
+      },
+    })
 
     // ASSERT
     expect(screen.getByTestId('clock-section-timer')).toBeInTheDocument()

src/modules/shared/utils/test.ts

@@ -2,15 +2,15 @@ import { VueQueryPlugin } from '@tanstack/vue-query'
 import { type RenderResult, render } from '@testing-library/vue'
 import type { AnyFn } from '@vueuse/core'
 import { type TestAPI, test } from 'vitest'
-import { createApp } from 'vue'
+import { type ComponentInstance, createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 import enUS from '#i18n/en-US.json'
 import idID from '#i18n/id-ID.json'
 
-export interface WrapperParams {
+export interface WrapperParams<T> {
   component: any
   stubs?: string[]
-  props?: any
+  props?: ComponentInstance<T>['$props']
 }
 
 // Type-define 'en-US' as the master schema for the resource
@@ -68,8 +68,8 @@ export function composableWrapper(composable: AnyFn) {
  * const detectedLocale = detectLocale(navigatorDetector)
  * const wrapper = renderWrapper({ locales: detectedLocale })
  */
-export function renderWrapper() {
-  return ({ component, stubs, props }: WrapperParams) =>
+export function renderWrapper<T>() {
+  return ({ component, stubs, props }: WrapperParams<T>) =>
     render(component, {
       global: {
         stubs: (stubs ?? []).concat(['router-link', 'RouterLink']),
@@ -100,8 +100,8 @@ export function renderWrapper() {
  * We can also do it in the `beforeAll` by mutating it's context.
  */
 export const testWrapper: TestAPI<{
-  wrapper: (props: WrapperParams) => RenderResult
-}> = test.extend<{ wrapper: (props: WrapperParams) => RenderResult }>({
+  wrapper: <T>(props: WrapperParams<T>) => RenderResult
+}> = test.extend<{ wrapper: <T>(props: WrapperParams<T>) => RenderResult }>({
   wrapper: async ({ task: _task }, use) => {
     // setup the fixture before each test function
     const view = renderWrapper()

tailwind.config.cjs

@@ -5,14 +5,12 @@ module.exports = {
   darkMode: ['class'],
   safelist: ['dark'],
   prefix: '',
-
   content: [
     './pages/**/*.{ts,tsx,vue}',
     './components/**/*.{ts,tsx,vue}',
     './app/**/*.{ts,tsx,vue}',
     './src/**/*.{ts,tsx,vue}',
   ],
-
   theme: {
     container: {
       center: true,
@@ -87,6 +85,9 @@ module.exports = {
         'collapsible-down': 'collapsible-down 0.2s ease-in-out',
         'collapsible-up': 'collapsible-up 0.2s ease-in-out',
       },
+      // fontFamily: {
+      //   sans: ["var(--font-sans)", ...fontFamily.sans],
+      // },
     },
   },
   plugins: [animate],

vite.config.ts

@@ -18,7 +18,7 @@ const sw = process.env.SW === 'true'
 const claims = process.env.CLAIMS === 'true'
 const pwaOptions: Partial<VitePWAOptions> = {
   base: '/',
-  mode: 'development',
+  mode: process.env.SW_DEV === 'true' ? 'development' : 'production',
   includeAssets: ['*.ico', '*.svg', '*.png'],
   selfDestroying: process.env.SW_DESTROY === 'true',
   registerType: claims ? 'autoUpdate' : 'prompt',