From 37d1f0f537f249c608e37ac5de28d877e85a4d27 Mon Sep 17 00:00:00 2001 From: gearmobile Date: Fri, 29 Jun 2018 09:58:34 +0300 Subject: [PATCH 1/3] refactoring specs --- test/specs/App.spec.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/test/specs/App.spec.js b/test/specs/App.spec.js index 3372768..13773db 100644 --- a/test/specs/App.spec.js +++ b/test/specs/App.spec.js @@ -1,21 +1,23 @@ -import Vue from 'vue'; import App from '@/App'; +import { shallow } from 'vue-test-utils'; describe('App.vue', () => { + let wrapper; + beforeEach(() => { + wrapper = shallow(App); + }); it('should render correct contents', () => { - const Constructor = Vue.extend(App); - const wm = new Constructor().$mount(); - expect(wm.$el.querySelector('.ui .selectable thead tr th').textContent).to.contain('Items') - expect(wm.$el.querySelector('.ui .button').textContent).to.contain('Add') - expect(wm.$el.querySelector('.ui .label').textContent).to.contain('Remove all') + expect(wrapper.html()) + .to.contain('Items'); + expect(wrapper.html()) + .to.contain(''); + expect(wrapper.html()) + .to.contain(''); + expect(wrapper.html()) + .to.contain('Remove all'); }); it('should set correct default data', () => { - // => функция data возвращает объект компонента App - const initData = App.data(); - // => ожидаем, что свойство item объекта initData является пустой строкой - expect(initData.item).to.equal(''); - // => ожидаем, что свойство items объекта initData является пустым массивом - // => deep.equal - deep для сравнения объектов, ибо объекты ссылочные типы данных и простое сравнение здесь не сработает - expect(initData.items).to.deep.equal([]); + expect(wrapper.wm.item).to.equal(''); + expect(wrapper.wm.items).to.deep.equal([]); }); }); From 528d9ff33921adcc1d93428cf3c9ea89c862bd4c Mon Sep 17 00:00:00 2001 From: gearmobile Date: Fri, 29 Jun 2018 10:30:59 +0300 Subject: [PATCH 2/3] add vue-test-utils --- .eslintrc.js | 3 + package-lock.json | 229 +++++++++++++++++++++++++++++++++++++---- package.json | 5 + test/karma.conf.js | 14 +-- test/specs/App.spec.js | 25 +++-- 5 files changed, 238 insertions(+), 38 deletions(-) create mode 100644 .eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..a5b82de --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + "extends": "standard" +}; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f747be1..1a2fc76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2314,6 +2314,12 @@ "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=", "dev": true }, + "contains-path": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz", + "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=", + "dev": true + }, "content-disposition": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", @@ -3097,6 +3103,16 @@ "buffer-indexof": "^1.0.0" } }, + "doctrine": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", + "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "isarray": "^1.0.0" + } + }, "dom-converter": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz", @@ -3548,6 +3564,191 @@ } } }, + "eslint-config-standard": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-11.0.0.tgz", + "integrity": "sha512-oDdENzpViEe5fwuRCWla7AXQd++/oyIp8zP+iP9jiUPG6NBj3SHgdgtl/kTn00AjeN+1HNvavTKmYbMo+xMOlw==", + "dev": true + }, + "eslint-import-resolver-node": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz", + "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==", + "dev": true, + "requires": { + "debug": "^2.6.9", + "resolve": "^1.5.0" + }, + "dependencies": { + "resolve": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", + "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==", + "dev": true, + "requires": { + "path-parse": "^1.0.5" + } + } + } + }, + "eslint-module-utils": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.2.0.tgz", + "integrity": "sha1-snA2LNiLGkitMIl2zn+lTphBF0Y=", + "dev": true, + "requires": { + "debug": "^2.6.8", + "pkg-dir": "^1.0.0" + }, + "dependencies": { + "find-up": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", + "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", + "dev": true, + "requires": { + "path-exists": "^2.0.0", + "pinkie-promise": "^2.0.0" + } + }, + "path-exists": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", + "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", + "dev": true, + "requires": { + "pinkie-promise": "^2.0.0" + } + }, + "pkg-dir": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz", + "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=", + "dev": true, + "requires": { + "find-up": "^1.0.0" + } + } + } + }, + "eslint-plugin-import": { + "version": "2.13.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.13.0.tgz", + "integrity": "sha512-t6hGKQDMIt9N8R7vLepsYXgDfeuhp6ZJSgtrLEDxonpSubyxUZHjhm6LsAaZX8q6GYVxkbT3kTsV9G5mBCFR6A==", + "dev": true, + "requires": { + "contains-path": "^0.1.0", + "debug": "^2.6.8", + "doctrine": "1.5.0", + "eslint-import-resolver-node": "^0.3.1", + "eslint-module-utils": "^2.2.0", + "has": "^1.0.1", + "lodash": "^4.17.4", + "minimatch": "^3.0.3", + "read-pkg-up": "^2.0.0", + "resolve": "^1.6.0" + }, + "dependencies": { + "load-json-file": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "parse-json": "^2.2.0", + "pify": "^2.0.0", + "strip-bom": "^3.0.0" + } + }, + "path-type": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz", + "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=", + "dev": true, + "requires": { + "pify": "^2.0.0" + } + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + }, + "read-pkg": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", + "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=", + "dev": true, + "requires": { + "load-json-file": "^2.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^2.0.0" + } + }, + "read-pkg-up": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz", + "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=", + "dev": true, + "requires": { + "find-up": "^2.0.0", + "read-pkg": "^2.0.0" + } + }, + "resolve": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", + "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==", + "dev": true, + "requires": { + "path-parse": "^1.0.5" + } + }, + "strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "dev": true + } + } + }, + "eslint-plugin-node": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-6.0.1.tgz", + "integrity": "sha512-Q/Cc2sW1OAISDS+Ji6lZS2KV4b7ueA/WydVWd1BECTQwVvfQy5JAi3glhINoKzoMnfnuRgNP+ZWKrGAbp3QDxw==", + "dev": true, + "requires": { + "ignore": "^3.3.6", + "minimatch": "^3.0.4", + "resolve": "^1.3.3", + "semver": "^5.4.1" + }, + "dependencies": { + "resolve": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", + "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==", + "dev": true, + "requires": { + "path-parse": "^1.0.5" + } + } + } + }, + "eslint-plugin-promise": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-3.8.0.tgz", + "integrity": "sha512-JiFL9UFR15NKpHyGii1ZcvmtIqa3UTwiDAGb8atSffe43qJ3+1czVGN6UtkklpcJ2DVnqvTMzEKRaJdBkAL2aQ==", + "dev": true + }, + "eslint-plugin-standard": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-3.1.0.tgz", + "integrity": "sha512-fVcdyuKRr0EZ4fjWl3c+gp1BANFJD1+RaWa2UPYfMZ6jCtp5RG00kSaXnK/dE5sYzt4kaWJ9qdxqUfc0d9kX0w==", + "dev": true + }, "esprima": { "version": "2.7.3", "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", @@ -4446,14 +4647,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4468,20 +4667,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -4598,8 +4794,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -4611,7 +4806,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4626,7 +4820,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4634,14 +4827,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4660,7 +4851,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -4741,8 +4931,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -4754,7 +4943,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -4876,7 +5064,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package.json b/package.json index 4c87b4c..696505a 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,11 @@ "copy-webpack-plugin": "^4.0.1", "cross-env": "^5.0.1", "css-loader": "^0.28.0", + "eslint-config-standard": "^11.0.0", + "eslint-plugin-import": "^2.13.0", + "eslint-plugin-node": "^6.0.1", + "eslint-plugin-promise": "^3.8.0", + "eslint-plugin-standard": "^3.1.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", diff --git a/test/karma.conf.js b/test/karma.conf.js index 476652c..f85e803 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -3,9 +3,9 @@ // we are also using it with karma-webpack // https://github.com/webpack/karma-webpack -var webpackConfig = require('../build/webpack.test.conf') +var webpackConfig = require('../build/webpack.test.conf'); -module.exports = function (config) { +module.exports = function(config) { config.set({ // to run in additional browsers: // 1. install corresponding karma launcher @@ -16,11 +16,11 @@ module.exports = function (config) { reporters: ['spec'], files: ['./index.js'], preprocessors: { - './index.js': ['webpack', 'sourcemap'] + './index.js': ['webpack', 'sourcemap'], }, webpack: webpackConfig, webpackMiddleware: { - noInfo: true - } - }) -} + noInfo: true, + }, + }); +}; diff --git a/test/specs/App.spec.js b/test/specs/App.spec.js index 13773db..f53212b 100644 --- a/test/specs/App.spec.js +++ b/test/specs/App.spec.js @@ -3,21 +3,26 @@ import { shallow } from 'vue-test-utils'; describe('App.vue', () => { let wrapper; + beforeEach(() => { wrapper = shallow(App); }); + it('should render correct contents', () => { - expect(wrapper.html()) - .to.contain('Items'); - expect(wrapper.html()) - .to.contain(''); - expect(wrapper.html()) - .to.contain(''); - expect(wrapper.html()) - .to.contain('Remove all'); + expect(wrapper.html()).to.contain('Items'); + expect(wrapper.html()).to.contain( + '' + ); + expect(wrapper.html()).to.contain( + '' + ); + expect(wrapper.html()).to.contain( + 'Remove all' + ); }); + it('should set correct default data', () => { - expect(wrapper.wm.item).to.equal(''); - expect(wrapper.wm.items).to.deep.equal([]); + expect(wrapper.vm.item).to.equal(''); + expect(wrapper.vm.items).to.deep.equal([]); }); }); From 2eed98a5b06552fb3610c9a6d6ff771b126fb590 Mon Sep 17 00:00:00 2001 From: gearmobile Date: Fri, 29 Jun 2018 12:44:57 +0300 Subject: [PATCH 3/3] add test atribute value --- test/specs/App.spec.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/test/specs/App.spec.js b/test/specs/App.spec.js index f53212b..16ff464 100644 --- a/test/specs/App.spec.js +++ b/test/specs/App.spec.js @@ -8,6 +8,7 @@ describe('App.vue', () => { wrapper = shallow(App); }); + // => тестим наличие HTML-элементов it('should render correct contents', () => { expect(wrapper.html()).to.contain('Items'); expect(wrapper.html()).to.contain( @@ -21,8 +22,17 @@ describe('App.vue', () => { ); }); + // => тестим данные компонента it('should set correct default data', () => { expect(wrapper.vm.item).to.equal(''); expect(wrapper.vm.items).to.deep.equal([]); }); + + // => тестим значение атрибута элемента + it('should have button Add disabled', () => { + // => получаем button с классами .ui и .button + const button = wrapper.find('.ui .button'); + // => ожидаем, что у кнопки атрибут disabled стоит в true + expect(button.element.disabled).to.be.true; + }); });