Merge pull request #294 from alex-chew/setup-ui-testing

Set up UI tests with React Testing Library

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/index.js

@@ -7,8 +7,8 @@ import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
 
 import * as queryString from 'query-string'
 
-// content-fragments (import here to start this ASAP)
-import 'services/get-fragments'
+// content-fragments
+import { loadFragments } from 'services/get-fragments'
 
 // semantic-ui
 import 'semantic-ui-css/semantic.css'
@@ -30,6 +30,8 @@ import ApiSearch from './components/ApiSearch'
 import { isAdmin, init, login, logout } from 'services/self'
 import './index.css';
 
+loadFragments()
+
 // TODO: Feedback should be enabled if
 // the following is true && the current
 // user is not an administrator

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()
+})

dev-portal/src/services/get-fragments.js

@@ -15,9 +15,11 @@ import Markdown from 'react-markdown/with-html'
 
 export const fragments = observable({})
 
-loadHtml('/custom-content/content-fragments/GettingStarted.md', 'GettingStarted')
-loadHtml('/custom-content/content-fragments/Home.md', 'Home')
-loadHtml('/custom-content/content-fragments/APIs.md', 'APIs')
+export const loadFragments = () => {
+  loadHtml('/custom-content/content-fragments/GettingStarted.md', 'GettingStarted')
+  loadHtml('/custom-content/content-fragments/Home.md', 'Home')
+  loadHtml('/custom-content/content-fragments/APIs.md', 'APIs')
+}
 
 /**
  * 
@@ -63,4 +65,4 @@ const renderers = {
     // replace links with react-router-dom tags so that they 
     return <Link to={href} {...props} />
   }
-}
+}