Merge pull request #913 from alphagov/fix-undefined-class-date-input

Fix undefined class date input

CHANGELOG.md

@@ -42,6 +42,9 @@
   the name ‘year’ use any other width than 2 characters
   ([PR #908])(https://github.com/alphagov/govuk-frontend/pull/908)
 
+- Fix undefined class displaying in date input
+  ([PR #913])(https://github.com/alphagov/govuk-frontend/pull/913)
+
 ## 1.1.0 (feature release)
 
 🆕 New features:

src/components/date-input/template.njk

@@ -80,7 +80,7 @@
           classes: "govuk-date-input__label"
         },
         id: item.id if item.id else (params.id + "-" + item.name),
-        classes: "govuk-date-input__input " + inputWidthClass + item.classes,
+        classes: "govuk-date-input__input " + inputWidthClass + (item.classes if item.classes),
         name: (params.name + "-" + item.name) if params.name else item.name,
         value: item.value,
         type: "number",

src/components/date-input/template.test.js

@@ -362,6 +362,55 @@ describe('Date input', () => {
     expect(htmlWithClassName($, '.govuk-fieldset')).toMatchSnapshot()
   })
 
+  it('can have classes for individual items', () => {
+    const $ = render('date-input', {
+      items: [
+        {
+          'name': 'day',
+          'classes': 'app-date-input__day'
+        },
+        {
+          'name': 'month',
+          'classes': 'app-date-input__month'
+        },
+        {
+          'name': 'year',
+          'classes': 'app-date-input__year'
+        }
+      ]
+    })
+
+    const $dayInput = $('[name="day"]')
+    const $monthInput = $('[name="month"]')
+    const $yearInput = $('[name="year"]')
+    expect($dayInput.hasClass('app-date-input__day')).toBeTruthy()
+    expect($monthInput.hasClass('app-date-input__month')).toBeTruthy()
+    expect($yearInput.hasClass('app-date-input__year')).toBeTruthy()
+  })
+
+  it('does not set classes as undefined if none are defined', () => {
+    const $ = render('date-input', {
+      items: [
+        {
+          'name': 'day'
+        },
+        {
+          'name': 'month'
+        },
+        {
+          'name': 'year'
+        }
+      ]
+    })
+
+    const $dayInput = $('[name="day"]')
+    const $monthInput = $('[name="month"]')
+    const $yearInput = $('[name="year"]')
+    expect($dayInput.hasClass('undefined')).toBeFalsy()
+    expect($monthInput.hasClass('undefined')).toBeFalsy()
+    expect($yearInput.hasClass('undefined')).toBeFalsy()
+  })
+
   // https://github.com/alphagov/govuk-frontend/issues/905
   describe('to maintain backwards compatibility', () => {
     it('automatically sets width for the day input if no width class provided', () => {