From 7d88532aafc1a96835183a5ee1fbd99e845b4b95 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Tue, 9 Jan 2024 22:40:08 +0100 Subject: [PATCH 1/5] global vikePageContext --- scripts/tests/mock.vikePageContext.ts | 8 ++++++++ src/components/VikeBtn.test.ts | 3 --- vitest.config.ts | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 scripts/tests/mock.vikePageContext.ts diff --git a/scripts/tests/mock.vikePageContext.ts b/scripts/tests/mock.vikePageContext.ts new file mode 100644 index 0000000..f6d266d --- /dev/null +++ b/scripts/tests/mock.vikePageContext.ts @@ -0,0 +1,8 @@ +import { config } from '@vue/test-utils' + +import { vikePageContext } from '#context/usePageContext' + +config.global.provide = { + ...config.global.provide, + [vikePageContext as symbol]: { urlPathname: '/some-url' }, +} diff --git a/src/components/VikeBtn.test.ts b/src/components/VikeBtn.test.ts index 967a773..a204e46 100644 --- a/src/components/VikeBtn.test.ts +++ b/src/components/VikeBtn.test.ts @@ -2,8 +2,6 @@ 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') @@ -12,7 +10,6 @@ vi.mocked(navigate).mockResolvedValue() describe('VikeBtn', () => { const Wrapper = () => { return mount(VikeBtn, { - global: { provide: { [vikePageContext as symbol]: { urlPathname: '/some-url' } } }, attrs: { href: '/some-path' }, }) } diff --git a/vitest.config.ts b/vitest.config.ts index a038368..e5f398b 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -8,7 +8,7 @@ export default mergeConfig( test: { globals: true, environment: 'happy-dom', - setupFiles: ['scripts/tests/mock.$t.ts', 'scripts/tests/plugin.vuetify.ts'], + setupFiles: ['scripts/tests/mock.$t.ts', 'scripts/tests/mock.vikePageContext.ts', 'scripts/tests/plugin.vuetify.ts'], coverage: { all: true, include: ['src/**/*.{js,jsx,ts,tsx,vue}'], From c9cd3c485fe6e97fc5c8fd1396fd7290d943c61f Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Tue, 9 Jan 2024 22:40:23 +0100 Subject: [PATCH 2/5] snapshot unit tests --- README.md | 1 + package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index e4cf24c..252cc00 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,7 @@ The following commands are available: | `npm run test:lint:remark` | Run linter remark | | `npm run test:lint:style` | Run linter stylelint | | `npm run test:unit` | Run all unit tests and generate coverage report | +| `npm run test:unit:update` | Run unit tests, coverage and update snapshots | | `npm run test:unit:dev` | Run all unit tests in watch mode | | `npm test` | Run all tests & linters | | **Storybook** | | diff --git a/package.json b/package.json index c0d5a6c..1dd0f95 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "test:lint:remark": "remark . --quiet --frail", "test:lint:style": "stylelint --max-warnings 0 --ignore-path .gitignore \"**/*.{css,scss,vue,vuex}\"", "test:unit": "npm run test:unit:dev -- run --coverage", + "test:unit:update": "npm run test:unit:dev -- run --coverage -u", "test:unit:dev": "vitest", "test": "npm run test:lint && npm run test:unit", "docs:dev": "vuepress dev .", From 2b0c8603a02c771e98aafa7dbd85074689cc1783 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Tue, 9 Jan 2024 23:04:31 +0100 Subject: [PATCH 3/5] setup scripts --- .../tests/{plugin.vuetify.ts => plugin.i18n-vuetify.ts} | 1 + scripts/tests/plugin.pinia.ts | 5 +++++ vitest.config.ts | 7 ++++++- 3 files changed, 12 insertions(+), 1 deletion(-) rename scripts/tests/{plugin.vuetify.ts => plugin.i18n-vuetify.ts} (89%) create mode 100644 scripts/tests/plugin.pinia.ts diff --git a/scripts/tests/plugin.vuetify.ts b/scripts/tests/plugin.i18n-vuetify.ts similarity index 89% rename from scripts/tests/plugin.vuetify.ts rename to scripts/tests/plugin.i18n-vuetify.ts index 3802ffb..2fba984 100644 --- a/scripts/tests/plugin.vuetify.ts +++ b/scripts/tests/plugin.i18n-vuetify.ts @@ -3,6 +3,7 @@ import { config } from '@vue/test-utils' import i18n from '#plugins/i18n' import vuetify from '#plugins/vuetify' +config.global.plugins.push(i18n) config.global.plugins.push(vuetify(i18n)) config.global.mocks = { diff --git a/scripts/tests/plugin.pinia.ts b/scripts/tests/plugin.pinia.ts new file mode 100644 index 0000000..4d0bb09 --- /dev/null +++ b/scripts/tests/plugin.pinia.ts @@ -0,0 +1,5 @@ +import { config } from '@vue/test-utils' + +import pinia from '#plugins/pinia' + +config.global.plugins.push(pinia) diff --git a/vitest.config.ts b/vitest.config.ts index e5f398b..530accb 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -8,7 +8,12 @@ export default mergeConfig( test: { globals: true, environment: 'happy-dom', - setupFiles: ['scripts/tests/mock.$t.ts', 'scripts/tests/mock.vikePageContext.ts', 'scripts/tests/plugin.vuetify.ts'], + setupFiles: [ + 'scripts/tests/mock.$t.ts', + 'scripts/tests/mock.vikePageContext.ts', + 'scripts/tests/plugin.pinia.ts', + 'scripts/tests/plugin.i18n-vuetify.ts', + ], coverage: { all: true, include: ['src/**/*.{js,jsx,ts,tsx,vue}'], From c92f7dbe358ab96d664d2227582598429684f829 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Tue, 9 Jan 2024 23:07:37 +0100 Subject: [PATCH 4/5] snapshot tests --- src/components/PageShell.test.ts | 16 ++ src/components/PageShell.test.ts.notworking | 20 -- src/components/VikeBtn.test.ts | 2 +- .../__snapshots__/PageShell.test.ts.snap | 272 ++++++++++++++++++ .../__snapshots__/VikeBtn.test.ts.snap | 31 ++ src/components/menu/LogoAvatar.test.ts | 19 ++ src/components/menu/TopMenu.test.ts | 18 ++ .../menu/TopMenu.test.ts.notworking | 34 --- .../__snapshots__/LogoAvatar.test.ts.snap | 52 ++++ .../menu/__snapshots__/TopMenu.test.ts.snap | 269 +++++++++++++++++ src/layouts/DefaultLayout.test.ts | 25 ++ .../__snapshots__/DefaultLayout.test.ts.snap | 40 +++ src/pages/about/Page.test.ts | 18 ++ .../about/__snapshots__/Page.test.ts.snap | 68 +++++ src/pages/app/Page.test.ts | 18 ++ src/pages/app/__snapshots__/Page.test.ts.snap | 161 +++++++++++ src/pages/index/Page.test.ts | 18 ++ .../index/__snapshots__/Page.test.ts.snap | 69 +++++ 18 files changed, 1095 insertions(+), 55 deletions(-) create mode 100644 src/components/PageShell.test.ts delete mode 100644 src/components/PageShell.test.ts.notworking create mode 100644 src/components/__snapshots__/PageShell.test.ts.snap create mode 100644 src/components/__snapshots__/VikeBtn.test.ts.snap create mode 100644 src/components/menu/LogoAvatar.test.ts create mode 100644 src/components/menu/TopMenu.test.ts delete mode 100644 src/components/menu/TopMenu.test.ts.notworking create mode 100644 src/components/menu/__snapshots__/LogoAvatar.test.ts.snap create mode 100644 src/components/menu/__snapshots__/TopMenu.test.ts.snap create mode 100644 src/layouts/DefaultLayout.test.ts create mode 100644 src/layouts/__snapshots__/DefaultLayout.test.ts.snap create mode 100644 src/pages/about/Page.test.ts create mode 100644 src/pages/about/__snapshots__/Page.test.ts.snap create mode 100644 src/pages/app/Page.test.ts create mode 100644 src/pages/app/__snapshots__/Page.test.ts.snap create mode 100644 src/pages/index/Page.test.ts create mode 100644 src/pages/index/__snapshots__/Page.test.ts.snap diff --git a/src/components/PageShell.test.ts b/src/components/PageShell.test.ts new file mode 100644 index 0000000..5cf2665 --- /dev/null +++ b/src/components/PageShell.test.ts @@ -0,0 +1,16 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect } from 'vitest' + +import PageShell from './PageShell.vue' + +describe('PageShell', () => { + const wrapper = mount(PageShell, { + slots: { + default: 'Page Content', + }, + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/components/PageShell.test.ts.notworking b/src/components/PageShell.test.ts.notworking deleted file mode 100644 index 0f4b415..0000000 --- a/src/components/PageShell.test.ts.notworking +++ /dev/null @@ -1,20 +0,0 @@ -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') - }) -}) diff --git a/src/components/VikeBtn.test.ts b/src/components/VikeBtn.test.ts index a204e46..2311b54 100644 --- a/src/components/VikeBtn.test.ts +++ b/src/components/VikeBtn.test.ts @@ -20,7 +20,7 @@ describe('VikeBtn', () => { }) it('renders', () => { - expect(wrapper.find('.v-btn').exists()).toBeTruthy() + expect(wrapper.element).toMatchSnapshot() }) it('icon is hidden', () => { diff --git a/src/components/__snapshots__/PageShell.test.ts.snap b/src/components/__snapshots__/PageShell.test.ts.snap new file mode 100644 index 0000000..60dc9c7 --- /dev/null +++ b/src/components/__snapshots__/PageShell.test.ts.snap @@ -0,0 +1,272 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`PageShell > renders 1`] = ` +
+
+ +
+ + +
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + +
+ + + + +
+
+
+ + + + + + + + + + + $t('menu.home') + + + + + + + + + + + + + + + + + + $t('menu.app') + + + + + + + + + + + + + + + + + + $t('menu.about') + + + + + + + +
+
+
+ +
+ +
+
+ +
+ +
+ + + +
+ + + +
+ + +
+
+ +
+ +
+ +
+ + + + +
+
+
+
+ + +
+ + + + + + +
+ + Page Content + + +
+
+`; diff --git a/src/components/__snapshots__/VikeBtn.test.ts.snap b/src/components/__snapshots__/VikeBtn.test.ts.snap new file mode 100644 index 0000000..ba1cc0c --- /dev/null +++ b/src/components/__snapshots__/VikeBtn.test.ts.snap @@ -0,0 +1,31 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`VikeBtn > renders 1`] = ` + + + + + + + + + + + + + + + + + +`; diff --git a/src/components/menu/LogoAvatar.test.ts b/src/components/menu/LogoAvatar.test.ts new file mode 100644 index 0000000..4f4791d --- /dev/null +++ b/src/components/menu/LogoAvatar.test.ts @@ -0,0 +1,19 @@ +import { mount } from '@vue/test-utils' +import { beforeEach, expect, describe, it } from 'vitest' + +import LogoAvatar from './LogoAvatar.vue' + +describe('LogoAvatar', () => { + const Wrapper = () => { + return mount(LogoAvatar) + } + let wrapper: ReturnType + + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/components/menu/TopMenu.test.ts b/src/components/menu/TopMenu.test.ts new file mode 100644 index 0000000..78b537b --- /dev/null +++ b/src/components/menu/TopMenu.test.ts @@ -0,0 +1,18 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect } from 'vitest' +import { h } from 'vue' +import { VApp } from 'vuetify/components' + +import TopMenu from './TopMenu.vue' + +describe('FooterMenu', () => { + const wrapper = mount(VApp, { + slots: { + default: h(TopMenu), + }, + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/components/menu/TopMenu.test.ts.notworking b/src/components/menu/TopMenu.test.ts.notworking deleted file mode 100644 index e9aad05..0000000 --- a/src/components/menu/TopMenu.test.ts.notworking +++ /dev/null @@ -1,34 +0,0 @@ -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) - }) -}) diff --git a/src/components/menu/__snapshots__/LogoAvatar.test.ts.snap b/src/components/menu/__snapshots__/LogoAvatar.test.ts.snap new file mode 100644 index 0000000..0ca1449 --- /dev/null +++ b/src/components/menu/__snapshots__/LogoAvatar.test.ts.snap @@ -0,0 +1,52 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LogoAvatar > renders 1`] = ` +
+
+
+ + + + + + + + + + + + + + +
+ + + + +
+`; diff --git a/src/components/menu/__snapshots__/TopMenu.test.ts.snap b/src/components/menu/__snapshots__/TopMenu.test.ts.snap new file mode 100644 index 0000000..14ce38f --- /dev/null +++ b/src/components/menu/__snapshots__/TopMenu.test.ts.snap @@ -0,0 +1,269 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`FooterMenu > renders 1`] = ` +
+
+ +
+ + +
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + +
+ + + + +
+
+
+ + + + + + + + + + + $t('menu.home') + + + + + + + + + + + + + + + + + + $t('menu.app') + + + + + + + + + + + + + + + + + + $t('menu.about') + + + + + + + +
+
+
+ +
+ +
+
+ +
+ +
+ + + +
+ + + +
+ + +
+
+ +
+ +
+ +
+ + + + +
+
+
+
+ + +
+ + + + + + +
+ +
+
+`; diff --git a/src/layouts/DefaultLayout.test.ts b/src/layouts/DefaultLayout.test.ts new file mode 100644 index 0000000..14257e1 --- /dev/null +++ b/src/layouts/DefaultLayout.test.ts @@ -0,0 +1,25 @@ +import { mount } from '@vue/test-utils' +import { beforeEach, expect, describe, it } from 'vitest' +import { Component, h } from 'vue' +import { VApp } from 'vuetify/components' + +import DefaultLayout from './DefaultLayout.vue' + +describe('LogoAvatar', () => { + const Wrapper = () => { + return mount(VApp, { + slots: { + default: h(DefaultLayout as Component), + }, + }) + } + let wrapper: ReturnType + + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/layouts/__snapshots__/DefaultLayout.test.ts.snap b/src/layouts/__snapshots__/DefaultLayout.test.ts.snap new file mode 100644 index 0000000..4049e48 --- /dev/null +++ b/src/layouts/__snapshots__/DefaultLayout.test.ts.snap @@ -0,0 +1,40 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`LogoAvatar > renders 1`] = ` +
+
+ +
+ +
+
+ +
+
+ + +
+
+
+
+ +
+ +
+
+`; diff --git a/src/pages/about/Page.test.ts b/src/pages/about/Page.test.ts new file mode 100644 index 0000000..d8cdd3c --- /dev/null +++ b/src/pages/about/Page.test.ts @@ -0,0 +1,18 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect } from 'vitest' +import { Component, h } from 'vue' +import { VApp } from 'vuetify/components' + +import AboutPage from './+Page.vue' + +describe('DataPrivacyPage', () => { + const wrapper = mount(VApp, { + slots: { + default: h(AboutPage as Component), + }, + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/pages/about/__snapshots__/Page.test.ts.snap b/src/pages/about/__snapshots__/Page.test.ts.snap new file mode 100644 index 0000000..c5ae1f4 --- /dev/null +++ b/src/pages/about/__snapshots__/Page.test.ts.snap @@ -0,0 +1,68 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DataPrivacyPage > renders 1`] = ` +
+
+ +
+ +
+
+ +
+
+ +

+ $t('about.h1') +

+

+ Um mehr über diese Kochplatte zu erfahren kannst du dir den Quellcode auf + + + $t('about.link1') + + + anschauen. +

+
+

+ Du willst mehr erfahren? Besuche uns auf + + + $t('about.link2') + + + . +

+ +
+
+
+
+ +
+ +
+
+`; diff --git a/src/pages/app/Page.test.ts b/src/pages/app/Page.test.ts new file mode 100644 index 0000000..816e11b --- /dev/null +++ b/src/pages/app/Page.test.ts @@ -0,0 +1,18 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect } from 'vitest' +import { Component, h } from 'vue' +import { VApp } from 'vuetify/components' + +import AppPage from './+Page.vue' + +describe('DataPrivacyPage', () => { + const wrapper = mount(VApp, { + slots: { + default: h(AppPage as Component), + }, + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/pages/app/__snapshots__/Page.test.ts.snap b/src/pages/app/__snapshots__/Page.test.ts.snap new file mode 100644 index 0000000..f120ec0 --- /dev/null +++ b/src/pages/app/__snapshots__/Page.test.ts.snap @@ -0,0 +1,161 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DataPrivacyPage > renders 1`] = ` +
+
+ +
+ +
+
+
+
+ +
+ + + + + + + +
+
+ $t('app.value.menu') +
+ + +
+ + + + + + + + +
+
+ $t('app.inc.menu') +
+ + +
+ + + + + + + + + +
+
+ $t('app.reset.menu') +
+ + +
+ + + +
+ +
+
+
+
+ +
+

+ $t('app.value.h1') +

+

+ Der aktuelle Wert des Zählers lautet: + + + + 0 + + + +

+
+ +
+
+
+
+ +
+ +
+
+`; diff --git a/src/pages/index/Page.test.ts b/src/pages/index/Page.test.ts new file mode 100644 index 0000000..8596ddd --- /dev/null +++ b/src/pages/index/Page.test.ts @@ -0,0 +1,18 @@ +import { mount } from '@vue/test-utils' +import { describe, it, expect } from 'vitest' +import { Component, h } from 'vue' +import { VApp } from 'vuetify/components' + +import IndexPage from './+Page.vue' + +describe('DataPrivacyPage', () => { + const wrapper = mount(VApp, { + slots: { + default: h(IndexPage as Component), + }, + }) + + it('renders', () => { + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/pages/index/__snapshots__/Page.test.ts.snap b/src/pages/index/__snapshots__/Page.test.ts.snap new file mode 100644 index 0000000..c50e998 --- /dev/null +++ b/src/pages/index/__snapshots__/Page.test.ts.snap @@ -0,0 +1,69 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DataPrivacyPage > renders 1`] = ` +
+
+ +
+ +
+
+ +
+
+ +

+ $t('home.h1') +

+

+ $t('home.text1') +

+
+

+ $t('home.text2') +

+
+

+ $t('home.text3') +

+
+

+ $t('home.text4') +