Skip to content

Commit c13bbee

Browse files
nevesneves
committed
Keyboard testing using codecept.JS
1 parent 9dc5851 commit c13bbee

File tree

8 files changed

+330
-26
lines changed

8 files changed

+330
-26
lines changed

‎codecept.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"tests": "./test/*_scenario.js",
3+
"timeout": 10000,
4+
"output": "./output",
5+
"helpers": {
6+
"Puppeteer": {
7+
"url": "http://localhost:5000/test"
8+
}
9+
},
10+
"include": {},
11+
"bootstrap": false,
12+
"mocha": {},
13+
"name": "vue-the-mask"
14+
}

‎cypress/integration/build_spec.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
const PATH = '/cypress/build-fixture.html'
1+
const PATH = '/test/index.html'
22

33
describe('dist build test', function() {
44
it('loads VueTheMask at window', function() {
5-
const o = { delay: 500 }
5+
const o = { delay: 1000 }
66
cy
77
.visit(PATH)
88
.get('#input')
9-
.type('0{leftarrow}1', o)
10-
.then(input => console.log(input.get(0).selectionEnd))
9+
.type('0{leftarrow}12{leftarrow}{backspace}98', o)
10+
.then(input => console.log(input.get(0)))
1111
// .should('have.value', '+1 0')
1212
// .should('have.value', '+1 02')
1313
// .type('3', o)

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,14 @@
8383
"@vue/cli-service": "^3.0.0-beta.10",
8484
"babel-jest": "^22.4.3",
8585
"babel-preset-vue-app": "^2.0.0",
86+
"codeceptjs-puppeteer": "^1.2.0",
8687
"cypress": "^2.1.0",
8788
"jest": "^22.4.3",
8889
"jest-serializer-vue": "^1.0.0",
8990
"nightwatch": "^0.9.21",
9091
"npm-check-updates": "^2.14.2",
9192
"npmlog": "4.1.2",
93+
"puppeteer": "^1.4.0",
9294
"serve": "^6.5.7",
9395
"size-limit": "^0.18.0",
9496
"testcafe": "^0.20.0",

‎test/e2e_spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ https: test('correctly insert in the middle', async t => {
3434
.typeText(input, '0234.')
3535
.expect(input.value)
3636
.eql('+1 02.34.')
37-
.pressKey('left left left left 0')
37+
.pressKey('left left left left 9 8')
3838
.expect(input.value)
39-
.eql('+1 02.03.4')
39+
.eql('+1 02.983.4')
4040
})

‎test/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77

88
<body>
99
<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>
10+
<!-- <the-mask id="input" mask="+1 ##.##.###)" @input.native="updateCursor" @keyup.native="updateCursor"></the-mask> -->
11+
<input id="input" type="tel" v-mask="'+1 ##.##.###)'" @input="updateCursor" @keyup="updateCursor" />
12+
<!-- <input id="input3" @input="updateCursor2" @keypress="updateCursor2" @keydown="updateCursor2" @keyup="updateCursor2"> -->
13+
<input id="cursor" :value="cursor">
1314
</div>
1415
<script src="../node_modules/vue/dist/vue.js"></script>
15-
<script src="../dist/vue-the-mask.js"></script>
16+
<!-- <script src="../dist/vue-the-mask.js"></script> -->
17+
<script src="../dist/VueTheMask.umd.js"></script>
1618
<script>
1719
new Vue({
1820
el: '#app',

‎test/keyboard_scenario.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
assert = require('assert')
2+
3+
async function assertCursorAt(I, input, expectedPosition) {
4+
let position = await I.grabAttributeFrom(input, 'selectionEnd')
5+
return assert.equal(position, expectedPosition + 1)
6+
}
7+
8+
Feature('Keyboard')
9+
10+
Scenario('Cursor Position', async I => {
11+
I.amOnPage('/')
12+
I.fillField('#input', '012')
13+
I.seeInField('#input', '+1 01.2')
14+
I.pressKey('ArrowLeft')
15+
I.pressKey('9')
16+
I.seeInField('#input', '+1 01.92')
17+
I.pressKey('8')
18+
I.seeInField('#input', '+1 01.98.2')
19+
I.seeInField('#cursor', '8')
20+
// assertCursorAt(I, '#input', 8)
21+
})

‎test/puppeteer.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const puppeteer = require('puppeteer')
2+
;(async () => {
3+
const browser = await puppeteer.launch({ headless: true })
4+
const page = await browser.newPage()
5+
6+
// Define a window.onCustomEvent function on the page.
7+
page.on('console', msg => console.log(msg.text()))
8+
9+
await page.exposeFunction('onCustomEvent', e => {
10+
console.log(`${e.type} fired`, e.detail || '')
11+
})
12+
13+
/**
14+
* Attach an event listener to page to capture a custom event on page load/navigation.
15+
* @param {string} type Event name.
16+
* @return {!Promise}
17+
*/
18+
function listenFor(type) {
19+
return page.evaluateOnNewDocument(type => {
20+
document.addEventListener(type, e => {
21+
window.onCustomEvent({ type, detail: e.detail })
22+
})
23+
}, type)
24+
}
25+
26+
await listenFor('app-ready') // Listen for "app-ready" custom event on page load.
27+
28+
await page.goto('http://localhost:5000/test/', {
29+
waitUntil: 'networkidle2'
30+
})
31+
32+
await page.type('#input', '0123')
33+
await page.keyboard.press('ArrowLeft')
34+
await page.keyboard.press('ArrowLeft')
35+
await page.keyboard.press('Backspace')
36+
await page.keyboard.press('Backspace')
37+
await page.type('#input', '98')
38+
await page.$eval('#input', input =>
39+
console.log(input.value, input.selectionEnd)
40+
)
41+
await browser.close()
42+
})()

0 commit comments

Comments
 (0)