Skip to content

Commit

Permalink
markdown tests.
Browse files Browse the repository at this point in the history
  • Loading branch information
bgarropy-atlassian committed Jan 27, 2022
1 parent 2a50851 commit 3c2615c
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 13 deletions.
2 changes: 1 addition & 1 deletion src/transformers/codesandbox/codesandbox.test.ts
Expand Up @@ -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"
>
Expand Down
2 changes: 1 addition & 1 deletion src/transformers/codesandbox/codesandbox.ts
Expand Up @@ -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"
>
Expand Down
8 changes: 4 additions & 4 deletions src/transformers/twitch/twitch.test.ts
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/transformers/twitch/twitch.ts
Expand Up @@ -28,7 +28,7 @@ const getHTML = (string: string): string => {
src="${src}&parent=bradgarropy.com"
frameborder="0"
scrolling="no"
allowfullscreen=""
allowfullscreen
>
</iframe>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/transformers/youtube/youtube.test.ts
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/transformers/youtube/youtube.ts
Expand Up @@ -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>
Expand Down
168 changes: 168 additions & 0 deletions 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>',
),
)
})
})

1 comment on commit 3c2615c

@vercel
Copy link

@vercel vercel bot commented on 3c2615c Jan 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.