From 36710cfeb9bbbfe0d4f47ab46ba5b01b3f812c01 Mon Sep 17 00:00:00 2001 From: Alex Chew Date: Tue, 9 Jul 2019 12:14:15 -0700 Subject: [PATCH] Add rudimentary tests for HomePage --- dev-portal/package-lock.json | 136 ++++++++++++++++++++++++ dev-portal/package.json | 2 + dev-portal/src/__tests__/utils.jsx | 23 ++++ dev-portal/src/pages/Home.jsx | 8 +- dev-portal/src/pages/__tests__/Home.jsx | 27 +++++ 5 files changed, 194 insertions(+), 2 deletions(-) create mode 100644 dev-portal/src/__tests__/utils.jsx create mode 100644 dev-portal/src/pages/__tests__/Home.jsx diff --git a/dev-portal/package-lock.json b/dev-portal/package-lock.json index bad4dd4bd..f31007d7d 100644 --- a/dev-portal/package-lock.json +++ b/dev-portal/package-lock.json @@ -1336,6 +1336,12 @@ "prop-types": "^15.6.2" } }, + "@sheerun/mutationobserver-shim": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz", + "integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==", + "dev": true + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -1533,6 +1539,79 @@ "loader-utils": "^1.1.0" } }, + "@testing-library/dom": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.5.1.tgz", + "integrity": "sha512-FEKxR51dCBixz8WoIlTHJucLYlVSZ4oMaWcnbID8SKRy+07JNACwUDHzpeeQv0853Hme91niHnvNebwGWZu21w==", + "dev": true, + "requires": { + "@babel/runtime": "^7.4.5", + "@sheerun/mutationobserver-shim": "^0.3.2", + "aria-query": "3.0.0", + "pretty-format": "^24.8.0", + "wait-for-expect": "^1.2.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.2.tgz", + "integrity": "sha512-9M29wrrP7//JBGX70+IrDuD1w4iOYhUGpJNMQJVNAXue+cFeFlMTqBECouIziXPUphlgrfjcfiEpGX4t0WGK4g==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "@testing-library/jest-dom": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.0.0.tgz", + "integrity": "sha512-YQA/LnRRfqHV5YRauawOGgMDgq43XfyqCz3whmxIPyrfvTdjLCNyY/BseGaa48y54yb3oiRo/NZT0oXNMQdkTA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.5.1", + "chalk": "^2.4.1", + "css": "^2.2.3", + "css.escape": "^1.5.1", + "jest-diff": "^24.0.0", + "jest-matcher-utils": "^24.0.0", + "lodash": "^4.17.11", + "pretty-format": "^24.0.0", + "redent": "^3.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.3.tgz", + "integrity": "sha512-09kHrO2Y0JWybW20qnt+UMlNTj7NUQByP6ubyq50Yj1QCDhbHfEmWk/uso+SaEi5XKNEWYVKbBgdiZisIaBPmw==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "@testing-library/react": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-8.0.4.tgz", + "integrity": "sha512-omm4D00Z0aMaWfPRRP4X6zIaOVb0Kf1Yc1H5VE4id9D0pQRiBcTtmjbN0kZgT8rQGxHhVAuv1NuwFwMTwKzFqg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.4.5", + "@testing-library/dom": "^5.0.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.2.tgz", + "integrity": "sha512-9M29wrrP7//JBGX70+IrDuD1w4iOYhUGpJNMQJVNAXue+cFeFlMTqBECouIziXPUphlgrfjcfiEpGX4t0WGK4g==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, "@types/babel__core": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.2.tgz", @@ -4427,6 +4506,26 @@ "randomfill": "^1.0.3" } }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "css-blank-pseudo": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz", @@ -7249,6 +7348,12 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "dev": true + }, "indexes-of": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", @@ -9671,6 +9776,12 @@ "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==", "dev": true }, + "min-indent": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz", + "integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=", + "dev": true + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -12318,6 +12429,16 @@ "minimatch": "3.0.4" } }, + "redent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", + "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", + "dev": true, + "requires": { + "indent-string": "^4.0.0", + "strip-indent": "^3.0.0" + } + }, "redux": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz", @@ -13751,6 +13872,15 @@ "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, + "strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "requires": { + "min-indent": "^1.0.0" + } + }, "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", @@ -14772,6 +14902,12 @@ "xml-name-validator": "^3.0.0" } }, + "wait-for-expect": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.2.0.tgz", + "integrity": "sha512-EJhKpA+5UHixduMBEGhTFuLuVgQBKWxkFbefOdj2bbk2/OpA5Opsc4aUTGmF+qJ+v3kTGxDRNYwKaT4j6g5n8Q==", + "dev": true + }, "walker": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz", diff --git a/dev-portal/package.json b/dev-portal/package.json index 2608c84fd..04bede631 100644 --- a/dev-portal/package.json +++ b/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" diff --git a/dev-portal/src/__tests__/utils.jsx b/dev-portal/src/__tests__/utils.jsx new file mode 100644 index 000000000..42841f2a9 --- /dev/null +++ b/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({ui}), + history +}) diff --git a/dev-portal/src/pages/Home.jsx b/dev-portal/src/pages/Home.jsx index 7c5f55909..b1d076f65 100755 --- a/dev-portal/src/pages/Home.jsx +++ b/dev-portal/src/pages/Home.jsx @@ -21,8 +21,12 @@ export const HomePage = observer(() => (
{fragments.Home.header}

{fragments.Home.tagline}

- - {fragments.Home.apiListButton} + + + + + {fragments.Home.apiListButton} + diff --git a/dev-portal/src/pages/__tests__/Home.jsx b/dev-portal/src/pages/__tests__/Home.jsx new file mode 100644 index 000000000..719fc5768 --- /dev/null +++ b/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: () =>

Home mock

} +}) + +afterEach(cleanup) + +test('Page renders', async () => { + const { baseElement } = renderWithRouter() + expect(baseElement).toBeTruthy() +}) + +test('Get Started link is visible', async () => { + const rendered = renderWithRouter() + const gettingStartedLink = await rendered.findByTestId('gettingStartedLink') + expect(gettingStartedLink).toBeVisible() +})