🐛 Fix tests

Signed-off-by: Jakub Juszczak <[email protected]>

test/unit/specs/Bar.spec.js

@@ -2,16 +2,30 @@ import Vue from 'vue'
 import BarChart from 'src/examples/BarExample'
 
 describe('BarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
   it('should render a canvas', () => {
     const vm = new Vue({
-      el: 'body',
-      replace: false,
       template: '<bar-chart></bar-chart>',
       components: { BarChart }
-    })
+    }).$mount(el)
+
     expect(vm.$el.querySelector('#bar-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<bar-chart chartId="barchartprop"></bar-chart>',
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
+  })
 })

test/unit/specs/Bubble.spec.js

@@ -2,16 +2,30 @@ import Vue from 'vue'
 import BubbleChart from 'src/examples/BubbleExample'
 
 describe('BubbleChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
   it('should render a canvas', () => {
     const vm = new Vue({
-      el: 'body',
-      replace: false,
       template: '<bubble-chart></bubble-chart>',
       components: { BubbleChart }
-    })
+    }).$mount(el)
+
     expect(vm.$el.querySelector('#bubble-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<bubble-chart chartId="bubblechartprop"></bubble-chart>',
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
+  })
 })

test/unit/specs/Doughnut.spec.js

@@ -2,16 +2,30 @@ import Vue from 'vue'
 import DoughnutChart from 'src/examples/DoughnutExample'
 
 describe('DoughnutChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
   it('should render a canvas', () => {
     const vm = new Vue({
-      el: 'body',
-      replace: false,
       template: '<doughnut-chart></doughnut-chart>',
       components: { DoughnutChart }
-    })
+    }).$mount(el)
+
     expect(vm.$el.querySelector('#doughnut-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<doughnut-chart chartId="doughnutchartprop"></doughnut-chart>',
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
+  })
 })

test/unit/specs/Line.spec.js

@@ -2,16 +2,30 @@ import Vue from 'vue'
 import LineChart from 'src/examples/LineExample'
 
 describe('LineChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
   it('should render a canvas', () => {
     const vm = new Vue({
-      el: 'body',
-      replace: false,
       template: '<line-chart></line-chart>',
       components: { LineChart }
-    })
+    }).$mount(el)
+
     expect(vm.$el.querySelector('#line-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<line-chart chartId="linechartprop"></line-chart>',
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
+  })
 })

test/unit/specs/Pie.spec.js

@@ -2,16 +2,30 @@ import Vue from 'vue'
 import PieChart from 'src/examples/PieExample'
 
 describe('PieChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
   it('should render a canvas', () => {
     const vm = new Vue({
-      el: 'body',
-      replace: false,
       template: '<pie-chart></pie-chart>',
       components: { PieChart }
-    })
+    }).$mount(el)
+
     expect(vm.$el.querySelector('#pie-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<pie-chart chartId="piechartprop"></pie-chart>',
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
+  })
 })

test/unit/specs/PolarArea.spec.js

@@ -2,16 +2,30 @@ import Vue from 'vue'
 import PolarChart from 'src/examples/PolarAreaExample'
 
 describe('PolarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
   it('should render a canvas', () => {
     const vm = new Vue({
-      el: 'body',
-      replace: false,
       template: '<polar-chart></polar-chart>',
       components: { PolarChart }
-    })
+    }).$mount(el)
+
     expect(vm.$el.querySelector('#polar-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<polar-chart chartId="polarchartprop"></polar-chart>',
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
+  })
 })

test/unit/specs/Radar.spec.js

@@ -2,16 +2,30 @@ import Vue from 'vue'
 import RadarChart from 'src/examples/RadarExample'
 
 describe('RadarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
   it('should render a canvas', () => {
     const vm = new Vue({
-      el: 'body',
-      replace: false,
       template: '<radar-chart></radar-chart>',
       components: { RadarChart }
-    })
+    }).$mount(el)
+
     expect(vm.$el.querySelector('#radar-chart')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
     expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
     expect(vm.$el.querySelector('canvas')).to.exist
   })
+
+  it('should change id based on prop', () => {
+    const vm = new Vue({
+      template: '<radar-chart chartId="rodarchartprop"></radar-chart>',
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
+  })
 })