💎 Release new version 2.1.1

* next:
  📝 Update CHANGELOG
  💎 Release new version 2.1.0
  ✨ Add travis config
  🐛 Fix tests
  ✨ Add chartId as prop and fix width and height props
  ✨ Add bubble-chart example
  ✅ Add tests
  ✨ Add chart type Bubble
  Move examples into src for better testing
  📝 Update README
  💎 Release new version 2.0.0-alpha
  Add vue 2.0 build files
  📝 Update README
  ⬆️ Update dependency chartjs to 2.2.1
  Update examples
  ⬆️ Update dependency vue 2.0
  Change deprecated v-el to ref
  Change render() method name to renderChart

# Conflicts:
#	CHANGELOG.md
#	dist/vue-chartjs.js
#	dist/vue-chartjs.js.map
#	package.json
#	src/BaseCharts/Bar.js
#	src/BaseCharts/Bubble.js
#	src/BaseCharts/Doughnut.js
#	src/BaseCharts/Line.js
#	src/BaseCharts/Pie.js
#	src/BaseCharts/PolarArea.js
#	src/BaseCharts/Radar.js
#	src/examples/App.vue
#	src/examples/BubbleExample.js
#	test/unit/specs/Bar.spec.js
#	test/unit/specs/Bubble.spec.js
#	test/unit/specs/Doughnut.spec.js
#	test/unit/specs/Line.spec.js
#	test/unit/specs/Pie.spec.js
#	test/unit/specs/PolarArea.spec.js
#	test/unit/specs/Radar.spec.js

.github/CONTRIBUTING.md

@@ -3,7 +3,7 @@ Thank you for contributing vue-chartjs!
 
 Please follow this steps:
 
-1. Fork it ( https://github.com/aapertureless/vue-chartjs/fork )
+1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
 2. Create your feature branch (`git checkout -b my-new-feature`)
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "6"
+after_success:
+  - bash <(curl -s https://codecov.io/bash)

CHANGELOG.md

@@ -1,8 +1,41 @@
 # Change Log
 
-## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
 
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...HEAD)
+## [v.2.1.0](https://github.com/apertureless/vue-chartjs/tree/v.2.1.0) (2016-09-23)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.1.3...v.2.1.0)
+
+
+## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)
+
+**Implemented enhancements:**
+
+- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
+
+**Fixed bugs:**
+
+- Passing chart size \(width / height\) as prop doesnt resize the chart [\#8](https://github.com/apertureless/vue-chartjs/issues/8)
+
+**Merged pull requests:**
+
+- Added bubble chart type [\#9](https://github.com/apertureless/vue-chartjs/pull/9) ([jcalonso](https://github.com/jcalonso))
+
+## [1.1.2](https://github.com/apertureless/vue-chartjs/tree/1.1.2) (2016-09-07)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.1...1.1.2)
+
+**Implemented enhancements:**
+
+- Change name of the render method to ensure compatiblity with Vue 2.0 [\#4](https://github.com/apertureless/vue-chartjs/issues/4)
+
+## [1.1.1](https://github.com/apertureless/vue-chartjs/tree/1.1.1) (2016-08-23)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.0...1.1.1)
+
+## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)
+
+**Implemented enhancements:**
+
+- Use Vue.util.mergeOptions to merge default options with user's options [\#5](https://github.com/apertureless/vue-chartjs/issues/5)
 
 **Merged pull requests:**
 
@@ -19,4 +52,4 @@
 ## [1.0.2](https://github.com/apertureless/vue-chartjs/tree/1.0.2) (2016-07-27)
 
 
-\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
+\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*

README.md

@@ -1,9 +1,18 @@
 # Vue-ChartJs
 
-[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) ![npm dependencies](https://david-dm.org/apertureless/vue-chartjs.svg)
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) ![npm dependencies](https://david-dm.org/apertureless/vue-chartjs.svg) [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) [![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
 
 > VueJS wrapper for ChartJs
 
+### Compatibility
+
+- v1 later
+-- Vue.js 1.x
+- v2 later
+-- Vue.js 2.x
+
+If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
+
 ## Install
 
 Simply run `npm install vue-chartjs`
@@ -26,9 +35,9 @@ Just create your own component.
 import { Bar } from 'vue-chartjs'
 
 export default BarChart.extend({
-  ready () {
+  mounted () {
     // Overwriting base render method with actual data.
-    this.render({
+    this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       datasets: [
         {
@@ -58,8 +67,8 @@ import { Line } from 'vue-chartjs'
 
 export default LineChart.extend({
   props: [data, options],
-  ready () {
+  mounted () {
-    this.render(this.data, this.options)
+    this.renderChart(this.data, this.options)
   }
 })
 ```
@@ -107,17 +116,9 @@ export default {
 
 ![Pie](assets/polar.png)
 
-## Todo
+### Bubble
-
-- [x] ~~Implement Bar Chart~~
-- [x] ~~Implement Line Chart~~
-- [x] ~~Implement Radar Chart~~
-- [x] ~~Implement Polar Area Chart~~
-- [x] ~~Implement Pie Chart~~
-- [x] ~~Implement Doughnut Chart~~
-- [x] ~~Make npm module~~
-- [ ] Add tests
 
+![Bubble](assets/bubble.png)
 
 ## Build Setup
 
@@ -145,7 +146,7 @@ For detailed explanation on how things work, checkout the [guide](http://vuejs-t
 
 ## Contributing
 
-1. Fork it ( https://github.com/aapertureless/vue-chartjs/fork )
+1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
 2. Create your feature branch (`git checkout -b my-new-feature`)
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)

build/webpack.base.conf.js

@@ -16,6 +16,7 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
+      'vue': 'vue/dist/vue.js',
       'src': path.resolve(__dirname, '../src'),
       'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
     }

index.html

@@ -5,7 +5,9 @@
     <title>Vue-ChartJs</title>
   </head>
   <body>
+  <div id="app">
     <app></app>
+  </div>
     <!-- built files will be auto injected -->
   </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "1.1.0",
+  "version": "2.1.1",
   "description": "Vue wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@nextindex.de>",
   "repository": {
@@ -20,18 +20,19 @@
     "build": "node build/build.js",
     "unit": "karma start test/unit/karma.conf.js --single-run",
     "e2e": "node test/e2e/runner.js",
-    "test": "npm run unit && npm run e2e",
+    "test": "npm run unit",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
+    "prepublish": "node build/build.js"
   },
   "dependencies": {
-    "babel-runtime": "^6.0.0",
+    "babel-runtime": "^6.11.6",
-    "chart.js": "^2.1.6",
+    "chart.js": "^2.2.1",
-    "vue": "^1.0.21"
+    "vue": "^2.0.0-rc.1"
   },
   "devDependencies": {
-    "babel-core": "^6.0.0",
+    "babel-core": "^6.10.4",
     "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.12.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",
     "chai": "^3.5.0",
@@ -75,11 +76,11 @@
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^1.2.0",
+    "vue-hot-reload-api": "^2.0.6",
-    "vue-html-loader": "^1.0.0",
+    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^8.3.0",
+    "vue-loader": "^9.3.0",
     "vue-style-loader": "^1.0.0",
-    "webpack": "^1.12.2",
+    "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
     "webpack-merge": "^0.8.3"

src/BaseCharts/Bar.js

@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="bar-chart" width=width height=height v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'bar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
@@ -45,11 +49,11 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options) {
+    renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
           options: chartOptions

src/BaseCharts/Bubble.js

@@ -0,0 +1,68 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
+    </div>
+  `,
+
+  props: {
+    chartId: {
+      default: 'bubble-chart',
+      type: String
+    },
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      defaultOptions: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            },
+            gridLines: {
+              display: false
+            }
+          }],
+          xAxes: [ {
+            gridLines: {
+              display: false
+            },
+            categoryPercentage: 0.5,
+            barPercentage: 0.2
+          }]
+        }
+      }
+    }
+  },
+
+  methods: {
+    renderChart (data, options) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'bubble',
+          data: data,
+          options: chartOptions
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
+  }
+})

src/BaseCharts/Doughnut.js

@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="doughnut-chart" width=width height=height v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'doughnut-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
@@ -28,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options) {
+    renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
           options: chartOptions

src/BaseCharts/Line.js

@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="line-chart" width=width height=height v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'line-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
@@ -43,11 +47,11 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options) {
+    renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'line',
           data: data,
           options: chartOptions

src/BaseCharts/Pie.js

@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="pie-chart" width=width height=height v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'pie-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
@@ -28,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options) {
+    renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
           options: chartOptions

src/BaseCharts/PolarArea.js

@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="polar-chart" width=width height=height v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'polar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
@@ -28,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options) {
+    renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
           options: chartOptions

src/BaseCharts/Radar.js

@@ -5,11 +5,15 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   template: `
     <div>
-      <canvas id="radar-chart" width=width height=height v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
     </div>
   `,
 
   props: {
+    chartId: {
+      default: 'radar-chart',
+      type: String
+    },
     width: {
       default: 400,
       type: Number
@@ -28,11 +32,11 @@ export default Vue.extend({
   },
 
   methods: {
-    render (data, options) {
+    renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
           options: chartOptions

src/examples/App.vue

@@ -6,19 +6,21 @@
     <pie-example></pie-example>
     <radar-example></radar-example>
     <polar-area-example></polar-area-example>
+    <bubble-example></bubble-example>
   </div>
 </template>
 
 <script>
-  import BarExample from './examples/BarExample'
+  import BarExample from './BarExample'
-  import LineExample from './examples/LineExample'
+  import LineExample from './LineExample'
-  import DoughnutExample from './examples/DoughnutExample'
+  import DoughnutExample from './DoughnutExample'
-  import PieExample from './examples/PieExample'
+  import PieExample from './PieExample'
-  import RadarExample from './examples/RadarExample'
+  import RadarExample from './RadarExample'
-  import PolarAreaExample from './examples/PolarAreaExample'
+  import PolarAreaExample from './PolarAreaExample'
+  import BubbleExample from './BubbleExample'
 
   export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample }
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
   }
 </script>
 

src/examples/BarExample.js

@@ -1,8 +1,8 @@
 import BarChart from '../BaseCharts/Bar'
 
 export default BarChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       datasets: [
         {
@@ -11,6 +11,6 @@ export default BarChart.extend({
           data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
         }
       ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/BubbleExample.js

@@ -0,0 +1,52 @@
+import BubbleChart from '../BaseCharts/Bubble'
+
+export default BubbleChart.extend({
+  mounted () {
+    this.renderChart({
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [
+            {
+              x: 20,
+              y: 25,
+              r: 5
+            },
+            {
+              x: 40,
+              y: 10,
+              r: 10
+            },
+            {
+              x: 30,
+              y: 22,
+              r: 30
+            }
+          ]
+        },
+        {
+          label: 'Data Two',
+          backgroundColor: '#7C8CF8',
+          data: [
+            {
+              x: 10,
+              y: 30,
+              r: 15
+            },
+            {
+              x: 20,
+              y: 20,
+              r: 10
+            },
+            {
+              x: 15,
+              y: 8,
+              r: 30
+            }
+          ]
+        }
+      ]
+    })
+  }
+})

src/examples/DoughnutExample.js

@@ -1,8 +1,8 @@
 import DoughnutChart from '../BaseCharts/Doughnut'
 
 export default DoughnutChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
       datasets: [
         {

src/examples/LineExample.js

@@ -1,8 +1,8 @@
 import LineChart from '../BaseCharts/Line'
 
 export default LineChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
       datasets: [
         {

src/examples/PieExample.js

@@ -1,8 +1,8 @@
 import PieChart from '../BaseCharts/Pie'
 
 export default PieChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
       datasets: [
         {

src/examples/PolarAreaExample.js

@@ -1,8 +1,8 @@
 import PolarAreaChart from '../BaseCharts/PolarArea'
 
 export default PolarAreaChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
       datasets: [
         {

src/examples/RadarExample.js

@@ -1,8 +1,8 @@
 import RadarChart from '../BaseCharts/Radar'
 
 export default RadarChart.extend({
-  ready () {
+  mounted () {
-    this.render({
+    this.renderChart({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
       datasets: [
         {

src/index.js

@@ -4,6 +4,7 @@ import Line from './BaseCharts/Line'
 import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
+import Bubble from './BaseCharts/Bubble'
 
 const VueCharts = {
   Bar,
@@ -11,7 +12,8 @@ const VueCharts = {
   Line,
   Pie,
   PolarArea,
-  Radar
+  Radar,
+  Bubble
 }
 
 module.exports = VueCharts

test/unit/specs/Bar.spec.js

@@ -0,0 +1,31 @@
+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({
+      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

@@ -0,0 +1,31 @@
+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({
+      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

@@ -0,0 +1,31 @@
+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({
+      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/Hello.spec.js

@@ -1,12 +0,0 @@
-import Vue from 'vue'
-import Hello from 'src/components/Hello'
-
-describe('Hello.vue', () => {
-  it('should render correct contents', () => {
-    const vm = new Vue({
-      template: '<div><hello></hello></div>',
-      components: { Hello }
-    }).$mount()
-    expect(vm.$el.querySelector('.hello h1').textContent).to.contain('Hello World!')
-  })
-})

test/unit/specs/Line.spec.js

@@ -0,0 +1,31 @@
+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({
+      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

@@ -0,0 +1,31 @@
+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({
+      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

@@ -0,0 +1,31 @@
+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({
+      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

@@ -0,0 +1,31 @@
+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({
+      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')
+  })
+})

test/unit/specs/helpers/options.spec.js

@@ -0,0 +1,30 @@
+import { mergeOptions } from 'src/helpers/options'
+
+describe('mergeOptions.js', () => {
+  const a = {
+    a: 'a',
+    b: 'a'
+  }
+
+  const b = {
+    a: 'b',
+    b: 'b'
+  }
+
+  const c = {
+    c: 'c'
+  }
+
+  it('should replace old a and b if a and b are new', () => {
+    let ab = mergeOptions(a, b)
+    expect(ab).to.have.property('a').and.to.equal('b')
+    expect(ab).to.have.property('b').and.to.equal('b')
+  })
+
+  it('should add c if c is new', () => {
+    let ac = mergeOptions(a, c)
+    expect(ac).to.have.property('a').and.to.equal('a')
+    expect(ac).to.have.property('b').and.to.equal('a')
+    expect(ac).to.have.property('c').and.to.equal('c')
+  })
+})