ci: fix test, add script test:quiet

package.json

@@ -16,11 +16,12 @@
     "lint:fix": "eslint . --fix",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "test": "vitest",
+    "test:quiet": "vitest --watch=false",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
     "test:preview": "vite preview --outDir html",
     "test:preview:coverage": "vite preview --outDir coverage",
-    "regression": "run-p lint typecheck test",
+    "regression": "run-p lint typecheck test:quiet",
     "msw:init": "msw init public/ --save",
     "msw:delete": "rm -rf public/mockServiceWorker.js",
     "dev": "rimraf dev-dist && DEBUG=vite-plugin-pwa SW_DEV=true vite",

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

@@ -14,7 +14,7 @@ describe('<LoginForm />', () => {
     async ({ wrapper }) => {
       // ARRANGE
       const user = userEvent.setup()
-      wrapper({ component: LoginForm })
+      wrapper<typeof LoginForm>({ component: LoginForm })
       const formLogin: HTMLFormElement = screen.getByTestId('form-login')
       const inputUsername: HTMLInputElement = screen.getByTestId('input-username')
       const inputPassword: HTMLInputElement = screen.getByTestId('input-password')

src/modules/auth/pages/login/page.test.ts

@@ -4,13 +4,13 @@ import { testWrapper } from '#shared/utils/test'
 
 describe('<LoginPage />', () => {
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: LoginPage })
+    const result = wrapper<typeof LoginPage>({ component: LoginPage })
     expect(() => result).not.toThrow()
   })
 
   testWrapper('should render content roles correctly', ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: LoginPage })
+    wrapper<typeof LoginPage>({ component: LoginPage })
     const linkHome: HTMLAnchorElement = screen.getByRole('link', { name: /home/i })
     // const linkRegister: HTMLAnchorElement = screen.getByRole('link', { name: /register/i })
     const imgCover: HTMLImageElement = screen.getByRole('img', { name: /cover/i })

src/modules/auth/pages/not-found/page.test.ts

@@ -4,13 +4,13 @@ import { testWrapper } from '#shared/utils/test'
 
 describe('<NotFoundPage />', () => {
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: NotFoundPage })
+    const result = wrapper<typeof NotFoundPage>({ component: NotFoundPage })
     expect(() => result).not.toThrow()
   })
 
   testWrapper('should render text contents correctly', ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: NotFoundPage })
+    wrapper<typeof NotFoundPage>({ component: NotFoundPage })
     const heading: HTMLHeadingElement = screen.getByText(/Not Found/)
     const paragraph: HTMLParagraphElement = screen.getByText(/It's gone/)
     const anchor: HTMLAnchorElement = screen.getByTestId('notFound-link') // there are no text inside a stubbed router link

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

@@ -9,7 +9,7 @@ describe('<ClockSection />', () => {
 
   testWrapper('should render clock when toggle clock button clicked', async ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: ClockSection })
+    wrapper<typeof ClockSection>({ component: ClockSection })
     const user = userEvent.setup()
     const button: HTMLButtonElement = screen.getByTestId(/home-clock-button-clock/i)
 
@@ -21,7 +21,7 @@ describe('<ClockSection />', () => {
   // TODO: figure out how to solve the randomness
   testWrapper.todo('should shuffle buttons when sort button clicked', async ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: ClockSection })
+    wrapper<typeof ClockSection>({ component: ClockSection })
     const user = userEvent.setup()
     const buttonsBefore: HTMLButtonElement[] = screen.queryAllByTestId(/home-clock-button/i)
     const button: HTMLButtonElement = screen.getByTestId(/home-clock-button-sort/i)
@@ -39,7 +39,7 @@ describe('<ClockSection />', () => {
     'should call mocked navigate function when get started button clicked',
     async ({ wrapper }) => {
       // ARRANGE
-      wrapper({ component: ClockSection })
+      wrapper<typeof ClockSection>({ component: ClockSection })
       const user = userEvent.setup()
       const button: HTMLButtonElement = screen.getByTestId(/home-clock-button-start/i)
       button.addEventListener('click', mockButtonFn)

src/modules/home/pages/home/page.test.ts

@@ -4,13 +4,13 @@ import { testWrapper } from '#shared/utils/test'
 
 describe('<HomePage />', () => {
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: HomePage })
+    const result = wrapper<typeof HomePage>({ component: HomePage })
     expect(() => result).not.toThrow()
   })
 
   testWrapper('should render contents correctly', ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: HomePage })
+    wrapper<typeof HomePage>({ component: HomePage })
     const heading: HTMLHeadingElement = screen.getByRole('heading', { level: 1 })
 
     // ACT & ASSERT

src/modules/shared/utils/test.ts

@@ -9,8 +9,8 @@ import idID from '#i18n/id-ID.json'
 
 export interface WrapperParams<T> {
   component: any
-  stubs?: string[]
   props?: ComponentInstance<T>['$props']
+  stubs?: string[]
 }
 
 // Type-define 'en-US' as the master schema for the resource

src/modules/todo/components/todos-create/todos-create.test.ts

@@ -9,15 +9,15 @@ describe('<TodosCreate />', () => {
   const mockCreateSubmitFn = vi.fn()
 
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: TodosCreate })
+    const result = wrapper<typeof TodosCreate>({ component: TodosCreate })
     expect(() => result).not.toThrow()
   })
 
   testWrapper(
     'should be able to type the inputs and submit the create todo form',
     async ({ wrapper }) => {
       // ARRANGE
-      wrapper({ component: TodosCreate })
+      wrapper<typeof TodosCreate>({ component: TodosCreate })
       const user = userEvent.setup()
       const formCreate: HTMLFormElement = screen.getByTestId('form-create')
       const inputTodo: HTMLInputElement = screen.getByTestId('input-create')

src/modules/todo/components/todos-filter/todos-filter.test.ts

@@ -7,13 +7,13 @@ describe('<TodosFilter />', () => {
   const mockSelectFn = vi.fn()
 
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: TodosFilter })
+    const result = wrapper<typeof TodosFilter>({ component: TodosFilter })
     expect(() => result).not.toThrow()
   })
 
   testWrapper('should be able to click dropdown', async ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: TodosFilter })
+    wrapper<typeof TodosFilter>({ component: TodosFilter })
     const form: HTMLFormElement = screen.getByRole('form')
     const combobox = screen.getByTestId('combobox-btn')
     combobox.addEventListener('click', mockSelectFn)

src/modules/todo/components/todos-item/todos-item.test.ts

@@ -17,13 +17,13 @@ describe('<TodosItem />', () => {
   })
 
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: TodosItem, props: { todo } })
+    const result = wrapper<typeof TodosItem>({ component: TodosItem, props: { todo } })
     expect(() => result).not.toThrow()
   })
 
   testWrapper('should render, check checkbox correctly', async ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: TodosItem, props: { todo } })
+    wrapper<typeof TodosItem>({ component: TodosItem, props: { todo } })
     const form: HTMLFormElement = await screen.findByRole('form', { name: /todo/i })
     const inputId: HTMLInputElement = await screen.findByTestId('input-todoId')
     const inputTodo: HTMLInputElement = await screen.findByRole('checkbox', { name: /todo/i })
@@ -41,7 +41,7 @@ describe('<TodosItem />', () => {
   // FIXME: Unable to find role="button"
   testWrapper.todo('should remove todo item correctly', async ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: TodosItem, props: { todo } })
+    wrapper<typeof TodosItem>({ component: TodosItem, props: { todo } })
     const removeBtn: HTMLButtonElement = await screen.findByRole('button')
 
     // ACT & ASSERT

src/modules/todo/components/todos-list/todos-list.test.ts

@@ -9,7 +9,7 @@ describe('<TodosList />', () => {
   const loadingId = 'list-loading'
 
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: TodosList })
+    const result = wrapper<typeof TodosList>({ component: TodosList })
     expect(() => result).not.toThrow()
   })
 
@@ -29,7 +29,7 @@ describe('<TodosList />', () => {
         { once: true },
       ),
     )
-    wrapper({ component: TodosList })
+    wrapper<typeof TodosList>({ component: TodosList })
 
     // ASSERT
     await waitFor(() => {

src/modules/todo/pages/todo/page.test.ts

@@ -4,13 +4,13 @@ import { testWrapper } from '#shared/utils/test'
 
 describe('<TodoPage />', () => {
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: TodoPage })
+    const result = wrapper<typeof TodoPage>({ component: TodoPage })
     expect(() => result).not.toThrow()
   })
 
   testWrapper('should render role contents correctly', ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: TodoPage })
+    wrapper<typeof TodoPage>({ component: TodoPage })
     const breadcrumb = screen.getByRole('navigation', { name: 'breadcrumb' })
     const title: HTMLHeadingElement = screen.getByRole('heading', { name: /detail/i })
 

src/modules/todo/pages/todos/page.test.ts

@@ -4,13 +4,13 @@ import { testWrapper } from '#shared/utils/test'
 
 describe('<TodosPage />', () => {
   testWrapper('should render properly', ({ wrapper }) => {
-    const result = wrapper({ component: TodosPage })
+    const result = wrapper<typeof TodosPage>({ component: TodosPage })
     expect(() => result).not.toThrow()
   })
 
   testWrapper('should render content roles correctly', ({ wrapper }) => {
     // ARRANGE
-    wrapper({ component: TodosPage })
+    wrapper<typeof TodosPage>({ component: TodosPage })
     const title = screen.getByRole('heading', { level: 1 })
 
     // ACT & ASSERT