WIP: export tests as a 'spec'

package.json

@@ -91,6 +91,7 @@
     "snapshotSerializers": [
       "jest-serializer-html"
     ],
+    "testRegex": "(/__tests__/.*|(\\.|/)(test))\\.jsx?$",
     "globalSetup": "./lib/puppeteer/setup.js",
     "globalTeardown": "./lib/puppeteer/teardown.js"
   }

src/components/button/template.spec.js

@@ -0,0 +1,249 @@
+const axe = require('../../../lib/axe-helper')
+const { render: defaultRender, getExamples } = require('../../../lib/jest-helpers')
+
+const examples = getExamples('button')
+
+const spec = ({ render = defaultRender, it, expect, describe }) => {
+  it('default example passes accessibility tests', async () => {
+    const $ = render('button', examples.default)
+
+    const results = await axe($.html())
+    expect(results).toHaveNoViolations()
+  })
+
+  describe('button element', () => {
+    it('renders the default example', () => {
+      const $ = render('button', examples.default)
+
+      const $component = $('.govuk-button')
+      expect($component.get(0).tagName).toEqual('button')
+      expect($component.text()).toContain('Save and continue')
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('button', {
+        element: 'button',
+        attributes: {
+          'aria-controls': 'example-id',
+          'data-tracking-dimension': '123'
+        }
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('aria-controls')).toEqual('example-id')
+      expect($component.attr('data-tracking-dimension')).toEqual('123')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('button', {
+        element: 'button',
+        classes: 'app-button--custom-modifier'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.hasClass('app-button--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with disabled', () => {
+      const $ = render('button', examples.disabled)
+
+      const $component = $('.govuk-button')
+      expect($component.attr('aria-disabled')).toEqual('true')
+      expect($component.attr('disabled')).toEqual('disabled')
+      expect($component.hasClass('govuk-button--disabled')).toBeTruthy()
+    })
+
+    it('renders with name', () => {
+      const $ = render('button', {
+        element: 'button',
+        name: 'start-now'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('name')).toEqual('start-now')
+    })
+
+    it('renders with type', () => {
+      const $ = render('button', {
+        element: 'button',
+        type: 'button'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('type')).toEqual('button')
+    })
+  })
+
+  describe('link', () => {
+    it('renders with anchor, href and an accessible role of button', () => {
+      const $ = render('button', {
+        element: 'a',
+        href: '/',
+        text: 'Continue'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.get(0).tagName).toEqual('a')
+      expect($component.attr('href')).toEqual('/')
+      expect($component.attr('role')).toEqual('button')
+      expect($component.text()).toContain('Continue')
+    })
+
+    it('renders with hash href if no href passed', () => {
+      const $ = render('button', {
+        element: 'a'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('href')).toEqual('#')
+    })
+
+    it('renders with value', () => {
+      const $ = render('button', {
+        element: 'button',
+        value: 'start'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('value')).toEqual('start')
+    })
+
+    it('renders with html', () => {
+      const $ = render('button', {
+        element: 'button',
+        html: 'Start <em>now</em>'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.html()).toContain('Start <em>now</em>')
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('button', {
+        element: 'a',
+        attributes: {
+          'aria-controls': 'example-id',
+          'data-tracking-dimension': '123'
+        }
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('aria-controls')).toEqual('example-id')
+      expect($component.attr('data-tracking-dimension')).toEqual('123')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('button', {
+        element: 'a',
+        classes: 'app-button--custom-modifier'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.hasClass('app-button--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with disabled', () => {
+      const $ = render('button', examples['link disabled'])
+
+      const $component = $('.govuk-button')
+      expect($component.hasClass('govuk-button--disabled')).toBeTruthy()
+    })
+  })
+
+  describe('with explicit input button set by "element"', () => {
+    it('renders with anchor, href and an accessible role of button', () => {
+      const $ = render('button', examples['input'])
+
+      const $component = $('.govuk-button')
+      expect($component.get(0).tagName).toEqual('input')
+      expect($component.attr('type')).toEqual('submit')
+    })
+
+    it('renders with attributes', () => {
+      const $ = render('button', {
+        element: 'input',
+        attributes: {
+          'aria-controls': 'example-id',
+          'data-tracking-dimension': '123'
+        }
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('aria-controls')).toEqual('example-id')
+      expect($component.attr('data-tracking-dimension')).toEqual('123')
+    })
+
+    it('renders with classes', () => {
+      const $ = render('button', {
+        element: 'input',
+        classes: 'app-button--custom-modifier'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.hasClass('app-button--custom-modifier')).toBeTruthy()
+    })
+
+    it('renders with disabled', () => {
+      const $ = render('button', {
+        element: 'input',
+        disabled: true
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('aria-disabled')).toEqual('true')
+      expect($component.attr('disabled')).toEqual('disabled')
+      expect($component.hasClass('govuk-button--disabled')).toBeTruthy()
+    })
+
+    it('renders with name', () => {
+      const $ = render('button', {
+        element: 'input',
+        name: 'start-now'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('name')).toEqual('start-now')
+    })
+
+    it('renders with type', () => {
+      const $ = render('button', {
+        element: 'input',
+        type: 'button',
+        text: 'Start now'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.attr('type')).toEqual('button')
+    })
+  })
+
+  describe('implicitly as no "element" param is set', () => {
+    it('renders a link if you pass an href', () => {
+      const $ = render('button', {
+        href: '/'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.get(0).tagName).toEqual('a')
+    })
+
+    it('renders a button if you pass html', () => {
+      const $ = render('button', {
+        html: 'Start <em>now</em>'
+      })
+
+      const $component = $('.govuk-button')
+      expect($component.get(0).tagName).toEqual('button')
+    })
+
+    it('renders a button if you don\'t pass anything', () => {
+      const $ = render('button', {})
+
+      const $component = $('.govuk-button')
+      expect($component.get(0).tagName).toEqual('button')
+      expect($component.attr('type')).toEqual('submit')
+    })
+  })
+}
+
+module.exports = spec