cleanup, tests

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.test.js

+import {mount} from '@vue/test-utils';
+import {bindActionCreators} from 'redux';
+import ReduxConnectVue from 'redux-connect-vue';
+import {createStructuredSelector} from 'reselect';
+import {configureStore} from 'ml/store';
+import * as utils from 'ui/utils';
+import {TEST_PRIMARY_IV_DATA, TEST_CURRENT_TIME_RANGE} from '../mock-hydrograph-state';
+
+import CursorSlider from './cursor-slider.vue';
+
 describe('monitoring-location/components/hydrograph/cursor-slider', () => {
-    utils.mediaQuery = jest.fn().mockReturnValue(true);
-    config.locationTimeZone = 'America/Chicago';
     const TEST_STATE = {
         hydrographData: {
             primaryIVData: TEST_PRIMARY_IV_DATA,
@@ -15,47 +23,34 @@ describe('monitoring-location/components/hydrograph/cursor-slider', () => {
         }
     };
 
+    let store;
+    let wrapper;
+
     describe('drawCursorSlider', () => {
-        let svg;
-        let store;
+        utils.mediaQuery = jest.fn().mockReturnValue(true);
         beforeEach(() => {
-            svg = select('body').append('svg');
             store = configureStore(TEST_STATE);
-        });
 
-        afterEach(() => {
-            svg.remove();
+            wrapper = mount(CursorSlider, {
+                global: {
+                    plugins: [
+                        [ReduxConnectVue, {
+                            store,
+                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
+                            mapStateToPropsFactory: createStructuredSelector
+                        }]
+                    ],
+                    provide: {
+                        store: store
+                    }
+                }
+            });
         });
 
-        it('Creates a cursor slider', () => {
-            drawCursorSlider(svg, store);
-
-            const sliderGroup = svg.selectAll('.cursor-slider-group');
-            expect(sliderGroup.size()).toBe(1);
-            expect(sliderGroup.selectAll('.slider').size()).toBe(1);
+        it('Creates a cursor slider', async() => {
+            const sliderGroup = wrapper.findAll('.cursor-slider-group');
+            expect(sliderGroup).toHaveLength(1);
+            expect(wrapper.vm.group.getAttribute('transform')).toContain('translate');
         });
     });
-});
-
-describe('initializeTooltipCursorSlider and drawTooltipCursorSlider', () => {
-    let div;
-    beforeEach(() => {
-        div = select('body').append('div');
-    });
-
-    afterEach(() => {
-        div.remove();
-    });
-
-    it('should render the cursor slider', () => {
-        let store = configureStore(TEST_STATE);
-        initializeTooltipCursorSlider(div, store);
-        drawTooltipCursorSlider(div, store);
-
-        const sliderSvg = div.selectAll('.cursor-slider-svg');
-        const slider = sliderSvg.selectAll('.slider');
-
-        expect(sliderSvg.size()).toBe(1);
-        expect(slider.size()).toBe(1);
-    });
 });
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.vue

@@ -5,11 +5,11 @@
     :viewBox="viewBox"
   >
     <g
+      ref="group"
       class="cursor-slider-group"
       ga-on="click"
       ga-event-category="hydrograph-interaction"
       ga-event-action="clickOnSlider"
-      ref="group"
     />
   </svg>
 </template>
@@ -29,59 +29,61 @@ import {getMainXScale} from '../selectors/scales';
 import {getMainLayout} from '../selectors/layout';
 
 export default {
-name: 'CursorSlider',
-setup() {
-  const state = useState({
-    layout: getMainLayout,
-    xScale: getMainXScale('current'),
-    cursorOffset: getGraphCursorOffset
-  });
-
-  const actions = useActions({
-    setGraphCursorOffset
-  });
-
-  const group = ref(null);
-
-  const viewBox = computed(() => {
-    return `0 0 ${state.layout.value.width + state.layout.value.margin.left + state.layout.value.margin.right} 25`;
-  });
-
-  const slider = sliderTop()
-    .displayValue(false)
-    .ticks(0);
-
-  watchEffect(() => {
-    const [startMillis, endMillis] = state.xScale.value.domain();
-    const [startX, endX] = state.xScale.value.range();
-
-    slider
-      .min(startMillis)
-      .max(endMillis)
-      .width(endX - startX);
-    slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
-
-    if(group.value) {
-      group.value.setAttribute('transform', `translate(${state.layout.value.margin.left},15)`);
-      select(group.value.className.baseVal).call(slider);
-    }
-    
-    slider.on('onchange', (val) => {
-      actions.setGraphCursorOffset(val - startMillis);
+  name: 'CursorSlider',
+  setup() {
+    const state = useState({
+      layout: getMainLayout,
+      xScale: getMainXScale('current'),
+      cursorOffset: getGraphCursorOffset
     });
-  });
 
-  watchEffect(() => {
-    slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
-  });
+    const actions = useActions({
+      setGraphCursorOffset
+    });
 
-  return {
-    ...state,
-    viewBox,
-    group,
-    slider
-  }
-}
+    const group = ref(null);
 
-}
+    const viewBox = computed(() => {
+      return `0 0 ${state.layout.value.width + state.layout.value.margin.left + state.layout.value.margin.right} 25`;
+    });
+
+    const initializeCursorSlider = function() {
+      const slider = sliderTop()
+        .displayValue(false)
+        .ticks(0);
+
+      watchEffect(() => {
+        const [startMillis, endMillis] = state.xScale.value.domain();
+        const [startX, endX] = state.xScale.value.range();
+
+        slider
+          .min(startMillis)
+          .max(endMillis)
+          .width(endX - startX);
+        slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
+
+        if (group.value) {
+          group.value.setAttribute('transform', `translate(${state.layout.value.margin.left},15)`);
+          select(`.${group.value.className.baseVal}`).call(slider);
+        }
+
+        slider.on('onchange', (val) => {
+          actions.setGraphCursorOffset(val - startMillis);
+        });
+      });
+
+      watchEffect(() => {
+        slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
+      });
+    };
+
+    initializeCursorSlider();
+    
+    return {
+      ...state,
+      viewBox,
+      group
+    };
+  }
+};
 </script>
\ No newline at end of file