mirror of
https://github.com/IT4Change/boilerplate-frontend.git
synced 2025-12-13 07:35:53 +00:00
Merge pull request #47 from IT4Change/snapshot-tests
feat(frontend): snapshot tests
This commit is contained in:
GitHub
commit
018291b460
@ -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** | |
|
||||
|
||||
@ -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 .",
|
||||
|
||||
8
scripts/tests/mock.vikePageContext.ts
Normal file
8
scripts/tests/mock.vikePageContext.ts
Normal file
@ -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' },
|
||||
}
|
||||
@ -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 = {
|
||||
5
scripts/tests/plugin.pinia.ts
Normal file
5
scripts/tests/plugin.pinia.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { config } from '@vue/test-utils'
|
||||
|
||||
import pinia from '#plugins/pinia'
|
||||
|
||||
config.global.plugins.push(pinia)
|
||||
16
src/components/PageShell.test.ts
Normal file
16
src/components/PageShell.test.ts
Normal file
@ -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()
|
||||
})
|
||||
})
|
||||
@ -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')
|
||||
})
|
||||
})
|
||||
@ -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', () => {
|
||||
|
||||
272
src/components/__snapshots__/PageShell.test.ts.snap
Normal file
272
src/components/__snapshots__/PageShell.test.ts.snap
Normal file
@ -0,0 +1,272 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`PageShell > renders 1`] = `
|
||||
<div
|
||||
class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-application__wrap"
|
||||
>
|
||||
|
||||
<header
|
||||
class="v-toolbar v-toolbar--flat v-toolbar--density-default v-theme--light v-locale--is-ltr v-app-bar"
|
||||
style="top: 0px; z-index: 1004; transform: translateY(0%); position: fixed; left: 0px; width: calc(100% - 0px - 0px);"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="v-toolbar__content"
|
||||
style="height: 64px;"
|
||||
>
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="v-row"
|
||||
>
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat ma-2 pa-1"
|
||||
style="background-color: #333; color: #fff; caret-color: #fff; width: 48px; height: 48px;"
|
||||
>
|
||||
<div
|
||||
aria-label=""
|
||||
class="v-responsive v-img v-img--booting"
|
||||
>
|
||||
<div
|
||||
class="v-responsive__sizer"
|
||||
/>
|
||||
|
||||
|
||||
<transition-stub
|
||||
appear="true"
|
||||
css="true"
|
||||
name="fade-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="v-img__img v-img__img--cover"
|
||||
src="/src/assets/it4c-logo2-clean-bg_alpha-128x128.png"
|
||||
style="display: none;"
|
||||
/>
|
||||
</transition-stub>
|
||||
<transition-stub
|
||||
appear="false"
|
||||
css="true"
|
||||
name="fade-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<!---->
|
||||
</transition-stub>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-avatar__underlay"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="v-col d-flex align-center justify-center grow"
|
||||
>
|
||||
<a
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
|
||||
href="/"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
$t('menu.home')
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</a>
|
||||
<a
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
|
||||
href="/app"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
$t('menu.app')
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</a>
|
||||
<a
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
|
||||
href="/about"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
$t('menu.about')
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-locale--is-ltr v-input--dirty v-switch d-flex justify-end mr-5"
|
||||
>
|
||||
<!---->
|
||||
<div
|
||||
class="v-input__control"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-selection-control v-selection-control--dirty v-selection-control--density-default"
|
||||
>
|
||||
<div
|
||||
class="v-selection-control__wrapper text-success"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-switch__track bg-success"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="v-selection-control__input"
|
||||
>
|
||||
|
||||
|
||||
<input
|
||||
aria-describedby="switch-4-messages"
|
||||
aria-disabled="false"
|
||||
id="switch-4"
|
||||
type="checkbox"
|
||||
value="true"
|
||||
/>
|
||||
<div
|
||||
class="v-switch__thumb bg-success"
|
||||
>
|
||||
<transition-stub
|
||||
appear="false"
|
||||
css="true"
|
||||
name="scale-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<!---->
|
||||
</transition-stub>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
class="v-label v-label--clickable"
|
||||
for="switch-4"
|
||||
>
|
||||
<!---->
|
||||
|
||||
$t('language.german')
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!---->
|
||||
<div
|
||||
class="v-input__details"
|
||||
>
|
||||
<transition-group-stub
|
||||
appear="false"
|
||||
aria-live="polite"
|
||||
class="v-messages"
|
||||
css="true"
|
||||
id="switch-4-messages"
|
||||
name="slide-y-transition"
|
||||
persisted="false"
|
||||
role="alert"
|
||||
tag="div"
|
||||
>
|
||||
<!---->
|
||||
</transition-group-stub>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
|
||||
<transition-stub
|
||||
appear="false"
|
||||
css="true"
|
||||
name="expand-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<!---->
|
||||
</transition-stub>
|
||||
|
||||
</header>
|
||||
|
||||
Page Content
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
31
src/components/__snapshots__/VikeBtn.test.ts.snap
Normal file
31
src/components/__snapshots__/VikeBtn.test.ts.snap
Normal file
@ -0,0 +1,31 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`VikeBtn > renders 1`] = `
|
||||
<a
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
|
||||
href="/some-path"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</a>
|
||||
`;
|
||||
19
src/components/menu/LogoAvatar.test.ts
Normal file
19
src/components/menu/LogoAvatar.test.ts
Normal file
@ -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<typeof Wrapper>
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders', () => {
|
||||
expect(wrapper.element).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
18
src/components/menu/TopMenu.test.ts
Normal file
18
src/components/menu/TopMenu.test.ts
Normal file
@ -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()
|
||||
})
|
||||
})
|
||||
@ -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)
|
||||
})
|
||||
})
|
||||
52
src/components/menu/__snapshots__/LogoAvatar.test.ts.snap
Normal file
52
src/components/menu/__snapshots__/LogoAvatar.test.ts.snap
Normal file
@ -0,0 +1,52 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`LogoAvatar > renders 1`] = `
|
||||
<div
|
||||
class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat ma-2 pa-1"
|
||||
style="background-color: #333; color: #fff; caret-color: #fff; width: 48px; height: 48px;"
|
||||
>
|
||||
<div
|
||||
aria-label=""
|
||||
class="v-responsive v-img v-img--booting"
|
||||
>
|
||||
<div
|
||||
class="v-responsive__sizer"
|
||||
/>
|
||||
|
||||
|
||||
<transition-stub
|
||||
appear="true"
|
||||
css="true"
|
||||
name="fade-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="v-img__img v-img__img--cover"
|
||||
src="/src/assets/it4c-logo2-clean-bg_alpha-128x128.png"
|
||||
style="display: none;"
|
||||
/>
|
||||
</transition-stub>
|
||||
<transition-stub
|
||||
appear="false"
|
||||
css="true"
|
||||
name="fade-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<!---->
|
||||
</transition-stub>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-avatar__underlay"
|
||||
/>
|
||||
|
||||
</div>
|
||||
`;
|
||||
269
src/components/menu/__snapshots__/TopMenu.test.ts.snap
Normal file
269
src/components/menu/__snapshots__/TopMenu.test.ts.snap
Normal file
@ -0,0 +1,269 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`FooterMenu > renders 1`] = `
|
||||
<div
|
||||
class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-application__wrap"
|
||||
>
|
||||
|
||||
<header
|
||||
class="v-toolbar v-toolbar--flat v-toolbar--density-default v-theme--light v-locale--is-ltr v-app-bar"
|
||||
style="top: 0px; z-index: 1004; transform: translateY(0%); position: fixed; left: 0px; width: calc(100% - 0px - 0px);"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="v-toolbar__content"
|
||||
style="height: 64px;"
|
||||
>
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="v-row"
|
||||
>
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-avatar v-theme--light v-avatar--density-default v-avatar--variant-flat ma-2 pa-1"
|
||||
style="background-color: #333; color: #fff; caret-color: #fff; width: 48px; height: 48px;"
|
||||
>
|
||||
<div
|
||||
aria-label=""
|
||||
class="v-responsive v-img v-img--booting"
|
||||
>
|
||||
<div
|
||||
class="v-responsive__sizer"
|
||||
/>
|
||||
|
||||
|
||||
<transition-stub
|
||||
appear="true"
|
||||
css="true"
|
||||
name="fade-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="v-img__img v-img__img--cover"
|
||||
src="/src/assets/it4c-logo2-clean-bg_alpha-128x128.png"
|
||||
style="display: none;"
|
||||
/>
|
||||
</transition-stub>
|
||||
<transition-stub
|
||||
appear="false"
|
||||
css="true"
|
||||
name="fade-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<!---->
|
||||
</transition-stub>
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-avatar__underlay"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="v-col d-flex align-center justify-center grow"
|
||||
>
|
||||
<a
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
|
||||
href="/"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
$t('menu.home')
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</a>
|
||||
<a
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
|
||||
href="/app"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
$t('menu.app')
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</a>
|
||||
<a
|
||||
class="v-btn v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-flat"
|
||||
href="/about"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-btn__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-btn__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<span
|
||||
class="v-btn__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
|
||||
|
||||
|
||||
$t('menu.about')
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
<!---->
|
||||
<!---->
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-locale--is-ltr v-input--dirty v-switch d-flex justify-end mr-5"
|
||||
>
|
||||
<!---->
|
||||
<div
|
||||
class="v-input__control"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-selection-control v-selection-control--dirty v-selection-control--density-default"
|
||||
>
|
||||
<div
|
||||
class="v-selection-control__wrapper text-success"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-switch__track bg-success"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="v-selection-control__input"
|
||||
>
|
||||
|
||||
|
||||
<input
|
||||
aria-describedby="switch-4-messages"
|
||||
aria-disabled="false"
|
||||
id="switch-4"
|
||||
type="checkbox"
|
||||
value="true"
|
||||
/>
|
||||
<div
|
||||
class="v-switch__thumb bg-success"
|
||||
>
|
||||
<transition-stub
|
||||
appear="false"
|
||||
css="true"
|
||||
name="scale-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<!---->
|
||||
</transition-stub>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<label
|
||||
class="v-label v-label--clickable"
|
||||
for="switch-4"
|
||||
>
|
||||
<!---->
|
||||
|
||||
$t('language.german')
|
||||
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!---->
|
||||
<div
|
||||
class="v-input__details"
|
||||
>
|
||||
<transition-group-stub
|
||||
appear="false"
|
||||
aria-live="polite"
|
||||
class="v-messages"
|
||||
css="true"
|
||||
id="switch-4-messages"
|
||||
name="slide-y-transition"
|
||||
persisted="false"
|
||||
role="alert"
|
||||
tag="div"
|
||||
>
|
||||
<!---->
|
||||
</transition-group-stub>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
|
||||
<transition-stub
|
||||
appear="false"
|
||||
css="true"
|
||||
name="expand-transition"
|
||||
persisted="false"
|
||||
>
|
||||
<!---->
|
||||
</transition-stub>
|
||||
|
||||
</header>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
25
src/layouts/DefaultLayout.test.ts
Normal file
25
src/layouts/DefaultLayout.test.ts
Normal file
@ -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<typeof Wrapper>
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders', () => {
|
||||
expect(wrapper.element).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
40
src/layouts/__snapshots__/DefaultLayout.test.ts.snap
Normal file
40
src/layouts/__snapshots__/DefaultLayout.test.ts.snap
Normal file
@ -0,0 +1,40 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`LogoAvatar > renders 1`] = `
|
||||
<div
|
||||
class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-application__wrap"
|
||||
>
|
||||
|
||||
<main
|
||||
class="v-main bg-grey-lighten-3"
|
||||
style="--v-layout-left: 0px; --v-layout-right: 0px; --v-layout-top: 0px; --v-layout-bottom: 0px; transition: none !important;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-container v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-row"
|
||||
>
|
||||
<!--v-if-->
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-sheet v-theme--light v-sheet--rounded pa-3"
|
||||
>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
18
src/pages/about/Page.test.ts
Normal file
18
src/pages/about/Page.test.ts
Normal file
@ -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()
|
||||
})
|
||||
})
|
||||
68
src/pages/about/__snapshots__/Page.test.ts.snap
Normal file
68
src/pages/about/__snapshots__/Page.test.ts.snap
Normal file
@ -0,0 +1,68 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`DataPrivacyPage > renders 1`] = `
|
||||
<div
|
||||
class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-application__wrap"
|
||||
>
|
||||
|
||||
<main
|
||||
class="v-main bg-grey-lighten-3"
|
||||
style="--v-layout-left: 0px; --v-layout-right: 0px; --v-layout-top: 0px; --v-layout-bottom: 0px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-container v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-row"
|
||||
>
|
||||
<!--v-if-->
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-sheet v-theme--light v-sheet--rounded pa-3"
|
||||
>
|
||||
|
||||
<h1>
|
||||
$t('about.h1')
|
||||
</h1>
|
||||
<p>
|
||||
Um mehr über diese Kochplatte zu erfahren kannst du dir den Quellcode auf
|
||||
|
||||
<a
|
||||
href="https://github.com/IT4Change/boilerplate-frontend/"
|
||||
target="_blank"
|
||||
>
|
||||
$t('about.link1')
|
||||
</a>
|
||||
|
||||
anschauen.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
Du willst mehr erfahren? Besuche uns auf
|
||||
|
||||
<a
|
||||
href="https://it4c.dev"
|
||||
target="_blank"
|
||||
>
|
||||
$t('about.link2')
|
||||
</a>
|
||||
|
||||
.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
18
src/pages/app/Page.test.ts
Normal file
18
src/pages/app/Page.test.ts
Normal file
@ -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()
|
||||
})
|
||||
})
|
||||
161
src/pages/app/__snapshots__/Page.test.ts.snap
Normal file
161
src/pages/app/__snapshots__/Page.test.ts.snap
Normal file
@ -0,0 +1,161 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`DataPrivacyPage > renders 1`] = `
|
||||
<div
|
||||
class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-application__wrap"
|
||||
>
|
||||
|
||||
<main
|
||||
class="v-main bg-grey-lighten-3"
|
||||
style="--v-layout-left: 0px; --v-layout-right: 0px; --v-layout-top: 0px; --v-layout-bottom: 0px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-container v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-row"
|
||||
>
|
||||
<div
|
||||
class="v-col v-col-2"
|
||||
>
|
||||
<div
|
||||
class="v-sheet v-theme--light v-sheet--rounded"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-list v-theme--light v-list--density-default v-list--one-line v-list--rounded"
|
||||
role="listbox"
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
<a
|
||||
class="v-list-item v-list-item--active v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line v-list-item--variant-text"
|
||||
href="/app"
|
||||
tabindex="-2"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-list-item__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-list-item__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<div
|
||||
class="v-list-item__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
<div
|
||||
class="v-list-item-title"
|
||||
>
|
||||
$t('app.value.menu')
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</a>
|
||||
<a
|
||||
class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line v-list-item--variant-text"
|
||||
href="/app/inc"
|
||||
tabindex="-2"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-list-item__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-list-item__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<div
|
||||
class="v-list-item__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
<div
|
||||
class="v-list-item-title"
|
||||
>
|
||||
$t('app.inc.menu')
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</a>
|
||||
<hr
|
||||
aria-orientation="horizontal"
|
||||
class="v-divider v-theme--light my-2"
|
||||
role="separator"
|
||||
/>
|
||||
<a
|
||||
class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line v-list-item--variant-text"
|
||||
href="/app/reset"
|
||||
tabindex="-2"
|
||||
>
|
||||
|
||||
<span
|
||||
class="v-list-item__overlay"
|
||||
/>
|
||||
<span
|
||||
class="v-list-item__underlay"
|
||||
/>
|
||||
|
||||
<!---->
|
||||
<div
|
||||
class="v-list-item__content"
|
||||
data-no-activator=""
|
||||
>
|
||||
<div
|
||||
class="v-list-item-title"
|
||||
>
|
||||
$t('app.reset.menu')
|
||||
</div>
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-sheet v-theme--light v-sheet--rounded pa-3"
|
||||
>
|
||||
|
||||
<div>
|
||||
<h1>
|
||||
$t('app.value.h1')
|
||||
</h1>
|
||||
<p>
|
||||
Der aktuelle Wert des Zählers lautet:
|
||||
|
||||
|
||||
<b>
|
||||
0
|
||||
</b>
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
18
src/pages/index/Page.test.ts
Normal file
18
src/pages/index/Page.test.ts
Normal file
@ -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()
|
||||
})
|
||||
})
|
||||
69
src/pages/index/__snapshots__/Page.test.ts.snap
Normal file
69
src/pages/index/__snapshots__/Page.test.ts.snap
Normal file
@ -0,0 +1,69 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`DataPrivacyPage > renders 1`] = `
|
||||
<div
|
||||
class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-application__wrap"
|
||||
>
|
||||
|
||||
<main
|
||||
class="v-main bg-grey-lighten-3"
|
||||
style="--v-layout-left: 0px; --v-layout-right: 0px; --v-layout-top: 0px; --v-layout-bottom: 0px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="v-container v-locale--is-ltr"
|
||||
>
|
||||
<div
|
||||
class="v-row"
|
||||
>
|
||||
<!--v-if-->
|
||||
<div
|
||||
class="v-col"
|
||||
>
|
||||
<div
|
||||
class="v-sheet v-theme--light v-sheet--rounded pa-3"
|
||||
>
|
||||
|
||||
<h1>
|
||||
$t('home.h1')
|
||||
</h1>
|
||||
<p>
|
||||
$t('home.text1')
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
$t('home.text2')
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
$t('home.text3')
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
$t('home.text4')
|
||||
<i
|
||||
aria-hidden="true"
|
||||
class="mdi-heart mdi v-icon notranslate v-theme--light v-icon--size-default text-red"
|
||||
/>
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
$t('home.greet1')
|
||||
</p>
|
||||
<p>
|
||||
$t('home.greet2')
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -8,7 +8,12 @@ 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.pinia.ts',
|
||||
'scripts/tests/plugin.i18n-vuetify.ts',
|
||||
],
|
||||
coverage: {
|
||||
all: true,
|
||||
include: ['src/**/*.{js,jsx,ts,tsx,vue}'],
|
||||
@ -19,10 +24,10 @@ export default mergeConfig(
|
||||
'src/stories/**/*',
|
||||
],
|
||||
thresholds: {
|
||||
lines: 25,
|
||||
lines: 84,
|
||||
// functions: 20, // has problems see https://github.com/vitest-dev/vitest/issues/3607
|
||||
branches: 60,
|
||||
statements: 25,
|
||||
branches: 92,
|
||||
statements: 84,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user