From a677c5bbef2a3226c25106f8baebe8c8572062ba Mon Sep 17 00:00:00 2001 From: Paul Melnikow Date: Mon, 10 Dec 2018 17:20:01 -0500 Subject: [PATCH] Add some basic frontend tests (#2490) The frontend has a few tests in `lib/` but not all of that is covered. The components are not covered at all. It's difficult to make changes to the frontend because you have to manually test that things haven't broken. This PR uses [Enzyme](https://airbnb.io/enzyme/) to add some [shallow-rendering tests](https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md), which are essentially unit tests of the components. This should pave the way for functional tests of the more complex components. --- .circleci/config.yml | 5 +- frontend/components/category-headings.spec.js | 32 ++ frontend/components/enzyme-conf.spec.js | 8 + frontend/components/footer.spec.js | 17 + frontend/components/header.spec.js | 17 + frontend/components/meta.spec.js | 21 + frontend/components/usage.spec.js | 17 + frontend/lib/generate-image-markup.spec.js | 17 + .../lib/service-definitions/index.spec.js | 16 + package-lock.json | 507 ++++++++++++++++-- package.json | 29 +- 11 files changed, 620 insertions(+), 66 deletions(-) create mode 100644 frontend/components/category-headings.spec.js create mode 100644 frontend/components/enzyme-conf.spec.js create mode 100644 frontend/components/footer.spec.js create mode 100644 frontend/components/header.spec.js create mode 100644 frontend/components/meta.spec.js create mode 100644 frontend/components/usage.spec.js create mode 100644 frontend/lib/generate-image-markup.spec.js create mode 100644 frontend/lib/service-definitions/index.spec.js diff --git a/.circleci/config.yml b/.circleci/config.yml index 33141d0602949..cd07fe3333ca3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -139,9 +139,12 @@ jobs: name: Install dependencies command: npm install + - run: + name: Prepare frontend tests + command: npm run defs && npm run features + - run: name: Frontend unit tests - when: always command: npm run test:js:frontend - run: diff --git a/frontend/components/category-headings.spec.js b/frontend/components/category-headings.spec.js new file mode 100644 index 0000000000000..1614635744412 --- /dev/null +++ b/frontend/components/category-headings.spec.js @@ -0,0 +1,32 @@ +import React from 'react' +import { shallow } from 'enzyme' +import { expect } from 'chai' +import { CategoryHeading, CategoryHeadings } from './category-headings' + +import './enzyme-conf.spec' + +const exampleCategories = [{ id: 'cat', name: 'Example category' }] + +describe('', function() { + it('renders', function() { + shallow() + }) + + it('contains the expected heading', function() { + const wrapper = shallow() + expect(wrapper).to.contain(

Example category

) + }) +}) + +describe('', function() { + it('renders', function() { + shallow() + }) + + it('contains the expected child', function() { + const wrapper = shallow() + expect(wrapper).to.contain( + + ) + }) +}) diff --git a/frontend/components/enzyme-conf.spec.js b/frontend/components/enzyme-conf.spec.js new file mode 100644 index 0000000000000..b72bc4ddf9cc0 --- /dev/null +++ b/frontend/components/enzyme-conf.spec.js @@ -0,0 +1,8 @@ +import Enzyme from 'enzyme' +import Adapter from 'enzyme-adapter-react-16' +import chai from 'chai' +import chaiEnzyme from 'chai-enzyme' + +Enzyme.configure({ adapter: new Adapter() }) + +chai.use(chaiEnzyme()) diff --git a/frontend/components/footer.spec.js b/frontend/components/footer.spec.js new file mode 100644 index 0000000000000..fba5ff04885b7 --- /dev/null +++ b/frontend/components/footer.spec.js @@ -0,0 +1,17 @@ +import React from 'react' +import { shallow } from 'enzyme' +import { expect } from 'chai' +import Footer from './footer' + +import './enzyme-conf.spec' + +describe('