From d47d1c0d6a598bfa4420045df9501495c84440bf Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 1 Apr 2024 18:55:55 +0300
Subject: [PATCH] VTag improvements (#3975)

* VTag improvements

Co-authored-by: FelixSjogren <felixarvidsjogren@gmail.com>

FEAT - Add lot for the content instead of a prop (#2)

Closes #2

Co-authored-by: Stagge <jonatan.stagge@gmail.com>

TEST - Add tests for VTag (#7)

Added tests for Vtag,
tests include:
All props are sent to VButton
VTag renders slot content
Renders anchor tag.

Co-authored-by: Stagge <jonatan.stagge@gmail.com>

FEAT - Ensure inner VButton emits and handles events in VTag #4

Closes #4

Added accessibility label (#10)

- Added aria-label to indicate that that the link is a tag

Improvements from review

lint

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Update unit tests

Signed-off-by: Olga Bulat <obulat@gmail.com>

---------

Signed-off-by: Olga Bulat <obulat@gmail.com>
Co-authored-by: Stagge <jonatan.stagge@gmail.com>
---
 .../src/components/VMediaInfo/VMediaTags.vue  |  2 +-
 frontend/src/components/VTag/VTag.vue         | 11 +++----
 .../unit/specs/components/VTag/v-tag.spec.js  | 31 +++++++++++++++++++
 3 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 frontend/test/unit/specs/components/VTag/v-tag.spec.js

diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
index 30e8b41c7b3..e680f4431f0 100644
--- a/frontend/src/components/VMediaInfo/VMediaTags.vue
+++ b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -7,7 +7,7 @@
       :class="heightClass"
     >
       <li v-for="tag in visibleTags" :key="tag">
-        <VTag :href="localizedTagPath(tag)" :title="tag" />
+        <VTag :href="localizedTagPath(tag)">{{ tag }}</VTag>
       </li>
     </ul>
     <VButton
diff --git a/frontend/src/components/VTag/VTag.vue b/frontend/src/components/VTag/VTag.vue
index d676f6e4bc8..e9484e71b8c 100644
--- a/frontend/src/components/VTag/VTag.vue
+++ b/frontend/src/components/VTag/VTag.vue
@@ -4,9 +4,10 @@
     size="small"
     variant="filled-gray"
     class="label-bold"
-    :href="href"
-    >{{ title }}</VButton
-  >
+    v-bind="$props"
+    v-on="$listeners"
+    ><slot
+  /></VButton>
 </template>
 
 <script lang="ts">
@@ -18,10 +19,6 @@ export default defineComponent({
   name: "VTag",
   components: { VButton },
   props: {
-    title: {
-      type: String,
-      required: true,
-    },
     href: {
       type: String,
       required: true,
diff --git a/frontend/test/unit/specs/components/VTag/v-tag.spec.js b/frontend/test/unit/specs/components/VTag/v-tag.spec.js
new file mode 100644
index 00000000000..6335c1b0489
--- /dev/null
+++ b/frontend/test/unit/specs/components/VTag/v-tag.spec.js
@@ -0,0 +1,31 @@
+import { screen } from "@testing-library/vue"
+
+import { render } from "~~/test/unit/test-utils/render"
+
+import VTag from "~/components/VTag/VTag.vue"
+
+describe("VTag", () => {
+  let options = {}
+
+  beforeEach(() => {
+    options = {
+      props: { href: "https://example.com/" },
+      slots: { default: "Hello" },
+    }
+  })
+
+  it("should render an anchor tag by default", () => {
+    const { getByRole } = render(VTag, options)
+    const link = getByRole("link", { name: "Hello" })
+    expect(link).toBeDefined()
+    expect(link.href).toEqual("https://example.com/")
+  })
+
+  it("renders slot content", () => {
+    const slotText = "Slot test"
+    options.slots = { default: `<div>${slotText}</div>` }
+
+    render(VTag, options)
+    expect(screen.getByText(slotText)).toBeDefined()
+  })
+})