Merge pull request #24 from IT4Change/test-from-dreammall

fix(frontend): tests from dreammall

src/components/ClickCounter.delete.test.ts

@@ -1,21 +0,0 @@
-import { mount, config } from '@vue/test-utils'
-import { describe, it, expect } from 'vitest'
-
-import ClickCounter from './ClickCounter.delete.vue'
-
-describe('clickCounter', () => {
-  const wrapper = mount(ClickCounter)
-
-  it('renders Button with a Counter of 0', () => {
-    expect(wrapper.find('.v-btn').exists()).toBeTruthy()
-    expect(wrapper.text()).toBe("$t('app.inc.text')")
-  })
-
-  it('has default Translation German', () => {
-    const $Backup = config.global.mocks.$t
-    config.global.mocks.$t = config.global.mocks.i18n$t
-    const wrapper = mount(ClickCounter)
-    expect(wrapper.text()).toBe('Erhöhe: 0')
-    config.global.mocks.$t = $Backup
-  })
-})

src/components/ClickCounter.delete.vue

@@ -1,11 +0,0 @@
-<template>
-  <v-btn elevation="2" @click="state.count++">{{
-    $t('app.inc.text', { count: state.count })
-  }}</v-btn>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue'
-
-const state = reactive({ count: 0 })
-</script>

src/components/ClientOnly.test.ts

@@ -0,0 +1,12 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+import ClientOnly from './ClientOnly.vue'
+
+describe('ClientOnly', () => {
+  const wrapper = mount(ClientOnly)
+
+  it('renders content if mounted', async () => {
+    expect(wrapper.isVisible()).toBeTruthy()
+  })
+})

src/components/PageShell.test.ts.notworking

@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+import TopMenu from '#components/menu/TopMenu.vue'
+
+import PageShell from './PageShell.vue'
+
+describe('PageShell', () => {
+  const wrapper = mount(PageShell, {
+    slots: {
+      default: 'Page Content',
+    },
+  })
+
+  it('renders page content', () => {
+    expect(wrapper.find('.v-application').exists()).toBeTruthy()
+    expect(wrapper.find('.v-application').findComponent(TopMenu)).toBeTruthy()
+    expect(wrapper.html()).toContain('Page Content')
+  })
+})

src/components/menu/TopMenu.test.ts.notworking

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { h } from 'vue'
+import { VApp } from 'vuetify/components'
+
+import VikeBtn from '#components/VikeBtn.vue'
+
+import LogoAvatar from './LogoAvatar.vue'
+import TopMenu from './TopMenu.vue'
+
+describe('FooterMenu', () => {
+  const wrapper = mount(VApp, {
+    slots: {
+      default: h(TopMenu),
+    },
+  })
+
+  it('renders three columns', () => {
+    expect(wrapper.find('.v-row').exists()).toBeTruthy()
+    expect(wrapper.findAll('.v-row > div')).toHaveLength(3)
+  })
+
+  it('first column contains logo', () => {
+    expect(wrapper.findAll('.v-row > div')[0].findComponent(LogoAvatar)).toBeTruthy()
+  })
+
+  it('second column contains 3 children -> AnchorLink', () => {
+    expect(wrapper.findAll('.v-row > div')[1].findAllComponents(VikeBtn)).toHaveLength(3)
+  })
+
+  it('third column is placeholdre', () => {
+    expect(wrapper.findAll('.v-row > div')[2].findAll('div')).toHaveLength(0)
+  })
+})

src/pages/_error.page.test.ts

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach } from 'vitest'
+
+import ErrorPage from './_error.page.vue'
+
+describe('ErrorPage', () => {
+  let wrapper: typeof ErrorPage
+  const Wrapper = () => {
+    return mount(ErrorPage)
+  }
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  describe('no is404 property set', () => {
+    it('renders error 500', () => {
+      expect(wrapper.find('h1').text()).toEqual("$t('error.500.h1')")
+      expect(wrapper.find('p').text()).toEqual("$t('error.500.text')")
+    })
+  })
+
+  describe('is404 property is false', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({
+        is404: false,
+      })
+    })
+
+    it('renders error 500', () => {
+      expect(wrapper.find('h1').text()).toEqual("$t('error.500.h1')")
+      expect(wrapper.find('p').text()).toEqual("$t('error.500.text')")
+    })
+  })
+
+  describe('is404 property is true', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({
+        is404: true,
+      })
+    })
+
+    it('renders error 400', () => {
+      expect(wrapper.find('h1').text()).toEqual("$t('error.404.h1')")
+      expect(wrapper.find('p').text()).toEqual("$t('error.404.text')")
+    })
+  })
+})

vitest.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, mergeConfig } from 'vitest/config'
+import { defineConfig, mergeConfig, configDefaults } from 'vitest/config'
 
 import viteConfig from './vite.config'
 
@@ -12,10 +12,16 @@ export default mergeConfig(
       coverage: {
         all: true,
         include: ['src/**/*.{js,jsx,ts,tsx,vue}'],
-        lines: 1,
+        exclude: [
-        functions: 0,
+          ...configDefaults.exclude,
-        branches: 4,
+          // storybook
-        statements: 1,
+          '**/*{.,-}stories.?(c|m)[jt]s?(x)',
+          'src/stories/**/*',
+        ],
+        lines: 14,
+        functions: 20,
+        branches: 40,
+        statements: 14,
         // 100: true,
       },
     },