-
Bucknell, Mary S. authoredBucknell, Mary S. authored
index.test.js 16.90 KiB
import {select} from 'd3-selection';
import sinon from 'sinon';
import * as utils from 'ui/utils';
import config from 'ui/config';
import {configureStore} from 'ml/store';
import {Actions as floodDataActions} from 'ml/store/flood-inundation';
import * as hydrographData from 'ml/store/hydrograph-data';
import * as hydrographParameters from 'ml/store/hydrograph-parameters';
import {attachToNode} from './index';
import {
TEST_CURRENT_TIME_RANGE,
TEST_GW_LEVELS,
TEST_HYDROGRAPH_PARAMETERS,
TEST_PRIMARY_IV_DATA
} from './mock-hydrograph-state';
describe('monitoring-location/components/hydrograph module', () => {
utils.mediaQuery = jest.fn().mockReturnValue(true);
utils.wrap = jest.fn();
config.locationTimeZone = 'America/Chicago';
config.ivPeriodOfRecord = {
'72019': {
begin_date: '01-02-2001',
end_date: '10-15-2015'
},
'00060': {
begin_date: '04-01-1991',
end_date: '10-15-2007'
},
'00093': {
begin_date: '11-25-2001',
end_date: '03-01-2020'
},
'00067': {
begin_date: '04-01-1990',
end_date: '10-15-2006'
}
};
config.igwPeriodOfRecord = {
'72019': {
begin_date: '01-02-2000',
end_date: '10-15-2015'
}
};
let graphNode;
let fakeServer;
let nodeElem;
const INITIAL_PARAMETERS = {
siteno: '11112222',
agencyCode: 'USGS',
sitename: 'Site name',
parameterCode: '72019'
};
beforeEach(() => {
let body = select('body');
body.append('a')
.attr('id', 'classic-page-link')
.attr('href', 'https://fakeserver/link');
let component = body.append('div')
.attr('id', 'hydrograph');
component.append('div').attr('class', 'loading-indicator-container');
component.append('div').attr('class', 'graph-container'); component.append('div').attr('class', 'select-time-series-container');
component.append('div').attr('id', 'iv-data-table-container');
graphNode = document.getElementById('hydrograph');
nodeElem = select(graphNode);
fakeServer = sinon.createFakeServer();
});
afterEach(() => {
fakeServer.restore();
select('#hydrograph').remove();
select('#classic-page-link').remove();
});
describe('Tests for initial data fetching and setting', () => {
let store;
let retrieveHydrographDataSpy, retrieveHydrographParametersSpy, retrieveWaterwatchDataSpy;
beforeEach(() => {
store = configureStore({
hydrographData: {},
hydrographState: {},
hydrographParameters: {},
floodData: {},
ui: {
width: 1000
}
});
retrieveHydrographDataSpy = jest.spyOn(hydrographData, 'retrieveHydrographData');
retrieveHydrographParametersSpy = jest.spyOn(hydrographParameters, 'retrieveHydrographParameters');
retrieveWaterwatchDataSpy = jest.spyOn(floodDataActions, 'retrieveWaterwatchData');
});
it('Loading indicator should be shown', () => {
attachToNode(store, graphNode, INITIAL_PARAMETERS);
expect(nodeElem.select('.loading-indicator').size()).toBe(1);
});
describe('Fetching initial hydrograph data', () => {
it('With just parameter code set', () => {
attachToNode(store, graphNode, INITIAL_PARAMETERS);
expect(retrieveHydrographDataSpy).toHaveBeenCalledWith('11112222', {
parameterCode: '72019',
period: 'P7D',
startTime: null,
endTime: null,
loadCompare: undefined,
loadMedian: false
});
expect(store.getState().hydrographState).toEqual({
selectedParameterCode: '72019',
selectedDateRange: 'P7D',
showCompareIVData: undefined,
selectedIVMethodID: undefined
});
});
it('With custom period', () => {
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
period: 'P45D'
});
expect(retrieveHydrographDataSpy).toHaveBeenCalledWith('11112222', {
parameterCode: '72019',
period: 'P45D',
startTime: null,
endTime: null,
loadCompare: undefined, loadMedian: false
});
expect(store.getState().hydrographState).toEqual({
selectedParameterCode: '72019',
selectedDateRange: 'P45D',
showCompareIVData: undefined,
selectedIVMethodID: undefined
});
});
it('With custom time range', () => {
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
startDT: '2020-02-01',
endDT: '2020-02-15'
});
expect(retrieveHydrographDataSpy).toHaveBeenCalledWith('11112222', {
parameterCode: '72019',
period: null,
startTime: '2020-02-01T00:00:00.000-06:00',
endTime: '2020-02-15T23:59:59.999-06:00',
loadCompare: undefined,
loadMedian: false
});
expect(store.getState().hydrographState).toEqual({
selectedParameterCode: '72019',
selectedDateRange: 'custom',
selectedCustomDateRange: {
start: '2020-02-01',
end: '2020-02-15'
},
showCompareIVData: undefined,
selectedIVMethodID: undefined
});
});
it('With compare enabled', () => {
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
compare: true
});
expect(retrieveHydrographDataSpy).toHaveBeenCalledWith('11112222', {
parameterCode: '72019',
period: 'P7D',
startTime: null,
endTime: null,
loadCompare: true,
loadMedian: false
});
expect(store.getState().hydrographState).toEqual({
selectedParameterCode: '72019',
selectedDateRange: 'P7D',
showCompareIVData: true,
selectedIVMethodID: undefined
});
});
it('With timeSeriesId set', () => {
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
timeSeriesId: '90649'
});
expect(retrieveHydrographDataSpy).toHaveBeenCalledWith('11112222', {
parameterCode: '72019',
period: 'P7D',
startTime: null,
endTime: null,
loadCompare: undefined,
loadMedian: false
}); expect(store.getState().hydrographState).toEqual({
selectedParameterCode: '72019',
selectedDateRange: 'P7D',
showCompareIVData: undefined,
selectedIVMethodID: '90649'
});
});
});
it('Should fetch the hydrograph parameters', () => {
attachToNode(store, graphNode, INITIAL_PARAMETERS);
expect(retrieveHydrographParametersSpy).toHaveBeenCalledWith('11112222');
});
it('Should fetch the waterwatch flood levels', () => {
attachToNode(store, graphNode, INITIAL_PARAMETERS);
expect(retrieveWaterwatchDataSpy).toHaveBeenCalledWith('11112222');
});
it('Should fetch the data but not set the hydrograph state or fetch hydrograph parameters when showOnlyGraph is true', () => {
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
showOnlyGraph: true
});
expect(retrieveHydrographDataSpy).toHaveBeenCalledWith('11112222', {
parameterCode: '72019',
period: 'P7D',
startTime: null,
endTime: null,
loadCompare: undefined,
loadMedian: false
});
expect(store.getState().hydrographState).toEqual({});
expect(retrieveWaterwatchDataSpy).toHaveBeenCalled();
expect(retrieveHydrographParametersSpy).not.toHaveBeenCalled();
});
});
/*
TODO: Trying to why this is showing strange warnings. leaving out for now
*/
xdescribe('Tests for rendering once fetching is complete', () => {
let store;
beforeEach(() => {
store = configureStore({
hydrographData: {
primaryIVData: TEST_PRIMARY_IV_DATA,
currentTimeRange: TEST_CURRENT_TIME_RANGE,
groundwaterLevels: TEST_GW_LEVELS
},
hydrographState: {
selectedIVMethodID: '90649'
},
hydrographParameters: TEST_HYDROGRAPH_PARAMETERS,
floodData: {},
ui: {
width: 1000
}
});
hydrographData.retrieveHydrographData = jest.fn(() => {
return function(dispatch) {
console.log('In mocked retrieveHydrographData');
return Promise.resolve();
};
});
attachToNode(store, graphNode, {
...INITIAL_PARAMETERS,
showOnlyGraph: true });
});
it('loading indicator should be hidden', () => {
expect(nodeElem.select('.loading-indicator').size()).toBe(0);
});
/*
xit('should render the correct number of svg nodes', () => {
console.log('In SVg test');
expect(selectAll('svg').size()).toBe(4);
});
});
it('should have a title div', () => {
const titleDiv = selectAll('.time-series-graph-title');
expect(titleDiv.size()).toBe(1);
expect(titleDiv.select('div').text()).toContain('Test title for 00060, method description');
expect(titleDiv.select('.usa-tooltip').text()).toEqual('Test description for 00060');
});
it('should have a defs node', () => {
expect(selectAll('defs').size()).toBe(1);
expect(selectAll('defs mask').size()).toBe(1);
expect(selectAll('defs pattern').size()).toBe(2);
});
it('should render time series data as a line', () => {
// There should be one segment per time-series. Each is a single
// point, so should be a circle.
expect(selectAll('.hydrograph-svg .line-segment').size()).toBe(2);
});
it('should render a rectangle for masked data', () => {
expect(selectAll('.hydrograph-svg g.current-mask-group').size()).toBe(1);
});
it('should have a point for the median stat data with a label', () => {
expect(selectAll('#median-points path').size()).toBe(1);
expect(selectAll('#median-points text').size()).toBe(0);
});
it('should have brush element for the hydrograph', () => {
expect(selectAll('.brush').size()).toBe(1);
});
it('should have .cursor-slider-svg element', () => {
expect(selectAll('.cursor-slider-svg').size()).toBe(1);
});
it('should have date control elements', () => {
expect(selectAll('#ts-daterange-select-container').size()).toBe(1);
expect(selectAll('#ts-customdaterange-select-container').size()).toBe(1);
});
it('should have method select element', () => {
expect(selectAll('#ts-method-select-container').size()).toBe(1);
});
it('should have the select time series element', () => {
expect(selectAll('#select-time-series').size()).toBe(1);
});
it('should have tooltips for the select series table', () => {
// one for each of the two parameters and the WaterAlert links
expect(selectAll('table .usa-tooltip').size()).toBe(4);
});
it('should have data tables for hydrograph data', () => {
expect(select('#iv-hydrograph-data-table-container').size()).toBe(1);
expect(select('#gw-hydrograph-data-table-container').size()).toBe(1); });
});
describe('hide elements when showOnlyGraph is set to true', () => {
let store;
let resolvedLoadPromise = Promise.resolve();
beforeEach(() => {
jest.spyOn(ivTimeSeriesDataActions, 'retrieveIVTimeSeries').mockReturnValue(function() {
return Promise.resolve({});
});
store = configureStore({
...TEST_STATE,
ivTimeSeriesData: {
...TEST_STATE.ivTimeSeriesData,
timeSeries: {
...TEST_STATE.ivTimeSeriesData.timeSeries,
'method1:00060:current': {
...TEST_STATE.ivTimeSeriesData.timeSeries['method1:00060:current'],
startTime: 1514926800000,
endTime: 1514930400000,
points: [{
dateTime: 1514926800000,
value: 10,
qualifiers: ['P']
}, {
dateTime: 1514930400000,
value: null,
qualifiers: ['P', 'FLD']
}]
}
}
},
ivTimeSeriesState: {
showIVTimeSeries: {
current: true,
compare: true,
median: true
},
currentIVVariableID: '45807197',
currentIVDateRange: 'P7D',
currentIVMethodID: 'method1',
loadingIVTSKeys: [],
ivGraphBrushOffset: null
},
ui: {
windowWidth: 400,
width: 400
}
});
attachToNode(store, graphNode, {siteno: '123456788', showOnlyGraph: true}, resolvedLoadPromise);
});
it('should not have brush element for the hydrograph', () => {
expect(selectAll('.brush').size()).toBe(0);
});
it('should not have slider-wrapper element', () => {
expect(selectAll('.slider-wrapper').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);
expect(selectAll('#ts-container-radio-group-and-form-buttons').size()).toBe(0);
});
it('should not have method select element', () => { expect(selectAll('#ts-method-select-container').size()).toBe(0);
});
it('should not have the select time series element', () => {
expect(selectAll('#select-time-series').size()).toBe(0);
});
it('should not have the data table', () => {
expect(select('#iv-data-table-container').selectAll('table').size()).toBe(0);
});
*/
});
});