-
Notifications
You must be signed in to change notification settings - Fork 11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix handler regression #392
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Existing tests should have caught the regression already, but I'm adding this one specific to the extensions because when we remove all the Catalina stuff the bug won't actually happen anymore in the desktop apps, so this gives us more confidence going forward. Side note, it will be quite an undertaking to rewrite all these integration tests when we remove the in-page Catalina pulldown 😰. Almost all macOS integration tests rely on the Catalina version of the pulldown. |
||
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() | ||
}) | ||
}) |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was the problem with the test and why it didn't catch the regression. Since the self-closing listener only fired once, the test was passing because this handler ran as we clicked into the field and not when clicking again in the autofill pulldown UI.