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 .", 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/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/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 967a773..2311b54 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' }, }) } @@ -23,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') +