diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
index f0056c5aeb39a99ad09c85229c458e0526a6c531..45d45681db7d4f74c56994cda626b382caf06fc2 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue
@@ -34,7 +34,7 @@ export default {
setup() {
const state = useState({
legendMarkerRows: getLegendMarkerRows,
- layout: (state) => getMainLayout(state)
+ layout: getMainLayout
});
return {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js
index 0fcd94cd4a7f6b9128ec92c701cceb7dbfb88965..7c48196b3dd5d4829881026a380cb43e31400784 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js
@@ -1,112 +1,45 @@
import {mount} from '@vue/test-utils';
-import config from 'ui/config';
import * as utils from 'ui/utils';
-import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
-
import HydrographLegend from './hydrograph-legend.vue';
-import {getLegendMarkerRows} from '../selectors/legend-data';
-import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
+import {lineMarker, rectangleMarker, textOnlyMarker, circleMarker} from 'd3render/markers';
describe('monitoring-location/components/hydrograph/legend module', () => {
utils.mediaQuery = jest.fn().mockReturnValue(true);
- config.ivPeriodOfRecord = {
- '72019': {}
- };
- config.gwPeriodOfRecord = {
- '72019': {}
- };
-
- const DV_TEST_STATE = {
- dailyValueTimeSeriesData: {
- dvTimeSeries: {
- '12345': {
- type: 'Feature',
- id: '12345',
- properties: {
- phenomenonTimeStart: '2018-01-02',
- phenomenonTimeEnd: '2018-01-05',
- timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
- result: ['5.0', '4.0', '6.1', '3.2'],
- approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
- nilReason: [null, 'AA', null, null],
- qualifiers: [null, ['ESTIMATED'], ['ICE'], ['ICE']],
- grades: [['50'], ['50'], ['60'], ['60']]
- }
- },
- '12346': {
- type: 'Feature',
- id: '12346',
- properties: {
- phenomenonTimeStart: '2018-01-02',
- phenomenonTimeEnd: '2018-01-05',
- timeStep: ['2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05'],
- result: ['6.0', '5.0', '7.1', '4.2'],
- approvals: [['Approved'], ['Approved'], ['Approved'], ['Approved']],
- nilReason: [null, 'AA', null, null],
- qualifiers: [null, null, null, null],
- grades: [['50'], ['50'], ['60'], ['60']]
- }
- }
- }
- },
- dailyValueTimeSeriesState: {
- currentDVTimeSeriesId: {
- min: null,
- mean: '12345',
- max: '12346'
- }
- },
- ui: {
- windowWidth: 1024,
- width: 800
- }
- };
- const TEST_STATE = {
- hydrographData: {
- currentTimeRange: {
- start: 1582560800009,
- end: 1582561800001
- },
- thresholds: {
- operatingLimits: [{
- parameterCode: '72019',
- methodDescription: 'from multi parameter sonde',
- thresholdDetails: [{
- name: 'Very high',
- referenceCode: 'Operational limit - high-Public',
- referenceValue: '10'
- }, {
- name: 'Very low',
- referenceCode: 'Operational limit - low-Public',
- referenceValue: '1'
- }]
- }]
- },
- prioryearTimeRange: {
- start: 1582560900000,
- end: 1582561800000
- },
- primaryIVData: TEST_PRIMARY_IV_DATA
- },
- groundwaterLevelData: {
- all: [TEST_GW_LEVELS]
- },
- hydrographState: {
- selectedParameterCode: '72019',
- showCompareIVData: false,
- showMedianData: false,
- selectedIVMethodID: '90649'
- },
- floodData: {},
- ui: {
- windowWidth: 591,
- width: 542
- }
- };
+ const TEST_MARKERS = [
+ [{
+ type: lineMarker,
+ length: 20,
+ domId: 'some-id',
+ domClass: 'some-class',
+ text: 'Some Text'
+ }, {
+ type: rectangleMarker,
+ domId: 'some-rectangle-id',
+ domClass: 'some-rectangle-class',
+ text: 'Rectangle Marker'
+ }],
+ [{
+ type: textOnlyMarker,
+ domId: 'text-id',
+ domClass: 'text-class',
+ text: 'Label'
+ }, {
+ type: lineMarker,
+ domId: null,
+ domClass: 'some-other-class',
+ text: 'Median Label'
+ }, {
+ type: circleMarker,
+ domId: null,
+ domClass: 'circle-marker-class',
+ text: 'Circle Marker label',
+ radius: 5
+ }]
+ ];
utils.mediaQuery = jest.fn().mockReturnValue(true);
describe('HydrographLegend', () => {
@@ -115,7 +48,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
beforeEach(() => {
wrapper = mount(HydrographLegend, {
props: {
- legendMarkerRows: getLegendMarkerRows(TEST_STATE),
+ legendMarkerRows: TEST_MARKERS,
layout: {
'width': 992,
'height': 496,
@@ -132,28 +65,7 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
});
it('Should have the correct number of legend markers', () => {
- expect(wrapper.findAll('.legend g')).toHaveLength(7);
- });
-
- it('Should have the correct number of legend markers when working for the DV graph', async() => {
- wrapper = mount(HydrographLegend, {
- props: {
- legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
- layout: {
- 'width': 992,
- 'height': 496,
- 'windowWidth': 1041,
- 'margin': {
- 'bottom': 5,
- 'top': 25,
- 'left': 55,
- 'right': 25
- }
- }
- }
- });
- await wrapper.vm.$nextTick();
- expect(wrapper.findAll('.legend g')).toHaveLength(6);
+ expect(wrapper.findAll('.legend g')).toHaveLength(5);
});
it('If no markers are provided legend-svg will contain no groups', async() => {
@@ -169,21 +81,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
it('Adds the correct number of legend elements', () => {
expect(wrapper.findAll('svg')).toHaveLength(1);
- expect(wrapper.findAll('line')).toHaveLength(3);
- expect(wrapper.findAll('rect')).toHaveLength(2);
- expect(wrapper.findAll('text')).toHaveLength(7);
+ expect(wrapper.findAll('line')).toHaveLength(2);
+ expect(wrapper.findAll('rect')).toHaveLength(1);
+ expect(wrapper.findAll('text')).toHaveLength(5);
expect(wrapper.findAll('circle')).toHaveLength(1);
});
it('Expects that the legend has the expected text', () => {
let text = wrapper.findAll('text');
- expect(text[0].text()).toBe('Current:');
- expect(text[1].text()).toBe('Approved');
- expect(text[2].text()).toBe('Estimated');
- expect(text[3].text()).toBe('Provisional');
- expect(text[4].text()).toBe('Ice Affected');
- expect(text[5].text()).toBe('Field visit:');
- expect(text[6].text()).toBe('Provisional');
+ expect(text[0].text()).toBe('Some Text');
+ expect(text[1].text()).toBe('Rectangle Marker');
+ expect(text[2].text()).toBe('Label');
+ expect(text[3].text()).toBe('Median Label');
+ expect(text[4].text()).toBe('Circle Marker label');
});
});
});
\ No newline at end of file