test/components/dateRange.test.js

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * SPARKY (AAI UI service)
   4  * ================================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   8  * ================================================================================
   9  * Licensed under the Apache License, Version 2.0 (the "License");
  10  * you may not use this file except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  * ============LICENSE_END=========================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import React from 'react';
  27 import TestUtils from 'react-dom/lib/ReactTestUtils';
  28 import {Provider} from 'react-redux';
  29 import {expect} from 'chai';
  30 import i18n from 'utils/i18n/i18n';
  31
  32 import store from 'app/AppStore.js';
  33 import DateRange from 'generic-components/dateRange/DateRange.jsx';
  34 import {
  35         dateRangeActionTypes,
  36         LABEL_START_DATE,
  37         LABEL_END_DATE,
  38         DATE_PICKER_PLACEHOLDER,
  39         IS_AFTER_END_DATE,
  40         IS_BEFORE_START_DATE,
  41         END_DATE,
  42         START_DATE} from 'generic-components/dateRange/DateRangeConstants.js';
  43 import DateRangeActions from 'generic-components/dateRange/DateRangeActions.js';
  44 import reducer from 'generic-components/dateRange/DateRangeReducer.js';
  45 import sinon from 'sinon';
  46
  47 import { moment } from 'moment';
  48
  49 describe('Core Date Range suite', function() {
  50
  51   beforeEach(function() {
  52     this.component = TestUtils.renderIntoDocument(<Provider store={store}><DateRange /></Provider>);
  53   });
  54
  55         // test structure
  56   it('Date Range - Validate start & end lables', function() {
  57     let labels = TestUtils.scryRenderedDOMComponentsWithTag(this.component, 'label');
  58     expect(labels.length).to.equal(2);
  59     expect(labels[0].textContent).to.equal(LABEL_START_DATE + ': ');
  60     expect(labels[1].textContent).to.equal(LABEL_END_DATE + ': ');
  61   });
  62
  63   it('Date Range - Start Date Picker exists', function() {
  64     let datePicker = TestUtils.findRenderedDOMComponentWithClass(this.component, 'start-date-picker');
  65     expect(datePicker).to.exist;
  66     expect(datePicker.type).to.equal('text');
  67     expect(datePicker.placeholder).to.equal(DATE_PICKER_PLACEHOLDER);
  68   });
  69
  70   it('Date Range - End Date Picker exists', function() {
  71     let datePicker = TestUtils.findRenderedDOMComponentWithClass(this.component, 'end-date-picker');
  72     expect(datePicker).to.exist;
  73     expect(datePicker.type).to.equal('text');
  74     expect(datePicker.placeholder).to.equal(DATE_PICKER_PLACEHOLDER);
  75   });
  76
  77         // Reducer Tests
  78   it('Date Range Reducer ... set start date (no initial dates)', function() {
  79     var moment = require('moment');
  80     const initialState = {};
  81     const dateChangeAction = {type: dateRangeActionTypes.DATE_RANGE_CHANGE, data: {dateRange: {startDate: moment(new Date('05/04/2016'))}, errorMsg: ''}};
  82     const newState = reducer(initialState, dateChangeAction);
  83     expect(newState.dateRangeStart).to.exist;
  84     expect(newState.dateRangeStart.toDate().getTime()).to.equal(new Date('05/04/2016').getTime());
  85     expect(newState.dateRangeEnd).to.not.exist;
  86     expect(newState.dateRangeError).to.equal('');
  87   });
  88   it('Date Range Reducer ... update start date (no end date)', function() {
  89     var moment = require('moment');
  90     const initialStartDate = new Date('05/01/2016');
  91     const initialState = {dateRange: {startDate: moment(initialStartDate)}};
  92     const dateChangeAction = {type: dateRangeActionTypes.DATE_RANGE_CHANGE, data: {dateRange: {startDate: moment(new Date('05/04/2016'))}, errorMsg: ''}};
  93     const newState = reducer(initialState, dateChangeAction);
  94     expect(newState.dateRangeStart).to.exist;
  95     expect(newState.dateRangeStart.toDate().getTime()).to.equal(new Date('05/04/2016').getTime());
  96     expect(newState.dateRangeEnd).to.not.exist;
  97     expect(newState.dateRangeError).to.equal('');
  98   });
  99   it('Date Range Reducer - set end date (no start date)', function() {
 100     var moment = require('moment');
 101     const  initialState = {};
 102     const dateChangeAction = {type: dateRangeActionTypes.DATE_RANGE_CHANGE, data: {dateRange: {endDate: moment(new Date('05/04/2016'))}, errorMsg: ''}};
 103     const newState = reducer(initialState, dateChangeAction);
 104     expect(newState.dateRangeEnd).to.exist;
 105     expect(newState.dateRangeEnd.toDate().getTime()).to.equal(new Date('05/04/2016').getTime());
 106     expect(newState.dateRangeStart).to.not.exist;
 107     expect(newState.dateRangeError).to.equal('');
 108   });
 109   it('Date Range Reducer - update end date (no start date)', function() {
 110     var moment = require('moment');
 111     const initialEndDate = new Date('05/01/2016');
 112     const initialState = {dateRange: {endDate: moment(initialEndDate)}};
 113     const dateChangeAction = {type: dateRangeActionTypes.DATE_RANGE_CHANGE, data: {dateRange: {endDate: moment(new Date('05/04/2016'))}, errorMsg: ''}};
 114     const newState = reducer(initialState, dateChangeAction);
 115     expect(newState.dateRangeEnd).to.exist;
 116     expect(newState.dateRangeEnd.toDate().getTime()).to.equal(new Date('05/04/2016').getTime());
 117     expect(newState.dateRangeStart).to.not.exist;
 118     expect(newState.dateRangeError).to.equal('');
 119   });
 120   it('Date Range Reducer - set end date with initial start date', function() {
 121     var moment = require('moment');
 122     const initialStartDate = new Date('05/01/2016');
 123     const initialState = {dateRange: {startDate: moment(initialStartDate)}};
 124     const dateChangeAction = {type: dateRangeActionTypes.DATE_RANGE_CHANGE, data: {dateRange: {startDate: moment(new Date('05/01/2016')), endDate: moment(new Date('05/04/2016'))}, errorMsg: ''}};
 125     const newState = reducer(initialState, dateChangeAction);
 126     expect(newState.dateRangeStart).to.exist;
 127     expect(newState.dateRangeStart.toDate().getTime()).to.equal(new Date('05/01/2016').getTime());
 128     expect(newState.dateRangeEnd).to.exist;
 129     expect(newState.dateRangeEnd.toDate().getTime()).to.equal(new Date('05/04/2016').getTime());
 130     expect(newState.dateRangeError).to.equal('');
 131   });
 132   it('Date Range Reducer - set start date with initial end date', function() {
 133     var moment = require('moment');
 134     const initialEndDate = new Date('05/04/2016');
 135     const initialState = {dateRange: {endDate: moment(initialEndDate)}};
 136     const dateChangeAction = {type: dateRangeActionTypes.DATE_RANGE_CHANGE, data: {dateRange: {startDate: moment(new Date('05/01/2016')), endDate: moment(new Date('05/04/2016'))}, errorMsg: ''}};
 137     const newState = reducer(initialState, dateChangeAction);
 138     expect(newState.dateRangeStart).to.exist;
 139     expect(newState.dateRangeStart.toDate().getTime()).to.equal(new Date('05/01/2016').getTime());
 140     expect(newState.dateRangeEnd).to.exist;
 141     expect(newState.dateRangeEnd.toDate().getTime()).to.equal(new Date('05/04/2016').getTime());
 142     expect(newState.dateRangeError).to.equal('');
 143   });
 144   it('Date Range Reducer - verify INVALID_DATE_RANGE event', function() {
 145     var moment = require('moment');
 146     const errMsg = 'Some error message';
 147     const initialEndDate = new Date('05/01/2016');
 148     const initialStartDate = new Date('05/02/2016');
 149     const initialState = {startDate: moment(initialStartDate), endDate: moment(initialEndDate)};
 150     const invalidRangeAction = {type: dateRangeActionTypes.INVALID_DATE_RANGE, data: {dateRange: {startDate: moment(initialStartDate), endDate: moment(initialEndDate)}, errorMsg: errMsg}};
 151     const newState = reducer(initialState, invalidRangeAction);
 152     expect(newState.endDate.toDate().getTime()).to.equal(new Date('05/01/2016').getTime());
 153     expect(newState.startDate.toDate().getTime()).to.equal(new Date('05/02/2016').getTime());
 154     expect(newState.dateRangeError).to.equal(errMsg);
 155   });
 156
 157         // test Actions
 158   it('Date Range Action - valid start date change', function() {
 159     var moment = require('moment');
 160     const startDate = moment(new Date('07/19/2016'));
 161     const endDate = moment(new Date('07/20/2016'));
 162     const expectedAction = {
 163       type: dateRangeActionTypes.DATE_RANGE_CHANGE,
 164       data: {
 165         dateRange: {
 166           startDate: startDate,
 167           endDate: endDate
 168         },
 169       }
 170
 171     };
 172     const results = DateRangeActions.onStartDateChange(startDate, endDate);
 173
 174     expect(results.type).to.equal(expectedAction.type);
 175     expect(results.data.dateRange.startDate).to.equal(expectedAction.data.dateRange.startDate);
 176     expect(results.data.dateRange.endDate).to.equal(expectedAction.data.dateRange.endDate);
 177   });
 178   it('Date Range Action - valid end date change', function() {
 179     var moment = require('moment');
 180     const startDate = moment(new Date('07/19/2016'));
 181     const endDate = moment(new Date('07/20/2016'));
 182     const expectedAction = {
 183       type: dateRangeActionTypes.DATE_RANGE_CHANGE,
 184       data: {
 185         dateRange: {
 186           startDate: startDate,
 187           endDate: endDate
 188         },
 189       }
 190
 191     };
 192     const results = DateRangeActions.onEndDateChange(startDate, endDate);
 193
 194     expect(results.type).to.equal(expectedAction.type);
 195     expect(results.data.dateRange.startDate).to.equal(expectedAction.data.dateRange.startDate);
 196     expect(results.data.dateRange.endDate).to.equal(expectedAction.data.dateRange.endDate);
 197   });
 198   it('Date Range Action - end date before start date', function() {
 199     var moment = require('moment');
 200     const startDate = moment(new Date('07/21/2016'));
 201     const endDate = moment(new Date('07/20/2016'));
 202     const errorMsg = i18n(END_DATE) + ': ' +
 203                         moment(new Date(endDate)).format(DATE_PICKER_PLACEHOLDER) +
 204                         ' ' + i18n(IS_BEFORE_START_DATE);
 205     const expectedAction = {
 206       type: dateRangeActionTypes.INVALID_DATE_RANGE,
 207       data: {
 208         dateRange: {
 209           startDate: startDate,
 210           endDate: endDate
 211         },
 212         errorMsg: errorMsg
 213       }
 214
 215     };
 216     const results = DateRangeActions.onEndDateChange(startDate, endDate);
 217
 218     expect(results.type).to.equal(expectedAction.type);
 219     expect(results.data.dateRange.startDate).to.equal(expectedAction.data.dateRange.startDate);
 220     expect(results.data.dateRange.endDate).to.equal(expectedAction.data.dateRange.endDate);
 221     expect(results.data.errorMsg).to.equal(expectedAction.data.errorMsg);
 222   });
 223   it('Date Range Action - start date after date', function() {
 224     var moment = require('moment');
 225     const startDate = moment(new Date('07/21/2016'));
 226     const endDate = moment(new Date('07/20/2016'));
 227     const errorMsg = i18n(START_DATE) + ': ' +
 228                         moment(new Date(startDate)).format(DATE_PICKER_PLACEHOLDER) +
 229                         ' ' + i18n(IS_AFTER_END_DATE);
 230     const expectedAction = {
 231       type: dateRangeActionTypes.INVALID_DATE_RANGE,
 232       data: {
 233         dateRange: {
 234           startDate: startDate,
 235           endDate: endDate
 236         },
 237         errorMsg: errorMsg
 238       }
 239
 240     };
 241     const results = DateRangeActions.onStartDateChange(startDate, endDate);
 242
 243     expect(results.type).to.equal(expectedAction.type);
 244     expect(results.data.dateRange.startDate).to.equal(expectedAction.data.dateRange.startDate);
 245     expect(results.data.dateRange.endDate).to.equal(expectedAction.data.dateRange.endDate);
 246     expect(results.data.errorMsg).to.equal(expectedAction.data.errorMsg);
 247   });
 248   it('Date Range Action - confirm onStartDateChange action called on startDate change', function() {
 249     const spy = sinon.spy(DateRangeActions, 'onStartDateChange');
 250     let startDatePicker = TestUtils.findRenderedDOMComponentWithClass(this.component, 'start-date-picker');
 251     startDatePicker.value = '05/09/2016';
 252     TestUtils.Simulate.change(startDatePicker);
 253     expect(DateRangeActions.onStartDateChange.calledOnce).to.be.true;
 254     DateRangeActions.onStartDateChange.restore();
 255   });
 256   it('Date Range Action - confirm onEndDateChange action called on endDate change', function() {
 257     const spy = sinon.spy(DateRangeActions, 'onEndDateChange');
 258     let endDatePicker = TestUtils.findRenderedDOMComponentWithClass(this.component, 'end-date-picker');
 259     endDatePicker.value = '05/09/2016';
 260     TestUtils.Simulate.change(endDatePicker);
 261     expect(DateRangeActions.onEndDateChange.calledOnce).to.be.true;
 262     DateRangeActions.onEndDateChange.restore();
 263   });
 264 });