diff --git a/.testiumrc b/.testiumrc deleted file mode 100644 index cbd622b..0000000 --- a/.testiumrc +++ /dev/null @@ -1,3 +0,0 @@ -launch = true -app.command = npm start -app.port = 8080 diff --git a/.travis.yml b/.travis.yml index 84cdb16..7af1968 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,17 +1,5 @@ language: node_js node_js: - "6" -env: - - CXX=g++-4.8 -addons: - apt: - sources: - - ubuntu-toolchain-r-test - packages: - - g++-4.8 -before_script: - - "export DISPLAY=:99.0" - - "sh -e /etc/init.d/xvfb start" - - sleep 3 # give xvfb some time to start script: - echo diff --git a/package.json b/package.json index f20962f..e766ae0 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ }, "scripts": { "prepublish": "npm run release", - "start": "run-s build:cjs watch:example", "clean": "rm -rf dist .tmp", "dev": "run-p watch:cjs watch:example", "dev:test": "run-p watch:test testem", @@ -39,10 +38,10 @@ "lint": "eslint --fix \"@(src|test|scripts|example)/**/*.@(js|vue)\"", "testem": "testem", "testem:ci": "testem ci --launch PhantomJS", - "test": "run-s test:*", + "test": "run-s lint flow test:*", "test:unit": "run-s build:test testem:ci", - "test:e2e": "mocha --compilers js:babel-register test/e2e/example.js", - "release": "run-s lint flow test clean build" + "test:e2e": "npm run build:cjs && node test/e2e/runner.js", + "release": "run-s test clean build" }, "devDependencies": { "autoprefixer": "^6.5.1", @@ -54,14 +53,13 @@ "babel-plugin-transform-flow-strip-types": "^6.8.0", "babel-preset-es2015": "^6.14.0", "babel-preset-power-assert": "^1.0.0", - "babel-register": "^6.14.0", "cross-env": "^2.0.0", "css-loader": "^0.25.0", "eslint": "^3.0.0", "eslint-plugin-flowtype": "^2.4.1", "eslint-plugin-html": "^1.5.2", "flow-bin": "^0.32.0", - "mocha": "^3.0.2", + "glob": "^7.1.1", "node-sass": "^3.10.0", "npm-run-all": "^3.0.0", "postcss": "^5.2.4", @@ -78,13 +76,13 @@ "rollup-plugin-vue": "^2.2.3", "rollup-watch": "^2.5.0", "style-loader": "^0.13.1", + "testcafe": "^0.10.0", + "testcafe-browser-provider-phantomjs": "^1.0.0", "testem": "^1.6.0", - "testium-driver-sync": "^2.3.0", - "testium-mocha": "^1.1.0", "uglifyjs": "^2.4.10", - "vue": "^2.0.0-rc.6", - "vue-loader": "^9.5.0", - "webpack": "^2.1.0-beta.23", - "webpack-dev-server": "^2.1.0-beta.4" + "vue": "^2.1.3", + "vue-loader": "^10.0.1", + "webpack": "^2.1.0-beta.27", + "webpack-dev-server": "^2.1.0-beta.11" } } diff --git a/scripts/webpack.config.example.js b/scripts/webpack.config.example.js index 7493af5..993c745 100644 --- a/scripts/webpack.config.example.js +++ b/scripts/webpack.config.example.js @@ -18,10 +18,10 @@ module.exports = { } }, module: { - loaders: [ - { test: /\.js$/, loader: 'babel', exclude: /(node_modules|dist)/ }, - { test: /\.css$/, loader: 'style!css' }, - { test: /\.vue$/, loader: 'vue' } + rules: [ + { test: /\.js$/, loader: 'babel-loader', exclude: /(node_modules|dist)/ }, + { test: /\.css$/, loader: 'style-loader!css-loader' }, + { test: /\.vue$/, loader: 'vue-loader' } ] }, devServer: { diff --git a/test/.eslintrc.yml b/test/.eslintrc.yml index bd5779b..cf1ddfc 100644 --- a/test/.eslintrc.yml +++ b/test/.eslintrc.yml @@ -1,3 +1,6 @@ --- env: mocha: true + globals: + fixture: true + test: true diff --git a/test/e2e/example.js b/test/e2e/example.js deleted file mode 100644 index 0ca7126..0000000 --- a/test/e2e/example.js +++ /dev/null @@ -1,91 +0,0 @@ -const assert = require('power-assert') -const browser = require('testium-mocha').browser -const ExamplePage = require('./pages/example') - -describe('Example', () => { - let page - - before(browser.beforeHook()) - - before('load example page', () => { - browser.navigateTo('/') - browser.assert.httpStatus(200) - page = new ExamplePage(browser) - }) - - it('default value', () => { - assert(page.getSliderValue() === '50') - assert(page.getValue() === '') - }) - - it('sets name and value to the input field in the slider', () => { - page - .setName('some_name') - .setValue(12) - - assert(page.getSliderName() === 'some_name') - assert(page.getSliderValue() === '12') - }) - - it('updates value by dragging slider', () => { - page.moveSlider(0.5) - assert(page.getValue() === '62') - }) - - it('limits between min and max value', () => { - page.moveSlider(1) - assert(page.getSliderValue() === '100') - - page.moveSlider(-1) - assert(page.getSliderValue() === '0') - }) - - it('changes step value', () => { - page.setValue(20) - .setStep(50) - - // should not modify the value by updating step - assert(page.getSliderValue() === '20') - - page.setValue(0).moveSlider(0.25) - assert(page.getSliderValue() === '50') - - page.setValue(0).moveSlider(0.24) - assert(page.getSliderValue() === '0') - }) - - - it('changes min and max value', () => { - page.setStep(1).setValue(0).setMin(30) - // modify to correct value for current min - assert(page.getSliderValue() === '30') - // but the change should not propagate to parent - assert(page.getValue() === '0') - - page.setMin(0).setStep(3).setValue(9).setMax(8) - // modify to correct value for current max - assert(page.getSliderValue() === '6') - // but the change should not propagate to parent - assert(page.getValue() === '9') - - page.setStep(1).setMin(30).setMax(200).setValue(100) - - page.moveSlider(-1) - assert(page.getSliderValue() === '30') - - page.moveSlider(1) - assert(page.getSliderValue() === '200') - }) - - it('disables slider', () => { - page.setStep(1).setMin(0).setMax(100).setValue(50) - - page.toggleDisabled() - .moveSlider(-1) - assert(page.getSliderValue() === '50') - - page.toggleDisabled() - .moveSlider(-1) - assert(page.getSliderValue() === '0') - }) -}) diff --git a/test/e2e/pages/example.js b/test/e2e/pages/example.js index 230dfa6..a0d8819 100644 --- a/test/e2e/pages/example.js +++ b/test/e2e/pages/example.js @@ -1,79 +1,67 @@ -class ExamplePage { - constructor (browser) { - this.browser = browser +export default class ExamplePage { + constructor (t) { + this.t = t + } + + get wait () { + return this.t } setName (name) { - this.browser.setValue('.name', name) + this.t = this.t.typeText('.name', name, { replace: true }) return this } setValue (value) { - this.browser.setValue('.value', value) + this.t = this.t.typeText('.value', String(value), { replace: true }) return this } setMin (min) { - this.browser.setValue('.min', min) + this.t = this.t.typeText('.min', String(min), { replace: true }) return this } setMax (max) { - this.browser.setValue('.max', max) + this.t = this.t.typeText('.max', String(max), { replace: true }) return this } setStep (step) { - this.browser.setValue('.step', step) + this.t = this.t.typeText('.step', String(step), { replace: true }) return this } toggleDisabled () { - this.browser.click('.disabled') - return this - } - - mouseDownSlider () { - this.browser - .getElement('.range-slider-knob') - // intend to mouse down at center - // knob size === 20 - .movePointerRelativeTo(10, 10) - this.browser.buttonDown() - return this - } - - mouseUp () { - this.browser.buttonUp() + this.t = this.t.click('.disabled') return this } moveSlider (offsetRatio) { - this.mouseDownSlider() - this.browser - .getElement('.range-slider-knob') + this.t = this.t.drag( + '.range-slider-knob', // the width that knob can move is 200 // keep mouse position at the knob center - .movePointerRelativeTo(200 * offsetRatio + 10, 10) - this.mouseUp() + 200 * offsetRatio, + 0, + { offsetX: 10, offsetY: 10 } + ) return this } getValue () { - return this.browser.getElement('.value').get('value') + return this.t.select('.value').value } getSliderName () { - return this.browser - .getElement('.range-slider input') - .get('name') + return this.t + .select('.range-slider input') + .then(el => el.getAttribute('name')) } getSliderValue () { - return this.browser - .getElement('.range-slider input') - .get('value') + return this.t + .select('.range-slider input') + .value } } - -module.exports = ExamplePage diff --git a/test/e2e/runner.js b/test/e2e/runner.js new file mode 100644 index 0000000..8f2df37 --- /dev/null +++ b/test/e2e/runner.js @@ -0,0 +1,26 @@ +const path = require('path') +const glob = require('glob') +const WebpackDevServer = require('webpack-dev-server') +const webpack = require('webpack') +const createTestCafe = require('testcafe') + +const compiler = webpack(require('../../scripts/webpack.config.example')) + +const server = new WebpackDevServer(compiler, { + contentBase: 'example', + noInfo: true +}) + +server.listen(8080, () => { + createTestCafe('localhost', 1337, 1338) + .then(testCafe => { + return testCafe + .createRunner() + .src(glob.sync(path.resolve(__dirname, 'specs/**/*.js'))) + .browsers(['phantomjs']) + .run() + }) + .then(() => { + process.exit() + }) +}) diff --git a/test/e2e/specs/example.js b/test/e2e/specs/example.js new file mode 100644 index 0000000..6247a57 --- /dev/null +++ b/test/e2e/specs/example.js @@ -0,0 +1,84 @@ +import assert from 'assert' +import ExamplePage from '../pages/example' + +let page + +fixture`Example` + .page`http://localhost:8080/` + .beforeEach(t => page = new ExamplePage(t)) + +test('default value', async () => { + assert(await page.getSliderValue() === '50') + assert(await page.getValue() === '') +}) + +test('sets name and value to the input field in the slider', async () => { + await page + .setName('some_name') + .setValue(12) + .wait + + assert(await page.getSliderName() === 'some_name') + assert(await page.getSliderValue() === '12') +}) + +test('updates value by dragging slider', async () => { + await page.moveSlider(0.25).wait + assert(await page.getValue() === '75') +}) + +test('limits between min and max value', async () => { + await page.moveSlider(2).wait + assert(await page.getSliderValue() === '100') + + await page.moveSlider(-2).wait + assert(await page.getSliderValue() === '0') +}) + +test('changes step value', async () => { + await page.setValue(20).setStep(50).wait + + // should not modify the value by updating step + assert(await page.getSliderValue() === '20') + + await page.setValue(0).moveSlider(0.25).wait + assert(await page.getSliderValue() === '50') + + await page.setValue(0).moveSlider(0.24).wait + assert(await page.getSliderValue() === '0') +}) + + +test('changes min and max value', async () => { + await page.setStep(1).setValue(0).setMin(30).wait + // modify to correct value for current min + assert(await page.getSliderValue() === '30') + // but the change should not propagate to parent + assert(await page.getValue() === '0') + + await page.setMin(0).setStep(3).setValue(9).setMax(8).wait + // modify to correct value for current max + assert(await page.getSliderValue() === '6') + // but the change should not propagate to parent + assert(await page.getValue() === '9') + + await page.setStep(1).setMin(30).setMax(200).setValue(100).wait + + await page.moveSlider(-1).wait + assert(await page.getSliderValue() === '30') + + await page.moveSlider(1).wait + assert(await page.getSliderValue() === '200') +}) + +test('disables slider', async () => { + await page.setStep(1).setMin(0).setMax(100).setValue(50).wait + + await page.toggleDisabled() + .moveSlider(-1).wait + assert(await page.getSliderValue() === '50') + + await page.toggleDisabled() + .moveSlider(-1).wait + assert(await page.getSliderValue() === '0') +})