Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Web Components in Action v7; 13.3 Comparing to a Standard Test Setup with Karma - minimal with modules
/* 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)
})
})
/* 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 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
})
}
{
"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"
}
}
$ 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
$ 
/* 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))
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.