siesta-lite/examples/vue-vuestic-admin-dashboard/tests/components/color_picker.t.js

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

import Vue from 'vue'
import VuesticAdvancedColorPicker from '../../src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticAdvancedColorPicker.vue'

describe('Color picker test', t => {
  document.body.innerHTML =
    '<div id="app">' +
      '{{ message }}' +
      '<vuestic-advanced-color-picker v-model="value"/>' +
    '</div>'

  const app = new Vue({
    el: '#app',
    components: {
      VuesticAdvancedColorPicker
    },
    data: {
      message: 'yo',
      value: '#AAA'
    }
  })

  t.chain(
    // for some reason (well, a bad bug in the application actually), the very 1st click
    // is always ignored (try with real mouse too)
    { click: '.vc-hue-picker', offset: [ '100%+30', '50%' ] },

    // so we have to repeat it
    { click: '.vc-hue-picker', offset: [ '100%+30', '50%' ] },

    { drag: '.vc-hue-picker', by: [ 30, 0 ] },

    next => {
      t.isNot(app.value, '#AAA', 'Value has changed')
    }
  )
})