all files / test/ plugin.spec.js

96.43% Statements 27/28
75% Branches 3/4
100% Functions 8/8
96.3% Lines 26/27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90                                                                                                                               
import Vue from 'vue'
import VChartist from '../src/index'
 
Vue.use(VChartist)
 
const defaults = {
  title: '',
  titleClass: 'ct-title',
  textAnchor: 'middle',
  flipText: false
}
 
const ctTitle = function (options) {
  options = Object.assign({}, defaults, options)
 
  return function ctTitle (chart, Chartist) {
    chart.on('created', function (data) {
      const xPos = (data.chartRect.x2 - data.chartRect.x1) / 2 + data.chartRect.x1
      const yPos = data.chartRect.y2 - 10
      const title = new Chartist.Svg('text')
      title.addClass(options.titleClass)
      title.text(options.title)
      title.attr({
        x: xPos,
        y: yPos,
        'text-anchor': options.textAnchor
      })
 
      data.svg.append(title, true)
    })
  }
}
 
describe('test chartist plugin', () => {
  let el
  before(function () {
    el = document.createElement('div')
    el.id = 'app'
    document.body.appendChild(el)
  })
 
  after(function () {
    el.parentElement.removeChild(el)
  })
  it('should render correct contents', done => {
    const vm = new Vue({
      el,
      replace: false,
      template: `<chartist
        type="Line"
        :data="chartData"
        :options="chartOptions">
      </chartist>`,
      data: {
        chartData: {
          labels: ['A', 'B', 'C'],
          series: [
            [1, 3, 2],
            [4, 6, 5]
          ]
        },
        chartOptions: {
          lineSmooth: false,
          width: '600px',
          height: '300px',
          chartPadding: {
            top: 50,
            right: 15,
            bottom: 5,
            left: 10
          },
          plugins: [
            ctTitle({
              title: 'hello'
            })
          ]
        }
      }
    })
 
    setTimeout(function () {
      const text = document.getElementsByTagName('text')
      if (text && text.class === 'ct-title') I{
        expect(text).to.not.be.ok
      }
      done()
    }, 50)
  })
})