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