Skip to content

Commit 9dc5851

Browse files
nevesneves
committed
Add testcafe e2e tests
1 parent e113389 commit 9dc5851

File tree

4 files changed

+955
-79
lines changed

4 files changed

+955
-79
lines changed

‎package.json‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,34 @@
77
"size": "size-limit",
88
"upgrade:check": "ncu",
99
"upgrade:apply": "ncu -a",
10-
"build":
11-
"vue build -t lib -n VueTheMask src && cp dist/VueTheMask.umd.min.js dist/vue-the-mask.js",
10+
"build": "vue build -t lib -n VueTheMask src && cp dist/VueTheMask.umd.min.js dist/vue-the-mask.js",
1211
"docs:build": "cd src/docs && vue build -d ../../docs/",
1312
"docs:serve": "serve ./",
1413
"start": "yarn dev",
1514
"test": "cypress run --dev --record false",
16-
"ci":
17-
"start-server-and-test e2e:start-fixture http://localhost:8080 cypress:open",
15+
"ci": "start-server-and-test e2e:start-fixture http://localhost:8080 cypress:open",
1816
"cypress:open": "cypress open",
19-
"e2e:install-global-dependencies":
20-
"yarn global add selenium-standalone@latest && selenium-standalone install",
17+
"e2e:install-global-dependencies": "yarn global add selenium-standalone@latest && selenium-standalone install",
2118
"e2e:start-fixture": "vue serve ./test/fixture.vue",
2219
"e2e:start-selenium": "selenium-standalone start",
2320
"e2e:run": "nightwatch ./test/nightwatch.js",
2421
"dev": "cd src/docs && vue serve"
2522
},
26-
"files": ["dist/", "src/*.js", "src/*.vue"],
27-
"keywords": ["vue", "mask"],
23+
"files": [
24+
"dist/",
25+
"src/*.js",
26+
"src/*.vue"
27+
],
28+
"keywords": [
29+
"vue",
30+
"mask"
31+
],
2832
"jest": {
29-
"moduleFileExtensions": ["js", "json", "vue"],
33+
"moduleFileExtensions": [
34+
"js",
35+
"json",
36+
"vue"
37+
],
3038
"transform": {
3139
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
3240
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
@@ -38,29 +46,37 @@
3846
"limit": "1.55 KB"
3947
}
4048
],
41-
"author":
42-
"Marcos Neves <[email protected]> (https://vuejs-tips.github.io/)",
49+
"author": "Marcos Neves <[email protected]> (https://vuejs-tips.github.io/)",
4350
"license": "MIT",
4451
"babel": {
4552
"env": {
4653
"test": {
47-
"presets": ["env"]
54+
"presets": [
55+
"env"
56+
]
4857
},
4958
"production": {
50-
"presets": ["@vue/app"]
59+
"presets": [
60+
"@vue/app"
61+
]
5162
}
5263
}
5364
},
5465
"eslintConfig": {
5566
"root": true,
56-
"extends": ["plugin:vue/essential", "eslint:recommended"]
67+
"extends": [
68+
"plugin:vue/essential",
69+
"eslint:recommended"
70+
]
5771
},
5872
"postcss": {
5973
"plugins": {
6074
"autoprefixer": {}
6175
}
6276
},
63-
"browserslist": ["last 2 chrome versions"],
77+
"browserslist": [
78+
"last 2 chrome versions"
79+
],
6480
"devDependencies": {
6581
"@vue/cli-plugin-babel": "^3.0.0-beta.10",
6682
"@vue/cli-plugin-eslint": "^3.0.0-beta.10",
@@ -75,6 +91,7 @@
7591
"npmlog": "4.1.2",
7692
"serve": "^6.5.7",
7793
"size-limit": "^0.18.0",
94+
"testcafe": "^0.20.0",
7895
"vue": "^2.5.16",
7996
"vue-jest": "^2.5.0",
8097
"vue-loader": "^14.2.2",

‎test/e2e_spec.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Selector } from 'testcafe'
2+
3+
fixture`Keyboard Interaction`.page`http://localhost:5000/test/`.before(
4+
async ctx => {
5+
ctx.input = Selector('#input').addCustomDOMProperties({
6+
selectionEnd: el => el.selectionEnd
7+
})
8+
}
9+
)
10+
11+
test('backspace does not remove placeholders', async t => {
12+
const { input } = t.fixtureCtx
13+
await t
14+
.typeText(input, '023')
15+
.expect(input.value)
16+
.eql('+1 02.3')
17+
.pressKey('left backspace')
18+
.expect(input.value)
19+
.eql('+1 02.3')
20+
})
21+
22+
//github.com/vuejs-tips/vue-the-mask/issues/9
23+
https: test('US phone caret position', async t => {
24+
const { input } = t.fixtureCtx
25+
await t
26+
.typeText(input, '19')
27+
.expect(input.value)
28+
.eql('+1 9')
29+
})
30+
31+
https: test('correctly insert in the middle', async t => {
32+
const { input } = t.fixtureCtx
33+
await t
34+
.typeText(input, '0234.')
35+
.expect(input.value)
36+
.eql('+1 02.34.')
37+
.pressKey('left left left left 0')
38+
.expect(input.value)
39+
.eql('+1 02.03.4')
40+
})

‎test/index.html‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
6-
<title></title>
7-
</head>
8-
<body>
9-
<h1>Test</h1>
10-
<div id="app">
11-
<the-mask mask="###.###.###-##"></the-mask>
12-
</div>
13-
<script src="https://unpkg.com/[email protected]"></script>
14-
<script src="/dist/vue-the-mask.js"></script>
15-
<script>
16-
new Vue({el: '#app'})
17-
</script>
18-
</body>
3+
4+
<head>
5+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
6+
</head>
7+
8+
<body>
9+
<div id="app">
10+
<the-mask id="input" mask="+1 ##.##.###)" @input.native="updateCursor" @keyup.native="updateCursor"></the-mask>
11+
<input id="input2" @input="updateCursor2" @keypress="updateCursor2" @keydown="updateCursor2" @keyup="updateCursor2">
12+
<span id="cursor">{{cursor}}</span>
13+
</div>
14+
<script src="../node_modules/vue/dist/vue.js"></script>
15+
<script src="../dist/vue-the-mask.js"></script>
16+
<script>
17+
new Vue({
18+
el: '#app',
19+
data: () => ({ cursor: 0 }),
20+
methods: {
21+
updateCursor($event) {
22+
this.cursor = $event.target.selectionEnd
23+
},
24+
updateCursor2($event) {
25+
this.cursor = $event.target.selectionEnd
26+
}
27+
}
28+
})
29+
</script>
30+
</body>
31+
1932
</html>

0 commit comments

Comments
 (0)