From 1cc2abeee63acd03c871fcd85c664228a2d8025b Mon Sep 17 00:00:00 2001
From: Mary Bucknell <mbucknell@usgs.gov>
Date: Wed, 25 Apr 2018 15:11:15 -0500
Subject: [PATCH] Added tests for the new graph controls and place them outside
the graph-container so that they don't disappear with the graph is redrawn.
---
.../scripts/components/hydrograph/index.js | 10 ++++----
.../components/hydrograph/index.spec.js | 25 +++++++++++++++++++
assets/src/scripts/store/index.js | 8 +++---
3 files changed, 34 insertions(+), 9 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index e6d046b44..8394f6e8d 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -324,7 +324,7 @@ const createDaterangeControls = function(elem, siteno) {
name: '1 year',
period: 'P1Y'
}];
- const container = elem.append('ul')
+ const container = elem.insert('ul', ':first-child')
.attr('id', 'ts-daterange-select-container')
.attr('class', 'usa-fieldset-inputs usa-unstyled-list');
const li = container.selectAll('li')
@@ -349,9 +349,7 @@ const createDaterangeControls = function(elem, siteno) {
const timeSeriesGraph = function (elem, siteno) {
elem.call(watermark)
- .call(createDaterangeControls, siteno);
-
- elem.append('div')
+ .append('div')
.attr('class', 'hydrograph-container')
.call(createTitle)
.call(createTooltipText)
@@ -494,7 +492,9 @@ const attachToNode = function (store, node, {siteno} = {}) {
store.dispatch(Actions.resizeUI(window.innerWidth, node.offsetWidth));
select(node)
- .call(provide(store));
+ .call(provide(store))
+ .call(createDaterangeControls, siteno);
+
select(node).select('.graph-container')
.call(link(controlGraphDisplay, timeSeriesSelector('current')()))
.call(timeSeriesGraph, siteno)
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index 3f47ff774..caa3ce06d 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -396,4 +396,29 @@ describe('Hydrograph charting module', () => {
expect(select(graphNode).select('.provisional-data-alert').attr('hidden')).toBe('true');
});
});
+
+ fdescribe('Creating date range controls', () => {
+ let store;
+ beforeEach(() => {
+ store = configureStore(TEST_STATE);
+ attachToNode(store, graphNode, {siteno: '12345678'});
+
+ });
+
+ it('Expects the date range controls to be created', () => {
+ let dateRangeContainer = select(graphNode).select('#ts-daterange-select-container');
+
+ expect(dateRangeContainer.size()).toBe(1);
+ expect(dateRangeContainer.selectAll('input[type=radio]').size()).toBe(3);
+ });
+
+ it('Expects to retrieve the extended timeseries when the radio buttons are change', () => {
+ spyOn(Actions, 'retrieveExtendedTimeseries');
+ let lastRadio = select(graphNode).select('#one-year');
+ lastRadio.attr('checked', true);
+ lastRadio.dispatch('change');
+
+ expect(Actions.retrieveExtendedTimeseries).toHaveBeenCalledWith('12345678', 'P1Y');
+ });
+ });
});
diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js
index 8358006eb..ebb471a9a 100644
--- a/assets/src/scripts/store/index.js
+++ b/assets/src/scripts/store/index.js
@@ -8,7 +8,7 @@ const { getMedianStatistics, getPreviousYearTimeseries, getTimeseries,
parseMedianData, sortedParameters } = require('../models');
const { normalize } = require('../schema');
const { fetchFloodFeatures, fetchFloodExtent } = require('../floodData');
-const { currentParmCdSelector, currentDateRangeSelector, hasFetchedTimeseries } = require('../selectors/timeseriesSelector');
+const { getCurrentParmCd, getCurrentDateRange, hasTimeseries } = require('../selectors/timeseriesSelector');
const { floodDataReducer: floodData } = require('./floodDataReducer');
const { floodStateReducer: floodState } = require('./floodStateReducer');
@@ -108,10 +108,10 @@ export const Actions = {
retrieveExtendedTimeseries(site, period) {
return function(dispatch, getState) {
const state = getState();
- const parmCd = currentParmCdSelector(state);
+ const parmCd = getCurrentParmCd(state);
const tsKey = period === 'P7D' ? 'current' : `current:${period}:${parmCd}`;
dispatch(Actions.setCurrentDateRange(period));
- if (!hasFetchedTimeseries(tsKey)(state)) {
+ if (!hasTimeseries(tsKey)()()(state)) {
const endTime = new Date(); //TODO get this from the current data
let startTime = new Date(endTime);
@@ -164,7 +164,7 @@ export const Actions = {
updateCurrentVariable(siteno, variableID) {
return function(dispatch, getState) {
dispatch(Actions.setCurrentVariable(variableID));
- dispatch(Actions.retrieveExtendedTimeseries(siteno, currentDateRangeSelector(getState())));
+ dispatch(Actions.retrieveExtendedTimeseries(siteno, getCurrentDateRange(getState())));
};
},
startTimeseriesPlay(maxCursorOffset) {
--
GitLab