heading tests.

src/components/Heading/Heading.test.tsx

@@ -1,7 +1,52 @@
+import {render, screen} from "@testing-library/react"
 import Heading from "components/Heading"
-import {render, screen} from "test-utils/render"
 
-test("renders", () => {
-    render(<Heading />)
-    expect(screen.getByText("Heading"))
+test("shows level one", () => {
+    const {container} = render(<Heading level={1}>Heading one</Heading>)
+
+    expect(container.querySelector("h1"))
+    expect(screen.getByText("Heading one")).toHaveAttribute("id", "heading-one")
+
+    expect(screen.getByLabelText("link").parentElement).toHaveAttribute(
+        "href",
+        "#heading-one",
+    )
+})
+
+test("shows level two", () => {
+    const {container} = render(<Heading level={2}>Heading two</Heading>)
+
+    expect(container.querySelector("h2"))
+    expect(screen.getByText("Heading two")).toHaveAttribute("id", "heading-two")
+
+    expect(screen.getByLabelText("link").parentElement).toHaveAttribute(
+        "href",
+        "#heading-two",
+    )
+})
+
+test("shows level three", () => {
+    const {container} = render(<Heading level={3}>Heading three</Heading>)
+
+    expect(container.querySelector("h3"))
+
+    expect(screen.getByText("Heading three")).toHaveAttribute(
+        "id",
+        "heading-three",
+    )
+
+    expect(screen.getByLabelText("link").parentElement).toHaveAttribute(
+        "href",
+        "#heading-three",
+    )
+})
+
+test("overrides id", () => {
+    render(
+        <Heading level={1} id="custom">
+            Heading one
+        </Heading>,
+    )
+
+    expect(screen.getByText("Heading one")).toHaveAttribute("id", "custom")
 })

src/components/Heading/Heading.tsx

@@ -1,3 +1,4 @@
+import Icon from "components/Icon"
 import {FC} from "react"
 import slugify from "slugify"
 
@@ -9,29 +10,18 @@ type HeadingProps = {
 }
 
 const Heading: FC<HeadingProps> = ({level, id, children}) => {
+    const text = typeof children === "string" ? children : children[0]
+
     const slug = id
         ? id
-        : slugify(children[0], {
+        : slugify(text, {
               lower: true,
               remove: /[^\w\d\s.]/,
           })
 
     const link = (
         <a href={`#${slug}`} className={HeadingStyles.link}>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className={HeadingStyles.icon}
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-                />
-            </svg>
+            <Icon name="link" className={HeadingStyles.icon} />
         </a>
     )
 
@@ -45,21 +35,18 @@ const Heading: FC<HeadingProps> = ({level, id, children}) => {
             )
         case 2:
             return (
-                <h2 id={id} className={HeadingStyles.heading}>
+                <h2 id={slug} className={HeadingStyles.heading}>
                     {link}
                     {children}
                 </h2>
             )
         case 3:
             return (
-                <h3 id={id} className={HeadingStyles.heading}>
+                <h3 id={slug} className={HeadingStyles.heading}>
                     {link}
                     {children}
                 </h3>
             )
-
-        default:
-            return null
     }
 }
 

src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
-import {FC} from "react"
+import {FC, HTMLAttributes} from "react"
 import GatsbyIcon from "svg/gatsby.svg"
 import JavascriptIcon from "svg/javascript.svg"
+import LinkIcon from "svg/link.svg"
 import NextIcon from "svg/next.svg"
 import NodeIcon from "svg/node.svg"
 import ReactIcon from "svg/reacticon.svg"
@@ -10,26 +11,28 @@ import TypescriptIcon from "svg/typescript.svg"
 
 type IconProps = {
     name: string
-}
+} & HTMLAttributes<SVGElement>
 
-const Icon: FC<IconProps> = ({name}) => {
+const Icon: FC<IconProps> = ({name, ...props}) => {
     switch (name) {
         case "gatsby":
-            return <GatsbyIcon aria-label={name} />
+            return <GatsbyIcon aria-label={name} {...props} />
         case "javascript":
-            return <JavascriptIcon aria-label={name} />
+            return <JavascriptIcon aria-label={name} {...props} />
+        case "link":
+            return <LinkIcon aria-label={name} {...props} />
         case "next":
-            return <NextIcon aria-label={name} />
+            return <NextIcon aria-label={name} {...props} />
         case "node":
-            return <NodeIcon aria-label={name} />
+            return <NodeIcon aria-label={name} {...props} />
         case "react":
-            return <ReactIcon aria-label={name} />
+            return <ReactIcon aria-label={name} {...props} />
         case "svelte":
-            return <SvelteIcon aria-label={name} />
+            return <SvelteIcon aria-label={name} {...props} />
         case "typescript":
-            return <TypescriptIcon aria-label={name} />
+            return <TypescriptIcon aria-label={name} {...props} />
         case "tailwind":
-            return <TailwindIcon aria-label={name} />
+            return <TailwindIcon aria-label={name} {...props} />
         default:
             return null
     }