Fix handler regression (#392)

* Fix self-closing modals regression Signed-off-by: Emanuele Feliziani <[email protected]> * Fix hotel check-ins dates false matches as cc exp Signed-off-by: Emanuele Feliziani <[email protected]> * Improve comment Signed-off-by: Emanuele Feliziani <[email protected]> --------- Signed-off-by: Emanuele Feliziani <[email protected]>
duckduckgo · Oct 3, 2023 · 392883b · 392883b
1 parent 84127e0
commit 392883b
Show file tree

Hide file tree

Showing 14 changed files with 435 additions and 80 deletions.
diff --git a/dist/autofill-debug.js b/dist/autofill-debug.js
diff --git a/dist/autofill.js b/dist/autofill.js
diff --git a/integration-test/helpers/mocks.js b/integration-test/helpers/mocks.js
@@ -16,6 +16,7 @@ export const constants = {
         'loginWithPoorForm': 'pages/login-poor-form.html',
         'loginWithText': 'pages/login-with-text.html',
         'loginWithFormInModal': 'pages/login-in-modal.html',
+        'signupWithFormInModal': 'pages/signup-in-modal.html',
         'loginCovered': 'pages/login-covered.html',
         'loginMultistep': 'pages/login-multistep.html'
     },

diff --git a/integration-test/helpers/pages.js b/integration-test/helpers/pages.js
@@ -579,16 +579,16 @@ export function loginPage (page, opts = {}) {
             expect(mockCalls).toHaveLength(0)
         }
         async openDialog () {
-            const button = await page.waitForSelector(`button:has-text("Click here to Login")`)
+            const button = await page.waitForSelector(`button:has-text("Click here to open dialog")`)
             await button.click({ force: true })
             await this.assertDialogOpen()
         }
         async assertDialogClose () {
-            const form = await page.locator('#login')
+            const form = await page.locator('.dialog')
             await expect(form).toBeHidden()
         }
         async assertDialogOpen () {
-            const form = await page.locator('#login')
+            const form = await page.locator('.dialog')
             await expect(form).toBeVisible()
         }
         async hitEscapeKey () {

diff --git a/integration-test/pages/login-in-modal.html b/integration-test/pages/login-in-modal.html
@@ -11,7 +11,7 @@
 <body>
 <p><a href="../index.html">[Home]</a></p>
 
-<p id="demo"><button type="button" id="open-modal">Click here to login</button></p>
+<p id="demo"><button type="button" id="open-modal">Click here to open dialog</button></p>
 
 <p id="random-text">Some random text to use as "something outside the dialog element". Clicking here should close the dialog (if open).</p>
 
@@ -37,7 +37,7 @@ <h2>Log in</h2>
     }, {once: true})
     window.addEventListener('pointerdown', (e) => {
       if (!dialogEl.contains(e.target)) {dialogEl.setAttribute('hidden', '')}
-    }, {once: true})
+    })
   })
 
   const form = document.forms.login;

diff --git a/integration-test/pages/signup-in-modal.html b/integration-test/pages/signup-in-modal.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Signup form within a modal</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+<p><a href="../index.html">[Home]</a></p>
+
+<p id="demo"><button type="button" id="open-modal">Click here to open dialog</button></p>
+
+<p id="random-text">Some random text to use as "something outside the dialog element". Clicking here should close the dialog (if open).</p>
+
+<div class="dialog" hidden>
+  <form action="/signup" id="signup">
+    <h2>Signup</h2>
+    <fieldset>
+      <label for="email">Email</label>
+      <input id="email" type="email">
+      <label for="password">Password</label>
+      <input id="password" type="password">
+      <button type="submit">Signup</button>
+    </fieldset>
+  </form>
+</div>
+<script type="module">
+  const openModalBtn = document.getElementById('open-modal')
+  const dialogEl = document.querySelector('.dialog')
+  openModalBtn.addEventListener('click', () => {
+    dialogEl.removeAttribute('hidden')
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {dialogEl.setAttribute('hidden', '')}
+    }, {once: true})
+    window.addEventListener('pointerdown', (e) => {
+      if (!dialogEl.contains(e.target)) {dialogEl.setAttribute('hidden', '')}
+    })
+  })
+
+  const form = document.forms.login;
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    if (form.checkValidity()) {
+      setTimeout(() => dialogEl.innerHTML = '<h1>Submitted!</h1>', 100)
+    }
+  })
+</script>
+</body>
+
+</html>
diff --git a/integration-test/tests/email-autofill.extension.spec.js b/integration-test/tests/email-autofill.extension.spec.js
@@ -1,7 +1,7 @@
 import {forwardConsoleMessages, withEmailProtectionExtensionSignedInAs} from '../helpers/harness.js'
 import { test as base, expect } from '@playwright/test'
 import {constants} from '../helpers/mocks.js'
-import {emailAutofillPage} from '../helpers/pages.js'
+import {emailAutofillPage, loginPage} from '../helpers/pages.js'
 import { stripDuckExtension } from '../helpers/utils.js'
 import {testContext} from '../helpers/test-context.js'
 
@@ -66,4 +66,32 @@ test.describe('chrome extension', () => {
             'autofill_show', 'autofill_private_address' // second private autofill
         ])
     })
+
+    test('should not close the modal when autofilling', async ({page}) => {
+        const {personalAddress} = constants.fields.email
+
+        forwardConsoleMessages(page)
+        await withEmailProtectionExtensionSignedInAs(page, stripDuckExtension(personalAddress))
+        // page abstraction
+        const emailPage = loginPage(page)
+        await emailPage.navigate('signupWithFormInModal')
+
+        await emailPage.openDialog()
+
+        await emailPage.clickIntoUsernameInput()
+
+        // buttons, unique to the extension
+        const personalAddressBtn = await page.locator(`text=Use ${personalAddress} Block email trackers`)
+
+        // click first option
+        await personalAddressBtn.click()
+
+        // ensure autofill populates the field
+        await emailPage.assertUsernameFilled(personalAddress)
+
+        await emailPage.assertDialogOpen()
+
+        await emailPage.clickOutsideTheDialog()
+        await emailPage.assertDialogClose()
+    })
 })
diff --git a/src/Form/matching-config/__generated__/compiled-matching-config.js b/src/Form/matching-config/__generated__/compiled-matching-config.js
diff --git a/src/Form/matching-config/matching-config-source.js b/src/Form/matching-config/matching-config-source.js
@@ -293,12 +293,12 @@ const matchingConfiguration = {
                 cardSecurityCode: {match: 'security.?code|card.?verif|cvv|csc|cvc|cv2|card id'},
                 expirationMonth: {
                     match: '(card|\\bcc\\b)?.?(exp(iry|iration)?)?.?(month|\\bmm\\b(?![.\\s/-]yy))',
-                    skip: 'mm[/\\s.\\-_—–]'
+                    skip: 'mm[/\\s.\\-_—–]|check'
                 },
-                expirationYear: {match: '(card|\\bcc\\b)?.?(exp(iry|iration)?)?.?(year|yy)', skip: 'mm[/\\s.\\-_—–]'},
+                expirationYear: {match: '(card|\\bcc\\b)?.?(exp(iry|iration)?)?.?(year|yy)', skip: 'mm[/\\s.\\-_—–]|check'},
                 expiration: {
                     match: '(\\bmm\\b|\\b\\d\\d\\b)[/\\s.\\-_—–](\\byy|\\bjj|\\baa|\\b\\d\\d)|\\bexp|\\bvalid(idity| through| until)',
-                    skip: 'invalid|^dd/'
+                    skip: 'invalid|^dd/|check'
                 },
 
                 // Identities