fix: fix vue waring

Author: kagawagao

__tests__/index.spec.ts renamed to __tests__/index.spec.tsx

@@ -3,5 +3,6 @@ import * as components from '../src'
 describe('index.tsx', () => {
   it('component exported', () => {
     expect(components).toBeTruthy()
+    expect(components).toHaveProperty('LineChart')
   })
 })

__tests__/plots/area.spec.tsx

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils'
+import AreaChart from '../../src/plots/area'
+
+describe('AreaChart', () => {
+  test('should render without crashed', () => {
+    mount(AreaChart, {
+      props: {
+        data: [],
+        xField: 'a',
+        yField: 'b',
+      },
+    })
+  })
+})

__tests__/plots/line.spec.tsx

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils'
+import LineChart from '../../src/plots/line'
+
+describe('LineChart', () => {
+  test('render without crashed', () => {
+    mount(LineChart, {
+      props: {
+        data: [],
+      },
+    })
+  })
+
+  test('test update config and data', async () => {
+    const handleLineClick1 = () => {
+      console.log(1)
+    }
+    const handleLineClick2 = () => {
+      console.log(2)
+    }
+    const wrapper = mount(LineChart, {
+      props: {
+        data: null,
+      },
+    })
+
+    await wrapper.setProps({
+      forceFit: true,
+      data: [],
+    })
+    await wrapper.setProps({
+      forceFit: true,
+      data: null,
+    })
+
+    await wrapper.setProps({
+      forceFit: true,
+      data: [{ x: 1 }],
+    })
+
+    await wrapper.setProps({
+      forceFit: true,
+      data: [{ x: 2 }],
+    })
+
+    await wrapper.setProps({
+      forceFit: true,
+    })
+
+    await wrapper.setProps({
+      data: [],
+      forceFit: true,
+      xAxis: {
+        visible: true,
+      },
+      events: {
+        onLineClick: handleLineClick1,
+      },
+    })
+
+    await wrapper.setProps({
+      data: [],
+      forceFit: true,
+      xAxis: {
+        visible: true,
+      },
+      events: {
+        onLineClick: handleLineClick2,
+      },
+    })
+
+    await wrapper.setProps({
+      data: [],
+      forceFit: true,
+      xAxis: {
+        visible: true,
+      },
+      events: {
+        onLineClick: handleLineClick2,
+      },
+    })
+
+    wrapper.unmount()
+  })
+})

package-lock.json

@@ -22,7 +22,7 @@
     "dev": "vitepress --root ./docs",
     "lint": "eslint . --ext=.ts,.tsx",
     "lint:fix": "eslint . --ext=.ts,.tsx --fix",
-    "test": "jest -u",
+    "test": "jest",
     "prebuild": "npm test",
     "build": "npm run build:es & npm run build:commonjs & npm run build:types",
     "build:es": "babel src -d es --extensions .ts,.tsx --delete-dir-on-start",
@@ -62,6 +62,7 @@
     "@typescript-eslint/eslint-plugin": "^3.9.1",
     "@typescript-eslint/parser": "^3.9.1",
     "@vue/babel-preset-app": "^4.5.4",
+    "@vue/test-utils": "^2.0.0-beta.3",
     "babel-eslint": "^10.1.0",
     "canvas": "^2.6.1",
     "conventional-changelog-cli": "^2.1.0",

package.json

@@ -27,38 +27,44 @@ export interface BaseChartRawBindings<C extends PlotConfig> {
   getChartConfig: () => ChartOptions
 }
 
-export default defineComponent<BaseChartProps<any>, BaseChartRawBindings<any>>({
+const BaseChart = defineComponent<
+  BaseChartProps<any>,
+  BaseChartRawBindings<any>
+>({
+  inheritAttrs: false,
   name: 'BaseChart',
   mounted() {
     const { chart: Chart } = this.$attrs as Record<string, any>
     const { data, config } = this.getChartConfig()
     this.config = cloneDeep(config)
     const normalizedData = data || []
     this.data = normalizedData
-    const chart = new Chart(this.$el, {
+    this.plot = new Chart(this.$el, {
       data: normalizedData,
       ...config,
     })
-    this.plot = chart
     this.plot.render()
   },
   beforeUpdate() {
     const { data, config } = this.getChartConfig()
     const normalizedData = data || []
+    /* istanbul ignore else */
     if (this.plot) {
       if (!isEqual(config, this.config) || !this.data.length) {
         this.config = cloneDeep(config)
         this.plot.updateConfig({
-          data,
+          data: normalizedData,
           ...config,
         })
         this.plot.render()
       } else {
         this.plot.changeData(normalizedData)
       }
+      this.data = normalizedData
     }
   },
   beforeUnmount() {
+    /* istanbul ignore else */
     if (this.plot) {
       this.plot.destroy()
     }
@@ -80,3 +86,5 @@ export default defineComponent<BaseChartProps<any>, BaseChartRawBindings<any>>({
     return <div />
   },
 })
+
+export default BaseChart

src/components/base.tsx

@@ -5,8 +5,8 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 export type AreaChartProps = Omit<BaseChartProps<AreaConfig>, 'chart'> &
   AreaConfig
 
-const AreaChart = defineComponent<AreaChartProps>((_, ctx) => {
-  return <BaseChart chart={Area} {...ctx.attrs} />
+const AreaChart = defineComponent<AreaChartProps>((props, ctx) => {
+  return () => <BaseChart chart={Area} {...ctx.attrs} {...props} />
 })
 
 export default AreaChart

src/plots/area/index.tsx

@@ -4,8 +4,8 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type BarChartProps = Omit<BaseChartProps<BarConfig>, 'chart'> & BarConfig
 
-const BarChart = defineComponent<BarChartProps>((_, ctx) => {
-  return <BaseChart chart={Bar} {...ctx.attrs} />
+const BarChart = defineComponent<BarChartProps>((props, ctx) => {
+  return () => <BaseChart chart={Bar} {...ctx.attrs} {...props} />
 })
 
 export default BarChart

src/plots/bar/index.tsx

@@ -5,8 +5,8 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 export type BubbleChartProps = Omit<BaseChartProps<BubbleConfig>, 'chart'> &
   BubbleConfig
 
-const BubbleChart = defineComponent<BubbleChartProps>((_, ctx) => {
-  return <BaseChart chart={Bubble} {...ctx.attrs} />
+const BubbleChart = defineComponent<BubbleChartProps>((props, ctx) => {
+  return () => <BaseChart chart={Bubble} {...ctx.attrs} {...props} />
 })
 
 export default BubbleChart

src/plots/bubble/index.tsx

@@ -5,8 +5,8 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 export type BulletChartProps = Omit<BaseChartProps<BulletConfig>, 'chart'> &
   BulletConfig
 
-const BulletChart = defineComponent<BulletChartProps>((_, ctx) => {
-  return <BaseChart chart={Bullet} {...ctx.attrs} />
+const BulletChart = defineComponent<BulletChartProps>((props, ctx) => {
+  return () => <BaseChart chart={Bullet} {...ctx.attrs} {...props} />
 })
 
 export default BulletChart