From 3c2615ce2600e23edef0cd2bb3201c3f169cc8c5 Mon Sep 17 00:00:00 2001
From: Brad Garropy <bgarropy@atlassian.com>
Date: Thu, 27 Jan 2022 11:47:13 -0600
Subject: [PATCH] markdown tests.

---
 .../codesandbox/codesandbox.test.ts           |   2 +-
 src/transformers/codesandbox/codesandbox.ts   |   2 +-
 src/transformers/twitch/twitch.test.ts        |   8 +-
 src/transformers/twitch/twitch.ts             |   2 +-
 src/transformers/youtube/youtube.test.ts      |   8 +-
 src/transformers/youtube/youtube.ts           |   4 +-
 src/utils/markdown.test.ts                    | 168 ++++++++++++++++++
 7 files changed, 181 insertions(+), 13 deletions(-)

diff --git a/src/transformers/codesandbox/codesandbox.test.ts b/src/transformers/codesandbox/codesandbox.test.ts
index 330536d1..e364a2b9 100644
--- a/src/transformers/codesandbox/codesandbox.test.ts
+++ b/src/transformers/codesandbox/codesandbox.test.ts
@@ -23,7 +23,7 @@ test("transforms codesandbox links", () => {
         <div class="codesandbox">
             <iframe
                 src="https://codesandbox.io/embed/exciting-pascal-j5hwu"
-                frameBorder="0"
+                frameborder="0"
                 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
                 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
             >
diff --git a/src/transformers/codesandbox/codesandbox.ts b/src/transformers/codesandbox/codesandbox.ts
index 46f034c0..368590bc 100644
--- a/src/transformers/codesandbox/codesandbox.ts
+++ b/src/transformers/codesandbox/codesandbox.ts
@@ -9,7 +9,7 @@ const getHTML = (string: string): string => {
         <div class="codesandbox">
             <iframe
                 src="${src}"
-                frameBorder="0"
+                frameborder="0"
                 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
                 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
             >
diff --git a/src/transformers/twitch/twitch.test.ts b/src/transformers/twitch/twitch.test.ts
index 121d64b2..508e74fb 100644
--- a/src/transformers/twitch/twitch.test.ts
+++ b/src/transformers/twitch/twitch.test.ts
@@ -19,7 +19,7 @@ test("transforms twitch channels", () => {
                 src="https://player.twitch.tv?channel=bradgarropy&parent=bradgarropy.com"
                 frameborder="0"
                 scrolling="no"
-                allowfullscreen=""
+                allowfullscreen
             >
             </iframe>
         </div>
@@ -37,7 +37,7 @@ test("transforms twitch videos", () => {
                 src="https://player.twitch.tv?video=1272889918&parent=bradgarropy.com"
                 frameborder="0"
                 scrolling="no"
-                allowfullscreen=""
+                allowfullscreen
             >
             </iframe>
         </div>
@@ -55,7 +55,7 @@ test("transforms twitch clips", () => {
                 src="https://clips.twitch.tv/embed?clip=ZealousSpeedyStingrayUnSane&parent=bradgarropy.com"
                 frameborder="0"
                 scrolling="no"
-                allowfullscreen=""
+                allowfullscreen
             >
             </iframe>
         </div>
@@ -71,7 +71,7 @@ test("transforms twitch clips", () => {
                 src="https://clips.twitch.tv/embed?clip=ZealousSpeedyStingrayUnSane&parent=bradgarropy.com"
                 frameborder="0"
                 scrolling="no"
-                allowfullscreen=""
+                allowfullscreen
             >
             </iframe>
         </div>
diff --git a/src/transformers/twitch/twitch.ts b/src/transformers/twitch/twitch.ts
index d495e49c..e357dc73 100644
--- a/src/transformers/twitch/twitch.ts
+++ b/src/transformers/twitch/twitch.ts
@@ -28,7 +28,7 @@ const getHTML = (string: string): string => {
                 src="${src}&parent=bradgarropy.com"
                 frameborder="0"
                 scrolling="no"
-                allowfullscreen=""
+                allowfullscreen
             >
             </iframe>
         </div>
diff --git a/src/transformers/youtube/youtube.test.ts b/src/transformers/youtube/youtube.test.ts
index df0496e3..e6a1495c 100644
--- a/src/transformers/youtube/youtube.test.ts
+++ b/src/transformers/youtube/youtube.test.ts
@@ -20,9 +20,9 @@ test("transforms youtube links", () => {
             <iframe
                 title="9zcU6oUOHVc"
                 src="https://www.youtube-nocookie.com/embed/9zcU6oUOHVc"
-                frameBorder="0"
+                frameborder="0"
                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
+                allowfullscreen
             >
             </iframe>
         </div>
@@ -37,9 +37,9 @@ test("transforms youtube links with start", () => {
             <iframe
                 title="9zcU6oUOHVc"
                 src="https://www.youtube-nocookie.com/embed/9zcU6oUOHVc?start=3"
-                frameBorder="0"
+                frameborder="0"
                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
+                allowfullscreen
             >
             </iframe>
         </div>
diff --git a/src/transformers/youtube/youtube.ts b/src/transformers/youtube/youtube.ts
index b01aa666..ca4ca5ae 100644
--- a/src/transformers/youtube/youtube.ts
+++ b/src/transformers/youtube/youtube.ts
@@ -18,9 +18,9 @@ const getHTML = (string: string): string => {
             <iframe
                 title="${id}"
                 src="${src}"
-                frameBorder="0"
+                frameborder="0"
                 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                allowFullScreen
+                allowfullscreen
             >
             </iframe>
         </div>
diff --git a/src/utils/markdown.test.ts b/src/utils/markdown.test.ts
index e69de29b..9d40d6bf 100644
--- a/src/utils/markdown.test.ts
+++ b/src/utils/markdown.test.ts
@@ -0,0 +1,168 @@
+import matter from "gray-matter"
+import {getMarkdownBySlug, transformMarkdown} from "utils/markdown"
+
+jest.mock("gray-matter")
+
+jest.mock("gatsby-remark-vscode", () => {
+    return {
+        remarkPlugin: tree => tree,
+    }
+})
+
+test("gets markdown by slug", async () => {
+    const mockMatter = matter.read as jest.Mock
+    mockMatter.mockReturnValue({data: {}, content: "This is the uses page."})
+
+    const markdown = await getMarkdownBySlug("uses")
+
+    expect(markdown).toEqual({
+        frontmatter: {},
+        html: "<p>This is the uses page.</p>",
+    })
+})
+
+describe("transforms markdown", () => {
+    test("supports gfm", async () => {
+        const html = await transformMarkdown("~~nope~~")
+        expect(html).toEqual("<p><del>nope</del></p>")
+    })
+
+    test("unwraps images", async () => {
+        const html = await transformMarkdown(
+            "![brad garropy](https://bradgarropy.com/profile.jpg)",
+        )
+
+        expect(html).toEqual(
+            // eslint-disable-next-line quotes
+            '<img src="https://bradgarropy.com/profile.jpg" alt="brad garropy">',
+        )
+    })
+
+    test("embeds codesandbox", async () => {
+        const html = await transformMarkdown(
+            "https://codesandbox.io/s/exciting-pascal-j5hwu",
+        )
+
+        expect(html).toEqual(
+            // eslint-disable-next-line quotes
+            expect.stringContaining('<div class="codesandbox">'),
+        )
+
+        expect(html).toEqual(expect.stringContaining("<iframe"))
+
+        expect(html).toEqual(
+            expect.stringContaining(
+                // eslint-disable-next-line quotes
+                'src="https://codesandbox.io/embed/exciting-pascal-j5hwu"',
+            ),
+        )
+    })
+
+    test("embeds twitch", async () => {
+        const html = await transformMarkdown("https://twitch.tv/bradgarropy")
+
+        expect(html).toEqual(
+            // eslint-disable-next-line quotes
+            expect.stringContaining('<div class="twitch">'),
+        )
+
+        expect(html).toEqual(
+            // eslint-disable-next-line quotes
+            expect.stringContaining("<iframe"),
+        )
+
+        expect(html).toEqual(
+            expect.stringContaining(
+                // eslint-disable-next-line quotes
+                'src="https://player.twitch.tv?channel=bradgarropy&#x26;parent=bradgarropy.com"',
+            ),
+        )
+    })
+
+    test("embeds twitter", async () => {
+        const html = await transformMarkdown(
+            "https://twitter.com/bradgarropy/status/1458449938157801490",
+        )
+
+        // eslint-disable-next-line quotes
+        expect(html).toEqual(expect.stringContaining('<div class="twitter">'))
+
+        expect(html).toEqual(
+            // eslint-disable-next-line quotes
+            expect.stringContaining('<blockquote class="twitter-tweet">'),
+        )
+
+        expect(html).toEqual(
+            expect.stringContaining(
+                // eslint-disable-next-line quotes
+                '<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">',
+            ),
+        )
+    })
+
+    test("embeds youtube", async () => {
+        const html = await transformMarkdown("https://youtu.be/9zcU6oUOHVc")
+
+        // eslint-disable-next-line quotes
+        expect(html).toEqual(expect.stringContaining('<div class="youtube">'))
+
+        // eslint-disable-next-line quotes
+        expect(html).toEqual(expect.stringContaining('<div class="youtube">'))
+
+        expect(html).toEqual(expect.stringContaining("<iframe"))
+
+        // eslint-disable-next-line quotes
+        expect(html).toEqual(expect.stringContaining('title="9zcU6oUOHVc"'))
+
+        expect(html).toEqual(
+            expect.stringContaining(
+                // eslint-disable-next-line quotes
+                'src="https://www.youtube-nocookie.com/embed/9zcU6oUOHVc"',
+            ),
+        )
+    })
+
+    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)")
+
+        expect(html).toEqual(
+            // eslint-disable-next-line quotes
+            '<img src="/profile.jpg" alt="brad garropy" width="460" height="460">',
+        )
+    })
+
+    test("opens external links in new tabs", async () => {
+        const html = await transformMarkdown(
+            "This is an [external link](https://example.com).",
+        )
+
+        expect(html).toEqual(
+            expect.stringContaining(
+                // eslint-disable-next-line quotes
+                '<a href="https://example.com" target="_blank" rel="noopener noreferrer">external link</a>',
+            ),
+        )
+    })
+})