Add Link test

src/components/Link.test.tsx

@@ -0,0 +1,31 @@
+import { toJson } from '@/utils/toJson'
+import { Cog } from 'lucide-react'
+import renderer from 'react-test-renderer'
+import { expect, test } from 'vitest'
+import Link from './Link'
+
+test('Link with href', () => {
+  const component = renderer.create(<Link href="url/">link</Link>)
+  let tree = toJson(component)
+  expect(tree).toMatchSnapshot()
+})
+
+test('Link with href and custom target', () => {
+  const component = renderer.create(
+    <Link href="url/" target="_self">
+      link
+    </Link>
+  )
+  let tree = toJson(component)
+  expect(tree).toMatchSnapshot()
+})
+
+test('Link with href, custom target and icon', () => {
+  const component = renderer.create(
+    <Link href="url/" target="_self" Icon={Cog}>
+      link
+    </Link>
+  )
+  let tree = toJson(component)
+  expect(tree).toMatchSnapshot()
+})

src/components/__snapshots__/Link.test.tsx.snap

@@ -0,0 +1,112 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Link with href 1`] = `
+<div
+  className="relative flex items-center"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <a
+    className="bg-gradient-to-r from-fuchsia-500 to-indigo-400 bg-clip-text text-transparent hover:to-fuchsia-700 print:bg-transparent print:text-gray-700"
+    href="url/"
+    target="_blank"
+  >
+    link
+  </a>
+</div>
+`;
+
+exports[`Link with href and custom target 1`] = `
+<div
+  className="relative flex items-center"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <a
+    className="bg-gradient-to-r from-fuchsia-500 to-indigo-400 bg-clip-text text-transparent hover:to-fuchsia-700 print:bg-transparent print:text-gray-700"
+    href="url/"
+    target="_self"
+  >
+    link
+  </a>
+</div>
+`;
+
+exports[`Link with href, custom target and icon 1`] = `
+<div
+  className="relative flex items-center"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <div
+    style={
+      {
+        "transform": "none",
+      }
+    }
+  >
+    <svg
+      className="lucide lucide-cog size-7 pr-2 text-fuchsia-600 opacity-70"
+      fill="none"
+      height={24}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.8}
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
+      />
+      <path
+        d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+      />
+      <path
+        d="M12 2v2"
+      />
+      <path
+        d="M12 22v-2"
+      />
+      <path
+        d="m17 20.66-1-1.73"
+      />
+      <path
+        d="M11 10.27 7 3.34"
+      />
+      <path
+        d="m20.66 17-1.73-1"
+      />
+      <path
+        d="m3.34 7 1.73 1"
+      />
+      <path
+        d="M14 12h8"
+      />
+      <path
+        d="M2 12h2"
+      />
+      <path
+        d="m20.66 7-1.73 1"
+      />
+      <path
+        d="m3.34 17 1.73-1"
+      />
+      <path
+        d="m17 3.34-1 1.73"
+      />
+      <path
+        d="m11 13.73-4 6.93"
+      />
+    </svg>
+  </div>
+  <a
+    className="bg-gradient-to-r from-fuchsia-500 to-indigo-400 bg-clip-text text-transparent hover:to-fuchsia-700 print:bg-transparent print:text-gray-700"
+    href="url/"
+    target="_self"
+  >
+    link
+  </a>
+</div>
+`;