feat(Testing Playground): Add support for Testing Playground (#124)

README.md

@@ -27,17 +27,18 @@
 Trying to embed well known services (like [CodePen][codepen],
 [CodeSandbox][codesandbox], [GIPHY][giphy], [Instagram][instagram],
 [Lichess][lichess], [Pinterest][pinterest], [Slides][slides],
-[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable],
-[Twitch][twitch], [Twitter][twitter] or [YouTube][youtube]) into your
-[Gatsby][gatsby] website can be hard, since you have to know how this needs to
-be done for all of these different services.
+[SoundCloud][soundcloud], [Spotify][spotify], [Streamable][streamable], [Testing
+Playground][testing-playground], [Twitch][twitch], [Twitter][twitter] or
+[YouTube][youtube]) into your [Gatsby][gatsby] website can be hard, since you
+have to know how this needs to be done for all of these different services.
 
 ## This solution
 
 `gatsby-remark-embedder` tries to solve this problem for you by letting you just
-copy-paste the link to the gif/pen/pin/player/post/sandbox/tweet/video you want
-to embed right from within your browser onto a separate line (surrounded by
-empty lines) and replace it with the proper embed-code.
+copy-paste the link to the
+gif/pen/pin/player/playground/post/sandbox/tweet/video you want to embed right
+from within your browser onto a separate line (surrounded by empty lines) and
+replace it with the proper embed-code.
 
 ## Table of Contents
 
@@ -176,7 +177,7 @@ https://codepen.io/team/codepen/pen/PNaGbb
 ```
 
 <details>
-  <summary><b>Result</b></summary>
+<summary><b>Result</b></summary>
 
 ```html
 <iframe
@@ -563,6 +564,31 @@ https://streamable.com/moo
 
 </details>
 
+### Testing Playground
+
+#### Usage
+
+```md
+https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
+```
+
+<details>
+<summary><b>Result</b></summary>
+
+```html
+<iframe
+  src="https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview"
+  height="450"
+  width="100%"
+  scrolling="no"
+  frameborder="0"
+  allowTransparency="true"
+  style="overflow: hidden; display: block; width: 100%"
+></iframe>
+```
+
+</details>
+
 ### Twitch
 
 Twitch embeds can only be embedded on HTTPS websites. Check out [the Gatsby
@@ -860,6 +886,7 @@ Thanks goes to these people ([emoji key][emojis]):
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.
@@ -915,6 +942,7 @@ MIT
 [soundcloud]: https://soundcloud.com
 [spotify]: https://spotify.com
 [streamable]: https://streamable.com
+[testing-playground]: https://testing-playground.com
 [twitch]: https://twitch.tv
 [twitter]: https://twitter.com
 [twitter-widget-javascript-docs]: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview

package.json

@@ -20,6 +20,7 @@
     "soundcloud",
     "spotify",
     "streamable",
+    "testing playground",
     "twitch",
     "twitter",
     "youtube"

src/__tests__/__fixtures__/kitchensink.md

@@ -37,6 +37,8 @@ https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L
 
 https://streamable.com/moo
 
+https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
+
 https://twitch.tv/videos/546761743
 
 https://twitter.com/kentcdodds/status/1078755736455278592

src/__tests__/plugin.js

@@ -77,6 +77,8 @@ describe('gatsby-remark-embedder', () => {
 
       <iframe class=\\"streamable-embed-from-cache\\" src=\\"https://streamable.com/o/moo\\" frameborder=\\"0\\" scrolling=\\"no\\" width=\\"1920\\" height=\\"1080\\" allowfullscreen></iframe>
 
+      <iframe src=\\"https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
+
       <iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
 
       <blockquote class=\\"twitter-tweet-from-cache\\"><p lang=\\"en\\" dir=\\"ltr\\">example</p>&mdash; Kent C. Dodds (@kentcdodds) <a href=\\"https://twitter.com/kentcdodds/status/1078755736455278592\\">December 28, 2018</a></blockquote>

src/__tests__/transformers/TestingPlayground.js

@@ -0,0 +1,120 @@
+import cases from 'jest-in-case';
+
+import plugin from '../../';
+import {
+  getHTML,
+  getTestingPlaygroundIFrameSrc,
+  shouldTransform,
+} from '../../transformers/TestingPlayground';
+
+import { cache, getMarkdownASTForFile, parseASTToMarkdown } from '../helpers';
+
+cases(
+  'url validation',
+  ({ url, valid }) => {
+    expect(shouldTransform(url)).toBe(valid);
+  },
+  {
+    'non-Testing Playground url': {
+      url: 'https://not-a-testing-playground-url.com',
+      valid: false,
+    },
+    "non-Testing Playground url ending with 'testing-playground.com'": {
+      url: 'https://this-is-not-testing-playground.com',
+      valid: false,
+    },
+    "non-Testing Playground url ending with 'testing-playground.com' having '/gist/' path": {
+      url:
+        'https://this-is-not-testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
+      valid: false,
+    },
+    "non-Testing Playground url ending with 'testing-playground.com' and having '/embed/' path": {
+      url:
+        'https://this-is-not-testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
+      valid: false,
+    },
+    'dnt policy page': {
+      url: 'https://testing-playground.com/.well-known/dnt-policy.txt',
+      valid: false,
+    },
+    'Playground embed url': {
+      url:
+        'https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
+      valid: false,
+    },
+    'Testing Playground homepage': {
+      url: 'https://testing-playground.com',
+      valid: true,
+    },
+    'Playground url': {
+      url:
+        'https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
+      valid: true,
+    },
+    "Playground url having 'www' subdomain": {
+      url:
+        'https://www.testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
+      valid: true,
+    },
+  }
+);
+
+cases(
+  'getTestingPlaygroundIFrameSrc',
+  ({ url, iframe }) => {
+    expect(getTestingPlaygroundIFrameSrc(url)).toBe(iframe);
+  },
+  {
+    'Testing Playground homepage': {
+      url: 'https://testing-playground.com',
+      iframe: `https://testing-playground.com/embed?panes=query,preview`,
+    },
+    'Playground url': {
+      url:
+        'https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
+      iframe: `https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview`,
+    },
+    "Playground url having 'www' subdomain": {
+      url:
+        'https://www.testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a',
+      iframe: `https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview`,
+    },
+  }
+);
+
+test('Gets the correct Testing Playground iframe', () => {
+  const html = getHTML(
+    'https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a'
+  );
+
+  expect(html).toMatchInlineSnapshot(
+    `"<iframe src=\\"https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>"`
+  );
+});
+
+test('Plugin can transform Testing Playground links', async () => {
+  const markdownAST = getMarkdownASTForFile('TestingPlayground');
+
+  const processedAST = await plugin({ cache, markdownAST });
+
+  expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
+    "<https://not-a-testing-playground-url.com>
+
+    <https://this-is-not-testing-playground.com>
+
+    <https://this-is-not-testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a>
+
+    <https://this-is-not-testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a>
+
+    <https://testing-playground.com/.well-known/dnt-policy.txt>
+
+    <https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a>
+
+    <iframe src=\\"https://testing-playground.com/embed?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
+
+    <iframe src=\\"https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
+
+    <iframe src=\\"https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a?panes=query,preview\\" height=\\"450\\" width=\\"100%\\" scrolling=\\"no\\" frameBorder=\\"0\\" allowTransparency=\\"true\\" style=\\"overflow: hidden; display: block; width: 100%\\"></iframe>
+    "
+  `);
+});

src/__tests__/transformers/__fixtures__/TestingPlayground.md

@@ -0,0 +1,17 @@
+https://not-a-testing-playground-url.com
+
+https://this-is-not-testing-playground.com
+
+https://this-is-not-testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
+
+https://this-is-not-testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
+
+https://testing-playground.com/.well-known/dnt-policy.txt
+
+https://testing-playground.com/embed/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
+
+https://testing-playground.com
+
+https://testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a
+
+https://www.testing-playground.com/gist/fb336c386145b235372a0f57d5c58205/6d13e4ee508301c8b42f9d2cc8584e70bb05fb4a

src/transformers/TestingPlayground.js

@@ -0,0 +1,25 @@
+import { getTrimmedPathName } from './utils';
+
+export const shouldTransform = (url) => {
+  const { host, pathname } = new URL(url);
+  const trimmedPathName = getTrimmedPathName(pathname);
+
+  return (
+    ['testing-playground.com', 'www.testing-playground.com'].includes(host) &&
+    (trimmedPathName.length === 0 || trimmedPathName.startsWith('gist/'))
+  );
+};
+
+export const getTestingPlaygroundIFrameSrc = (urlString) => {
+  const { pathname } = new URL(urlString);
+  const path =
+    pathname === '/' ? '/embed' : pathname.replace('/gist/', '/embed/');
+
+  return `https://testing-playground.com${path}?panes=query,preview`;
+};
+
+export const getHTML = (url) => {
+  const iframeSrc = getTestingPlaygroundIFrameSrc(url);
+
+  return `<iframe src="${iframeSrc}" height="450" width="100%" scrolling="no" frameBorder="0" allowTransparency="true" style="overflow: hidden; display: block; width: 100%"></iframe>`;
+};

src/transformers/index.js

@@ -8,6 +8,7 @@ import * as SlidesTransformer from './Slides';
 import * as SoundCloudTransformer from './SoundCloud';
 import * as SpotifyTransformer from './Spotify';
 import * as StreamableTransformer from './Streamable';
+import * as TestingPlaygroundTransformer from './TestingPlayground';
 import * as TwitchTransformer from './Twitch';
 import * as TwitterTransformer from './Twitter';
 import * as YouTubeTransformer from './YouTube';
@@ -23,6 +24,7 @@ export const defaultTransformers = [
   SoundCloudTransformer,
   SpotifyTransformer,
   StreamableTransformer,
+  TestingPlaygroundTransformer,
   TwitchTransformer,
   TwitterTransformer,
   YouTubeTransformer,