Implement tests for flexible page footer links

webapp/components/PageFooter/PageFooter.spec.js

@@ -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(() => {
+    describe('links.js', () => {
-      wrapper = Wrapper()
+      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', () => {
+    describe('inflexible links', () => {
-      expect(wrapper.findAll('a')).toHaveLength(3)
+      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', () => {
+    describe('flexible links not set', () => {
-      expect(wrapper.findAll('.nuxt-link')).toHaveLength(4)
+      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', () => {
+    describe('flexible links set', () => {
-      expect(wrapper.find('.ds-footer').text()).toContain('v1.0.0')
+      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)
+      })
     })
   })
 })

webapp/components/PageFooter/PageFooter.vue

@@ -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>