changes badges to html elements in <Badges> component

Author: george

app/components/Badges/Badges.js

@@ -0,0 +1,32 @@
+import React from "react"
+
+export default function Badges() {
+  return (
+    <>
+      <a href="https://badge.fury.io/js/undernet">
+        <img src="https://badge.fury.io/js/undernet.svg" alt="npm version" height="18" />
+      </a>
+      <a href="https://circleci.com/gh/geotrev/undernet/tree/master">
+        <img
+          src="https://circleci.com/gh/geotrev/undernet/tree/master.svg?style=svg"
+          alt="undernet master branch circeci status"
+          height="20"
+        />
+      </a>
+      <a href="https://david-dm.org/geotrev/undernet?type=dev">
+        <img
+          src="https://david-dm.org/geotrev/undernet/dev-status.svg"
+          alt="undernet dev dependency status"
+          height="20"
+        />
+      </a>
+      <a href="https://david-dm.org/geotrev/undernet">
+        <img
+          src="https://david-dm.org/geotrev/undernet.svg"
+          alt="undernet dependency status"
+          height="20"
+        />
+      </a>
+    </>
+  )
+}

app/pages/Home/__tests__/Badges.spec.js renamed to app/components/Badges/__tests__/Badges.spec.js

@@ -1,11 +1,6 @@
 import React from "react"
 import Badges from "../Badges"
 
-jest.mock(
-  "../markdown/badges.md",
-  () => "some status content, converted from markdown to html/text!"
-)
-
 describe("<Badges />", () => {
   it("renders", () => {
     const wrapper = mount(<Badges />)

app/components/Badges/__tests__/__snapshots__/Badges.spec.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Badges /> renders 1`] = `
+<Badges>
+  <a
+    href="https://badge.fury.io/js/undernet"
+  >
+    <img
+      alt="npm version"
+      height="18"
+      src="https://badge.fury.io/js/undernet.svg"
+    />
+  </a>
+  <a
+    href="https://circleci.com/gh/geotrev/undernet/tree/master"
+  >
+    <img
+      alt="undernet master branch circeci status"
+      height="20"
+      src="https://circleci.com/gh/geotrev/undernet/tree/master.svg?style=svg"
+    />
+  </a>
+  <a
+    href="https://david-dm.org/geotrev/undernet?type=dev"
+  >
+    <img
+      alt="undernet dev dependency status"
+      height="20"
+      src="https://david-dm.org/geotrev/undernet/dev-status.svg"
+    />
+  </a>
+  <a
+    href="https://david-dm.org/geotrev/undernet"
+  >
+    <img
+      alt="undernet dependency status"
+      height="20"
+      src="https://david-dm.org/geotrev/undernet.svg"
+    />
+  </a>
+</Badges>
+`;

app/components/Badges/index.js

@@ -0,0 +1 @@
+export { default } from "./Badges"

app/pages/Home/Badges.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom"
 import Prism from "prismjs"
 import lottie from "lottie-web"
 import ChevronRight from "react-feather/dist/icons/chevron-right"
+import Loadable from "react-loadable"
 
 import ScrollUpOnMount from "app/components/ScrollUpOnMount"
 import SetMeta from "app/components/SetMeta"
@@ -11,11 +12,15 @@ import { docPages } from "app/routes"
 import { useDidMount, useWillUnmount } from "app/helpers"
 
 import pkg from "projectRoot/package.json"
-import { StatusBadges, InstallNpm, InstallAssets } from "./markdownContent"
+import { InstallNpm, InstallAssets } from "./markdownContent"
 import { ANIMATION_DATA } from "./animations"
 
 import "./styles.scss"
 
+const loader = () => import("../../components/Badges")
+const loading = () => <span className="is-visually-hidden">Loading badges</span>
+const StatusBadges = Loadable({ loader, loading })
+
 const { download, introduction } = docPages
 
 export default function Home() {
@@ -72,7 +77,7 @@ export default function Home() {
 
       {/*
        * Title is set here _and_ in public/index.html...
-       * Doing so prevents title changes on other pages from
+       * Doing so prevents title changes on doc pages from
        * persisting if a visitor returns to the home page.
        */}
       <SetMeta

app/pages/Home/Home.js

@@ -41,8 +41,13 @@ const mountComponent = () => {
 }
 
 describe("<Home />", () => {
-  it("renders", () => {
+  it("renders with loading on StatusBadges", () => {
     const wrapper = mountComponent()
     expect(wrapper).toMatchSnapshot()
   })
+
+  it("lazy loads StatusBadges", async () => {
+    const wrapper = await mountComponent()
+    expect(wrapper).toMatchSnapshot()
+  })
 })