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