chore(extension): cover composer focus while a dialog is open

Author: waleedlatif1

apps/sim/scripts/test-browser-extension-e2e.ts

@@ -479,6 +479,8 @@ try {
         )
           return
         document.body.dataset.captureReceipts = String(++receipts)
+        if ('sessionId' in event.data && typeof event.data.sessionId === 'string')
+          document.body.dataset.captureSession = event.data.sessionId
       })
     }, base.origin)
   await observeCaptureReceipts()
@@ -556,7 +558,106 @@ try {
         captureText.replace('QA_PRIVATE_PAGE_MARKER:', 'Delivery plan\nQA_PRIVATE_PAGE_MARKER:')
       )
       await screenshot('page-preview')
-      await preview.getByRole('button', { name: 'Close', exact: true }).click()
+      const focusSession = await shell.locator('body').getAttribute('data-capture-session')
+      assert(focusSession, 'The real capture did not acknowledge its session')
+      const focusObserver = await shell.evaluateHandle(
+        ({ origin, sessionId }) => {
+          let focused = 0
+          let processed = 0
+          document.body.dataset.composerFocused = '0'
+          document.body.dataset.focusProcessed = '0'
+          const receive = (event: MessageEvent<unknown>) => {
+            if (
+              event.origin !== origin ||
+              event.source !== document.querySelector('iframe')?.contentWindow ||
+              typeof event.data !== 'object' ||
+              event.data === null ||
+              !('sessionId' in event.data) ||
+              event.data.sessionId !== sessionId ||
+              !('type' in event.data)
+            )
+              return
+            if (event.data.type === 'composer-focused')
+              document.body.dataset.composerFocused = String(++focused)
+            if (event.data.type === 'e2e-focus-processed')
+              document.body.dataset.focusProcessed = String(++processed)
+          }
+          window.addEventListener('message', receive)
+          return () => window.removeEventListener('message', receive)
+        },
+        { origin: base.origin, sessionId: focusSession }
+      )
+      const focusBarrier = await frame().evaluateHandle(
+        ({ origin, sessionId }) => {
+          const receive = (event: MessageEvent<unknown>) => {
+            if (
+              event.origin !== origin ||
+              event.source !== parent ||
+              typeof event.data !== 'object' ||
+              event.data === null ||
+              !('sessionId' in event.data) ||
+              event.data.sessionId !== sessionId ||
+              !('type' in event.data) ||
+              event.data.type !== 'focus-composer'
+            )
+              return
+            parent.postMessage({ type: 'e2e-focus-processed', sessionId }, origin)
+          }
+          window.addEventListener('message', receive)
+          return () => window.removeEventListener('message', receive)
+        },
+        { origin: `chrome-extension://${extensionId}`, sessionId: focusSession }
+      )
+      const requestComposerFocus = async (processed: number) => {
+        await shell.evaluate(
+          ({ origin, sessionId }) =>
+            document
+              .querySelector('iframe')
+              ?.contentWindow?.postMessage(
+                { channel: 'sim-extension', version: 1, type: 'focus-composer', sessionId },
+                origin
+              ),
+          { origin: base.origin, sessionId: focusSession }
+        )
+        await expect(shell.locator('body')).toHaveAttribute(
+          'data-focus-processed',
+          String(processed)
+        )
+      }
+      try {
+        await shell.bringToFront()
+        const close = preview.getByRole('button', { name: 'Close', exact: true })
+        await close.focus()
+        await expect(close).toBeFocused()
+        assert(await frame().evaluate(() => document.hasFocus()))
+        await requestComposerFocus(1)
+        assert.equal(
+          await shell.locator('body').getAttribute('data-composer-focused'),
+          '0',
+          'An app dialog must not acknowledge composer focus'
+        )
+        await expect(close).toBeFocused()
+        await close.press('Tab')
+        assert(await preview.evaluate((element) => element.contains(document.activeElement)))
+        await requestComposerFocus(2)
+        assert.equal(await shell.locator('body').getAttribute('data-composer-focused'), '0')
+        await screenshot('focus-deferred-by-page-preview')
+        await close.click()
+        await expect(preview).toHaveCount(0)
+        await requestComposerFocus(3)
+        const editor = frame().getByRole('textbox', { name: 'Message', exact: true })
+        await expect(editor).toBeFocused()
+        await expect(shell.locator('body')).toHaveAttribute('data-composer-focused', '1')
+        await shell.keyboard.type('Keyboard input belongs to the composer.')
+        await expect(editor).toHaveValue('Keyboard input belongs to the composer.')
+        await screenshot('focus-confirmed-in-composer')
+        await editor.fill('')
+      } finally {
+        await focusBarrier.evaluate((stop) => stop())
+        await focusObserver.evaluate((stop) => stop())
+        await focusBarrier.dispose()
+        await focusObserver.dispose()
+      }
       await capture()
       await capture()
       await capture()