Merge pull request #500 from alphagov/panel-component-tests

Add Panel component tests

CHANGELOG.md

@@ -47,6 +47,7 @@ Internal:
 - 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 textarea component (PR [#497](https://github.com/alphagov/govuk-frontend/pull/497))
+- Add tests for panel component (PR [#500](https://github.com/alphagov/govuk-frontend/pull/500))
 
 ## 0.0.22-alpha (Breaking release)
 

src/components/panel/README.md

@@ -21,38 +21,15 @@ More information about when to use panel can be found on [GOV.UK Design System](
         Application complete
       </h2>
       <div class="govuk-c-panel__body">
-        Your reference number<br><strong>HDJ2123F</strong>
+        Your reference number: HDJ2123F
       </div>
     </div>
 
 #### Macro
 
     {{ govukPanel({
       "titleText": "Application complete",
-      "html": "Your reference number<br><strong>HDJ2123F</strong>"
-    }) }}
-
-### Panel--no-reference-number
-
-[Preview the panel--no-reference-number example](http://govuk-frontend-review.herokuapp.com/components/panel/no-reference-number/preview)
-
-#### Markup
-
-    <div class="govuk-c-panel govuk-c-panel--confirmation extra-dummy-class">
-      <h2 class="govuk-c-panel__title">
-        Application complete
-      </h2>
-      <div class="govuk-c-panel__body">
-        Thank you for your application
-      </div>
-    </div>
-
-#### Macro
-
-    {{ govukPanel({
-      "classes": "extra-dummy-class",
-      "titleText": "Application complete",
-      "text": "Thank you for your application"
+      "text": "Your reference number: HDJ2123F"
     }) }}
 
 ## Dependencies

src/components/panel/panel.yaml

@@ -2,9 +2,4 @@ examples:
 - name: default
   data:
     titleText: Application complete
-    html: Your reference number<br><strong>HDJ2123F</strong>
-- name: no-reference-number
-  data:
-    classes: extra-dummy-class
-    titleText: Application complete
-    text: Thank you for your application
+    text: 'Your reference number: HDJ2123F'

src/components/panel/template.test.js

@@ -0,0 +1,79 @@
+/* globals describe, it, expect */
+
+const { render, getExamples } = require('../../../lib/jest-helpers')
+
+const examples = getExamples('panel')
+
+describe('Panel', () => {
+  it('renders title text', () => {
+    const $ = render('panel', examples.default)
+    const panelTitle = $('.govuk-c-panel__title').text().trim()
+
+    expect(panelTitle).toEqual('Application complete')
+  })
+
+  it('allows title text to be passed whilst escaping HTML entities', () => {
+    const $ = render('panel', {
+      titleText: 'Application <strong>not</strong> complete'
+    })
+
+    const panelTitle = $('.govuk-c-panel__title').html().trim()
+    expect(panelTitle).toEqual('Application &lt;strong&gt;not&lt;/strong&gt; complete')
+  })
+
+  it('allows title HTML to be passed un-escaped', () => {
+    const $ = render('panel', {
+      titleHtml: 'Application <strong>not</strong> complete'
+    })
+
+    const panelTitle = $('.govuk-c-panel__title').html().trim()
+    expect(panelTitle).toEqual('Application <strong>not</strong> complete')
+  })
+
+  it('renders body text', () => {
+    const $ = render('panel', examples.default)
+    const panelBodyText = $('.govuk-c-panel__body').text().trim()
+
+    expect(panelBodyText).toEqual('Your reference number: HDJ2123F')
+  })
+
+  it('allows body text to be passed whilst escaping HTML entities', () => {
+    const $ = render('panel', {
+      text: 'Your reference number<br><strong>HDJ2123F</strong>'
+    })
+
+    const panelBodyText = $('.govuk-c-panel__body').html().trim()
+    expect(panelBodyText).toEqual('Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;')
+  })
+
+  it('allows body HTML to be passed un-escaped', () => {
+    const $ = render('panel', {
+      html: 'Your reference number<br><strong>HDJ2123F</strong>'
+    })
+
+    const panelBodyText = $('.govuk-c-panel__body').html().trim()
+    expect(panelBodyText).toEqual('Your reference number<br><strong>HDJ2123F</strong>')
+  })
+
+  it('allows additional classes to be added to the component', () => {
+    const $ = render('panel', {
+      classes: 'extra-class one-more-class'
+    })
+
+    const $component = $('.govuk-c-panel')
+    expect($component.hasClass('extra-class one-more-class')).toBeTruthy()
+  })
+
+  it('allows additional attributes to be added to the component', () => {
+    const $ = render('panel', {
+      attributes: {
+        'first-attribute': 'true',
+        'second-attribute': 'false'
+      }
+    })
+
+    const $component = $('.govuk-c-panel')
+    expect($component.attr('first-attribute')).toEqual('true')
+    expect($component.attr('second-attribute')).toEqual('false')
+  })
+})