test/components/dateRangeSelector.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 {moment} from "moment";
  31 import store from "app/AppStore.js";
  32 import DateRangeSelector from "generic-components/dateRangeSelector/DateRangeSelector.jsx";
  33 import DateRangeSelectorActions from "generic-components/dateRangeSelector/DateRangeSelectorActions.js";
  34 import {
  35         dateRangeSelectorActionTypes,
  36         TODAY,
  37         YESTERDAY,
  38         LAST_WEEK,
  39         LAST_MONTH,
  40         CUSTOM,
  41         ICON_CLASS_CALENDAR,
  42         ICON_CLASS_DOWN_CARET,
  43         ERROR_UNKNOWN_PERIOD} from "generic-components/dateRangeSelector/DateRangeSelectorConstants.js";
  44 import reducer from "generic-components/dateRangeSelector/DateRangeSelectorReducer.js";
  45 import {dateRangeActionTypes, DATE_PICKER_PLACEHOLDER} from "generic-components/dateRange/DateRangeConstants.js";
  46 import {MESSAGE_LEVEL_DANGER} from "utils/GlobalConstants.js";
  47
  48 describe("Date Range Selector Test Suite", function() {
  49
  50         beforeEach(function () {
  51                 this.component = TestUtils.renderIntoDocument( <Provider store={store}><DateRangeSelector /></Provider>);
  52         });
  53
  54         // test structure
  55         it("Date Range Selector - Validate selector button", function () {
  56                 var moment = require('moment');
  57                 let currentDate = moment(new Date()).format(DATE_PICKER_PLACEHOLDER);
  58                 let button = TestUtils.findRenderedDOMComponentWithTag(this.component, 'button');
  59                 expect(button).exists;
  60                 expect(button.childNodes.length).to.equal(3);
  61                 expect(button.childNodes[0].className).to.have.string(ICON_CLASS_CALENDAR);
  62                 expect(button.childNodes[1].innerHTML).to.have.string(currentDate + ' - ' + currentDate);
  63                 expect(button.childNodes[2].className).to.have.string(ICON_CLASS_DOWN_CARET);
  64         });
  65
  66         it("Date Range Selector - Validate quick pick options", function () {
  67                 let button = TestUtils.findRenderedDOMComponentWithTag(this.component, 'button');
  68                 TestUtils.Simulate.click(button);
  69
  70                 let popoverMenu = document.body.getElementsByClassName('popover-content');
  71                 // TODO - need to figure out how to get the popover menu (above doesn't work)
  72         });
  73
  74         // test reducer
  75         it("Date Range Selector Reducer ... Vaidate DATE_RANGE_CHANGE event)", function() {
  76                 var moment = require('moment');
  77                 const initialState = {
  78                         startDate: moment(new Date('07/20/2016')),
  79                         endDate: moment(new Date('07/09/2016')),
  80                         period: CUSTOM,
  81                         periodErrText: 'some error text',
  82                         periodErrSev: 'some error severity'
  83                 };
  84                 const rangeChangeAction = {
  85                         type: dateRangeActionTypes.DATE_RANGE_CHANGE,
  86                         data: {
  87                                 dateRange: {
  88                                         startDate: moment(new Date('05/04/2016')),
  89                                         endDate: moment(new Date('06/05/2016'))
  90                                 },
  91                                 errorMsg: ''
  92                         }};
  93                 const newState = reducer(initialState, rangeChangeAction);
  94                 expect(newState.startDate).to.exist;
  95                 expect(newState.startDate.toDate().getTime()).to.equal(new Date('05/04/2016').getTime());
  96                 expect(newState.endDate).to.exist;
  97                 expect(newState.endDate.toDate().getTime()).to.equal(new Date('06/05/2016').getTime());
  98                 expect(newState.period).to.equal(CUSTOM);
  99                 expect(newState.periodErrText).to.equal('');
 100                 expect(newState.periodErrSev).to.equal('');
 101         });
 102         it("Date Range Selector Reducer ... Vaidate INVALID_DATE_RANGE event)", function() {
 103                 var moment = require('moment');
 104                 const initialState = {};
 105                 const rangeChangeAction = {
 106                         type: dateRangeActionTypes.INVALID_DATE_RANGE,
 107                         data: {
 108                                 dateRange: {
 109                                         startDate: moment(new Date('07/04/2016')),
 110                                         endDate: moment(new Date('06/05/2016'))
 111                                 },
 112                                 errorMsg: 'some eror message'
 113                         }};
 114                 const newState = reducer(initialState, rangeChangeAction);
 115                 expect(newState.startDate).to.exist;
 116                 expect(newState.startDate.toDate().getTime()).to.equal(new Date('07/04/2016').getTime());
 117                 expect(newState.endDate).to.exist;
 118                 expect(newState.endDate.toDate().getTime()).to.equal(new Date('06/05/2016').getTime());
 119                 expect(newState.period).to.not.exist;
 120                 expect(newState.periodErrText).to.equal('some eror message');
 121                 expect(newState.periodErrSev).to.equal(MESSAGE_LEVEL_DANGER);
 122         });
 123         it("Date Range Selector Reducer ... Vaidate PERIOD_CHANGE event)", function() {
 124                 var moment = require('moment');
 125                 const initialState = {
 126                         startDate: moment(new Date('07/20/2016')),
 127                         endDate: moment(new Date('07/09/2016')),
 128                         period: CUSTOM,
 129                         periodErrText: 'some error text',
 130                         periodErrSev: 'some error severity'
 131                 };
 132                 const rangeChangeAction = {
 133                         type: dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE,
 134                         data: {
 135                                 dateRange: {
 136                                         startDate: moment(new Date('07/04/2016')),
 137                                         endDate: moment(new Date('07/05/2016'))
 138                                 },
 139                                 period: YESTERDAY
 140                         }
 141                 };
 142                 const newState = reducer(initialState, rangeChangeAction);
 143                 expect(newState.startDate).to.exist;
 144                 expect(newState.startDate.toDate().getTime()).to.equal(new Date('07/04/2016').getTime());
 145                 expect(newState.endDate).to.exist;
 146                 expect(newState.endDate.toDate().getTime()).to.equal(new Date('07/05/2016').getTime());
 147                 expect(newState.period).to.equal(YESTERDAY);
 148                 expect(newState.periodErrText).to.equal('');
 149                 expect(newState.periodErrSev).to.equal('');
 150         });
 151
 152         // test Actions
 153         it("Date Range Selector Action - test EVENT_PERIOD_CHANGE (period = Today)", function() {
 154                 var moment = require('moment');
 155                 const startDate = moment(new Date());
 156                 const endDate = moment(new Date());
 157                 const period = TODAY;
 158
 159                 const results = DateRangeSelectorActions.onPeriodChange(startDate, endDate, period);
 160
 161                 const expectedStartTime = moment(new Date());
 162                 setTime(expectedStartTime, 0, 0, 0);
 163                 const expectedEndTime = moment(new Date());
 164                 setTime(expectedEndTime, 23, 59, 59);
 165                 const expectedAction = buildExpectedPeriodChangeAction(expectedStartTime, expectedEndTime, TODAY);
 166
 167                 expect(results.type).to.equal(expectedAction.type);
 168                 validateDates(results.data.dateRange.startDate, expectedAction.data.dateRange.startDate);
 169                 validateDates(results.data.dateRange.endDate, expectedAction.data.dateRange.endDate);
 170                 expect(results.data.period).to.equal(expectedAction.data.period);
 171         });
 172         it("Date Range Selector Action - test EVENT_PERIOD_CHANGE (period = Yesterday)", function() {
 173                 var moment = require('moment');
 174                 const startDate = moment(new Date());
 175                 const endDate = moment(new Date());
 176                 const period = YESTERDAY;
 177
 178                 const results = DateRangeSelectorActions.onPeriodChange(startDate, endDate, period);
 179
 180                 const expectedStartTime = moment(new Date()).subtract(1, 'days');
 181                 setTime(expectedStartTime, 0, 0, 0);
 182                 const expectedEndTime = moment(new Date());
 183                 setTime(expectedEndTime, 23, 59, 59);
 184                 const expectedAction = buildExpectedPeriodChangeAction(expectedStartTime, expectedEndTime, YESTERDAY);
 185
 186                 expect(results.type).to.equal(expectedAction.type);
 187                 validateDates(results.data.dateRange.startDate, expectedAction.data.dateRange.startDate);
 188                 validateDates(results.data.dateRange.endDate, expectedAction.data.dateRange.endDate);
 189                 expect(results.data.period).to.equal(expectedAction.data.period);
 190         });
 191         it("Date Range Selector Action - test EVENT_PERIOD_CHANGE (period = Last Week)", function() {
 192                 var moment = require('moment');
 193                 const startDate = moment(new Date());
 194                 const endDate = moment(new Date());
 195                 const period = LAST_WEEK;
 196
 197                 const results = DateRangeSelectorActions.onPeriodChange(startDate, endDate, period);
 198
 199                 const expectedStartTime = moment(new Date()).subtract(7, 'days');
 200                 setTime(expectedStartTime, 0, 0, 0);
 201                 const expectedEndTime = moment(new Date());
 202                 setTime(expectedEndTime, 23, 59, 59);
 203                 const expectedAction = buildExpectedPeriodChangeAction(expectedStartTime, expectedEndTime, LAST_WEEK);
 204
 205                 expect(results.type).to.equal(expectedAction.type);
 206                 validateDates(results.data.dateRange.startDate, expectedAction.data.dateRange.startDate);
 207                 validateDates(results.data.dateRange.endDate, expectedAction.data.dateRange.endDate);
 208                 expect(results.data.period).to.equal(expectedAction.data.period);
 209         });
 210         it("Date Range Selector Action - test EVENT_PERIOD_CHANGE (period = Last Month)", function() {
 211                 var moment = require('moment');
 212                 const startDate = moment(new Date());
 213                 const endDate = moment(new Date());
 214                 const period = LAST_MONTH;
 215
 216                 const results = DateRangeSelectorActions.onPeriodChange(startDate, endDate, period);
 217
 218                 const expectedStartTime = moment(new Date()).subtract(1, 'months');
 219                 setTime(expectedStartTime, 0, 0, 0);
 220                 const expectedEndTime = moment(new Date());
 221                 setTime(expectedEndTime, 23, 59, 59);
 222                 const expectedAction = buildExpectedPeriodChangeAction(expectedStartTime, expectedEndTime, LAST_MONTH);
 223
 224                 expect(results.type).to.equal(expectedAction.type);
 225                 validateDates(results.data.dateRange.startDate, expectedAction.data.dateRange.startDate);
 226                 validateDates(results.data.dateRange.endDate, expectedAction.data.dateRange.endDate);
 227                 expect(results.data.period).to.equal(expectedAction.data.period);
 228         });
 229         it("Date Range Selector Action - test EVENT_PERIOD_CHANGE (period = Custom)", function() {
 230                 var moment = require('moment');
 231                 const startDate = moment(new Date()).subtract(3, 'months');
 232                 const endDate = moment(new Date()).add(6, 'days');
 233                 const period = CUSTOM;
 234
 235                 const results = DateRangeSelectorActions.onPeriodChange(startDate, endDate, period);
 236
 237                 setTime(startDate, 0, 0, 0);
 238                 setTime(endDate, 23, 59, 59);
 239                 const expectedAction = buildExpectedPeriodChangeAction(startDate, endDate, CUSTOM);
 240
 241                 expect(results.type).to.equal(expectedAction.type);
 242                 validateDates(results.data.dateRange.startDate, expectedAction.data.dateRange.startDate);
 243                 validateDates(results.data.dateRange.endDate, expectedAction.data.dateRange.endDate);
 244                 expect(results.data.period).to.equal(expectedAction.data.period);
 245         });
 246         it("Date Range Selector Action - test EVENT_PERIOD_CHANGE (period = Unknown)", function() {
 247                 var moment = require('moment');
 248                 const startDate = moment(new Date()).subtract(3, 'months');
 249                 const endDate = moment(new Date()).add(6, 'days');
 250                 const period = 'Some Unknown Period';
 251
 252                 const results = DateRangeSelectorActions.onPeriodChange(startDate, endDate, period);
 253
 254                 let expectedErrorMsg = ERROR_UNKNOWN_PERIOD + ': ' + period;
 255                 const expectedAction = buildExpectedUnknownPeriodAction(startDate, endDate, period, expectedErrorMsg);
 256
 257                 expect(results.type).to.deep.equal(expectedAction.type);
 258                 validateDates(results.data.dateRange.startDate, expectedAction.data.dateRange.startDate);
 259                 validateDates(results.data.dateRange.endDate, expectedAction.data.dateRange.endDate);
 260                 expect(results.data.period).to.equal(expectedAction.data.period);
 261         });
 262
 263         // TODO - need tests to confirm DateRangeSelectorActions.onPeriodChange is called when clicking any of the 'quick link' periods
 264
 265
 266         // helper functions
 267         function setTime(moment, hours, minutes, seconds) {
 268                 moment.toDate();
 269                 moment.hour(hours);
 270                 moment.minute(minutes);
 271                 moment.second(seconds);
 272         }
 273
 274         function validateDates(actualDate, expectedDates) {
 275                 expect(actualDate.toDate().getYear()).to.equal(expectedDates.toDate().getYear());
 276                 expect(actualDate.toDate().getMonth()).to.equal(expectedDates.toDate().getMonth());
 277                 expect(actualDate.toDate().getDay()).to.equal(expectedDates.toDate().getDay());
 278                 expect(actualDate.toDate().getHours()).to.equal(expectedDates.toDate().getHours());
 279                 expect(actualDate.toDate().getMinutes()).to.equal(expectedDates.toDate().getMinutes());
 280         }
 281
 282         function buildExpectedPeriodChangeAction(start, end, period) {
 283                 return {
 284                         type: dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE,
 285                         data: {
 286                                 dateRange: {
 287                                         startDate: start,
 288                                         endDate: end
 289                                 },
 290                                 period: period
 291                         }
 292                 };
 293         }
 294
 295         function buildExpectedUnknownPeriodAction(start, end, period, errorMsg) {
 296                 return {
 297                         type: dateRangeSelectorActionTypes.EVENT_PERIOD_ERROR,
 298                         data: {
 299                                 dateRange: {
 300                                         startDate: start,
 301                                         endDate: end
 302                                 },
 303                                 period: period,
 304                                 errorMsg: errorMsg
 305                         }
 306                 };
 307         }
 308 });