Test IconSVG component

frontend/src/components/IconSVG.test.ts

@@ -0,0 +1,46 @@
+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;',
+    // )
+  })
+})

frontend/src/components/__snapshots__/IconSVG.test.ts.snap

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconSVG > renders and tests if the custom icons are installed 1`] = `
+<i
+  aria-hidden="true"
+  class="v-icon notranslate v-theme--light v-icon--size-large svg-color"
+>
+  
+  <!-- Generated by IcoMoon.io -->
+  <svg
+    height="32"
+    version="1.1"
+    viewBox="0 0 32 32"
+    width="32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>
+      history
+    </title>
+    <path
+      d="M16 4c6.616 0 12 5.385 12 12s-5.385 12-12 12-12-5.385-12-12h2c0 5.535 4.465 10 10 10s10-4.465 10-10-4.465-10-10-10c-3.702 0-6.897 2.020-8.625 5h3.625v2h-7v-7h2v3.344c2.153-3.232 5.833-5.344 10-5.344zM15 8h2v7h5v2h-7v-9z"
+    />
+  </svg>
+  
+</i>
+`;