Add some more perfunctory coverage of the frontend (#2962)

frontend/components/common.spec.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import { shallow, render } from 'enzyme'
+import { expect } from 'chai'
+import * as common from './common'
+
+import './enzyme-conf.spec'
+
+describe('Common modules', function() {
+  describe('<GlobalStyle />', function() {
+    it('renders', function() {
+      shallow(<common.GlobalStyle />)
+    })
+  })
+
+  describe('<BaseFont />', function() {
+    it('renders', function() {
+      shallow(<common.BaseFont />)
+    })
+  })
+
+  describe('<H2 />', function() {
+    it('renders', function() {
+      shallow(<common.H2 />)
+    })
+  })
+
+  describe('<H3 />', function() {
+    it('renders', function() {
+      shallow(<common.H3 />)
+    })
+  })
+
+  describe('<Badge />', function() {
+    it('renders', function() {
+      shallow(<common.Badge src="/badge/foo-bar-blue.svg" />)
+    })
+
+    it('contains a link to the image', function() {
+      const wrapper = render(<common.Badge src="/badge/foo-bar-blue.svg" />)
+      expect(wrapper.html()).to.contain('<img src="/badge/foo-bar-blue.svg"')
+    })
+  })
+
+  describe('<StyledInput />', function() {
+    it('renders', function() {
+      shallow(<common.StyledInput />)
+    })
+  })
+
+  describe('<InlineInput />', function() {
+    it('renders', function() {
+      shallow(<common.InlineInput />)
+    })
+  })
+
+  describe('<BlockInput />', function() {
+    it('renders', function() {
+      shallow(<common.BlockInput />)
+    })
+  })
+
+  describe('<VerticalSpace />', function() {
+    it('renders', function() {
+      shallow(<common.VerticalSpace />)
+    })
+  })
+})

frontend/components/donate.spec.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { shallow, render } from 'enzyme'
+import { expect } from 'chai'
+import Donate from './donate'
+
+import './enzyme-conf.spec'
+
+describe('<Donate />', function() {
+  it('renders', function() {
+    shallow(<Donate />)
+  })
+
+  it('contains a link to open collective', function() {
+    const wrapper = render(<Donate />)
+    expect(wrapper.html()).to.contain('https://opencollective.com/shields')
+  })
+})

frontend/components/main.spec.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Main from './main'
+
+import './enzyme-conf.spec'
+
+describe('<Main />', function() {
+  it('renders without a category', function() {
+    shallow(<Main pageContext={{}} />)
+  })
+
+  it('renders with a category', function() {
+    shallow(
+      <Main
+        pageContext={{
+          category: { id: 'build', name: 'Build' },
+        }}
+      />
+    )
+  })
+})

frontend/components/usage.spec.js

@@ -14,4 +14,11 @@ describe('<Usage />', function() {
     const wrapper = shallow(<Usage baseUrl="https://example.shields.io" />)
     expect(wrapper).to.contain.text('use them responsibly')
   })
+
+  // This test requires Link to be mocked.
+  //   const wrapper = render(<Usage baseUrl="https://example.shields.io" />)
+  //   expect(wrapper.html()).to.contain(
+  //     'needed for spaces or special characters!'
+  //   )
+  // })
 })