error image rendered

webapp/layouts/error.spec.js

@@ -0,0 +1,47 @@
+import { config, shallowMount } from '@vue/test-utils'
+import Error from './error.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+describe('error.vue', () => {
+  let mocks, wrapper
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(key => key),
+    }
+  })
+
+  const Wrapper = (propsData = {}) => {
+    return shallowMount(Error, { mocks, propsData, localVue })
+  }
+
+  describe('shallowMount', () => {
+    it('renders default error message', () => {
+      wrapper = Wrapper({ error: {} })
+      expect(wrapper.find('.error-message').text()).toBe('error-pages.default')
+    })
+
+    it('renders error message to given statusCode', () => {
+      wrapper = Wrapper({ error: { statusCode: 404 } })
+      expect(wrapper.find('.error-message').text()).toBe('error-pages.404-default')
+    })
+
+    it('renders error message to given custom key', () => {
+      wrapper = Wrapper({ error: { statusCode: 404, key: 'my-custom-key' } })
+      expect(wrapper.find('.error-message').text()).toBe('my-custom-key')
+    })
+
+    it('has a link to index page', () => {
+      wrapper = Wrapper({ error: {} })
+      expect(wrapper.find('span[to="/"]').text()).toBe('error-pages.back-to-index')
+    })
+
+    it('has an image related to the status code', () => {
+      wrapper = Wrapper({ error: { statusCode: 404 } })
+      expect(wrapper.find('.error-image').attributes('src')).toBe('/img/svg/errors/error404.svg')
+    })
+  })
+})

webapp/layouts/error.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="error-container">
-    <base-icon class="error-icon" name="exclamation-circle" />
+    <img class="error-image" :src="image" />
     <br />
     <span v-if="error.message === 'This page could not be found'" class="error-message">
       {{ $t('error-pages.default') }}
@@ -14,6 +14,20 @@
 <script>
 export default {
   props: ['error'],
+  computed: {
+    message() {
+      const mapping = {
+        403: 'error-pages.403-default',
+        404: 'error-pages.404-default',
+        500: 'error-pages.500-default',
+        503: 'error-pages.503-default',
+      }
+      return this.error.key || mapping[this.error.statusCode] || 'error-pages.default'
+    },
+    image() {
+      return `/img/svg/errors/error${this.error.statusCode ? this.error.statusCode : '500'}.svg`
+    },
+  },
 }
 </script>
 <style lang="scss">
@@ -27,8 +41,10 @@ export default {
   color: $text-color-softer;
   margin: $space-base;
 }
-.error-icon {
-  font-size: $font-size-xxx-large;
-  color: $text-color-softer;
+.error-image {
+  width: 70%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 </style>

webapp/locales/de.json

@@ -804,7 +804,10 @@
 	"back-to-index": "Zurück zur Startseite",
 	"post-not-found": "Dieser Beitrag konnte nicht gefunden werden",
         "cannot-edit-post": "Dieser Beitrag kann nicht editiert werden",
-	"default": "Diese Seite konnte nicht gefunden werden",
-	"not-authorized": "Kein Zugang zu dieser Seite"
+	"403-default": "Kein Zugang zu dieser Seite",
+	"404-default": "Diese Seite konnte nicht gefunden werden",
+	"500-default": "Internal Server Error",
+	"503-default": "Dienst steht nicht zur Verfügung",
+	"default": "Ein Fehler ist aufgetreten"
     }
 }

webapp/locales/en.json

@@ -804,8 +804,11 @@
     "back-to-index": "Back to index page",
     "post-not-found": "This post could not be found",
     "cannot-edit-post": "This post cannot be edited",
-    "default": "This page could not be found",
-    "not-authorized": "Not authorized to this page"
+    "404-default": "This page could not be found",
+    "403-default": "Not authorized to this page",
+    "500-default": "Internal Server Error",
+    "503-default": "Service Unavailable",
+    "default": "An error occurred"
   }
 }