Add tests for skip link

CHANGELOG.md

@@ -46,6 +46,7 @@ Internal:
 - Add tests for radios component (PR [#476](https://github.com/alphagov/govuk-frontend/pull/476))
 - Add tests for input component (PR [#478](https://github.com/alphagov/govuk-frontend/pull/478))
 - Add tests for date-input component (PR [#495](https://github.com/alphagov/govuk-frontend/pull/495))
+- Add tests for skip-link component (PR [#498](https://github.com/alphagov/govuk-frontend/pull/498))
 
 ## 0.0.22-alpha (Breaking release)
 

src/components/skip-link/README.md

@@ -25,6 +25,22 @@ More information about when to use skip-link can be found on [GOV.UK Design Syst
       "href": "#content"
     }) }}
 
+### Skip-link--with-focus
+
+[Preview the skip-link--with-focus example](http://govuk-frontend-review.herokuapp.com/components/skip-link/with-focus/preview)
+
+#### Markup
+
+    <a href="#content" class="govuk-c-skip-link :focus">Skip to main content</a>
+
+#### Macro
+
+    {{ govukSkipLink({
+      "classes": ":focus",
+      "text": "Skip to main content",
+      "href": "#content"
+    }) }}
+
 ## Dependencies
 
 To consume the skip-link component you must be running npm version 5 or above.

src/components/skip-link/skip-link.yaml

@@ -3,3 +3,10 @@ examples:
   data:
     text: Skip to main content
     href: '#content'
+
+- name: with-focus
+  data:
+    classes: :focus
+    text: Skip to main content
+    href: '#content'
+

src/components/skip-link/template.test.js

@@ -0,0 +1,70 @@
+/* globals describe, it, expect */
+
+const { render } = require('../../../lib/jest-helpers')
+
+describe('skip-link', () => {
+  it('renders href', () => {
+    const $ = render('skip-link', {
+      href: '#custom'
+    })
+
+    const $component = $('.govuk-c-skip-link')
+    expect($component.attr('href')).toEqual('#custom')
+  })
+
+  it('renders default href', () => {
+    const $ = render('skip-link', {})
+
+    const $component = $('.govuk-c-skip-link')
+    expect($component.attr('href')).toEqual('#content')
+  })
+
+  it('renders text', () => {
+    const $ = render('skip-link', {
+      text: 'skip'
+    })
+
+    const $component = $('.govuk-c-skip-link')
+    expect($component.html()).toEqual('skip')
+  })
+
+  it('renders escaped html in text', () => {
+    const $ = render('skip-link', {
+      text: '<p>skip</p>'
+    })
+
+    const $component = $('.govuk-c-skip-link')
+    expect($component.html()).toEqual('&lt;p&gt;skip&lt;/p&gt;')
+  })
+
+  it('renders html', () => {
+    const $ = render('skip-link', {
+      html: '<p>skip</p>'
+    })
+
+    const $component = $('.govuk-c-skip-link')
+    expect($component.html()).toEqual('<p>skip</p>')
+  })
+
+  it('renders classes', () => {
+    const $ = render('skip-link', {
+      classes: 'app-c-skip-link--custom-class'
+    })
+
+    const $component = $('.govuk-c-skip-link')
+    expect($component.hasClass('app-c-skip-link--custom-class')).toBeTruthy()
+  })
+
+  it('renders attributes', () => {
+    const $ = render('skip-link', {
+      attributes: {
+        'data-test': 'attribute',
+        'aria-label': 'Skip to content'
+      }
+    })
+
+    const $component = $('.govuk-c-skip-link')
+    expect($component.attr('data-test')).toEqual('attribute')
+    expect($component.attr('aria-label')).toEqual('Skip to content')
+  })
+})