Merge pull request #357 from ZarifS/master

Updated Datetime renderer with holding data and included integration tests.

addon/components/inputs/datetime.js

@@ -1,3 +1,6 @@
+import computed, {readOnly} from 'ember-computed-decorators'
+import moment from 'moment'
+
 import AbstractInput from './abstract-input'
 import layout from 'ember-frost-bunsen/templates/components/frost-bunsen-input-datetime'
 
@@ -15,10 +18,29 @@ export default AbstractInput.extend({
 
   // == Computed Properties ====================================================
 
+  @readOnly
+  @computed('value')
+  date (value) {
+    const date = moment(value).format('YYYY-MM-DD')
+    return /^\d{4}-\d\d-\d\d$/.test(date) ? date : ''
+  },
+
+  @readOnly
+  @computed('value')
+  time (value) {
+    const time = moment(value).format('HH:mm:ss')
+    return /^\d\d:\d\d:\d\d$/.test(time) ? time : ''
+  },
+
   // == Functions ==============================================================
 
+  parseValue (value) {
+    return value.format('YYYY-MM-DDTHH:mm:ssZ')
+  },
+
   // == Actions ===============================================================
 
   actions: {
   }
 })
+

addon/templates/components/frost-bunsen-input-datetime.hbs

@@ -4,22 +4,21 @@
 		<div class='frost-bunsen-required'>Required</div>
 	{{/if}}
 </label>
-<div class={{inputWrapperClassName}}>
-	{{frost-date-picker
-		class=valueClassName
-		currentValue=(readonly transformedValue)
-		disabled=disabled
-		hook=(concat hook '-datePicker')
-		onFocusIn=(action 'hideErrorMessage')
-		onFocusOut=(action 'showErrorMessage')
-		onSelect=(action 'handleChange')
-	}}
-	{{frost-time-picker
-		hook=(concat hook '-timePicker')
-		currentValue=myTime
-		onSelect=(action 'handleChange')
-	}}
-</div>
+{{#if disabled}}
+  {{date}} {{time}}
+{{else}}
+	<div class={{inputWrapperClassName}}>
+		{{frost-date-time-picker
+			hook=(concat hook '-datetimePicker')
+			currentValue=(readonly value)
+			defaultDate=(readonly date)
+			defaultTime=(readonly time)
+			onFocusIn=(action 'hideErrorMessage')
+			onFocusOut=(action 'showErrorMessage')
+			onSelect=(action 'handleChange')
+		}}
+	</div>
+{{/if}}	
 {{#if renderErrorMessage}}
   <div class="frost-bunsen-error">
     {{renderErrorMessage}}

test-support/helpers/ember-frost-bunsen.js

@@ -35,6 +35,9 @@ export {
 } from './ember-frost-bunsen/renderers/date'
 
 export {
+  expectDateTimeInputs as expectInputsBunsenDatetimeRenderer,
+  expectClockpicker as expectClockpickerBunsenDatetimeRenderer,
+  expectOnChangeState as expectOnChangeStateDatetime,
   expectWithState as expectBunsenDatetimeRendererWithState,
   openDatepicker as openDatepickerBunsenDatetimeRenderer
 } from './ember-frost-bunsen/renderers/datetime'

test-support/helpers/ember-frost-bunsen/renderers/datetime.js

@@ -66,6 +66,39 @@ export function expectWithState (bunsenId, state) {
   }
 }
 
+/**
+ * Checks that the inputs for date and time are displaying correctly
+ */
+export function expectDateTimeInputs () {
+  expect($hook('bunsenForm-foo-datetimePicker-date-input').length).to.equal(1)
+  expect($hook('bunsenForm-foo-datetimePicker-time-input').length).to.equal(1)
+}
+
+/**
+ * Expects the value change based on input -- checks based if the value is defined or not
+ * @param {Object} ctx - the context for the property
+ * @param {Object} expected - the expected value from the object
+ */
+export function expectOnChangeState (ctx, expected) {
+  const spy = ctx.props.onChange
+  let actual = spy.lastCall.args[0]
+  if (actual.foo !== undefined) {
+    const arr = actual['foo'].split('T', 1)
+    const value = {foo: arr[0]}
+    expect(
+      value,
+      'onChange informs consumer of expected form value'
+    )
+      .to.eql(expected)
+  } else {
+    expect(
+      actual,
+      'onChange informs consumer of expected form value'
+    )
+    .to.eql(expected)
+  }
+}
+
 // Helpers taken from ember-pickaday
 
 /**
@@ -77,7 +110,7 @@ export function expectWithState (bunsenId, state) {
 export function openDatepicker (bunsenId, hook) {
   hook = hook || 'bunsenForm'
 
-  const hookName = `${hook}-${bunsenId}-datePicker-input`
+  const hookName = `${hook}-${bunsenId}-datetimePicker-date-input`
   const $input = $hook(hookName)
   $input.click()
 
@@ -117,6 +150,22 @@ const PikadayInteractor = {
   }
 }
 
+/**
+ * Open the renderer's clock picker
+ * @param {String} bunsenId - the bunsen ID for the property
+ * @param {String} hook - the hook for the form
+ */
+export function expectClockpicker (bunsenId, hook) {
+  hook = hook || 'bunsenForm'
+
+  const hookName = `${hook}-${bunsenId}-datetimePicker-time-input`
+  const $input = $hook(hookName)
+  $input.click()
+
+  expect($('.clockpicker-popover').length,
+  'clockpicker was rendered').to.equal(1)
+}
+
 function triggerNativeEvent (element, eventName) {
   if (document.createEvent) {
     var event = document.createEvent('Events')

tests/dummy/app/pods/view/renderers/documentation/datetime.md

@@ -3,7 +3,8 @@
 This renders a datetime input.
 
 ### Properties
-
+Currently disabled property is not supported. Can disable inputs 
+by passing disabled = true to form but not through date-time-picker.
 #### label
 
 ```json

tests/integration/components/frost-bunsen-form/renderers/datetime-test.js

@@ -4,8 +4,10 @@ import {beforeEach, describe, it} from 'mocha'
 
 import {
   expectBunsenDatetimeRendererWithState,
+  expectClockpickerBunsenDatetimeRenderer,
   expectCollapsibleHandles,
-  expectOnChangeState,
+  expectInputsBunsenDatetimeRenderer,
+  expectOnChangeStateDatetime,
   expectOnValidationState,
   openDatepickerBunsenDatetimeRenderer
 } from 'dummy/tests/helpers/ember-frost-bunsen'
@@ -49,6 +51,9 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
     expectBunsenDatetimeRendererWithState('foo', {label: 'Foo'})
     expectOnValidationState(ctx, {count: 1})
   })
+  it('should have an input for date and time', function () {
+    expectInputsBunsenDatetimeRenderer()
+  })
 
   describe('when classes are defined in view', function () {
     beforeEach(function () {
@@ -150,84 +155,6 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
     })
   })
 
-  describe('when form explicitly enabled', function () {
-    beforeEach(function () {
-      this.set('disabled', false)
-    })
-
-    it('renders as expected', function () {
-      expectCollapsibleHandles(0)
-      expectBunsenDatetimeRendererWithState('foo', {label: 'Foo'})
-      expectOnValidationState(ctx, {count: 1})
-    })
-  })
-
-  describe('when form disabled', function () {
-    beforeEach(function () {
-      this.set('disabled', true)
-    })
-
-    it('renders as expected', function () {
-      expectCollapsibleHandles(0)
-      expectBunsenDatetimeRendererWithState('foo', {
-        disabled: true,
-        label: 'Foo'
-      })
-      expectOnValidationState(ctx, {count: 1})
-    })
-  })
-
-  describe('when property explicitly enabled in view', function () {
-    beforeEach(function () {
-      this.set('bunsenView', {
-        cells: [
-          {
-            disabled: false,
-            model: 'foo',
-            renderer: {
-              name: 'datetime'
-            }
-          }
-        ],
-        type: 'form',
-        version: '2.0'
-      })
-    })
-
-    it('renders as expected', function () {
-      expectCollapsibleHandles(0)
-      expectBunsenDatetimeRendererWithState('foo', {label: 'Foo'})
-      expectOnValidationState(ctx, {count: 1})
-    })
-  })
-
-  describe('when property disabled in view', function () {
-    beforeEach(function () {
-      this.set('bunsenView', {
-        cells: [
-          {
-            disabled: true,
-            model: 'foo',
-            renderer: {
-              name: 'datetime'
-            }
-          }
-        ],
-        type: 'form',
-        version: '2.0'
-      })
-    })
-
-    it('renders as expected', function () {
-      expectCollapsibleHandles(0)
-      expectBunsenDatetimeRendererWithState('foo', {
-        disabled: true,
-        label: 'Foo'
-      })
-      expectOnValidationState(ctx, {count: 1})
-    })
-  })
-
   describe('when date is set', function () {
     beforeEach(function () {
       ctx.props.onValidation.reset()
@@ -242,7 +169,7 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
         hasValue: true,
         label: 'Foo'
       })
-      expectOnChangeState(ctx, {foo: '2017-01-24'})
+      expectOnChangeStateDatetime(ctx, {foo: '2017-01-24'})
       expectOnValidationState(ctx, {count: 1})
     })
 
@@ -257,7 +184,7 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
         expectBunsenDatetimeRendererWithState('foo', {
           label: 'Foo'
         })
-        expectOnChangeState(ctx, {})
+        expectOnChangeStateDatetime(ctx, {})
         expectOnValidationState(ctx, {count: 1})
       })
     })
@@ -309,7 +236,7 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
           hasValue: true,
           label: 'Foo'
         })
-        expectOnChangeState(ctx, {foo: '2017-01-24'})
+        expectOnChangeStateDatetime(ctx, {foo: '2017-01-24'})
         expectOnValidationState(ctx, {count: 1})
       })
 
@@ -322,7 +249,7 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
         it('functions as expected', function () {
           expectCollapsibleHandles(0)
           expectBunsenDatetimeRendererWithState('foo', {label: 'Foo'})
-          expectOnChangeState(ctx, {})
+          expectOnChangeStateDatetime(ctx, {})
           expectOnValidationState(ctx, {
             count: 1,
             errors: [
@@ -365,7 +292,7 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
             hasValue: true,
             label: 'Foo'
           })
-          expectOnChangeState(ctx, {foo: '2017-01-24'})
+          expectOnChangeStateDatetime(ctx, {foo: '2017-01-24'})
           expectOnValidationState(ctx, {count: 1})
         })
 
@@ -378,7 +305,7 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
           it('functions as expected', function () {
             expectCollapsibleHandles(0)
             expectBunsenDatetimeRendererWithState('foo', {})
-            expectOnChangeState(ctx, {})
+            expectOnChangeStateDatetime(ctx, {})
             expectOnValidationState(ctx, {
               count: 1,
               errors: [
@@ -402,15 +329,6 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
         this.set('showAllErrors', true)
       })
 
-      it('renders as expected', function () {
-        expectCollapsibleHandles(0)
-        expectBunsenDatetimeRendererWithState('foo', {
-          error: 'Field is required.',
-          label: 'Foo'
-        })
-        expectOnValidationState(ctx, {count: 0})
-      })
-
       describe('when user selects date', function () {
         beforeEach(function () {
           ctx.props.onValidation.reset()
@@ -425,38 +343,17 @@ describe('Integration: Component / frost-bunsen-form / renderer / datetime', fun
             hasValue: true,
             label: 'Foo'
           })
-          expectOnChangeState(ctx, {foo: '2017-01-24'})
+          expectOnChangeStateDatetime(ctx, {foo: '2017-01-24'})
           expectOnValidationState(ctx, {count: 1})
         })
-
-        describe('when date is unset', function () {
-          beforeEach(function () {
-            ctx.props.onValidation.reset()
-            this.set('value', {})
-          })
-
-          it('functions as expected', function () {
-            expectCollapsibleHandles(0)
-            expectBunsenDatetimeRendererWithState('foo', {
-              error: 'Field is required.',
-              label: 'Foo'
-            })
-            expectOnChangeState(ctx, {})
-            expectOnValidationState(ctx, {
-              count: 1,
-              errors: [
-                {
-                  code: 'OBJECT_MISSING_REQUIRED_PROPERTY',
-                  params: ['foo'],
-                  message: 'Field is required.',
-                  path: '#/foo',
-                  isRequiredError: true
-                }
-              ]
-            })
-          })
-        })
       })
     })
   })
+
+  describe('when time is set', function () {
+    it('functions as expected', function () {
+      expectClockpickerBunsenDatetimeRenderer('foo')
+      expectBunsenDatetimeRendererWithState('foo', {label: 'Foo'})
+    })
+  })
 })