Web Components in Action v7; 13.3 Comparing to a Standard Test Setup with Karma - minimal with modules

colorpicker_karma-test.mjs

/* file: components/wcia-color-picker/test/karma-test.mjs
   original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter12and13/components/colorpicker/test/karma-test.js
 */
import _dontCare from '../src/wcia-color-picker.mjs'

const makePicker = (function() {
  const pickerSize = 500
  const thumbCenterOffset = 5/2 + 3 // width/2 + left border
  const markup =`
<wcia-color-picker
  style="width: ${pickerSize}px; height: ${pickerSize}px;"
  hex="#000" alpha="0"></wcia-color-picker>`

  return function makePicker () {
    let container = document.createElement('div')
    container.innerHTML = markup

    return {pickerSize, thumbCenterOffset, container}
  }
}())

suite('wcia-color-picker', function () {

  var picker

  setup(function(){
    let { container, ...others } = makePicker()
    document.body.appendChild(container.lastChild)

    let element = document.body.querySelector('wcia-color-picker')
    let red = element._root.querySelector('.textInputR')
    let green = element._root.querySelector('.textInputG')
    let blue = element._root.querySelector('.textInputB')
    let alpha = element._root.querySelector('.textInputA')
    picker = { element, red, green, blue, alpha, ...others }
  })

  teardown(function(){
    document.body.removeChild(picker.element)
    picker = null
  })

  test('wcia-color-picker get initial color state', function() {
    let { element, red, green, blue, alpha } = picker

    assert.equal(red.value, '0')
    assert.equal(green.value, '0')
    assert.equal(blue.value, '0')
    assert.equal(alpha.value, '0')
  })

  test('wcia-color-picker set color to red', function() {
    let { element, red, green, blue, alpha } = picker

    element.hex = '#ff0000'
    assert.equal(red.value, '255')
    assert.equal(green.value, '0')
    assert.equal(blue.value, '0')
    assert.equal(alpha.value, '0')
  })

  test('wcia-color-picker set color to blue', function() {
    let { element, red, green, blue, alpha } = picker

    element.hex = '#0000ff'
    assert.equal(red.value, '0')
    assert.equal(green.value, '0')
    assert.equal(blue.value, '255')
    assert.equal(alpha.value, '0')
  })

  test('wcia-color-picker set alpha', function() {
    let { element, alpha } = picker
    const value = '50'
    element.alpha = value
    assert.equal(alpha.value, value)
  })

})

coordpicker_karma-test.mjs

/* file: components/wcia-coord-picker/test/karma-test.mjs
   original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter12and13/components/coordpicker/test/karma-test.js
*/
import _dontCare from '../src/wcia-coord-picker.mjs'

const makePicker = (function() {
  const pickerSize = 500
  const thumbCenterOffset = 5/2 + 3 // width/2 + left border
  const markup =`
<wcia-coord-picker
  style="width: ${pickerSize}px; height: ${pickerSize}px;"
  x="50" y="50"></wcia-coord-picker>`

  return function makePicker () {
    let container = document.createElement('div')
    container.innerHTML = markup

    return {pickerSize, thumbCenterOffset, container}
  }
}())

function calcPosition(value, { pickerSize, thumbCenterOffset }) {
  return  pickerSize * parseFloat(value)/100 - thumbCenterOffset + 'px'
}
 
suite('wcia-coord-picker value getting/setting', function () {

  var picker

  setup(function(){
    let { container, ...others } = makePicker()
    document.body.appendChild(container.lastChild)
    let element = document.body.querySelector('wcia-coord-picker')
    let thumb = element._root.querySelector('.thumb')
    picker = { element, thumb, ...others }
  })

  teardown(function(){
    document.body.removeChild(picker.element)
    picker = null
  })

  test('wcia-coord-picker get initial x, y', function() {
    const { element, thumb, ...others } = picker
    const value = '50'
    assert.equal(element.x, value)
    assert.equal(element.getAttribute('x'), value)
    assert.equal(element.y, value)
    assert.equal(element.getAttribute('y'), value)
    const position = calcPosition(value, others)
    assert.equal(thumb.style.left, position)
    assert.equal(thumb.style.top, position)
  })

  test('set wcia-coord-picker x, y with JS', function() {
    const { element, thumb, ...others } = picker
    const x = '20'
    element.x = x
    assert.equal(element.x, x)
    assert.equal(element.getAttribute('x'), x)
    assert.equal(thumb.style.left, calcPosition(x, others))


    const y = '60'
    element.y = y
    assert.equal(element.y, y)
    assert.equal(element.getAttribute('y'), y)
    assert.equal(thumb.style.top, calcPosition(y, others))
  })

  test('set wcia-coord-picker x, y with attributes', function() {
    const { element, thumb, ...others } = picker
    const x = '30'
    element.setAttribute('x', x)

    const y = '90'
    element.setAttribute('y', y)

    assert.equal(element.getAttribute('x'), x)
    assert.equal(element.getAttribute('y'), y)
    assert.equal(element.x, x)
    assert.equal(element.y, y)
    assert.equal(thumb.style.left, calcPosition(x, others))
    assert.equal(thumb.style.top, calcPosition(y, others))
  })

  test('set wcia-coord-picker x too big', function() {
    const { element, thumb, ...others } = picker
    const value = '100'
    element.setAttribute('x', '110')

    assert.equal(element.getAttribute('x'), value)
    assert.equal(thumb.style.left, calcPosition(value, others))
  })

  test('set wcia-coord-picker x too small', function() {
    const { element, thumb, ...others } = picker
    const value = '0'
    element.setAttribute('x', '-10')

    assert.equal(element.getAttribute('x'), value)
    assert.equal(thumb.style.left, calcPosition(value, others))
  })

  test('set wcia-coord-picker y too big', function() {
    const { element, thumb, ...others } = picker
    const value = '100'
    element.setAttribute('y', '110')

    assert.equal(element.getAttribute('y'), value)
    assert.equal(thumb.style.top, calcPosition(value, others))
  })

  test('set wcia-coord-picker y too small', function() {
    const { element, thumb, ...others } = picker
    const value = '0'
    element.setAttribute('y', '-10')

    assert.equal(element.getAttribute('y'), value)
    assert.equal(thumb.style.top, calcPosition(value, others))
  })

})

karma.conf.js

// Karma configuration
// Generated on Fri Apr 12 2019 12:26:08 GMT-0400 (Eastern Daylight Time)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha','chai'],

    client: {
      mocha: {
        ui: 'tdd'
      }
    },

    // list of files / patterns to load in the browser
    files: [
      { pattern: 'components/**/src/*.mjs', type: 'module' },
      { pattern: 'designsystem/*.mjs', type: 'module' },
      { pattern: 'components/**/test/karma-test.mjs', type: 'module' },
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },

    plugins: [
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-chai'
    ],

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

package.json

{
  "name": "07",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "karmatest": "./node_modules/karma/bin/karma start karma.conf.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chai": "^4.2.0",
    "karma": "^4.0.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "mocha": "^6.1.3"
  }
}

session.md

$ npm run karmatest

> 07@1.0.0 karmatest
> ./node_modules/karma/bin/karma start karma.conf.js

14 04 2019 16:50:29.777:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:9876/
14 04 2019 16:50:29.785:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
14 04 2019 16:50:29.792:INFO [launcher]: Starting browser Chrome
14 04 2019 16:50:30.915:INFO [Chrome 73.0.3683 (Mac OS X 10.14.4)]: Connected on socket loNz4c_84SiPAh6lAAAA with id 50425013
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 2 of 16 SUCCESS (0 secs / 0.001 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 3 of 16 SUCCESS (0 secs / 0.001 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 4 of 16 SUCCESS (0 secs / 0.001 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 5 of 16 SUCCESS (0 secs / 0.001 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 6 of 16 SUCCESS (0 secs / 0.001 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 7 of 16 SUCCESS (0 secs / 0.002 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 8 of 16 SUCCESS (0 secs / 0.002 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 9 of 16 SUCCESS (0 secs / 0.002 se
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 10 of 16 SUCCESS (0 secs / 0.002 s
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 11 of 16 SUCCESS (0 secs / 0.002 s
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 12 of 16 SUCCESS (0 secs / 0.002 s
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 13 of 16 SUCCESS (0 secs / 0.002 s
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 14 of 16 SUCCESS (0 secs / 0.002 s
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 15 of 16 SUCCESS (0 secs / 0.002 s
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 16 of 16 SUCCESS (0 secs / 0.002 s
Chrome 73.0.3683 (Mac OS X 10.14.4): Executed 16 of 16 SUCCESS (0.003 secs / 0.002 secs)
TOTAL: 16 SUCCESS
$ 

slider_karma-test.mjs

/* file: components/wcia-slider/test/karma-test.mjs
   original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter12and13/components/slider/test/karma-test.js
*/
import _dontCare from '../src/wcia-slider.mjs'

const makeSlider = (function() {
  const sliderWidth = 500
  const thumbCenterOffset = 5/2 + 3 // width/2 + left border
  const markup =
        `<wcia-slider style="width: ${sliderWidth}px" value="50"></wcia-slider>`

  return function makeSlider () {
    let container = document.createElement('div')
    container.innerHTML = markup

    return {sliderWidth, thumbCenterOffset, container}
  }
}())

function calcPosition(value, { sliderWidth, thumbCenterOffset }) {
  return  sliderWidth * parseFloat(value)/100 - thumbCenterOffset + 'px'
}
 
suite('wcia-slider value getting/setting', function () {

  var slider

  setup(function(){
    let { container, ...others } = makeSlider()
    document.body.appendChild(container.lastChild)
    let element = document.body.querySelector('wcia-slider')
    let thumb = element._root.querySelector('.thumb')
    slider = { element , thumb, ...others }
  })

  teardown(function(){
    document.body.removeChild(slider.element)
    slider = null
  })

  test('wcia-slider get initial value', function() {
    const { element, thumb, ...others } = slider
    const value = '50'
    assert.equal(element.value, value)
    assert.equal(element.getAttribute('value'), value)
    assert.equal(thumb.style.left, calcPosition(value, others))
  })

  test('set wcia-slider value with JS', function () {
    const { element, thumb, ...others } = slider
    const value = '20'
    element.value = value
    assert.equal(element.value, value)
    assert.equal(element.getAttribute('value'), value)
    assert.equal(thumb.style.left, calcPosition(value, others))
  })

  test('set wcia-slider value with attributes', function () {
    const { element, thumb, ...others } = slider
    const value = '30'
    element.setAttribute('value', value)
    assert.equal(element.value, value)
    assert.equal(element.getAttribute('value'), value)
    assert.equal(thumb.style.left, calcPosition(value, others))
  })

  test('set wcia-slider value too big', function () {
    const { element, thumb, ...others } = slider
    const value = '100'
    element.setAttribute('value', '110')
    assert.equal(element.value, value)
    assert.equal(element.getAttribute('value'), value)
    assert.equal(thumb.style.left, calcPosition(value, others))
  })

  test('set wcia-slider value too small', function () {
    const { element, thumb, ...others } = slider
    const value = '0'
    element.setAttribute('value', '-10')
    assert.equal(element.value, value)
    assert.equal(element.getAttribute('value'), value)
    assert.equal(thumb.style.left, calcPosition(value, others))
  })

})