fix: fix toFill on number input (#412)

.eslintrc.js

@@ -23,5 +23,16 @@ module.exports = {
     'no-param-reassign': 'off',
     'no-use-before-define': 'off',
     'import/prefer-default-export': 'off',
+    'no-restricted-globals': [
+      'error',
+      {
+        name: 'fit',
+        message: 'Do not commit focused tests.',
+      },
+      {
+        name: 'fdescribe',
+        message: 'Do not commit focused tests.',
+      },
+    ],
   },
 }

packages/expect-puppeteer/src/matchers/toFill.js

@@ -10,6 +10,7 @@ async function selectAll(element) {
         // setSelectionRange throws an error for inputs: number/date/time/etc
         // we can just focus them and the content will be selected
         elementHandle.focus()
+        elementHandle.select()
       }
     } else if (window.getSelection && document.createRange) {
       const range = document.createRange()

packages/expect-puppeteer/src/matchers/toFill.test.js

@@ -27,7 +27,7 @@ describe('toFill', () => {
       expect(value).toBe('')
     })
 
-    fit('should fill textarea', async () => {
+    it('should fill textarea', async () => {
       await expect(page).toFill(
         '[name="notes"]',
         'These are \n multiline \n notes',
@@ -38,7 +38,7 @@ describe('toFill', () => {
       expect(value).toBe('These are \n multiline \n notes')
     })
 
-    fit('should empty the textarea given an empty string', async () => {
+    it('should empty the textarea given an empty string', async () => {
       await expect(page).toFill(
         '[name="notes"]',
         'These are \n multiline \n notes',
@@ -50,6 +50,23 @@ describe('toFill', () => {
       expect(value).toBe('')
     })
 
+    it('should fill number input', async () => {
+      await expect(page).toFill('[name="age"]', '10')
+      const value = await page.evaluate(
+        () => document.querySelector('[name="age"]').value,
+      )
+      expect(value).toBe('10')
+    })
+
+    it('should empty number input given an empty string', async () => {
+      await expect(page).toFill('[name="age"]', '10')
+      await expect(page).toFill('[name="age"]', '')
+      const value = await page.evaluate(
+        () => document.querySelector('[name="age"]').value,
+      )
+      expect(value).toBe('')
+    })
+
     it('should return an error if text is not in the page', async () => {
       expect.assertions(2)
 
@@ -70,6 +87,7 @@ describe('toFill', () => {
       )
       expect(value).toBe('James')
     })
+
     it('should fill input with custom delay', async () => {
       const body = await page.$('body')
       await expect(body).toFill('[name="firstName"]', 'James', {

server/public/index.html

@@ -23,6 +23,7 @@
   <form>
     <input name="firstName" />
     <input name="lastName" />
+    <input type="number" name="age" />
     <textarea name="notes"></textarea>
   </form>
   <button id="dialog-btn" onclick="window.confirm('Bouh!')">Open dialog</button>