Merge pull request #102 from gradido/content-footer-tests

feat: Frontend tests for Content Footer

frontend/.babelrc

@@ -1,22 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env"
-    ]
-  ],
-  "env": {
-    "test": {
-      "plugins": ["require-context-hook"],
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "targets": {
-              "node": "10"
-            }
-          }
-        ]
-      ]
-    }
-  }
-}

frontend/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['@vue/app'],
+  presets: ['@babel/preset-env'],
   plugins: [
     [
       'component',

frontend/jest.config.js

@@ -10,16 +10,15 @@ module.exports = {
   coverageReporters: ['lcov'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(css|less)$': 'identity-obj-proxy',
   },
   transform: {
-    '^.+\\.vue$': 'vue-jest',
-    // '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.(js|jsx)?$': 'babel-jest',
+    '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
+    '^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest',
   },
-  //setupFiles: [
-  //  "<rootDir>/test/registerContext.js"
-  //],
+  setupFiles: ['<rootDir>/test/testSetup.js'],
   testMatch: ['**/?(*.)+(spec|test).js?(x)'],
   // snapshotSerializers: ['jest-serializer-vue'],
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  preset: '@vue/cli-plugin-unit-jest',
 }

frontend/package.json

@@ -12,11 +12,16 @@
     "test": "jest"
   },
   "dependencies": {
+    "@babel/core": "^7.13.13",
+    "@babel/node": "^7.13.13",
+    "@babel/preset-env": "^7.13.12",
+    "@vue/cli-plugin-unit-jest": "^4.5.12",
     "@vue/test-utils": "^1.1.3",
     "axios": "^0.21.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.6.3",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.3.1",
     "bootstrap-vue": "^2.5.0",
     "chart.js": "^2.9.3",
@@ -41,6 +46,7 @@
     "flatpickr": "^4.5.7",
     "fuse.js": "^3.2.0",
     "google-maps": "^3.2.1",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "nouislider": "^12.1.0",
     "particles-bg-vue": "1.2.3",

frontend/src/views/Layout/ContentFooter.spec.js

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils'
+
+import ContentFooter from './ContentFooter'
+
+const localVue = global.localVue
+
+describe('ContentFooter', () => {
+  let wrapper
+
+  let mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+  }
+
+  const Wrapper = () => {
+    return mount(ContentFooter, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the content footer', () => {
+      expect(wrapper.find('footer.footer').exists()).toBeTruthy()
+    })
+
+    describe('copyright', () => {
+      it('shows the copyright', () => {
+        expect(wrapper.find('div.copyright').exists()).toBeTruthy()
+      })
+
+      it('renders the copyright year', () => {
+        expect(wrapper.find('div.copyright').text()).toMatch(/©\s*2[0-9]{3,3}\s+/)
+      })
+
+      it('renders a link to Gradido-Akademie', () => {
+        expect(wrapper.find('div.copyright').find('a').text()).toEqual('Gradido-Akademie')
+      })
+
+      it('links to the login page when clicked on copyright', () => {
+        expect(wrapper.find('div.copyright').find('a').attributes('href')).toEqual('#/Login')
+      })
+    })
+
+    describe('links to gradido.net', () => {
+      it('has a link to the gradido.net', () => {
+        expect(wrapper.findAll('a.nav-link').at(0).text()).toEqual('Gradido')
+      })
+
+      it('links to the https://gradido.net/en when locale is en', () => {
+        expect(wrapper.findAll('a.nav-link').at(0).attributes('href')).toEqual(
+          'https://gradido.net/en',
+        )
+      })
+
+      it('has a link to the legal notice', () => {
+        expect(wrapper.findAll('a.nav-link').at(1).text()).toEqual('imprint')
+      })
+
+      it('links to the https://gradido.net/en/impressum when locale is en', () => {
+        expect(wrapper.findAll('a.nav-link').at(1).attributes('href')).toEqual(
+          'https://gradido.net/en/impressum/',
+        )
+      })
+
+      it('has a link to the privacy policy', () => {
+        expect(wrapper.findAll('a.nav-link').at(2).text()).toEqual('privacy_policy')
+      })
+
+      it('links to the https://gradido.net/en/datenschutz when locale is en', () => {
+        expect(wrapper.findAll('a.nav-link').at(2).attributes('href')).toEqual(
+          'https://gradido.net/en/datenschutz/',
+        )
+      })
+
+      describe('links are localized', () => {
+        beforeEach(() => {
+          mocks.$i18n.locale = 'de'
+        })
+
+        it('links to the https://gradido.net/de when locale is de', () => {
+          expect(wrapper.findAll('a.nav-link').at(0).attributes('href')).toEqual(
+            'https://gradido.net/de',
+          )
+        })
+
+        it('links to the https://gradido.net/de/impressum when locale is de', () => {
+          expect(wrapper.findAll('a.nav-link').at(1).attributes('href')).toEqual(
+            'https://gradido.net/de/impressum/',
+          )
+        })
+
+        it('links to the https://gradido.net/de/datenschutz when locale is de', () => {
+          expect(wrapper.findAll('a.nav-link').at(2).attributes('href')).toEqual(
+            'https://gradido.net/de/datenschutz/',
+          )
+        })
+      })
+    })
+  })
+})

frontend/src/views/Layout/ContentFooter.vue

@@ -4,7 +4,7 @@
       <b-col>
         <div class="copyright text-center text-lg-center text-muted">
           © {{ year }}
-          <a href="#!" to="/login" class="font-weight-bold ml-1">Gradido-Akademie</a>
+          <a href="#/Login" class="font-weight-bold ml-1">Gradido-Akademie</a>
         </div>
       </b-col>
     </b-row>

frontend/test/testSetup.js

@@ -0,0 +1,8 @@
+import { createLocalVue } from '@vue/test-utils'
+import ElementUI from 'element-ui'
+import BootstrapVue from 'bootstrap-vue'
+
+global.localVue = createLocalVue()
+
+global.localVue.use(ElementUI)
+global.localVue.use(BootstrapVue)