From 21b52c485b58e0c01b9691f5ab84af6ac82f35e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 27 Mar 2024 12:14:02 +0100
Subject: [PATCH] Remove component IconSVG and add new icon test

---
 frontend/src/assets/icons/OcelotIcons.test.ts | 28 +++++++++++
 .../__snapshots__/OcelotIcons.test.ts.snap}   |  6 ++-
 frontend/src/components/IconSVG.test.ts       | 46 -------------------
 frontend/src/components/IconSVG.vue           | 24 ----------
 4 files changed, 32 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/assets/icons/OcelotIcons.test.ts
 rename frontend/src/{components/__snapshots__/IconSVG.test.ts.snap => assets/icons/__snapshots__/OcelotIcons.test.ts.snap} (71%)
 delete mode 100644 frontend/src/components/IconSVG.test.ts
 delete mode 100644 frontend/src/components/IconSVG.vue

diff --git a/frontend/src/assets/icons/OcelotIcons.test.ts b/frontend/src/assets/icons/OcelotIcons.test.ts
new file mode 100644
index 000000000..684539c28
--- /dev/null
+++ b/frontend/src/assets/icons/OcelotIcons.test.ts
@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { navigate } from 'vike/client/router'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { VIcon } from 'vuetify/components'
+
+vi.mock('vike/client/router')
+vi.mocked(navigate).mockResolvedValue()
+
+describe('Ocelot Icons', () => {
+  const Wrapper = () => {
+    return mount(VIcon, {
+      props: {
+        icon: '$history',
+        color: 'green',
+        size: 'large',
+      },
+    })
+  }
+  let wrapper: ReturnType<typeof Wrapper>
+
+  beforeEach(() => {
+    wrapper = Wrapper()
+  })
+
+  it('renders and tests if the ocelot icon "$history" is installed', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/frontend/src/components/__snapshots__/IconSVG.test.ts.snap b/frontend/src/assets/icons/__snapshots__/OcelotIcons.test.ts.snap
similarity index 71%
rename from frontend/src/components/__snapshots__/IconSVG.test.ts.snap
rename to frontend/src/assets/icons/__snapshots__/OcelotIcons.test.ts.snap
index bce169ac2..5f0268616 100644
--- a/frontend/src/components/__snapshots__/IconSVG.test.ts.snap
+++ b/frontend/src/assets/icons/__snapshots__/OcelotIcons.test.ts.snap
@@ -1,14 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`IconSVG > renders and tests if the custom icons are installed 1`] = `
+exports[`Ocelot Icons > renders and tests if the ocelot icon "$history" is installed 1`] = `
 <i
   aria-hidden="true"
-  class="v-icon notranslate v-theme--light v-icon--size-large svg-color"
+  class="v-icon notranslate v-theme--light v-icon--size-large text-green"
 >
   
   <!-- Generated by IcoMoon.io -->
   <svg
+    fill="currentColor"
     height="32"
+    stroke="currentColor"
     version="1.1"
     viewBox="0 0 32 32"
     width="32"
diff --git a/frontend/src/components/IconSVG.test.ts b/frontend/src/components/IconSVG.test.ts
deleted file mode 100644
index 9d5153be0..000000000
--- a/frontend/src/components/IconSVG.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { navigate } from 'vike/client/router'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-
-import IconSVG from './IconSVG.vue'
-
-vi.mock('vike/client/router')
-vi.mocked(navigate).mockResolvedValue()
-
-describe('IconSVG', () => {
-  const Wrapper = () => {
-    return mount(IconSVG, {
-      props: {
-        icon: '$history',
-        color: 'green',
-        size: 'large',
-      },
-    })
-  }
-  let wrapper: ReturnType<typeof Wrapper>
-
-  beforeEach(() => {
-    wrapper = Wrapper()
-  })
-
-  it('renders and tests if the custom icons are installed', () => {
-    expect(wrapper.element).toMatchSnapshot()
-  })
-
-  it('applies class "svg-color"', () => {
-    expect(wrapper.find('.svg-color').exists()).toBe(true)
-  })
-
-  it.todo('finds "color", "fill" and "stroke" in class', () => {
-    // see: https://runthatline.com/test-css-module-classes-in-vue-with-vitest/
-    // expect(wrapper.classes()).toContain('color')
-    // expect(wrapper.classes()).toContain('fill')
-    // expect(wrapper.classes()).toContain('stroke')
-  })
-
-  it.todo('sets right "color" in class', () => {
-    // expect(wrapper.find('.svg-color').attributes('style')).toContain(
-    //   '--ff7c8758-props\\.color: green;',
-    // )
-  })
-})
diff --git a/frontend/src/components/IconSVG.vue b/frontend/src/components/IconSVG.vue
deleted file mode 100644
index a1aee3e8d..000000000
--- a/frontend/src/components/IconSVG.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    icon: string
-    color?: string
-    size: string | number | undefined
-  }>(),
-  { color: '' },
-)
-</script>
-
-<template>
-  <v-icon class="svg-color" :icon="props.icon" :size="props.size" />
-</template>
-
-<style lang="scss">
-.svg-color {
-  // there should be a '@use' directive to silent stylelint, but I couldn't find this out
-  // stylelint-disable function-no-unknown
-  color: v-bind('props.color');
-  fill: currentcolor;
-  stroke: currentcolor;
-}
-</style>