From 5978adff68b70a757f5ec62c975ede72c96c4de8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Tue, 23 Apr 2019 19:35:41 +0200
Subject: [PATCH] Sketch a test for a custom image component

@tansaku @aonomike I hope this clarifies the task.

When you're done, feel free to use this component wherever we use
`<img>` in `/webapp/`.
---
 webapp/components/Image/index.vue | 23 +++++++++++++++++
 webapp/components/Image/spec.js   | 43 +++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 webapp/components/Image/index.vue
 create mode 100644 webapp/components/Image/spec.js

diff --git a/webapp/components/Image/index.vue b/webapp/components/Image/index.vue
new file mode 100644
index 000000000..de05c5eda
--- /dev/null
+++ b/webapp/components/Image/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <img
+    v-bind="imageProps"
+    :src="imageSrc"
+  >
+</template>
+
+<script>
+export default {
+  props: {
+    imageProps: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    imageSrc() {
+      // TODO implement
+      return 'this should be an image source attribute'
+    }
+  }
+}
+</script>
diff --git a/webapp/components/Image/spec.js b/webapp/components/Image/spec.js
new file mode 100644
index 000000000..cbc4d34cf
--- /dev/null
+++ b/webapp/components/Image/spec.js
@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils'
+import Image from '.'
+
+describe('Image', () => {
+  let propsData = { imageProps: { class: 'hc-badge', src: '' } }
+
+  const Wrapper = () => {
+    return shallowMount(Image, { propsData })
+  }
+
+  it('renders', () => {
+    expect(Wrapper().is('img')).toBe(true)
+  })
+
+  it('passes properties down to `img`', () => {
+    expect(Wrapper().classes()).toEqual(['hc-badge'])
+  })
+
+  describe('given a relative `src`', () => {
+    beforeEach(() => {
+      propsData.imageProps.src = '/img/badges/fundraisingbox_de_airship.svg'
+    })
+
+    it('adds a prefix to load the image from the backend', () => {
+      expect(Wrapper().attributes('src')).toBe(
+        '/api/img/badges/fundraisingbox_de_airship.svg'
+      )
+    })
+  })
+
+  describe('given an absolute `src`', () => {
+    beforeEach(() => {
+      propsData.imageProps.src = 'http://lorempixel.com/640/480/animals'
+    })
+
+    it('keeps the URL as is', () => {
+      // e.g. our seeds have absolute image URLs
+      expect(Wrapper().attributes('src')).toBe(
+        'http://lorempixel.com/640/480/animals'
+      )
+    })
+  })
+})