From b3d935af4a43cd5c3f1947190fb1892fba2fbd75 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 24 Mar 2023 12:23:32 +0100
Subject: [PATCH 1/7] feat(frontend): add link to download QR-Code

---
 frontend/src/components/QrCode/FigureQrCode.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/QrCode/FigureQrCode.vue b/frontend/src/components/QrCode/FigureQrCode.vue
index 00f1b54b9..71570f79d 100644
--- a/frontend/src/components/QrCode/FigureQrCode.vue
+++ b/frontend/src/components/QrCode/FigureQrCode.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="figure-qr-code">
     <div class="qrbox">
-      <q-r-canvas :options="options" class="canvas" />
+      <q-r-canvas :options="options" class="canvas mb-4" id="qrcanvas" />
+      <a id="download" download="GradidoLinkQRCode.png" href="" @click="downloadImg(this)">
+        {{ $t('download') }}
+      </a>
     </div>
   </div>
 </template>
@@ -37,6 +40,13 @@ export default {
       }
     }
   },
+  methods: {
+    downloadImg() {
+      const canvas = document.getElementById('qrcanvas')
+      const image = canvas.toDataURL('image/png')
+      document.getElementById('download').href = image
+    },
+  },
 }
 </script>
 <style scoped>

From 0ae9b9e9082eabf1c0a231156933e3e337841e8f Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 24 Mar 2023 12:24:57 +0100
Subject: [PATCH 2/7] add download key to locales

---
 frontend/src/locales/de.json | 1 +
 frontend/src/locales/en.json | 1 +
 frontend/src/locales/fr.json | 1 +
 3 files changed, 3 insertions(+)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 719ed4cad..b8635f44a 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -100,6 +100,7 @@
     }
   },
   "delete": "Löschen",
+  "download": "Herunterladen",
   "edit": "bearbeiten",
   "em-dash": "—",
   "error": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index a0c06dc56..15449a208 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -100,6 +100,7 @@
     }
   },
   "delete": "Delete",
+  "download": "Download",
   "edit": "edit",
   "em-dash": "—",
   "error": {
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index 102825acc..2240e8b31 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -88,6 +88,7 @@
     }
   },
   "delete": "Supprimer",
+  "download": "Télécharger",
   "edit": "modifier",
   "em-dash": "—",
   "error": {

From e359fa59b366970969c0c5f08ad808940e569baa Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 24 Mar 2023 12:39:09 +0100
Subject: [PATCH 3/7] Add mock for .

---
 frontend/src/components/QrCode/FigureQrCode.spec.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/QrCode/FigureQrCode.spec.js b/frontend/src/components/QrCode/FigureQrCode.spec.js
index 715a5d5d5..30a8277e1 100644
--- a/frontend/src/components/QrCode/FigureQrCode.spec.js
+++ b/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', () => {

From c25a9f936a66a247ea7ccdc0960bda14eea30de8 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 31 Mar 2023 09:40:28 +0200
Subject: [PATCH 4/7] Center the canvas and remove bottom gap

---
 frontend/src/components/QrCode/FigureQrCode.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/QrCode/FigureQrCode.vue b/frontend/src/components/QrCode/FigureQrCode.vue
index 71570f79d..350cc3f61 100644
--- a/frontend/src/components/QrCode/FigureQrCode.vue
+++ b/frontend/src/components/QrCode/FigureQrCode.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="figure-qr-code">
     <div class="qrbox">
-      <q-r-canvas :options="options" class="canvas mb-4" id="qrcanvas" />
+      <div>
+        <q-r-canvas :options="options" class="canvas mb-3" id="qrcanvas" />
+      </div>
       <a id="download" download="GradidoLinkQRCode.png" href="" @click="downloadImg(this)">
         {{ $t('download') }}
       </a>

From bd29624c794fe6fe0b0ea0057fc6efe32aab273f Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 31 Mar 2023 16:01:43 +0200
Subject: [PATCH 5/7] Refactor downloadImg to refs

---
 frontend/src/components/QrCode/FigureQrCode.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/QrCode/FigureQrCode.vue b/frontend/src/components/QrCode/FigureQrCode.vue
index 350cc3f61..40b1098dc 100644
--- a/frontend/src/components/QrCode/FigureQrCode.vue
+++ b/frontend/src/components/QrCode/FigureQrCode.vue
@@ -2,9 +2,15 @@
   <div class="figure-qr-code">
     <div class="qrbox">
       <div>
-        <q-r-canvas :options="options" class="canvas mb-3" id="qrcanvas" />
+        <q-r-canvas :options="options" class="canvas mb-3" id="qrcanvas" ref="canvas" />
       </div>
-      <a id="download" download="GradidoLinkQRCode.png" href="" @click="downloadImg(this)">
+      <a
+        id="download"
+        ref="download"
+        download="GradidoLinkQRCode.png"
+        href=""
+        @click="downloadImg(this)"
+      >
         {{ $t('download') }}
       </a>
     </div>
@@ -44,9 +50,9 @@ export default {
   },
   methods: {
     downloadImg() {
-      const canvas = document.getElementById('qrcanvas')
+      const canvas = this.$refs.canvas.$el
       const image = canvas.toDataURL('image/png')
-      document.getElementById('download').href = image
+      this.$refs.download.href = image
     },
   },
 }

From 06523f38fa77efaf24f26fdf575c31046893c0be Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 31 Mar 2023 16:02:05 +0200
Subject: [PATCH 6/7] Unit tests for FigureQrCode

---
 .../components/QrCode/FigureQrCode.spec.js    | 58 +++++++++++++++++--
 1 file changed, 54 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/QrCode/FigureQrCode.spec.js b/frontend/src/components/QrCode/FigureQrCode.spec.js
index 30a8277e1..f883f09a0 100644
--- a/frontend/src/components/QrCode/FigureQrCode.spec.js
+++ b/frontend/src/components/QrCode/FigureQrCode.spec.js
@@ -22,12 +22,62 @@ describe('FigureQrCode', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the Div Element ".figure-qr-code"', () => {
-      expect(wrapper.find('div.figure-qr-code').exists()).toBeTruthy()
+    afterEach(() => {
+      jest.clearAllMocks()
     })
 
-    it('renders the Div Element "q-r-canvas"', () => {
-      expect(wrapper.find('q-r-canvas'))
+    it('has options filled', () => {
+      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')
+
+      // console.log(canvas.html())
+      expect(canvas.exists()).toBe(true)
+
+      // Hier können Sie weitere Tests für das Canvas-Element durchführen
+      // z.B. überprüfen Sie die Breite und Höhe des Canvas-Elements oder den Canvas-Kontext
+
+      const canvasEl = canvas.element
+      const canvasWidth = canvasEl.width
+      const canvasHeight = canvasEl.height
+
+      expect(canvasWidth).toBeGreaterThan(0)
+      expect(canvasHeight).toBeGreaterThan(0)
+
+      const canvasContext = canvasEl.getContext('2d')
+      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')
+        // await wrapper.vm.$nextTick()
+      })
+
+      it('click the A Element "#download" set an href', () => {
+        // expect(toDataURLStub).toHaveBeenCalledWith('image/png')
+        expect(wrapper.find('#download').attributes('href')).toEqual('')
+      })
     })
   })
 })

From 386b451dd61290eb7dfc0621e1f5c05b971effd1 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 31 Mar 2023 16:09:50 +0200
Subject: [PATCH 7/7] Call toDataUrl on canvasEl and expect data on href

---
 frontend/src/components/QrCode/FigureQrCode.spec.js | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/QrCode/FigureQrCode.spec.js b/frontend/src/components/QrCode/FigureQrCode.spec.js
index f883f09a0..0c0b7bf3a 100644
--- a/frontend/src/components/QrCode/FigureQrCode.spec.js
+++ b/frontend/src/components/QrCode/FigureQrCode.spec.js
@@ -45,12 +45,7 @@ describe('FigureQrCode', () => {
     it('renders the Canvas Element "#qrcanvas"', () => {
       const canvas = wrapper.find('#qrcanvas')
 
-      // console.log(canvas.html())
       expect(canvas.exists()).toBe(true)
-
-      // Hier können Sie weitere Tests für das Canvas-Element durchführen
-      // z.B. überprüfen Sie die Breite und Höhe des Canvas-Elements oder den Canvas-Kontext
-
       const canvasEl = canvas.element
       const canvasWidth = canvasEl.width
       const canvasHeight = canvasEl.height
@@ -58,7 +53,7 @@ describe('FigureQrCode', () => {
       expect(canvasWidth).toBeGreaterThan(0)
       expect(canvasHeight).toBeGreaterThan(0)
 
-      const canvasContext = canvasEl.getContext('2d')
+      const canvasContext = canvasEl.toDataURL('image/png')
       expect(canvasContext).not.toBeNull()
     })
 
@@ -71,12 +66,10 @@ describe('FigureQrCode', () => {
       beforeEach(() => {
         const downloadLink = wrapper.find('#download')
         downloadLink.trigger('click')
-        // await wrapper.vm.$nextTick()
       })
 
       it('click the A Element "#download" set an href', () => {
-        // expect(toDataURLStub).toHaveBeenCalledWith('image/png')
-        expect(wrapper.find('#download').attributes('href')).toEqual('')
+        expect(wrapper.find('#download').attributes('href')).toEqual('data:image/png;base64,00')
       })
     })
   })