├── .eslintignore
├── config
├── prod.env.js
├── test.env.js
├── dev.env.js
└── index.js
├── .travis.yml
├── .babelrc
├── .gitignore
├── test
├── unit
│ ├── .eslintrc
│ ├── index.js
│ ├── karma.conf.js
│ └── specs
│ │ └── Keyboard.spec.js
└── e2e
│ ├── specs
│ └── test.js
│ ├── custom-assertions
│ └── elementCount.js
│ ├── runner.js
│ └── nightwatch.conf.js
├── src
├── main.js
├── App.vue
└── components
│ └── Keyboard.vue
├── .editorconfig
├── index.html
├── .eslintrc.js
├── LICENSE
├── README.md
├── README_en-US.md
└── package.json
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 |
--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | NODE_ENV: '"production"'
3 | }
4 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "5.0.0"
4 | script: npm run unit
5 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-2"],
3 | "plugins": ["transform-runtime"],
4 | "comments": false
5 | }
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | selenium-debug.log
6 | test/unit/coverage
7 | test/e2e/reports
8 |
--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "mocha": true
4 | },
5 | "globals": {
6 | "expect": true,
7 | "sinon": true
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App'
3 |
4 | /* eslint-disable no-new */
5 | new Vue({
6 | el: 'body',
7 | components: { App }
8 | })
9 |
--------------------------------------------------------------------------------
/config/test.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var devEnv = require('./dev.env')
3 |
4 | module.exports = merge(devEnv, {
5 | NODE_ENV: '"testing"'
6 | })
7 |
--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 |
4 | module.exports = merge(prodEnv, {
5 | NODE_ENV: '"development"'
6 | })
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | vue-virtual-keyboard
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: 'babel-eslint',
4 | parserOptions: {
5 | sourceType: 'module'
6 | },
7 | // required to lint *.vue files
8 | plugins: [
9 | 'html'
10 | ],
11 | // add your custom rules here
12 | 'rules': {
13 | // allow debugger during development
14 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/test/e2e/specs/test.js:
--------------------------------------------------------------------------------
1 | // For authoring Nightwatch tests, see
2 | // http://nightwatchjs.org/guide#usage
3 |
4 | module.exports = {
5 | 'default e2e tests': function (browser) {
6 | browser
7 | .url('http://localhost:8080')
8 | .waitForElementVisible('#app', 1000)
9 | .assert.containsText('h1', 'Just Enter Text:')
10 | .assert.elementPresent('ul.keyboard')
11 | .assert.elementCount('li', 54)
12 | .expect.element('textarea').to.be.present
13 |
14 | browser.end()
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
1 | // Polyfill fn.bind() for PhantomJS
2 | /* eslint-disable no-extend-native */
3 | Function.prototype.bind = require('function-bind')
4 |
5 | // require all test files (files that ends with .spec.js)
6 | var testsContext = require.context('./specs', true, /\.spec$/)
7 | testsContext.keys().forEach(testsContext)
8 |
9 | // require all src files except main.js for coverage.
10 | // you can also change this to match only the subset of files that
11 | // you want coverage for.
12 | var srcContext = require.context('../../src/components/', true, /^\.\/(?!main(\.js)?$)/)
13 | srcContext.keys().forEach(srcContext)
14 |
--------------------------------------------------------------------------------
/test/e2e/custom-assertions/elementCount.js:
--------------------------------------------------------------------------------
1 | // A custom Nightwatch assertion.
2 | // the name of the method is the filename.
3 | // can be used in tests like this:
4 | //
5 | // browser.assert.elementCount(selector, count)
6 | //
7 | // for how to write custom assertions see
8 | // http://nightwatchjs.org/guide#writing-custom-assertions
9 | exports.assertion = function (selector, count) {
10 | this.message = 'Testing if element <' + selector + '> has count: ' + count
11 | this.expected = count
12 | this.pass = function (val) {
13 | return val === this.expected
14 | }
15 | this.value = function (res) {
16 | return res.value
17 | }
18 | this.command = function (cb) {
19 | var self = this
20 | return this.api.execute(function (selector) {
21 | return document.querySelectorAll(selector).length
22 | }, [selector], function (res) {
23 | cb.call(self, res)
24 | })
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
Just Enter Text:
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 DaraW
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/test/e2e/runner.js:
--------------------------------------------------------------------------------
1 | // 1. start the dev server using production config
2 | process.env.NODE_ENV = 'testing'
3 | var server = require('../../build/dev-server.js')
4 |
5 | // 2. run the nightwatch test suite against it
6 | // to run in additional browsers:
7 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
8 | // 2. add it to the --env flag below
9 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
10 | // For more information on Nightwatch's config file, see
11 | // http://nightwatchjs.org/guide#settings-file
12 | var opts = process.argv.slice(2)
13 | if (opts.indexOf('--config') === -1) {
14 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
15 | }
16 | if (opts.indexOf('--env') === -1) {
17 | opts = opts.concat(['--env', 'chrome'])
18 | }
19 |
20 | var spawn = require('cross-spawn')
21 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
22 |
23 | runner.on('exit', function (code) {
24 | server.close()
25 | process.exit(code)
26 | })
27 |
28 | runner.on('error', function (err) {
29 | server.close()
30 | throw err
31 | })
32 |
--------------------------------------------------------------------------------
/test/e2e/nightwatch.conf.js:
--------------------------------------------------------------------------------
1 | require('babel-register')
2 |
3 | // http://nightwatchjs.org/guide#settings-file
4 | module.exports = {
5 | "src_folders": ["test/e2e/specs"],
6 | "output_folder": "test/e2e/reports",
7 | "custom_assertions_path": ["test/e2e/custom-assertions"],
8 |
9 | "selenium": {
10 | "start_process": true,
11 | "server_path": "node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.0.jar",
12 | "host": "127.0.0.1",
13 | "port": 4444,
14 | "cli_args": {
15 | "webdriver.chrome.driver": require('chromedriver').path
16 | }
17 | },
18 |
19 | "test_settings": {
20 | "default": {
21 | "selenium_port": 4444,
22 | "selenium_host": "localhost",
23 | "silent": true
24 | },
25 |
26 | "chrome": {
27 | "desiredCapabilities": {
28 | "browserName": "chrome",
29 | "javascriptEnabled": true,
30 | "acceptSslCerts": true
31 | }
32 | },
33 |
34 | "firefox": {
35 | "desiredCapabilities": {
36 | "browserName": "firefox",
37 | "javascriptEnabled": true,
38 | "acceptSslCerts": true
39 | }
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | // see http://vuejs-templates.github.io/webpack for documentation.
2 | var path = require('path')
3 |
4 | module.exports = {
5 | build: {
6 | env: require('./prod.env'),
7 | index: path.resolve(__dirname, '../dist/index.html'),
8 | assetsRoot: path.resolve(__dirname, '../dist'),
9 | assetsSubDirectory: 'static',
10 | assetsPublicPath: '/',
11 | productionSourceMap: true,
12 | // Gzip off by default as many popular static hosts such as
13 | // Surge or Netlify already gzip all static assets for you.
14 | // Before setting to `true`, make sure to:
15 | // npm install --save-dev compression-webpack-plugin
16 | productionGzip: false,
17 | productionGzipExtensions: ['js', 'css']
18 | },
19 | dev: {
20 | env: require('./dev.env'),
21 | port: 8080,
22 | assetsSubDirectory: 'static',
23 | assetsPublicPath: '/',
24 | proxyTable: {},
25 | // CSS Sourcemaps off by default because relative paths are "buggy"
26 | // with this option, according to the CSS-Loader README
27 | // (https://github.com/webpack/css-loader#sourcemaps)
28 | // In our experience, they generally work as expected,
29 | // just be aware of this issue when enabling this option.
30 | cssSourceMap: false,
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue Virtual Keyboard | [English Doc](/README_en-US.md)
2 | 一个基于`Vue.js`的虚拟键盘组件。
3 |
4 | [](https://travis-ci.org/CodeDaraW/vue-virtual-keyboard) [](https://codecov.io/gh/CodeDaraW/vue-virtual-keyboard)
5 |
6 |
7 | ## Demo
8 | [在线Demo](http://vue-virtual-keyboard.daraw.cn/)
9 |
10 | 
12 |
13 |
14 | ## 安装
15 |
16 | ```bash
17 | npm install https://github.com/CodeDaraW/vue-virtual-keyboard.git
18 | ```
19 |
20 | ## 使用
21 |
22 | ### ES6
23 | ```Vue
24 |
47 |
48 |
49 |
Just Enter Text:
50 |
51 |
52 |
53 |
54 |
55 |
70 | ```
71 |
72 | ### CommonJS
73 |
74 | ```JavsScript
75 | var Keyboard = require('vue-virtual-keyboard/src/components/Keyboard');
76 | ```
77 |
78 | ## 构建
79 |
80 | ``` bash
81 | # 安装依赖
82 | npm install
83 |
84 | # 在 localhost:8080 启动本地服务器并支持热更新
85 | npm run dev
86 |
87 | # 构建
88 | npm run build
89 |
90 | # 单元测试
91 | npm run unit
92 |
93 | # e2e测试
94 | npm run e2e
95 |
96 | # 进行所有测试
97 | npm test
98 | ```
99 |
100 | ## 协议
101 | [The MIT License](http://opensource.org/licenses/MIT)
102 |
--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
1 | // This is a karma config file. For more details see
2 | // http://karma-runner.github.io/0.13/config/configuration-file.html
3 | // we are also using it with karma-webpack
4 | // https://github.com/webpack/karma-webpack
5 |
6 | var path = require('path')
7 | var merge = require('webpack-merge')
8 | var baseConfig = require('../../build/webpack.base.conf')
9 | var utils = require('../../build/utils')
10 | var webpack = require('webpack')
11 | var projectRoot = path.resolve(__dirname, '../../')
12 |
13 | var webpackConfig = merge(baseConfig, {
14 | // use inline sourcemap for karma-sourcemap-loader
15 | module: {
16 | loaders: utils.styleLoaders()
17 | },
18 | devtool: '#inline-source-map',
19 | vue: {
20 | loaders: {
21 | js: 'isparta'
22 | }
23 | },
24 | plugins: [
25 | new webpack.DefinePlugin({
26 | 'process.env': require('../../config/test.env')
27 | })
28 | ]
29 | })
30 |
31 | // no need for app entry during tests
32 | delete webpackConfig.entry
33 |
34 | // make sure isparta loader is applied before eslint
35 | webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
36 | webpackConfig.module.preLoaders.unshift({
37 | test: /\.js$/,
38 | loader: 'isparta',
39 | include: path.resolve(projectRoot, 'src')
40 | })
41 |
42 | // only apply babel for test files when using isparta
43 | webpackConfig.module.loaders.some(function (loader, i) {
44 | if (loader.loader === 'babel') {
45 | loader.include = path.resolve(projectRoot, 'test/unit')
46 | return true
47 | }
48 | })
49 |
50 | module.exports = function (config) {
51 | config.set({
52 | // to run in additional browsers:
53 | // 1. install corresponding karma launcher
54 | // http://karma-runner.github.io/0.13/config/browsers.html
55 | // 2. add it to the `browsers` array below.
56 | browsers: ['PhantomJS'],
57 | frameworks: ['mocha', 'sinon-chai'],
58 | reporters: ['spec', 'coverage'],
59 | files: ['./index.js'],
60 | preprocessors: {
61 | './index.js': ['webpack', 'sourcemap']
62 | },
63 | webpack: webpackConfig,
64 | webpackMiddleware: {
65 | noInfo: true
66 | },
67 | coverageReporter: {
68 | dir: './coverage',
69 | reporters: [
70 | { type: 'lcov', subdir: '.' },
71 | { type: 'text-summary' }
72 | ]
73 | }
74 | })
75 | }
76 |
--------------------------------------------------------------------------------
/README_en-US.md:
--------------------------------------------------------------------------------
1 | # Vue Virtual Keyboard | [中文文档](/README.md)
2 | A virtual keyboard component for `Vue.js`。
3 |
4 | [](https://travis-ci.org/CodeDaraW/vue-virtual-keyboard) [](https://codecov.io/gh/CodeDaraW/vue-virtual-keyboard)
5 |
6 |
7 | ## Demo
8 | [Online Demo](http://vue-virtual-keyboard.daraw.cn/)
9 |
10 | 
12 |
13 |
14 | ## Installation
15 |
16 | ```bash
17 | npm install https://github.com/CodeDaraW/vue-virtual-keyboard.git
18 | ```
19 |
20 | ## Usage
21 |
22 | ### ES6
23 | ```Vue
24 |
47 |
48 |
49 |
Just Enter Text:
50 |
51 |
52 |
53 |
54 |
55 |
70 | ```
71 |
72 | ### CommonJS
73 |
74 | ```JavsScript
75 | var Keyboard = require('vue-virtual-keyboard/src/components/Keyboard');
76 | ```
77 |
78 | ## Build Setup
79 |
80 | ``` bash
81 | # install dependencies
82 | npm install
83 |
84 | # serve with hot reload at localhost:8080
85 | npm run dev
86 |
87 | # build for production with minification
88 | npm run build
89 |
90 | # run unit tests
91 | npm run unit
92 |
93 | # run e2e tests
94 | npm run e2e
95 |
96 | # run all tests
97 | npm test
98 | ```
99 |
100 | ## License
101 | [The MIT License](http://opensource.org/licenses/MIT)
102 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-virtual-keyboard",
3 | "version": "1.0.0",
4 | "description": "Vue Virtual Keyboard",
5 | "author": "CodeDaraW ",
6 | "license": "MIT",
7 | "repository": {
8 | "type": "git",
9 | "url": "git@github.com:CodeDaraW/vue-virtual-keyboard.git"
10 | },
11 | "keywords": [
12 | "vue",
13 | "virtual",
14 | "keyboard"
15 | ],
16 | "scripts": {
17 | "dev": "node build/dev-server.js",
18 | "build": "node build/build.js",
19 | "unit": "karma start test/unit/karma.conf.js --single-run",
20 | "e2e": "node test/e2e/runner.js",
21 | "test": "npm run unit && npm run e2e",
22 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
23 | },
24 | "dependencies": {
25 | "vue": "^1.0.21",
26 | "babel-runtime": "^6.0.0",
27 | "node-sass": "^3.8.0",
28 | "sass-loader": "^4.0.0"
29 | },
30 | "devDependencies": {
31 | "babel-core": "^6.0.0",
32 | "babel-eslint": "^6.1.2",
33 | "babel-loader": "^6.0.0",
34 | "babel-plugin-transform-runtime": "^6.0.0",
35 | "babel-preset-es2015": "^6.0.0",
36 | "babel-preset-stage-2": "^6.0.0",
37 | "babel-register": "^6.0.0",
38 | "chai": "^3.5.0",
39 | "chromedriver": "^2.21.2",
40 | "connect-history-api-fallback": "^1.1.0",
41 | "cross-spawn": "^2.1.5",
42 | "css-loader": "^0.23.0",
43 | "eslint": "^2.10.2",
44 | "eslint-friendly-formatter": "^2.0.5",
45 | "eslint-loader": "^1.3.0",
46 | "eslint-plugin-html": "^1.3.0",
47 | "eventsource-polyfill": "^0.9.6",
48 | "express": "^4.13.3",
49 | "extract-text-webpack-plugin": "^1.0.1",
50 | "file-loader": "^0.8.4",
51 | "function-bind": "^1.0.2",
52 | "html-webpack-plugin": "^2.8.1",
53 | "http-proxy-middleware": "^0.12.0",
54 | "inject-loader": "^2.0.1",
55 | "isparta-loader": "^2.0.0",
56 | "json-loader": "^0.5.4",
57 | "karma": "^0.13.15",
58 | "karma-coverage": "^0.5.5",
59 | "karma-mocha": "^0.2.2",
60 | "karma-phantomjs-launcher": "^1.0.0",
61 | "karma-sinon-chai": "^1.2.0",
62 | "karma-sourcemap-loader": "^0.3.7",
63 | "karma-spec-reporter": "0.0.24",
64 | "karma-webpack": "^1.7.0",
65 | "lolex": "^1.4.0",
66 | "mocha": "^2.4.5",
67 | "nightwatch": "^0.8.18",
68 | "ora": "^0.2.0",
69 | "phantomjs-prebuilt": "^2.1.3",
70 | "selenium-server": "2.53.0",
71 | "shelljs": "^0.6.0",
72 | "sinon": "^1.17.3",
73 | "sinon-chai": "^2.8.0",
74 | "url-loader": "^0.5.7",
75 | "vue-hot-reload-api": "^1.2.0",
76 | "vue-html-loader": "^1.0.0",
77 | "vue-loader": "^8.3.0",
78 | "vue-style-loader": "^1.0.0",
79 | "webpack": "^1.12.2",
80 | "webpack-dev-middleware": "^1.4.0",
81 | "webpack-hot-middleware": "^2.6.0",
82 | "webpack-merge": "^0.8.3"
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/test/unit/specs/Keyboard.spec.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Keyboard from 'src/components/Keyboard'
3 |
4 | const vm = new Vue({
5 | template: '
',
6 | components: {
7 | Keyboard
8 | }
9 | }).$mount();
10 |
11 | const toTestComponent = vm.$refs.testComponent;
12 |
13 | describe('Keyboard.vue', () => {
14 |
15 | it('keyList should be normalKeyList when ready', () => {
16 |
17 | vm.$appendTo(document.body);
18 |
19 | toTestComponent.$nextTick(() => {
20 | assert.notEqual(toTestComponent.keyList, toTestComponent.capsedKeyList);
21 | assert.equal(toTestComponent.keyList, toTestComponent.normalKeyList);
22 | assert.notEqual(toTestComponent.keyList, toTestComponent.shiftedKeyList);
23 | });
24 |
25 | });
26 |
27 | it('should act correctly when Caps clicked', () => {
28 |
29 | assert.equal(toTestComponent.hasCapsed, false);
30 |
31 | toTestComponent.clickKey("Caps");
32 | assert.equal(toTestComponent.hasCapsed, true);
33 | assert.equal(toTestComponent.keyList, toTestComponent.capsedKeyList);
34 | assert.notEqual(toTestComponent.keyList, toTestComponent.normalKeyList);
35 | assert.notEqual(toTestComponent.keyList, toTestComponent.shiftedKeyList);
36 |
37 | toTestComponent.clickKey("Caps");
38 | assert.equal(toTestComponent.hasCapsed, false);
39 | assert.notEqual(toTestComponent.keyList, toTestComponent.capsedKeyList);
40 | assert.equal(toTestComponent.keyList, toTestComponent.normalKeyList);
41 | assert.notEqual(toTestComponent.keyList, toTestComponent.shiftedKeyList);
42 |
43 |
44 | });
45 |
46 | it('should act correctly when Shift clicked', () => {
47 |
48 | assert.equal(toTestComponent.hasShifted, false);
49 |
50 | toTestComponent.clickKey("Shift");
51 | assert.equal(toTestComponent.hasShifted, true);
52 | assert.notEqual(toTestComponent.keyList, toTestComponent.capsedKeyList);
53 | assert.notEqual(toTestComponent.keyList, toTestComponent.normalKeyList);
54 | assert.equal(toTestComponent.keyList, toTestComponent.shiftedKeyList);
55 |
56 | toTestComponent.clickKey("Shift");
57 | assert.equal(toTestComponent.hasShifted, false);
58 | assert.notEqual(toTestComponent.keyList, toTestComponent.capsedKeyList);
59 | assert.equal(toTestComponent.keyList, toTestComponent.normalKeyList);
60 | assert.notEqual(toTestComponent.keyList, toTestComponent.shiftedKeyList);
61 |
62 | });
63 |
64 | it('should act correctly when Tab clicked', () => {
65 |
66 | let oldText = toTestComponent.keyboardText;
67 |
68 | toTestComponent.clickKey("Tab");
69 |
70 | assert.equal(toTestComponent.keyboardText, oldText + '\t');
71 |
72 | });
73 |
74 | it('should act correctly when Enter clicked', () => {
75 |
76 | let oldText = toTestComponent.keyboardText;
77 |
78 | toTestComponent.clickKey("Enter");
79 |
80 | assert.equal(toTestComponent.keyboardText, oldText + '\n');
81 |
82 | });
83 |
84 | it('should act correctly when Space clicked', () => {
85 |
86 | let oldText = toTestComponent.keyboardText;
87 |
88 | toTestComponent.clickKey("Space");
89 |
90 | assert.equal(toTestComponent.keyboardText, oldText + ' ');
91 |
92 | });
93 |
94 | it('should act correctly when Delete and other key clicked', () => {
95 |
96 | let oldText = toTestComponent.keyboardText = "";
97 |
98 | toTestComponent.clickKey("Delete");
99 |
100 | assert.equal(toTestComponent.keyboardText, oldText);
101 |
102 | toTestComponent.clickKey("a");
103 |
104 | assert.equal(toTestComponent.keyboardText, "a");
105 |
106 | toTestComponent.clickKey("Delete");
107 |
108 | assert.equal(toTestComponent.keyboardText, oldText);
109 |
110 | });
111 |
112 | });
--------------------------------------------------------------------------------
/src/components/Keyboard.vue:
--------------------------------------------------------------------------------
1 |
63 |
64 |
67 |
68 |
--------------------------------------------------------------------------------