Merge pull request #41 from misteinb/bugfix/datepicker-unit-tests

Bugfix/datepicker unit tests
2018-11-12 15:32:57 -08:00 · 2018-11-12 15:32:57 -08:00 · 8514995ac7
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,6 +3,7 @@
 ## v4.0.9
 ### Fixed
 - Calendar component would choose current time first time you are selecting a date. Now defaults to 12:00 AM local
+- fix off by one issue with date picker
 - unit tests were not running
 - removed unused dependencies
 - updated max-width on buttons to be 100% of the parent width
--- a/lib/components/DateTime/DatePicker.md
+++ b/lib/components/DateTime/DatePicker.md
@ -36,6 +36,8 @@ const initialState = {value: ''};
 </div>
 ```

+### utc time
+
 ```jsx
 const initialValue = 'Sep 20, 2010 07:00:00 GMT';
 const initialState = {value: ''};
@ -51,6 +53,22 @@ const initialState = {value: ''};
 </div>
 ```

+### local time
+
+```jsx
+const initialValue = 'Sep 20, 2010 07:00:00 GMT';
+const initialState = {value: ''};
+
+<div>
+    <div>Current Value: {state.value}</div>
+    <DatePicker
+        name='date-picker'
+        onChange={(newValue) => setState({value: newValue}) }
+        initialValue={initialValue}
+    />
+</div>
+```
+
 ```jsx
 const initialValue = null;
 const initialState = {value: ''};
--- a/lib/components/DateTime/DatePicker.spec.tsx
+++ b/lib/components/DateTime/DatePicker.spec.tsx
@ -6,6 +6,13 @@ import { DateFormat} from '../../Common';
 import { DatePicker} from './DatePicker';
 import { describe, it } from 'mocha';

+const adjustForTimezone = (dateStr) => {
+    let date = new Date(dateStr);
+    let timeOffsetInMS = date.getTimezoneOffset() * 60000;
+    date.setTime(date.getTime() - timeOffsetInMS);
+    return date.toISOString();
+};
+
 describe('DatePicker', () => {
    let clock;
    beforeEach(() => {
@ -16,23 +23,35 @@ describe('DatePicker', () => {
        clock.restore();
    });

-    it('should accept a valid date string for initial value', () => {
+    it('should set the text box value when initial value is a valid date', () => {
        const onChange = sinon.spy();
        const wrapper = shallow(<DatePicker
            name='date-picker'
-            initialValue='Thu, 28 Sep 2017 17:28:40 GMT'
+            initialValue={'2018-12-06T00:00:00.000'}
            format={DateFormat.DDMMYYYY}
            onChange={onChange}
        />);

-        expect(wrapper.instance().state.value).to.equal('28/09/2017');
+        expect(wrapper.instance().state.value).to.equal('06/12/2018');
+    });
+
+    it('should pass through initial value to text box when initial value is not a valid date', () => {
+        const onChange = sinon.spy();
+        const wrapper = shallow(<DatePicker
+            name='date-picker'
+            initialValue={'2018-28-28T00:00:00.000'}
+            format={DateFormat.DDMMYYYY}
+            onChange={onChange}
+        />);
+
+        expect(wrapper.instance().state.value).to.equal('2018-28-28T00:00:00.000');
    });

    it('should pass invalid through change callback when date value is garbage text', () => {
        const onChange = sinon.spy();
        const wrapper = shallow(<DatePicker
            name='date-picker'
-            initialValue='Thu, 28 Sep 2017 17:28:40 GMT'
+            initialValue='2018-10-28T00:00:00.000'
            format={DateFormat.DDMMYYYY}
            onChange={onChange}
        />);
@ -47,7 +66,7 @@ describe('DatePicker', () => {
        const onChange = sinon.spy();
        const wrapper = shallow(<DatePicker
            name='date-picker'
-            initialValue='Thu, 28 Sep 2017 17:28:40 GMT'
+            initialValue='2018-10-28T00:00:00.000'
            format={DateFormat.DDMMYYYY}
            onChange={onChange}
        />);
@ -62,7 +81,7 @@ describe('DatePicker', () => {
        const onChange = sinon.spy();
        const wrapper = shallow(<DatePicker
            name='date-picker'
-            initialValue='Thu, 28 Sep 2017 17:28:40 GMT'
+            initialValue='2018-10-28T00:00:00.000'
            format={DateFormat.DDMMYYYY}
            onChange={onChange}
        />);
@ -77,7 +96,7 @@ describe('DatePicker', () => {
        const onChange = sinon.spy();
        const wrapper = shallow(<DatePicker
            name='date-picker'
-            initialValue='Thu, 28 Sep 2017 17:28:40 GMT'
+            initialValue='2018-10-28T00:00:00.000'
            format={DateFormat.DDMMYYYY}
            onChange={onChange}
        />);
@ -113,21 +132,7 @@ describe('DatePicker', () => {
        const input = wrapper.find('.date-picker-input');
        input.simulate('change', {target: {value: '28/09/2018'}});
        expect(onChange.called).to.equal(true);
-        expect(onChange.firstCall.args[0]).to.equal('2018-09-28T23:00:00.000Z');
-    });
-
-    it('should accept mm/dd/yyyy format as a valid input', () => {
-        const onChange = sinon.spy();
-        const wrapper = shallow(<DatePicker
-            name='date-picker'
-            format={DateFormat.MMDDYYYY}
-            onChange={onChange}
-        />);
-
-        const input = wrapper.find('.date-picker-input');
-        input.simulate('change', {target: {value: '09/28/2018'}});
-        expect(onChange.called).to.equal(true);
-        expect(onChange.firstCall.args[0]).to.equal('2018-09-28T23:00:00.000Z');
+        expect(adjustForTimezone(onChange.firstCall.args[0])).to.equal('2018-09-28T00:00:00.000Z'); 
    });

    it('should accept iso format as a valid input', () => {
@ -141,10 +146,10 @@ describe('DatePicker', () => {
        const input = wrapper.find('.date-picker-input');
        input.simulate('change', {target: {value: '2018/09/28'}});
        expect(onChange.called).to.equal(true);
-        expect(onChange.firstCall.args[0]).to.equal('2018-09-28T23:00:00.000Z');
+        expect(adjustForTimezone(onChange.firstCall.args[0])).to.equal('2018-09-28T00:00:00.000Z');
    });

-    it('should set time to epoch when initial value is empty', () => {
+    it('should set time to midnight gmt + localoffest when initial value is empty', () => {
        const onChange = sinon.spy();
        const wrapper = shallow(<DatePicker
            name='date-picker'
@ -153,23 +158,39 @@ describe('DatePicker', () => {
        />);

        const input = wrapper.find('.date-picker-input');
-        input.simulate('change', {target: {value: '2018/09/28 10:12:13'}});
+        input.simulate('change', {target: {value: '2018/09/28'}});
        expect(onChange.called).to.equal(true);
-        expect(onChange.firstCall.args[0]).to.equal('2018-09-28T23:00:00.000Z');
+        expect(adjustForTimezone(onChange.firstCall.args[0])).to.equal('2018-09-28T00:00:00.000Z');
    });

-    it('should set time to epoch when initial value is not empty', () => {
+    it('should set time to midnight gmt + localoffest when initial value is not empty', () => {
        const onChange = sinon.spy();
        const wrapper = shallow(<DatePicker
            name='date-picker'
            format={DateFormat.YYYYMMDD}
            onChange={onChange}
-            initialValue={'2018/09/28 10:12:13AM'}
+            initialValue={'2018-10-28T00:00:00.000'}
        />);

        const input = wrapper.find('.date-picker-input');
-        input.simulate('change', {target: {value: '2018/09/29 10:12:13'}});
+        input.simulate('change', {target: {value: '2018/09/29'}});
        expect(onChange.called).to.equal(true);
-        expect(onChange.firstCall.args[0]).to.equal('2018-09-29T23:00:00.000Z');
+        expect(adjustForTimezone(onChange.firstCall.args[0])).to.equal('2018-09-29T00:00:00.000Z');
+    });
+
+    it('should set time to midnight when initial value is not empty and localTimezone is false', () => {
+        const onChange = sinon.spy();
+        const wrapper = shallow(<DatePicker
+            name='date-picker'
+            format={DateFormat.YYYYMMDD}
+            onChange={onChange}
+            initialValue={'2018-10-28T00:00:00.000Z'}
+            localTimezone={false}
+        />);
+
+        const input = wrapper.find('.date-picker-input');
+        input.simulate('change', {target: {value: '2018/09/29'}});
+        expect(onChange.called).to.equal(true);
+        expect(onChange.firstCall.args[0]).to.equal('2018-09-29T00:00:00.000Z');
    });
 });
--- a/lib/components/DateTime/DatePicker.tsx
+++ b/lib/components/DateTime/DatePicker.tsx
@ -174,6 +174,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                } else {
                    value = props.initialValue;
                }
+
            } else {
                if (props.initialValue) {
                    value = formatDate(
@ -268,13 +269,11 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
        }

        if (valid) {
-            const hasVal = !!this.state.initialValue;
            let parsed = new MethodDate(
                this.props.localTimezone,
-                year, month - 1, date,
-                hasVal ? this.state.initialValue.hours : 0,
-                hasVal ? this.state.initialValue.minutes : 0,
-                hasVal ? this.state.initialValue.seconds : 0,
+                year,
+                month - 1,
+                date
            );
            if (month !== parsed.month + 1 || date !== parsed.date) {
                valid = false;
@ -448,6 +447,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                            className={css('date-picker-calendar')}
                            year={parsed.year || null}
                            month={parsed.month - 1}
+                            localTimezone={this.props.localTimezone}
                            locale={this.props.locale}
                            attr={this.props.attr.calendar}
                        />
--- a/lib/components/DateTime/DateTimeField.md
+++ b/lib/components/DateTime/DateTimeField.md
@ -28,7 +28,7 @@ ______________________________________________________________________________
 const initialState = {value: 'Sep 20, 2010 05:00:00 GMT'};

 <div>
-        <div style={{marginBottom: '20px'}}>Current Value: {state.value}</div>
+    <div style={{marginBottom: '20px'}}>Current Value: {new Date(state.value).toString()}</div>
    <DateTimeField
        name='date-picker-0'
        initialValue={'Sep 20, 2010 05:00:00 GMT'}
@ -43,7 +43,7 @@ const initialState = {value: 'Sep 20, 2010 05:00:00 GMT'};
 const initialState = {value: 'Sep 20, 2010 05:00:00 GMT'};

 <div>
-    <div style={{marginBottom: '20px'}}>Current Value: {state.value}</div>
+    <div style={{marginBottom: '20px'}}>Current Value: {new Date(state.value).toString()}</div>
    <DateTimeField
        name='date-picker-0'
        initialValue={'Sep 20, 2010 05:00:00 GMT'}
@ -74,7 +74,7 @@ const initialState = {value: 'Sep 20, 2010 05:00:00 GMT'};
 const initialState = {value: 'Sep 20, 2010 05:00:00 GMT'};

 <div>
-        <div style={{marginBottom: '20px'}}>Current Value: {state.value}</div>
+        <div style={{marginBottom: '20px'}}>Current Value: {new Date(state.value).toString()}</div>
    <DateTimeField
        name='date-picker-2'
        initialValue={'Sep 20, 2010 05:00:00 GMT'}
@ -107,7 +107,7 @@ const initialState = {value: 'Sep 20, 2010 05:00:00 GMT'};
 const initialState = {value: 'Sep 20, 2010 05:00:00 GMT'};

 <div>
-        <div style={{marginBottom: '20px'}}>Current Value: {state.value}</div>
+        <div style={{marginBottom: '20px'}}>Current Value: {new Date(state.value).toString()}</div>
    <DateTimeField
        name='date-picker-4'
        initialValue={'Sep 20, 2010 05:00:00 GMT'}
--- a/lib/components/DateTime/DateTimeField.tsx
+++ b/lib/components/DateTime/DateTimeField.tsx
@ -76,7 +76,7 @@ export interface DateTimeFieldProps extends React.Props<DateTimeFieldType> {
    /**
     * callback for clicking calendar icon
     */
-    onExpand?: (expanded: boolean) => void
+    onExpand?: (expanded: boolean) => void;

    attr?: DateTimeFieldAttributes & FormFieldAttributes;
 }
--- a/mocha.opts
+++ b/mocha.opts
@ -2,5 +2,6 @@
 --require source-map-support/register
 --require ignore-styles
 --recursive
+--exclude ./src/**/*.js
 --file ./test/browser.js
 ./lib/**/*.spec.tsx
--- a/package.json
+++ b/package.json
@ -11,7 +11,8 @@
        "tslint": "tslint './lib/**/*.ts{,x}'",
        "sasslint": "sass-lint -c .sass-lint.yml 'lib/**/*.scss' -v -q",
        "docs": "styleguidist server",
-        "docs:build": "styleguidist build"
+        "docs:build": "styleguidist build",
+        "prepublish": "npm run tslint && npm run test && npm run build"
    },
    "repository": {
        "type": "git",