Add rudimentary tests for HomePage

dev-portal/package.json

@@ -43,6 +43,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.0.0",
+    "@testing-library/react": "^8.0.4",
     "mobx-react-devtools": "^6.0.3",
     "node-fetch": "^2.3.0",
     "react-scripts": "^3.0.1"

dev-portal/src/__tests__/utils.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Router } from 'react-router-dom'
+import { createMemoryHistory } from 'history'
+import { render } from '@testing-library/react'
+
+/*
+ * Jest requires at least one test per file in __tests__.
+ */
+test('', () => {})
+
+/*
+ * Wrapper around react-testing-library's `render` function, providing a dummy
+ * Router. Implementation taken from the react-testing-library docs [1].
+ *
+ * [1]: https://testing-library.com/docs/example-react-router
+ */
+export const renderWithRouter = (ui, {
+  route = '/',
+  history = createMemoryHistory({ initialEntries: [route] })
+} = {}) => ({
+  ...render(<Router history={history}>{ui}</Router>),
+  history
+})

dev-portal/src/pages/Home.jsx

@@ -21,8 +21,12 @@ export const HomePage = observer(() => (
       <Image centered size='small' src='/custom-content/home-image.png' />
       <Header as='h1' style={{ color: "whitesmoke" }}>{fragments.Home.header}</Header>
       <p>{fragments.Home.tagline}</p>
-      <Link to="/getting-started"><Button positive>{fragments.Home.gettingStartedButton}</Button></Link>
-      <Link to="/apis" style={{ padding: "0.78571429em 1.5em 0.78571429em", color: "white" }}>{fragments.Home.apiListButton}</Link>
+      <Link to="/getting-started" data-testid="gettingStartedLink">
+        <Button positive>{fragments.Home.gettingStartedButton}</Button>
+      </Link>
+      <Link to="/apis" style={{ padding: "0.78571429em 1.5em 0.78571429em", color: "white" }} data-testid="apiListLink">
+        {fragments.Home.apiListButton}
+      </Link>
     </Segment>
     <Segment vertical style={{ padding: "40px 0px", margin: "0 !important" }}>
       <Container fluid text textAlign='justified'>

dev-portal/src/pages/__tests__/Home.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {cleanup} from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import {renderWithRouter} from '__tests__/utils'
+
+import {fragments} from 'services/get-fragments'
+
+import {HomePage} from 'pages/Home'
+
+beforeEach(() => {
+  // Mock fragment
+  fragments.Home = { jsx: () => <p>Home mock</p> }
+})
+
+afterEach(cleanup)
+
+test('Page renders', async () => {
+  const { baseElement } = renderWithRouter(<HomePage />)
+  expect(baseElement).toBeTruthy()
+})
+
+test('Get Started link is visible', async () => {
+  const rendered = renderWithRouter(<HomePage />)
+  const gettingStartedLink = await rendered.findByTestId('gettingStartedLink')
+  expect(gettingStartedLink).toBeVisible()
+})