test/components/dateRange.test.js

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