index.test.js

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);
                });
         */
    });
});