karma-event-driver-ext

karma-event-driver-ext

$3

----------------


This project aims to integrate webdriverio into karma, for writing event-drive-tests conveniently.

for example, in your browser side test code, call webdriverio api to simulate dragAndMove behavior:

``jsx
await browser
.moveToObject(document.body, 0, 0) // top-left corner
.buttonDown() // left-mouse down
.moveTo(null, 0, -100) // mouse-move -100 on the Y-axis
.buttonUp() // left-mouse up
.$apply(); // execute
`

#### LOL Good News!!!

Since version 0.0.13, ext will auto route apis for PC to mobile support apis, for example:

moveToObject(ele, x, y) + buttonDown() => touchDown(ele.left + x, ele.top + y)

more detail@event-driver-hooks.js. Then most of ur tests can run both sides of PC and mobile, Write once, run twice.

#### How it works

browser in karma-event-driver-ext is just a proxy to receive command. while a webdriverio-like api being called, proxy will format arguments received, for example, convert an argument which type is Element to unique query, then call $apply to sends drive-commands to socket server and wait for executing response.

webdriverio is used to drive the browser and simulate user-behavior.


Tips:

+ must not hard refresh karma test page [Chrome is fine, while firefox goes wrong unexpectedly]
+ must call $apply, a promise will be returned.
+ if Element has no id, event-drivers-hook js will assign a unique id to it automatically.
+ aim to simulate event and most webdriverio api support[except $, $$, then and all Window/api]. more api

$3

+ selenium-server-standalone
+ chromedriver, more available drivers
+ nodejs v6.10.0+
+ karma

then must export path to $PATH where u put drivers or copy drivers to project directory.

$3

#### npm install

#### karma.conf.js

`jsx
module.exports = {
customLaunchers: {
'Chrome': {
base: 'WebDriverio',
browserName: 'chrome',
name: 'Karma'
},
'Firefox': {
base: 'WebDriverio',
browserName: 'firefox',
name: 'Karma-Firefox',
config: {
browserName: 'firefox',
host: '127.0.0.1', // default
port: '4444' // default
}
}
},
browsers: ['Chrome'],
// if plugins assigned, should:
// since with plugins, karma won't auto load karma-* modules
plugins: [
'karma-webdriverio-launcher'
]
...
}
`

#### Tests code get webdriverio api:

##### basic usage

`jsx
import { beforeHook, beforeEachHook, afterHook, browser, config } from 'karma-event-driver-ext/cjs/event-driver-hooks';
let { $serial } = browser;
// ext using socket-io to communicate with webdriver-io, host & port is changeable
config({
host: 127.0.0.1, // default
port: 8848 // default, if modified, keep same to init({ port: 8848 })
});
describe('Test', function() {
// first increase timeout
...
// then before all hook
before(async () => {
await beforeHook();
...
})

// required if using $serial
beforeEach(async () => {
await beforeEachHook();
});

after(async () => {
...
await afterHook();
})

it('Example', async () => {
await browser
.click(document.body)
.$apply();

await browser
.pause(1000)
.$apply(); // wait 1000 ms
...
})
});
`

##### advanced usage

in specified situation, eg: React Component, tests won't start until componentDidMount trigger, More complex, will pause and wait for componentDidUpdate to resume.

always need wrapping a promise:

`jsx
it('test', async () => {
let rs, rj, prom = new Promise((s, j) => {
rs = s;
rj = j;
})
class A extends Component {
...

componentDidMount() {
rs();
}

componentDidUpdate() {
rs();
}

click() {
this.setState({
reRender: true
})
}
render() {
return


}
...
}
let inst = ReactDom.render(, document.body);
await prom;
prom = new Promise((s, j) => {
rs = s;
rj = j;
};
await browser
.click('#button')
.$apply();
await prom;
})
`

Ext makes a new way that use $serial api to wrap test in serial, then use browser.$next(status) to start/resume/reject and $apply('applyAndWaitForNext')/$applyAndWaitForNext() to pause test, $serial return a promise which will be resolved if all tests finished.

Instead of wrapping promise, u can:

`jsx
class A {
...
componentDidMount() {
browser.$next();
}

componentDidUpdate() {
browser.$next();
}
}

ReactDom.render(, document.body);

// await or return, $serial return a promise
return browser.$serial(
async () => {
await browser
.click('#button')
.$apply('applyAndWaitForNext');
},
async () => {
await browser
.click('#button')
.$applyAndWaitForNext();
}
);
`

If browser.$next() ran before $serial, a resolved promise flag will be assigned to browser. then while calling $serial, if there is a resolved promised flag, serial tests will auto start.

Ensure calling beforeEachHook() in beforeEach if using $serial

`jsx
beforeEach(async () => {
await beforeEachHook();
});
`

And, once test broke, it won't resume util calling browser.$next()

`jxs
await browser
.click(xxx)
.$applyAndWaitForNext(); // or .$apply('applyAndWaitForNext');
// pause here, util browser.$next()
pausing code wait for next
...
`



#### Examples

+ using mocha + chai-sinon
+ using jasmine


#### Run Test:

cli

`
// start selenium-server-standalone
java -jar selenium-server-standalone-3.3.1.jar
// start karma server && event-driver server
node node_modules/karma-event-driver-ext
// or
./node_modules/.bin/karma-event-driver-ext
`

api: runner.js

`jsx
let ext, { init } = require('karma-event-driver-ext');
let karmaServer = init({
onExit: (exitCode) {
console.log('exitCode', exitCode);
},
port: 8848 // default, same to config({ port: 8848 })
});
`


`
node runner.js
// or
./node_modules/.bin/karma-event-driver-ext runner.js

// or if npm install -g: ^0.0.10, ensure all dependencies installed -g.
// karma-event-driver-ext runner.js
``