From 21201a48c586f4c49d560749410c9d45716fdd2f Mon Sep 17 00:00:00 2001
From: Tony Brix <tony@brix.ninja>
Date: Tue, 25 May 2021 18:31:22 -0500
Subject: [PATCH] fix: fix toFill on number input (#412)

---
 .eslintrc.js                                  | 11 ++++++++++
 .../expect-puppeteer/src/matchers/toFill.js   |  1 +
 .../src/matchers/toFill.test.js               | 22 +++++++++++++++++--
 server/public/index.html                      |  1 +
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3e15f15a..ca89bc85 100644
--- a/.eslintrc.js
+++ b/.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.',
+      },
+    ],
   },
 }
diff --git a/packages/expect-puppeteer/src/matchers/toFill.js b/packages/expect-puppeteer/src/matchers/toFill.js
index c728fc4d..4512a1af 100644
--- a/packages/expect-puppeteer/src/matchers/toFill.js
+++ b/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()
diff --git a/packages/expect-puppeteer/src/matchers/toFill.test.js b/packages/expect-puppeteer/src/matchers/toFill.test.js
index de3aae0c..19645df3 100644
--- a/packages/expect-puppeteer/src/matchers/toFill.test.js
+++ b/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', {
diff --git a/server/public/index.html b/server/public/index.html
index dee63720..f1b1e40f 100644
--- a/server/public/index.html
+++ b/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>