Keyboard testing using codecept.JS

vuejs-tips · May 17, 2018 · c13bbee · c13bbee
1 parent 9dc5851
commit c13bbee
Show file tree

Hide file tree

Showing 8 changed files with 330 additions and 26 deletions.
diff --git a/codecept.json b/codecept.json
@@ -0,0 +1,14 @@
+{
+  "tests": "./test/*_scenario.js",
+  "timeout": 10000,
+  "output": "./output",
+  "helpers": {
+    "Puppeteer": {
+      "url": "http://localhost:5000/test"
+    }
+  },
+  "include": {},
+  "bootstrap": false,
+  "mocha": {},
+  "name": "vue-the-mask"
+}
diff --git a/cypress/integration/build_spec.js b/cypress/integration/build_spec.js
@@ -1,13 +1,13 @@
-const PATH = '/cypress/build-fixture.html'
+const PATH = '/test/index.html'
 
 describe('dist build test', function() {
   it('loads VueTheMask at window', function() {
-    const o = { delay: 500 }
+    const o = { delay: 1000 }
     cy
       .visit(PATH)
       .get('#input')
-      .type('0{leftarrow}1', o)
-      .then(input => console.log(input.get(0).selectionEnd))
+      .type('0{leftarrow}12{leftarrow}{backspace}98', o)
+      .then(input => console.log(input.get(0)))
     // .should('have.value', '+1 0')
     // .should('have.value', '+1 02')
     // .type('3', o)

diff --git a/package.json b/package.json
@@ -83,12 +83,14 @@
     "@vue/cli-service": "^3.0.0-beta.10",
     "babel-jest": "^22.4.3",
     "babel-preset-vue-app": "^2.0.0",
+    "codeceptjs-puppeteer": "^1.2.0",
     "cypress": "^2.1.0",
     "jest": "^22.4.3",
     "jest-serializer-vue": "^1.0.0",
     "nightwatch": "^0.9.21",
     "npm-check-updates": "^2.14.2",
     "npmlog": "4.1.2",
+    "puppeteer": "^1.4.0",
     "serve": "^6.5.7",
     "size-limit": "^0.18.0",
     "testcafe": "^0.20.0",

diff --git a/test/e2e_spec.js b/test/e2e_spec.js
@@ -34,7 +34,7 @@ https: test('correctly insert in the middle', async t => {
     .typeText(input, '0234.')
     .expect(input.value)
     .eql('+1 02.34.')
-    .pressKey('left left left left 0')
+    .pressKey('left left left left 9 8')
     .expect(input.value)
-    .eql('+1 02.03.4')
+    .eql('+1 02.983.4')
 })
diff --git a/test/index.html b/test/index.html
@@ -7,12 +7,14 @@
 
 <body>
   <div id="app">
-    <the-mask id="input" mask="+1 ##.##.###)" @input.native="updateCursor" @keyup.native="updateCursor"></the-mask>
-    <input id="input2" @input="updateCursor2" @keypress="updateCursor2" @keydown="updateCursor2" @keyup="updateCursor2">
-    <span id="cursor">{{cursor}}</span>
+    <!-- <the-mask id="input" mask="+1 ##.##.###)" @input.native="updateCursor" @keyup.native="updateCursor"></the-mask> -->
+    <input id="input" type="tel" v-mask="'+1 ##.##.###)'" @input="updateCursor" @keyup="updateCursor" />
+    <!-- <input id="input3" @input="updateCursor2" @keypress="updateCursor2" @keydown="updateCursor2" @keyup="updateCursor2"> -->
+    <input id="cursor" :value="cursor">
   </div>
   <script src="../node_modules/vue/dist/vue.js"></script>
-  <script src="../dist/vue-the-mask.js"></script>
+  <!-- <script src="../dist/vue-the-mask.js"></script> -->
+  <script src="../dist/VueTheMask.umd.js"></script>
   <script>
     new Vue({
       el: '#app',

diff --git a/test/keyboard_scenario.js b/test/keyboard_scenario.js
@@ -0,0 +1,21 @@
+assert = require('assert')
+
+async function assertCursorAt(I, input, expectedPosition) {
+  let position = await I.grabAttributeFrom(input, 'selectionEnd')
+  return assert.equal(position, expectedPosition + 1)
+}
+
+Feature('Keyboard')
+
+Scenario('Cursor Position', async I => {
+  I.amOnPage('/')
+  I.fillField('#input', '012')
+  I.seeInField('#input', '+1 01.2')
+  I.pressKey('ArrowLeft')
+  I.pressKey('9')
+  I.seeInField('#input', '+1 01.92')
+  I.pressKey('8')
+  I.seeInField('#input', '+1 01.98.2')
+  I.seeInField('#cursor', '8')
+  // assertCursorAt(I, '#input', 8)
+})
diff --git a/test/puppeteer.js b/test/puppeteer.js
@@ -0,0 +1,42 @@
+const puppeteer = require('puppeteer')
+;(async () => {
+  const browser = await puppeteer.launch({ headless: true })
+  const page = await browser.newPage()
+
+  // Define a window.onCustomEvent function on the page.
+  page.on('console', msg => console.log(msg.text()))
+
+  await page.exposeFunction('onCustomEvent', e => {
+    console.log(`${e.type} fired`, e.detail || '')
+  })
+
+  /**
+   * Attach an event listener to page to capture a custom event on page load/navigation.
+   * @param {string} type Event name.
+   * @return {!Promise}
+   */
+  function listenFor(type) {
+    return page.evaluateOnNewDocument(type => {
+      document.addEventListener(type, e => {
+        window.onCustomEvent({ type, detail: e.detail })
+      })
+    }, type)
+  }
+
+  await listenFor('app-ready') // Listen for "app-ready" custom event on page load.
+
+  await page.goto('http://localhost:5000/test/', {
+    waitUntil: 'networkidle2'
+  })
+
+  await page.type('#input', '0123')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('ArrowLeft')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Backspace')
+  await page.type('#input', '98')
+  await page.$eval('#input', input =>
+    console.log(input.value, input.selectionEnd)
+  )
+  await browser.close()
+})()