Implement tests for flexible page footer links

This commit is contained in:
Wolfgang Huß 2021-06-03 16:51:40 +02:00
parent 1bd4af6fd3
commit 627a20f66a
2 changed files with 119 additions and 17 deletions

View File

@ -1,6 +1,6 @@
import { config, mount } from '@vue/test-utils'
import PageFooter from './PageFooter.vue'
import links from '~/constants/links.js'
import linksDefault from '~/constants/links.js'
const localVue = global.localVue
@ -8,6 +8,7 @@ config.stubs['nuxt-link'] = '<span class="nuxt-link"><slot /></span>'
describe('PageFooter.vue', () => {
let mocks
let wrapper
beforeEach(() => {
mocks = {
@ -15,30 +16,118 @@ describe('PageFooter.vue', () => {
$env: {
VERSION: 'v1.0.0',
},
links,
}
})
describe('mount', () => {
let wrapper
const Wrapper = () => {
return mount(PageFooter, { mocks, localVue })
}
beforeEach(() => {
wrapper = Wrapper()
describe('links.js', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders three links', () => {
expect(wrapper.findAll('a')).toHaveLength(4)
})
it('renders four nuxt-links', () => {
expect(wrapper.findAll('.nuxt-link')).toHaveLength(3)
})
it('renders version', () => {
expect(wrapper.find('.ds-footer').text()).toContain('v1.0.0')
})
})
it('renders three links', () => {
expect(wrapper.findAll('a')).toHaveLength(3)
describe('inflexible links', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders ORGANIZATION', () => {
expect(wrapper.find('a[data-test="organization-link"]').exists()).toBe(true)
})
it('renders version', () => {
expect(wrapper.find('a[data-test="version-link"]').exists()).toBe(true)
})
})
it('renders four nuxt-links', () => {
expect(wrapper.findAll('.nuxt-link')).toHaveLength(4)
describe('flexible links not set', () => {
beforeEach(async () => {
const links = {
...linksDefault,
IMPRINT: null,
TERMS_AND_CONDITIONS: null,
CODE_OF_CONDUCT: null,
DATA_PRIVACY: null,
FAQ: null,
}
wrapper = Wrapper()
wrapper.setData({ links })
await wrapper.vm.$nextTick()
})
it('renders IMPRINT as nuxt-link', () => {
expect(wrapper.find('span[data-test="imprint-nuxt-link"]').exists()).toBe(true)
})
it('renders TERMS_AND_CONDITIONS as nuxt-link', () => {
expect(wrapper.find('span[data-test="terms-nuxt-link"]').exists()).toBe(true)
})
it('renders CODE_OF_CONDUCT as nuxt-link', () => {
expect(wrapper.find('span[data-test="code-nuxt-link"]').exists()).toBe(true)
})
it('renders DATA_PRIVACY as nuxt-link', () => {
expect(wrapper.find('span[data-test="data-nuxt-link"]').exists()).toBe(true)
})
it('renders FAQ as nuxt-link', () => {
expect(wrapper.find('span[data-test="faq-nuxt-link"]').exists()).toBe(true)
})
})
it('renders version', () => {
expect(wrapper.find('.ds-footer').text()).toContain('v1.0.0')
describe('flexible links set', () => {
beforeEach(async () => {
const links = {
...linksDefault,
IMPRINT: 'https://ocelot.social/IMPRINT',
TERMS_AND_CONDITIONS: 'https://ocelot.social/TERMS_AND_CONDITIONS',
CODE_OF_CONDUCT: 'https://ocelot.social/CODE_OF_CONDUCT',
DATA_PRIVACY: 'https://ocelot.social/DATA_PRIVACY',
FAQ: 'https://ocelot.social/FAQ',
}
wrapper = Wrapper()
wrapper.setData({ links })
await wrapper.vm.$nextTick()
})
it('renders IMPRINT as "a" tag link', () => {
expect(wrapper.find(`a[href="https://ocelot.social/IMPRINT"]`).exists()).toBe(true)
})
it('renders TERMS_AND_CONDITIONS as "a" tag link', () => {
expect(wrapper.find(`a[href="https://ocelot.social/TERMS_AND_CONDITIONS"]`).exists()).toBe(
true,
)
})
it('renders CODE_OF_CONDUCT as "a" tag link', () => {
expect(wrapper.find(`a[href="https://ocelot.social/CODE_OF_CONDUCT"]`).exists()).toBe(true)
})
it('renders DATA_PRIVACY as "a" tag link', () => {
expect(wrapper.find(`a[href="https://ocelot.social/DATA_PRIVACY"]`).exists()).toBe(true)
})
it('renders FAQ as "a" tag link', () => {
expect(wrapper.find(`a[href="https://ocelot.social/FAQ"]`).exists()).toBe(true)
})
})
})
})

View File

@ -1,12 +1,12 @@
<template>
<div id="footer" class="ds-footer">
<!-- made with -->
<a :href="links.ORGANIZATION" target="_blank">
<a :href="links.ORGANIZATION" target="_blank" data-test="organization-link">
{{ $t('site.made') }}
</a>
<span>-</span>
<!-- imprint -->
<nuxt-link v-if="noLinkDefined(links.IMPRINT)" to="/imprint">
<nuxt-link v-if="noLinkDefined(links.IMPRINT)" to="/imprint" data-test="imprint-nuxt-link">
{{ $t('site.imprint') }}
</nuxt-link>
<a v-else :href="links.IMPRINT" target="_blank">
@ -14,7 +14,11 @@
</a>
<span>-</span>
<!-- terms and conditions -->
<nuxt-link v-if="noLinkDefined(links.TERMS_AND_CONDITIONS)" to="/terms-and-conditions">
<nuxt-link
v-if="noLinkDefined(links.TERMS_AND_CONDITIONS)"
to="/terms-and-conditions"
data-test="terms-nuxt-link"
>
{{ $t('site.termsAndConditions') }}
</nuxt-link>
<a v-else :href="links.TERMS_AND_CONDITIONS" target="_blank">
@ -22,7 +26,11 @@
</a>
<span>-</span>
<!-- code of conduct -->
<nuxt-link v-if="noLinkDefined(links.CODE_OF_CONDUCT)" to="/code-of-conduct">
<nuxt-link
v-if="noLinkDefined(links.CODE_OF_CONDUCT)"
to="/code-of-conduct"
data-test="code-nuxt-link"
>
{{ $t('site.code-of-conduct') }}
</nuxt-link>
<a v-else :href="links.CODE_OF_CONDUCT" target="_blank">
@ -30,7 +38,11 @@
</a>
<span>-</span>
<!-- data privacy -->
<nuxt-link v-if="noLinkDefined(links.DATA_PRIVACY)" to="/data-privacy">
<nuxt-link
v-if="noLinkDefined(links.DATA_PRIVACY)"
to="/data-privacy"
data-test="data-nuxt-link"
>
{{ $t('site.data-privacy') }}
</nuxt-link>
<a v-else :href="links.DATA_PRIVACY" target="_blank">
@ -38,7 +50,7 @@
</a>
<span>-</span>
<!-- faq -->
<nuxt-link v-if="noLinkDefined(links.FAQ)" to="/faq">
<nuxt-link v-if="noLinkDefined(links.FAQ)" to="/faq" data-test="faq-nuxt-link">
{{ $t('site.faq') }}
</nuxt-link>
<a v-else :href="links.FAQ" target="_blank">
@ -49,6 +61,7 @@
<a
href="https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/CHANGELOG.md"
target="_blank"
data-test="version-link"
>
{{ version }}
</a>