fix markdown tests.

src/hooks/useMarkdown/useMarkdown.test.tsx

@@ -2,32 +2,34 @@ import {render, screen} from "@testing-library/react"
 import {renderHook} from "@testing-library/react-hooks"
 import {useMarkdown} from "hooks"
 
-test("renders local links", () => {
-    const name = "blog"
+describe("renders links", () => {
+    test("local links", () => {
+        const name = "blog"
 
-    const {result} = renderHook(() =>
-        useMarkdown(`<a href="/${name}">${name}</a>`),
-    )
+        const {result} = renderHook(() =>
+            useMarkdown(`<a href="/${name}">${name}</a>`),
+        )
 
-    render(result.current)
+        render(result.current)
 
-    const link = screen.getByText(name)
-    expect(link).toHaveAttribute("href", `/${name}`)
-})
+        const link = screen.getByText(name)
+        expect(link).toHaveAttribute("href", `/${name}`)
+    })
 
-test("renders external links", () => {
-    const name = "example"
+    test("external links", () => {
+        const name = "example"
 
-    const {result} = renderHook(() =>
-        useMarkdown(`<a href="https://${name}.com">${name}</a>`),
-    )
+        const {result} = renderHook(() =>
+            useMarkdown(`<a href="https://${name}.com">${name}</a>`),
+        )
 
-    render(result.current)
-    const link = screen.getByText(name)
+        render(result.current)
+        const link = screen.getByText(name)
 
-    expect(link).toHaveAttribute("href", `https://${name}.com`)
-    expect(link).toHaveAttribute("rel", "noopener noreferrer")
-    expect(link).toHaveAttribute("target", "_blank")
+        expect(link).toHaveAttribute("href", `https://${name}.com`)
+        expect(link).toHaveAttribute("rel", "noopener noreferrer")
+        expect(link).toHaveAttribute("target", "_blank")
+    })
 })
 
 test("renders images", () => {
@@ -42,6 +44,43 @@ test("renders images", () => {
     render(result.current)
 
     const image = screen.getByAltText(name)
-    expect(image)
     expect(image.parentElement.parentElement).toHaveClass("figure")
 })
+
+describe("renders headers", () => {
+    test("level one", () => {
+        const {result} = renderHook(() => useMarkdown("<h1>Heading one</h1>"))
+        render(result.current)
+
+        const icon = screen.getByLabelText("link")
+        const link = icon.parentElement
+        const heading = link.parentElement
+
+        expect(link).toHaveAttribute("href", "#heading-one")
+        expect(heading).toHaveAttribute("id", "heading-one")
+    })
+
+    test("level two", () => {
+        const {result} = renderHook(() => useMarkdown("<h2>Heading two</h2>"))
+        render(result.current)
+
+        const icon = screen.getByLabelText("link")
+        const link = icon.parentElement
+        const heading = link.parentElement
+
+        expect(link).toHaveAttribute("href", "#heading-two")
+        expect(heading).toHaveAttribute("id", "heading-two")
+    })
+
+    test("level three", () => {
+        const {result} = renderHook(() => useMarkdown("<h3>Heading three</h3>"))
+        render(result.current)
+
+        const icon = screen.getByLabelText("link")
+        const link = icon.parentElement
+        const heading = link.parentElement
+
+        expect(link).toHaveAttribute("href", "#heading-three")
+        expect(heading).toHaveAttribute("id", "heading-three")
+    })
+})

src/utils/markdown.test.ts

@@ -122,28 +122,6 @@ describe("transforms markdown", () => {
         )
     })
 
-    test.skip("syntax highlights", async () => {
-        expect(true).toBeTruthy()
-    })
-
-    test("slugifies headings", async () => {
-        const html = await transformMarkdown("# Heading one")
-
-        // eslint-disable-next-line quotes
-        expect(html).toEqual(expect.stringContaining('<h1 id="heading-one">'))
-    })
-
-    test("links headings", async () => {
-        const html = await transformMarkdown("# Heading one")
-
-        expect(html).toEqual(
-            expect.stringContaining(
-                // eslint-disable-next-line quotes
-                '<a aria-hidden="true" tabindex="-1" href="#heading-one">',
-            ),
-        )
-    })
-
     test("includes image sizes", async () => {
         const html = await transformMarkdown("![brad garropy](/profile.jpg)")