test/components/dateRange.test.js

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