Merge pull request #46 from IT4Change/test-vike-button

feat(frontend): test vike button

renderer/app.ts

@@ -54,11 +54,8 @@ function createApp(pageContext: VikePageContext & PageContext, isClient = true)
     },
   })
 
-  // When doing Client Routing, we mutate pageContext (see usage of `app.changePage()` in `_default.page.client.js`).
-  // We therefore use a reactive pageContext.
   const pageContextReactive = reactive(pageContext)
 
-  // Make pageContext available from any Vue component
   setPageContext(app, pageContextReactive)
 
   return { app, i18n }

renderer/context/usePageContext.ts

@@ -7,16 +7,16 @@ import { PageContext, VikePageContext } from '#types/PageContext'
 
 import type { App, InjectionKey } from 'vue'
 
-const key: InjectionKey<VikePageContext & PageContext> = Symbol('pageContext')
+export const vikePageContext: InjectionKey<VikePageContext & PageContext> = Symbol('pageContext')
 
 function usePageContext() {
-  const pageContext = inject(key)
+  const pageContext = inject(vikePageContext)
   if (!pageContext) throw new Error('setPageContext() not called in parent')
   return pageContext
 }
 
 function setPageContext(app: App, pageContext: VikePageContext & PageContext) {
-  app.provide(key, pageContext)
+  app.provide(vikePageContext, pageContext)
 }
 
 export { usePageContext }

src/components/VikeBtn.test.ts

@@ -2,14 +2,17 @@ import { mount } from '@vue/test-utils'
 import { navigate } from 'vike/client/router'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
+import { vikePageContext } from '#context/usePageContext'
+
 import VikeBtn from './VikeBtn.vue'
 
 vi.mock('vike/client/router')
 vi.mocked(navigate).mockResolvedValue()
-describe.skip('VikeBtn', () => {
+
+describe('VikeBtn', () => {
   const Wrapper = () => {
     return mount(VikeBtn, {
-      global: { provide: { [Symbol('pageContext')]: { urlPathname: 'some-url' } } },
+      global: { provide: { [vikePageContext as symbol]: { urlPathname: '/some-url' } } },
       attrs: { href: '/some-path' },
     })
   }
@@ -27,6 +30,26 @@ describe.skip('VikeBtn', () => {
     expect(wrapper.find('.v-icon').exists()).toBe(false)
   })
 
+  describe('with href attribute app', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ href: '/app' } as Partial<object>)
+    })
+
+    it('has flat variant', () => {
+      expect(wrapper.classes()).toContain('v-btn--variant-flat')
+    })
+  })
+
+  describe('with same href attribute', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ href: '/some-url' } as Partial<object>)
+    })
+
+    it('has tonal variant', () => {
+      expect(wrapper.classes()).toContain('v-btn--variant-tonal')
+    })
+  })
+
   describe('click on button', () => {
     it('calls navigate method with given href', async () => {
       await wrapper.find('.v-btn').trigger('click')

vitest.config.ts

@@ -19,10 +19,10 @@ export default mergeConfig(
           'src/stories/**/*',
         ],
         thresholds: {
-          lines: 17,
+          lines: 25,
           // functions: 20, // has problems see https://github.com/vitest-dev/vitest/issues/3607
-          branches: 41,
-          statements: 17,
+          branches: 60,
+          statements: 25,
         },
       },
     },