Merge branch 'main' of github.com:duckduckgo/duckduckgo-autofill into…

… ema/update-deps Signed-off-by: Emanuele Feliziani <[email protected]> # Conflicts: # dist/autofill-debug.js # dist/autofill.js # package-lock.json # package.json # swift-package/Resources/assets/autofill-debug.js # swift-package/Resources/assets/autofill.js
duckduckgo · Sep 26, 2023 · bc2c387 · bc2c387
2 parents 448b763 + 4e2f67f
commit bc2c387
Show file tree

Hide file tree

Showing 17 changed files with 2,813 additions and 256 deletions.
diff --git a/integration-test/helpers/harness.js b/integration-test/helpers/harness.js
@@ -33,12 +33,19 @@ export async function withEmailProtectionExtensionSignedInAs (page, username) {
 }
 
 /**
- * @param {import("@playwright/test").Page} page
- * @param {Record<string, string | boolean>} replacements
- * @param {Platform} [platform]
+ * @param {object} p
+ * @param {import("@playwright/test").Page} p.page
+ * @param {Record<string, string | boolean>} p.replacements
+ * @param {Platform} [p.platform]
+ * @param {{
+ *     MAX_INPUTS_PER_PAGE: number,
+ *     MAX_FORMS_PER_PAGE: number,
+ *     MAX_INPUTS_PER_FORM: number,
+ *     MAX_FORM_MUT_OBS_COUNT: number
+ * }} [p.constants]
  * @return {Promise<void>}
  */
-function withStringReplacements (page, replacements, platform = 'macos') {
+function withStringReplacements ({page, replacements, platform = 'macos', constants}) {
     const content = readFileSync('./dist/autofill.js', 'utf8')
     let output = content
     for (let [keyName, value] of Object.entries(replacements)) {
@@ -48,6 +55,12 @@ function withStringReplacements (page, replacements, platform = 'macos') {
         output = output.replace(`// INJECT ${keyName} HERE`, `${keyName} = ${replacement};`)
     }
 
+    if (constants) {
+        for (let [keyName, value] of Object.entries(constants)) {
+            output = output.replace(new RegExp(`${keyName}: \\d+`), `${keyName}: ${value}`)
+        }
+    }
+
     // 'macos' + 'ios'  can execute scripts before page scripts
     if (['macos', 'ios'].includes(platform)) {
         return page.addInitScript(output)
@@ -98,6 +111,13 @@ export function createAutofillScript () {
     /** @type {Platform} */
     let platform = 'macos'
 
+    let constants = {
+        MAX_INPUTS_PER_PAGE: 100,
+        MAX_FORMS_PER_PAGE: 30,
+        MAX_INPUTS_PER_FORM: 80,
+        MAX_FORM_MUT_OBS_COUNT: 50
+    }
+
     /** @type {ScriptBuilder} */
     const builder = {
         replace (key, value) {
@@ -116,11 +136,15 @@ export function createAutofillScript () {
             platform = p
             return this
         },
+        withConstants (consts) {
+            constants = consts
+            return this
+        },
         async applyTo (page) {
             if (platform === 'windows') {
                 replacements['isWindows'] = true
             }
-            return withStringReplacements(page, replacements, platform)
+            return withStringReplacements({page, replacements, platform, constants})
         }
     }
 
@@ -190,6 +214,8 @@ export function forwardConsoleMessages (page, _opts = {}) {
  * @return {Promise<PerformanceEntryList>}
  */
 export async function performanceEntries (page, measureName) {
+    // don't measure until the entries exist
+    await page.waitForFunction((measureName) => window.performance.getEntriesByName(measureName).length > 0, `${measureName}:end`)
     const result = await page.evaluate((measureName) => {
         window.performance?.measure?.(measureName, `${measureName}:start`, `${measureName}:end`)
         const entries = window.performance?.getEntriesByName(measureName)

diff --git a/integration-test/helpers/harness.types.d.ts b/integration-test/helpers/harness.types.d.ts
@@ -80,6 +80,8 @@ interface ScriptBuilder {
     tap(fn: (replacements: Partial<Replacements>, platform: string) => void): Omit<ScriptBuilder, "applyTo">
     // set the platform - this is required
     platform(platform: Platform): Omit<ScriptBuilder, "platform">
+    // can alter constants as defined in src/constants.js if needed
+    withConstants(constants: any): Omit<ScriptBuilder, "withConstants">
     // apply to the page, this is the final step
     applyTo(page: import("@playwright/test").Page): Promise<void>
 }

diff --git a/integration-test/helpers/mocks.android.js b/integration-test/helpers/mocks.android.js
@@ -197,7 +197,6 @@ export function createAndroidMocks () {
                     },
                     storeFormData (request) {
                         /** @type {MockCall} */
-                        // @ts-expect-error
                         const call = ['storeFormData', request, mocks.getAutofillData]
                         window.__playwright_autofill.mocks.calls.push(JSON.parse(JSON.stringify(call)))
                     }

diff --git a/integration-test/helpers/mocks.js b/integration-test/helpers/mocks.js
@@ -7,6 +7,7 @@ export const constants = {
         'email-autofill': 'pages/email-autofill.html',
         'emailAtBottom': 'pages/email-at-bottom.html',
         'emailAtTopLeft': 'pages/email-at-top-left.html',
+        'scanner-perf': 'pages/scanner-perf.html',
         'iframeContainer': 'pages/iframe-container.html',
         'signup': 'pages/signup.html',
         'mutatingForm': 'pages/mutating-form.html',

diff --git a/integration-test/helpers/pages.js b/integration-test/helpers/pages.js
@@ -1,6 +1,6 @@
 import { constants } from './mocks.js'
 import { expect } from '@playwright/test'
-import {mockedCalls, payloadsOnly} from './harness.js'
+import {mockedCalls, payloadsOnly, performanceEntries} from './harness.js'
 import {addTopAutofillMouseFocus, clickOnIcon} from './utils.js'
 
 const ATTR_AUTOFILL = 'data-ddg-autofill'
@@ -283,7 +283,6 @@ export function signupPage (page) {
             const calls = await mockedCalls(page, { names: ['storeFormData'] })
             expect(calls.length).toBeGreaterThanOrEqual(1)
             const [, sent] = calls[0]
-            // @ts-expect-error
             expect(sent.Data.credentials).toEqual(credentials)
         }
         /**
@@ -481,7 +480,6 @@ export function loginPage (page, opts = {}) {
          */
         async assertParentOpened () {
             const credsCalls = await mockedCalls(page, { names: ['getSelectedCredentials'] })
-            // @ts-expect-error
             const hasSucceeded = credsCalls.some((call) => call[2]?.some(({type}) => type === 'ok'))
             expect(hasSucceeded).toBe(true)
         }
@@ -739,3 +737,27 @@ export function overlayPage (page) {
 
     return new OverlayPage()
 }
+
+/**
+ * A wrapper around interactions for `integration-test/pages/scanner-perf.html`
+ *
+ * @param {import("@playwright/test").Page} page
+ */
+export function scannerPerf (page) {
+    return /** @type {const} */({
+        async navigate (url = constants.pages['scanner-perf']) {
+            await page.goto(url, {waitUntil: 'load'})
+        },
+        async validateInitialScanPerf (expectedDuration) {
+            const entries = await performanceEntries(page, 'initial_scanner:init')
+
+            expect(entries).toHaveLength(1)
+
+            // we only care about the first one (for now)
+            const entry = entries[0]
+            console.log(`🏎💨 initial scan took: ${Math.round(entry.duration)}ms`)
+
+            expect(entry.duration).toBeLessThan(expectedDuration)
+        }
+    })
+}
diff --git a/integration-test/pages/scanner-perf.html b/integration-test/pages/scanner-perf.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Scanner Perf Test</title>
+    <style>
+        label { display: block }
+    </style>
+</head>
+<body>
+<div>
+    <form action="" id="demo" name="demo">
+        <button type="submit">Sign in</button>
+    </form>
+</div>
+<script>
+    const form = document.forms.demo;
+    const inputs = []
+    for (let i = 0; i < 1000; i += 1) {
+        const container = document.createElement('div');
+        container.innerHTML = `<label>Input: ${i}<input name="input-${i}" /></label>`
+        inputs.push(container)
+    }
+    form.append(...inputs)
+</script>
+</body>
+</html>