Merge pull request #5027 from alphagov/jsdom-breadcrumbs-template-tests

Update breadcrumbs template tests to use jsdom

src/govuk/components/breadcrumbs/breadcrumbs.yaml

@@ -125,10 +125,12 @@ examples:
     options:
       items:
         - text: <span>Section 1</span>
+          href: /section-1
+        - text: <span>Section 2</span>
   - name: html
     hidden: true
     options:
       items:
         - html: <em>Section 1</em>
+          href: /section-1
         - html: <em>Section 2</em>
-          href: /section-2

src/govuk/components/breadcrumbs/template.jsdom.test.js

@@ -0,0 +1,158 @@
+const { getExamples, render } = require('@govuk-frontend/lib/components')
+
+describe('Breadcrumbs', () => {
+  let examples
+
+  beforeAll(async () => {
+    examples = await getExamples('breadcrumbs')
+  })
+
+  describe('default example', () => {
+    let $component, $list, $listItems
+
+    beforeAll(() => {
+      document.body.innerHTML = render('breadcrumbs', examples.default)
+
+      $component = document.querySelector('.govuk-breadcrumbs')
+      $list = document.querySelector('ol.govuk-breadcrumbs__list')
+      $listItems = document.querySelectorAll('li.govuk-breadcrumbs__list-item')
+    })
+
+    it('includes an ordered list', () => {
+      expect($component).toContainElement($list)
+    })
+
+    it('includes 2 list items within the list', () => {
+      expect($listItems).toHaveLength(2)
+    })
+
+    describe.each([
+      { index: 0, expectedText: 'Section', expectedHref: '/section' },
+      {
+        index: 1,
+        expectedText: 'Sub-section',
+        expectedHref: '/section/sub-section'
+      }
+    ])(
+      'the "$expectedText" breadcrumb',
+      ({ index, expectedText, expectedHref }) => {
+        it(`includes the text "${expectedText}"`, () => {
+          expect($listItems[index]).toHaveTextContent(expectedText)
+        })
+
+        it(`includes a link with the class govuk-breadcrumbs__link`, () => {
+          expect($listItems[index].querySelector('a')).toHaveClass(
+            'govuk-breadcrumbs__link'
+          )
+        })
+
+        it(`includes a link with the href "${expectedHref}"`, () => {
+          expect($listItems[index].querySelector('a')).toHaveAttribute(
+            'href',
+            expectedHref
+          )
+        })
+      }
+    )
+  })
+
+  describe('when the last breadcrumb is the current page', () => {
+    let $lastItem
+
+    beforeAll(() => {
+      document.body.innerHTML = render(
+        'breadcrumbs',
+        examples['with last breadcrumb as current page']
+      )
+
+      $lastItem = document.querySelector(
+        '.govuk-breadcrumbs__list-item:last-child'
+      )
+    })
+
+    it('includes the current page as the last list item', () => {
+      expect($lastItem).toHaveTextContent('Travel abroad')
+    })
+
+    it('does not link the last list item', () => {
+      expect($lastItem.querySelector('a')).toBeNull()
+    })
+
+    it('sets the aria-current attribute to "page"', () => {
+      expect($lastItem).toHaveAttribute('aria-current', 'page')
+    })
+  })
+
+  describe('custom options', () => {
+    it('escapes HTML when using the `text` option', () => {
+      document.body.innerHTML = render('breadcrumbs', examples['html as text'])
+      const $item = document.querySelector('.govuk-breadcrumbs__list-item')
+
+      expect($item).toHaveTextContent('<span>Section 1</span>')
+    })
+
+    it('escapes HTML when using the `text` option without a link', () => {
+      document.body.innerHTML = render('breadcrumbs', examples['html as text'])
+      const $item = document.querySelector(
+        '.govuk-breadcrumbs__list-item:nth-child(2)'
+      )
+
+      expect($item).toHaveTextContent('<span>Section 2</span>')
+    })
+
+    it('does not escape HTML when using the `html` option', () => {
+      document.body.innerHTML = render('breadcrumbs', examples.html)
+      const $item = document.querySelector('.govuk-breadcrumbs__list-item')
+
+      expect($item).toContainHTML('<em>Section 1</em>')
+    })
+
+    it('does not escape HTML when using the `html` option without a link', () => {
+      document.body.innerHTML = render('breadcrumbs', examples.html)
+      const $item = document.querySelector(
+        '.govuk-breadcrumbs__list-item:nth-child(2)'
+      )
+
+      expect($item).toContainHTML('<em>Section 2</em>')
+    })
+
+    it('sets any additional attributes on the link based on the `item.attributes` option', () => {
+      document.body.innerHTML = render(
+        'breadcrumbs',
+        examples['item attributes']
+      )
+      const $breadcrumbLink = document.querySelector('.govuk-breadcrumbs__link')
+
+      expect($breadcrumbLink).toHaveAttribute('data-attribute', 'my-attribute')
+      expect($breadcrumbLink).toHaveAttribute(
+        'data-attribute-2',
+        'my-attribute-2'
+      )
+    })
+
+    it('includes additional classes from the `classes` option', () => {
+      document.body.innerHTML = render('breadcrumbs', examples.classes)
+
+      const $component = document.querySelector('.govuk-breadcrumbs')
+      expect($component).toHaveClass('app-breadcrumbs--custom-modifier')
+    })
+
+    it('adds the `--collapse-on-mobile` modifier class if `collapseOnMobile` is true', () => {
+      document.body.innerHTML = render(
+        'breadcrumbs',
+        examples['with collapse on mobile']
+      )
+
+      const $component = document.querySelector('.govuk-breadcrumbs')
+      expect($component).toHaveClass('govuk-breadcrumbs--collapse-on-mobile')
+    })
+
+    it('sets any additional attributes based on the `attributes` option', () => {
+      document.body.innerHTML = render('breadcrumbs', examples.attributes)
+
+      const $component = document.querySelector('.govuk-breadcrumbs')
+      expect($component).toHaveAttribute('id', 'my-navigation')
+      expect($component).toHaveAttribute('role', 'navigation')
+    })
+  })
+})