Fixed all tests

assets/src/scripts/monitoring-location/components/hydrograph/graph-controls.test.js

@@ -6,7 +6,7 @@ import * as utils from 'ui/utils';
 
 import {configureStore} from 'ml/store';
 import * as hydrographData from 'ml/store/hydrograph-data';
-import {setSelectedDateRange} from 'ml/store/hydrograph-state';
+import {setSelectedTimeSpan} from 'ml/store/hydrograph-state';
 
 import * as dataIndicator from './data-indicator';
 import {drawGraphControls} from './graph-controls';
@@ -35,7 +35,7 @@ describe('monitoring-location/components/hydrograph/graph-controls', () => {
                 },
                 hydrographState: {
                     showCompareIVData: false,
-                    selectedDateRange: 'P7D',
+                    selectedTimeSpan: 'P7D',
                     showMedianData: false,
                     selectedParameterCode: '72019'
                 }
@@ -89,8 +89,11 @@ describe('monitoring-location/components/hydrograph/graph-controls', () => {
             expect(showDataIndicatorSpy.mock.calls[1][0]).toBe(false);
         });
 
-        it('Should change the checkbox to disabled if the selectedDateRange is set to custom', () => {
-            store.dispatch(setSelectedDateRange('custom'));
+        it('Should change the checkbox to disabled if the selectedTimeSpan is set is a date range', () => {
+            store.dispatch(setSelectedTimeSpan({
+                start: '2020-02-05',
+                end: '2020-02-10'
+            }));
             return new Promise(resolve => {
                 window.requestAnimationFrame(() => {
                     const checkbox = select('#last-year-checkbox');
@@ -101,8 +104,8 @@ describe('monitoring-location/components/hydrograph/graph-controls', () => {
             });
         });
 
-        it('Should change the checkbox to disabled if the selectedDateRange is a custom period', () => {
-            store.dispatch(setSelectedDateRange('P45D'));
+        it('Should change the checkbox to disabled if the selectedTimeSpan is a custom period', () => {
+            store.dispatch(setSelectedTimeSpan('P45D'));
             return new Promise(resolve => {
                 window.requestAnimationFrame(() => {
                     const checkbox = select('#last-year-checkbox');

assets/src/scripts/monitoring-location/components/hydrograph/index.test.js

@@ -125,7 +125,7 @@ describe('monitoring-location/components/hydrograph module', () => {
                 });
                 expect(store.getState().hydrographState).toEqual({
                     selectedParameterCode: '72019',
-                    selectedDateRange: 'P7D',
+                    selectedTimeSpan: 'P7D',
                     showCompareIVData: false,
                     selectedIVMethodID: undefined
                 });
@@ -146,7 +146,7 @@ describe('monitoring-location/components/hydrograph module', () => {
                 });
                 expect(store.getState().hydrographState).toEqual({
                     selectedParameterCode: '72019',
-                    selectedDateRange: 'P45D',
+                    selectedTimeSpan: 'P45D',
                     showCompareIVData: false,
                     selectedIVMethodID: undefined
                 });
@@ -168,8 +168,7 @@ describe('monitoring-location/components/hydrograph module', () => {
                 });
                 expect(store.getState().hydrographState).toEqual({
                     selectedParameterCode: '72019',
-                    selectedDateRange: 'custom',
-                    selectedCustomDateRange: {
+                    selectedTimeSpan: {
                         start: '2020-02-01',
                         end: '2020-02-15'
                     },
@@ -193,7 +192,7 @@ describe('monitoring-location/components/hydrograph module', () => {
                 });
                 expect(store.getState().hydrographState).toEqual({
                     selectedParameterCode: '72019',
-                    selectedDateRange: 'P7D',
+                    selectedTimeSpan: 'P7D',
                     showCompareIVData: true,
                     selectedIVMethodID: undefined
                 });
@@ -226,7 +225,7 @@ describe('monitoring-location/components/hydrograph module', () => {
             });
             expect(store.getState().hydrographState).toEqual({
                 selectedParameterCode: '72019',
-                selectedDateRange: 'P7D',
+                selectedTimeSpan: 'P7D',
                 showCompareIVData: false
             });
             expect(retrieveWaterwatchDataSpy).toHaveBeenCalled();
@@ -318,6 +317,10 @@ describe('monitoring-location/components/hydrograph module', () => {
             expect(selectAll('#change-time-span-container').size()).toBe(1);
         });
 
+        it('should have download data form', () => {
+            expect(selectAll('#download-graph-data-container').size()).toBe(1);
+        })
+
         it('should have method select element', () => {
             expect(selectAll('#ts-method-select-container').size()).toBe(1);
         });
@@ -410,9 +413,12 @@ describe('monitoring-location/components/hydrograph module', () => {
             expect(selectAll('.cursor-slider-svg').size()).toBe(0);
         });
 
-        it('should not have date control elements', () => {
-            expect(selectAll('#ts-daterange-select-container').size()).toBe(0);
-            expect(selectAll('#ts-customdaterange-select-container').size()).toBe(0);
+        it('should not have time span elements', () => {
+            expect(selectAll('#change-time-span-container').size()).toBe(0);
+        });
+
+        it('should not have the download data element', () => {
+            expect(selectAll('#download-graph-data-container').size()).toBe(0);
         });
 
         it('should not have method select element', () => {

assets/src/scripts/monitoring-location/components/hydrograph/parameters.test.js

@@ -17,7 +17,7 @@ describe('monitoring-location/components/hydrograph/parameters module', () => {
     const TEST_STATE = {
        hydrographParameters: TEST_HYDROGRAPH_PARAMETERS,
        hydrographState: {
-           selectedDateRange: 'P7D',
+           selectedTimeSpan: 'P7D',
            selectedParameterCode: '72019'
        }
     };

assets/src/scripts/monitoring-location/components/hydrograph/select-actions.test.js

@@ -18,8 +18,7 @@ describe('monitoring-location/components/hydrograph/select-actions', () => {
             groundwaterLevels: TEST_GW_LEVELS
         },
         hydrographState: {
-            selectedDateRange: 'P7D',
-            selectedCustomDateRange: null,
+            selectedTimeSpan: 'P7D',
             selectedIVMethodID: '90649'
         }
     };

assets/src/scripts/monitoring-location/components/hydrograph/time-span-controls.js

@@ -182,7 +182,7 @@ export const drawTimeSpanControls = function(container, store, siteno) {
     inputContainer.append('div')
         .text('Or');
     inputContainer.append('div')
-        .attr('class', 'time-before-today-container')
+        .attr('class', 'days-before-today-container')
         .call(drawDaysBeforeTodayForm, store);
     container.append('button')
         .attr('class', 'usa-button')

assets/src/scripts/monitoring-location/components/hydrograph/time-span-controls.test.js

@@ -4,18 +4,24 @@ import sinon from 'sinon';
 import config from 'ui/config';
 import * as utils from 'ui/utils';
 
-import {getSelectedTimeSpan} from 'ml/selectors/hydrograph-state-selector';
+import {getSelectedTimeSpan, getGraphBrushOffset} from 'ml/selectors/hydrograph-state-selector';
 
 import {configureStore} from 'ml/store';
 import * as hydrographData from 'ml/store/hydrograph-data';
+import {setSelectedTimeSpan} from 'ml/store/hydrograph-state';
 
-import {drawDateRangeControls} from './date-controls';
+
+import {drawTimeSpanControls} from './time-span-controls';
 import * as dataIndicator from './data-indicator';
 
 const TEST_STATE = {
     hydrographState: {
-       selectedTimeSpan: 'P7D',
-       selectedParameterCode: '00065'
+        selectedTimeSpan: 'P7D',
+        selectedParameterCode: '00065',
+        graphBrushOffset: {
+            start: 0,
+            end: 10000000000
+        }
     }
 };
 
@@ -43,9 +49,9 @@ describe('monitoring-location/components/hydrograph/time-span-controls', () => {
         div.remove();
     });
 
-    describe('drawTimeSpanControls initial rendering', () => {
+    describe('drawTimeSpanControls', () => {
         it('Expects the time span controls to be created and initialized with the time span in the store of P7D', () => {
-            drawDateRangeControls(div, store, '12345678');
+            drawTimeSpanControls(div, store, '12345678');
 
             const startDateInput = div.select('#start-date');
             const endDateInput = div.select('#end-date');
@@ -61,5 +67,211 @@ describe('monitoring-location/components/hydrograph/time-span-controls', () => {
             expect(daysBeforeTodayInput.property('value')).toEqual('7');
         });
 
+        it('Expects the time span controls to be initialized with the dates when timeSpan is an object', () => {
+            store.dispatch(setSelectedTimeSpan({
+                start: '2020-03-03',
+                end: '2020-03-15'
+            }));
+
+            drawTimeSpanControls(div, store, '12345678');
+
+            const startDateInput = div.select('#start-date');
+            const endDateInput = div.select('#end-date');
+            const daysBeforeTodayInput = div.select('#days-before-today');
+            expect(startDateInput.size()).toBe(1);
+            expect(startDateInput.attr('type')).toEqual('text');
+            expect(startDateInput.property('value')).toEqual('03/03/2020');
+            expect(endDateInput.size()).toBe(1);
+            expect(endDateInput.attr('type')).toEqual('text');
+            expect(endDateInput.property('value')).toEqual('03/15/2020');
+            expect(daysBeforeTodayInput.size()).toBe(1);
+            expect(daysBeforeTodayInput.attr('type')).toEqual('text');
+            expect(daysBeforeTodayInput.property('value')).toEqual('');
+        });
+    });
+
+    describe('Tests when clicking the button', () => {
+        let button;
+        beforeEach(() => {
+            drawTimeSpanControls(div, store, '12345678');
+            button = div.select('.usa-button');
+        });
+
+        it('Show error alert when the user clears all data', () => {
+            div.select('#days-before-today').property('value', '');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('Do not show the alert and update the store when the user has a start date and end date', () => {
+            div.select('#start-date').property('value', '02/05/2020');
+            div.select('#end-date').property('value', '02/28/2020');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(0);
+            expect(retrieveSpy).toHaveBeenCalledWith('12345678', {
+                parameterCode: '00065',
+                period: null,
+                startTime: '2020-02-05T00:00:00.000-06:00',
+                endTime: '2020-02-28T23:59:59.999-06:00',
+                loadCompare: false,
+                loadMedian: false
+            });
+            expect(showDataIndicatorSpy).toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual({
+                start: '2020-02-05',
+                end: '2020-02-28'
+            });
+            expect(getGraphBrushOffset(state)).toBeNull();
+        });
+
+        it('Show alert when the user enters a start date but no end date', () => {
+            div.select('#start-date').property('value', '02/05/2020');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('Show alert when the user enters a start date and invalid end date', () => {
+            div.select('#start-date').property('value', '02/05/2020');
+            div.select('#end-date').property('value', 'aaa');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('Show alert when the user enters a start date and an end date that is before start date', () => {
+            div.select('#start-date').property('value', '02/05/2020');
+            div.select('#end-date').property('value', '01/05/2020');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('Show alert when the users enter an end date but no start date', () => {
+            div.select('#end-date').property('value', '01/05/2020');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('show alert when the user enters an invalid start date and an end date', () => {
+            div.select('#start-date').property('value', 'aaa');
+            div.select('#end-date').property('value', '01/05/2020');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('Should clear a previous alert if data is now valid', () => {
+            div.select('#start-date').property('value', 'aaa');
+            div.select('#end-date').property('value', '01/05/2020');
+            button.dispatch('click');
+
+            div.select('#start-date').property('value', '01/01/2020');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(0);
+            expect(retrieveSpy).toHaveBeenCalledWith('12345678', {
+                parameterCode: '00065',
+                period: null,
+                startTime: '2020-01-01T00:00:00.000-06:00',
+                endTime: '2020-01-05T23:59:59.999-06:00',
+                loadCompare: false,
+                loadMedian: false
+            });
+            expect(showDataIndicatorSpy).toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual({
+                start: '2020-01-01',
+                end: '2020-01-05'
+            });
+            expect(getGraphBrushOffset(state)).toBeNull();
+        });
+
+        it('Should show an alert if the days before today is not a number', () => {
+            div.select('#days-before-today').property('value', 'AD');
+            button.dispatch('click');
+
+            const state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('Should show an alert if the days before today is negative or zero', () => {
+            div.select('#days-before-today').property('value', '-2');
+            button.dispatch('click');
+
+            let state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+
+            div.select('#days-before-today').property('value', '0');
+            button.dispatch('click');
+
+            state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(1);
+            expect(retrieveSpy).not.toHaveBeenCalled();
+            expect(showDataIndicatorSpy).not.toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P7D');
+            expect(getGraphBrushOffset(state)).not.toBeNull();
+        });
+
+        it('Should update the time span if days before today is valid', () => {
+            div.select('#days-before-today').property('value', '45');
+            button.dispatch('click');
+
+            let state = store.getState();
+            expect(div.select('.usa-alert--error').size()).toBe(0);
+            expect(retrieveSpy).toHaveBeenCalledWith('12345678', {
+                parameterCode: '00065',
+                period: 'P45D',
+                startTime: null,
+                endTime: null,
+                loadCompare: false,
+                loadMedian: false
+            });
+            expect(showDataIndicatorSpy).toHaveBeenCalled();
+            expect(getSelectedTimeSpan(state)).toEqual('P45D');
+            expect(getGraphBrushOffset(state)).toBeNull();
+        });
     });
 });

assets/src/scripts/monitoring-location/selectors/hydrograph-state-selector.test.js

@@ -38,14 +38,14 @@ describe('monitoring-location/selectors/hydrograph-state-selector', () => {
         });
     });
 
-    describe('getSelectedDateRange', () => {
-       it('Returns null if no selected date range', () => {
+    describe('getSelectedTimeSpan', () => {
+       it('Returns null if no selected time span', () => {
            expect(getSelectedTimeSpan({
                hydrographState: {}
            })).toBeNull();
        });
 
-       it('Returns selected date range', () => {
+       it('Returns selected time span', () => {
            expect(getSelectedTimeSpan({
                hydrographState: {
                    selectedTimeSpan: 'P45D'
@@ -126,7 +126,7 @@ describe('monitoring-location/selectors/hydrograph-state-selector', () => {
 
 
     describe('getInputsForRetrieval', () => {
-        it('Return expected inputs when selectedDateRange is not custom', () => {
+        it('Return expected inputs when selectedTimeSpan is for days before today', () => {
             expect(getInputsForRetrieval({
                 hydrographState: {
                     showCompareIVData: false,
@@ -143,7 +143,7 @@ describe('monitoring-location/selectors/hydrograph-state-selector', () => {
                 loadMedian: true
             });
         });
-        it('Return expects inputs when selectedDateRange is custom', () => {
+        it('Return expects inputs when selectedTimeSpan is a date range', () => {
             expect(getInputsForRetrieval({
                 hydrographState: {
                     showCompareIVData: true,

assets/src/scripts/monitoring-location/url-params.js

@@ -34,11 +34,13 @@ export const renderTimeSeriesUrlParams = function(store) {
         if (Object.keys(methods).length > 1) {
             params.set('timeSeriesId', methodId);
         }
-        if (timeSpanIsDuration) {
-            params.set('period', timeSpan);
-        } else {
-            params.set('startDT', timeSpan.start);
-            params.set('endDT', timeSpan.end);
+        if (timeSpan) {
+            if (timeSpanIsDuration) {
+                params.set('period', timeSpan);
+            } else {
+                params.set('startDT', timeSpan.start);
+                params.set('endDT', timeSpan.end);
+            }
         }
 
         if (compare) {

assets/src/scripts/monitoring-location/url-params.test.js

 import {configureStore} from 'ml/store';
-import {setSelectedDateRange} from './store/hydrograph-state';
+import {setSelectedTimeSpan} from './store/hydrograph-state';
 import {getParamString, renderTimeSeriesUrlParams} from 'ml/url-params';
 
 describe('monitoring-location/url-params module', () => {
@@ -34,8 +34,7 @@ describe('monitoring-location/url-params module', () => {
             hydrographState: {
                 showCompareIVData: false,
                 selectedParameterCode: '00010',
-                selectedDateRange: 'P7D',
-                selectedCustomDateRange: null,
+                selectedTimeSpan: 'P7D',
                 selectedIVMethodID: '69928'
             }
         };
@@ -52,7 +51,7 @@ describe('monitoring-location/url-params module', () => {
             renderTimeSeriesUrlParams(store);
             expect(window.location.hash).toContain('parameterCode=00010');
             expect(window.location.hash).not.toContain('compare=true');
-            expect(window.location.hash).not.toContain('period');
+            expect(window.location.hash).toContain('period');
             expect(window.location.hash).not.toContain('startDT');
             expect(window.location.hash).not.toContain('endDT');
             expect(window.location.hash).not.toContain('timeSeriesId');
@@ -70,7 +69,7 @@ describe('monitoring-location/url-params module', () => {
 
             expect(window.location.hash).toContain('parameterCode=00010');
             expect(window.location.hash).toContain('compare=true');
-            expect(window.location.hash).not.toContain('period');
+            expect(window.location.hash).toContain('period');
             expect(window.location.hash).not.toContain('startDT');
             expect(window.location.hash).not.toContain('endDT');
             expect(window.location.hash).not.toContain('timeSeriesId');
@@ -81,7 +80,7 @@ describe('monitoring-location/url-params module', () => {
                 ...TEST_STATE,
                 hydrographState: {
                     ...TEST_STATE.hydrographState,
-                    selectedDateRange: 'P30D'
+                    selectedTimeSpan: 'P30D'
                 }
             });
             renderTimeSeriesUrlParams(store);
@@ -93,7 +92,7 @@ describe('monitoring-location/url-params module', () => {
             expect(window.location.hash).not.toContain('endDT');
             expect(window.location.hash).not.toContain('timeSeriesId');
 
-            store.dispatch(setSelectedDateRange('P20D'));
+            store.dispatch(setSelectedTimeSpan('P20D'));
             return new Promise(resolve => {
                 window.requestAnimationFrame(() => {
                     expect(window.location.hash).toContain('period=P20D');
@@ -102,39 +101,12 @@ describe('monitoring-location/url-params module', () => {
             });
         });
 
-        it('does not add period if current date range is P7D', () => {
-            let store = configureStore({
-                ...TEST_STATE,
-                hydrographState: {
-                    ...TEST_STATE.hydrographState,
-                    selectedDateRange: 'P7D'
-                }
-            });
-            renderTimeSeriesUrlParams(store);
-
-            expect(window.location.hash).toContain('parameterCode=00010');
-            expect(window.location.hash).not.toContain('compare=true');
-            expect(window.location.hash).not.toContain('period=P7D');
-            expect(window.location.hash).not.toContain('startDT');
-            expect(window.location.hash).not.toContain('endDT');
-            expect(window.location.hash).not.toContain('timeSeriesId');
-
-            store.dispatch(setSelectedDateRange('P365D'));
-            return new Promise(resolve => {
-                window.requestAnimationFrame(() => {
-                    expect(window.location.hash).toContain('period=P365D');
-                    resolve();
-                });
-            });
-        });
-
-        it('Contains startDT and endDT in url if selectedCustomDateRange is set in store', () => {
+        it('Contains startDT and endDT in url if time span is a date range in store', () => {
             let store = configureStore({
                 ...TEST_STATE,
                 hydrographState: {
                     ...TEST_STATE.hydrographState,
-                    selectedDateRange: 'custom',
-                    selectedCustomDateRange: {
+                    selectedTimeSpan:  {
                         'start': '2020-03-01',
                         'end': '2020-03-15'
                     }
@@ -172,7 +144,7 @@ describe('monitoring-location/url-params module', () => {
 
             expect(window.location.hash).toContain('parameterCode=00010');
             expect(window.location.hash).not.toContain('compare=true');
-            expect(window.location.hash).not.toContain('period');
+            expect(window.location.hash).toContain('period');
             expect(window.location.hash).not.toContain('startDT');
             expect(window.location.hash).not.toContain('endDT');
             expect(window.location.hash).toContain('timeSeriesId=69928');