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

@@ -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:

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('<CategoryHeading />', function() {
+  it('renders', function() {
+    shallow(<CategoryHeading category={exampleCategories[0]} />)
+  })
+
+  it('contains the expected heading', function() {
+    const wrapper = shallow(<CategoryHeading category={exampleCategories[0]} />)
+    expect(wrapper).to.contain(<h3 id="cat">Example category</h3>)
+  })
+})
+
+describe('<CategoryHeadings />', function() {
+  it('renders', function() {
+    shallow(<CategoryHeadings categories={exampleCategories} />)
+  })
+
+  it('contains the expected child', function() {
+    const wrapper = shallow(<CategoryHeadings categories={exampleCategories} />)
+    expect(wrapper).to.contain(
+      <CategoryHeading category={exampleCategories[0]} />
+    )
+  })
+})

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

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('<Footer />', function() {
+  it('renders', function() {
+    shallow(<Footer baseUrl="https://example.shields.io" />)
+  })
+
+  it('contains a link to the status page', function() {
+    const wrapper = shallow(<Footer baseUrl="https://example.shields.io" />)
+    expect(wrapper).to.contain(<a href="https://status.shields.io/">Status</a>)
+  })
+})

frontend/components/header.spec.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { expect } from 'chai'
+import Header from './header'
+
+import './enzyme-conf.spec'
+
+describe('<Header />', function() {
+  it('renders', function() {
+    shallow(<Header />)
+  })
+
+  it('contains the word Hackable', function() {
+    const wrapper = shallow(<Header />)
+    expect(wrapper).to.contain.text('Hackable')
+  })
+})

frontend/components/meta.spec.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { expect } from 'chai'
+import Meta from './meta'
+
+import './enzyme-conf.spec'
+
+describe('<Meta />', function() {
+  it('renders', function() {
+    shallow(<Meta />)
+  })
+
+  it('sets the page title', function() {
+    const wrapper = shallow(<Meta />)
+    expect(wrapper).to.contain(
+      <title>
+        Shields.io: Quality metadata badges for open source projects
+      </title>
+    )
+  })
+})

frontend/components/usage.spec.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { expect } from 'chai'
+import Usage from './usage'
+
+import './enzyme-conf.spec'
+
+describe('<Usage />', function() {
+  it('renders', function() {
+    shallow(<Usage baseUrl="https://example.shields.io" />)
+  })
+
+  it('contains some of the expected text', function() {
+    const wrapper = shallow(<Usage baseUrl="https://example.shields.io" />)
+    expect(wrapper).to.contain.text('use them responsibly')
+  })
+})

frontend/lib/generate-image-markup.spec.js

@@ -0,0 +1,17 @@
+import { test, given } from 'sazerac'
+import generateAllMarkup from './generate-image-markup'
+
+test(generateAllMarkup, () => {
+  given(
+    'https://img.shields.io/badge.svg',
+    'https://example.com/example',
+    'Example'
+  ).expect({
+    markdown:
+      '[![Example](https://img.shields.io/badge.svg)](https://example.com/example)',
+    reStructuredText:
+      '.. image:: https://img.shields.io/badge.svg   :alt: Example   :target: https://example.com/example',
+    asciiDoc:
+      'image:https://img.shields.io/badge.svg["Example",link="https://example.com/example"]',
+  })
+})

frontend/lib/service-definitions/index.spec.js

@@ -0,0 +1,16 @@
+import { expect } from 'chai'
+import { test, given } from 'sazerac'
+import { findCategory, getDefinitionsForCategory } from './index'
+
+describe('Service definition helpers', function() {
+  test(findCategory, () => {
+    given('build').expect({ id: 'build', name: 'Build' })
+    given('foo').expect(undefined)
+  })
+
+  it('getDefinitionsForCategory', function() {
+    expect(getDefinitionsForCategory('build'))
+      .to.have.length.greaterThan(10)
+      .and.lessThan(50)
+  })
+})