Add tests

Author: Alan Smith

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

package.json

@@ -1,11 +1,12 @@
 {
   "name": "vue3-highcharts",
   "version": "0.1.0",
-  "main": "./src/index.js",
+  "main": "./dist/vue3-highcharts.common.js",
   "private": false,
   "scripts": {
     "test": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
+    "build": "vue-cli-service build --target lib --name vue3-highcharts src/index.js",
     "publish": "npm run lint && npm run test && npm publish"
   },
   "author": "Alan Smith <[email protected]>",

src/index.js

@@ -1,58 +1,9 @@
-/* eslint-disable func-names */
-/* eslint-disable prefer-rest-params */
-import { h, ref, watch, onMounted, onUnmounted, defineComponent, toRefs } from 'vue';
-import Highcharts from 'highcharts';
+import Vue3Highcharts from './vue3-highcharts';
 
-export default defineComponent({
-  props: {
-    type: {
-      type: String,
-      default: 'chart',
-    },
-    options: {
-      type: Object,
-      required: true,
-    },
-  },
+const install = (app) => {
+  app.component(Vue3Highcharts.name, Vue3Highcharts);
+};
 
-  setup(props, { emit }) {
-    const chartRef = ref(null);
+Vue3Highcharts.install = install;
 
-    const { options } = toRefs(props);
-
-    if (options.value && Highcharts[props.constructorType]) {
-      const chart = ref(null);
-
-      watch(options, (newValue) => {
-        if (chart.value) {
-          chart.value.update(newValue, ...props.updateArgs);
-          emit('updated');
-        }
-      });
-
-      onMounted(() => {
-        chart.value = Highcharts[props.constructorType](chartRef.value, options.value, () => {
-          emit('rendered');
-        });
-      });
-
-      onUnmounted(() => {
-        if (chart.value) chart.value.destroy();
-        emit('destroyed');
-      });
-
-      return () => h('div', {
-        class: 'vue3-highcharts',
-        ref: chartRef,
-      });
-    }
-
-    if (!props.options) {
-      console.warn('The "options" parameter is required.');
-    } else {
-      console.warn(`${props.constructorType} is not a valid highcharts type`);
-    }
-
-    return () => h();
-  },
-});
+export default Vue3Highcharts;

src/vue3-highcharts.js

@@ -0,0 +1,81 @@
+/* eslint-disable func-names */
+/* eslint-disable prefer-rest-params */
+import { defineComponent, h, ref, onMounted, onUnmounted, watch, toRefs } from 'vue';
+import Highcharts from 'highcharts';
+
+const vueHighcharts = defineComponent({
+  name: 'VueHighchart',
+  props: {
+    type: {
+      type: String,
+      default: 'chart',
+    },
+
+    options: {
+      type: Object,
+      required: true,
+    },
+
+    redrawOnUpdate: {
+      type: Boolean,
+      default: true,
+    },
+
+    oneToOneUpdate: {
+      type: Boolean,
+      default: false,
+    },
+
+    animateOnUpdate: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const chart = ref(null);
+
+    const { options } = toRefs(props);
+
+    if (options.value && Highcharts[props.type]) {
+      watch(options, (newValue) => {
+        if (chart.value) {
+          chart.value.update(newValue, props.redrawOnUpdate, props.oneToOneOnUpdate, props.oneToOneUpdate, props.animateOnUpdate);
+          emit('updated');
+        }
+      });
+
+      onMounted(() => {
+        chart.value = Highcharts[props.type](chartRef.value, options.value, () => {
+          emit('rendered');
+        });
+      });
+
+      onUnmounted(() => {
+        if (chart.value) chart.value.destroy();
+        emit('destroyed');
+      });
+    } else if (!props.options) {
+      console.warn('The "options" parameter is required.');
+    } else {
+      console.warn(`${props.type} is not a valid highcharts type or has not been imported`);
+    }
+
+    // Rather than returning a render function here. We'll return the chart ref and highcharts
+    // instance so there exposed.
+    return {
+      chartRef,
+      chart,
+    };
+  },
+
+  render() {
+    return h('div', {
+      class: 'vue-highcharts',
+      ref: 'chartRef',
+    });
+  },
+});
+
+export default vueHighcharts;

tests/unit/index.spec.js

@@ -1,12 +1,130 @@
-import { shallowMount } from '@vue/test-utils';
-import Chart from '@/index';
+import { mount } from '@vue/test-utils';
+import VueHighchart from '@/index';
+import { wrap } from 'highcharts';
 
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallowMount(Chart, {
-      props: { msg },
+const defaultOptions = {
+  series: [{
+    name: 'Test Series',
+    data: [1, 2, 3],
+  }],
+};
+
+describe('VueHighchart', () => {
+  describe('Plugin', () => {
+    it('should install when used as a plugin', () => {
+      const componentStub = jest.fn();
+
+      const appMock = {
+        component: componentStub,
+      };
+
+      expect(VueHighchart).toHaveProperty('install');
+
+      VueHighchart.install(appMock);
+
+      expect(componentStub).toHaveBeenCalledWith(VueHighchart.name, VueHighchart);
+    });
+  });
+
+  describe('Component', () => {
+    let wrapper = null;
+
+    afterEach(() => {
+      if (wrapper) {
+        wrapper.unmount();
+        wrapper = null;
+      }
+    });
+
+    it('should have the correct props', () => {
+      wrapper = mount(VueHighchart, {
+        props: {
+          options: { ...defaultOptions },
+        },
+      });
+
+      expect(wrapper.props()).toEqual({
+        type: 'chart',
+        options: { ...defaultOptions },
+        redrawOnUpdate: true,
+        oneToOneUpdate: false,
+        animateOnUpdate: true,
+      });
+    });
+
+    it('should expose the rendered highcharts instance', () => {
+      wrapper = mount(VueHighchart, {
+        props: {
+          options: { ...defaultOptions },
+        },
+      });
+
+      expect(wrapper.vm.chart).toBeDefined();
+    });
+
+    it('should render a highchart chart with the expected data', () => {
+      wrapper = mount(VueHighchart, {
+        props: {
+          options: { ...defaultOptions },
+        },
+      });
+
+      const { vm } = wrapper;
+
+      expect(wrapper.get('.vue-highcharts')).toBeTruthy();
+      expect(wrapper.get('.highcharts-container')).toBeTruthy();
+
+      expect(vm.chart.series[0].yData).toEqual(wrapper.props().options.series[0].data);
+      expect(vm.chart.series[0].name).toEqual(wrapper.props().options.series[0].name);
+    });
+
+    it('should emit a rendered event when the chart is rendered', () => {
+      wrapper = mount(VueHighchart, {
+        props: {
+          options: { ...defaultOptions },
+        },
+      });
+
+      expect(wrapper.emitted()).toHaveProperty('rendered');
+    });
+
+    it('should emit an updated event when the chart is updated due to options changes', async () => {
+      const options = { ...defaultOptions };
+
+      wrapper = mount(VueHighchart, {
+        props: {
+          options,
+        },
+      });
+
+      expect(wrapper.get('.highcharts-container')).toBeTruthy();
+
+      await wrapper.setProps({
+        options: {
+          series: [{
+            name: 'Test Series 2',
+            data: [1, 2, 3, 4],
+          }],
+        },
+      });
+
+      expect(wrapper.emitted()).toHaveProperty('updated');
+    });
+
+    it('should emit a destroyed event when the highcharts instance is destroyed', async () => {
+      const options = { ...defaultOptions };
+
+      wrapper = mount(VueHighchart, {
+        props: {
+          options,
+        },
+      });
+
+      expect(wrapper.get('.highcharts-container')).toBeTruthy();
+
+      wrapper.unmount();
+
+      expect(wrapper.emitted()).toHaveProperty('destroyed');
     });
-    expect(wrapper.text()).toMatch(msg);
   });
 });

vue.config.js

@@ -1,5 +1,11 @@
 module.exports = {
   configureWebpack: {
-    externals: ['highcharts', 'vue'],
+    externals: {
+      highcharts: {
+        root: 'Highcharts',
+        commonjs: 'highcharts',
+        commonjs2: 'highcharts',
+      },
+    },
   },
 };