Merge branch 'master' into 2818-pagination-is-not-reset-when-switching-tabs

frontend/src/components/QrCode/FigureQrCode.spec.js

@@ -6,12 +6,15 @@ const localVue = global.localVue
 const propsData = {
   link: '',
 }
+const mocks = {
+  $t: jest.fn((t) => t),
+}
 
 describe('FigureQrCode', () => {
   let wrapper
 
   const Wrapper = () => {
-    return mount(FigureQrCode, { localVue, propsData })
+    return mount(FigureQrCode, { localVue, mocks, propsData })
   }
 
   describe('mount', () => {
@@ -19,12 +22,55 @@ describe('FigureQrCode', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the Div Element ".figure-qr-code"', () => {
+    afterEach(() => {
-      expect(wrapper.find('div.figure-qr-code').exists()).toBeTruthy()
+      jest.clearAllMocks()
     })
 
-    it('renders the Div Element "q-r-canvas"', () => {
+    it('has options filled', () => {
-      expect(wrapper.find('q-r-canvas'))
+      expect(wrapper.vm.options).toEqual({
+        cellSize: 8,
+        correctLevel: 'H',
+        data: '',
+      })
+    })
+
+    it('renders the Div Element ".figure-qr-code"', () => {
+      expect(wrapper.find('div.figure-qr-code').exists()).toBe(true)
+    })
+
+    it('renders the Div Element "qrbox"', () => {
+      expect(wrapper.find('div.qrbox').exists()).toBe(true)
+    })
+
+    it('renders the Canvas Element "#qrcanvas"', () => {
+      const canvas = wrapper.find('#qrcanvas')
+
+      expect(canvas.exists()).toBe(true)
+      const canvasEl = canvas.element
+      const canvasWidth = canvasEl.width
+      const canvasHeight = canvasEl.height
+
+      expect(canvasWidth).toBeGreaterThan(0)
+      expect(canvasHeight).toBeGreaterThan(0)
+
+      const canvasContext = canvasEl.toDataURL('image/png')
+      expect(canvasContext).not.toBeNull()
+    })
+
+    it('renders the A Element "#download"', () => {
+      const downloadLink = wrapper.find('#download')
+      expect(downloadLink.exists()).toBe(true)
+    })
+
+    describe('Download QR-Code link', () => {
+      beforeEach(() => {
+        const downloadLink = wrapper.find('#download')
+        downloadLink.trigger('click')
+      })
+
+      it('click the A Element "#download" set an href', () => {
+        expect(wrapper.find('#download').attributes('href')).toEqual('data:image/png;base64,00')
+      })
     })
   })
 })

frontend/src/components/QrCode/FigureQrCode.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="figure-qr-code">
     <div class="qrbox">
-      <q-r-canvas :options="options" class="canvas" />
+      <div>
+        <q-r-canvas :options="options" class="canvas mb-3" id="qrcanvas" ref="canvas" />
+      </div>
+      <a
+        id="download"
+        ref="download"
+        download="GradidoLinkQRCode.png"
+        href=""
+        @click="downloadImg(this)"
+      >
+        {{ $t('download') }}
+      </a>
     </div>
   </div>
 </template>
@@ -37,6 +48,13 @@ export default {
       }
     }
   },
+  methods: {
+    downloadImg() {
+      const canvas = this.$refs.canvas.$el
+      const image = canvas.toDataURL('image/png')
+      this.$refs.download.href = image
+    },
+  },
 }
 </script>
 <style scoped>

frontend/src/locales/de.json

@@ -100,6 +100,7 @@
     }
   },
   "delete": "Löschen",
+  "download": "Herunterladen",
   "edit": "bearbeiten",
   "em-dash": "—",
   "error": {

frontend/src/locales/en.json

@@ -100,6 +100,7 @@
     }
   },
   "delete": "Delete",
+  "download": "Download",
   "edit": "edit",
   "em-dash": "—",
   "error": {

frontend/src/locales/fr.json

@@ -88,6 +88,7 @@
     }
   },
   "delete": "Supprimer",
+  "download": "Télécharger",
   "edit": "modifier",
   "em-dash": "—",
   "error": {