spec: deflake focus handling test (#18809)

spec-main/chromium-spec.ts

@@ -1,6 +1,6 @@
 import * as chai from 'chai'
 import * as chaiAsPromised from 'chai-as-promised'
-import { BrowserWindow, session, ipcMain } from 'electron'
+import { BrowserWindow, WebContents, session, ipcMain } from 'electron'
 import { emittedOnce } from './events-helpers';
 import { closeAllWindows } from './window-helpers';
 import * as https from 'https';
@@ -87,3 +87,115 @@ describe('window.postMessage', () => {
     expect(message.eventOrigin).to.equal('file://')
   })
 })
+
+describe('focus handling', () => {
+  let webviewContents: WebContents = null as unknown as WebContents
+  let w: BrowserWindow = null as unknown as BrowserWindow
+
+  beforeEach(async () => {
+    w = new BrowserWindow({
+      show: true,
+      webPreferences: {
+        nodeIntegration: true,
+        webviewTag: true
+      }
+    })
+
+    const webviewReady = emittedOnce(w.webContents, 'did-attach-webview')
+    await w.loadFile(path.join(fixturesPath, 'pages', 'tab-focus-loop-elements.html'))
+    const [, wvContents] = await webviewReady
+    webviewContents = wvContents
+    await emittedOnce(webviewContents, 'did-finish-load')
+    w.focus()
+  })
+
+  afterEach(() => {
+    webviewContents = null as unknown as WebContents
+    w.destroy()
+    w = null as unknown as BrowserWindow
+  })
+
+  const expectFocusChange = async () => {
+    const [, focusedElementId] = await emittedOnce(ipcMain, 'focus-changed')
+    return focusedElementId
+  }
+
+  describe('a TAB press', () => {
+    const tabPressEvent: any = {
+      type: 'keyDown',
+      keyCode: 'Tab'
+    }
+
+    it('moves focus to the next focusable item', async () => {
+      let focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(tabPressEvent)
+      let focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-1', `should start focused in element-1, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(tabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-2', `focus should've moved to element-2, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(tabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-wv-element-1', `focus should've moved to the webview's element-1, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      webviewContents.sendInputEvent(tabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-wv-element-2', `focus should've moved to the webview's element-2, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      webviewContents.sendInputEvent(tabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-3', `focus should've moved to element-3, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(tabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-1', `focus should've looped back to element-1, it's instead in ${focusedElementId}`)
+    })
+  })
+
+  describe('a SHIFT + TAB press', () => {
+    const shiftTabPressEvent: any = {
+      type: 'keyDown',
+      modifiers: ['Shift'],
+      keyCode: 'Tab'
+    }
+
+    it('moves focus to the previous focusable item', async () => {
+      let focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(shiftTabPressEvent)
+      let focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-3', `should start focused in element-3, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(shiftTabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-wv-element-2', `focus should've moved to the webview's element-2, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      webviewContents.sendInputEvent(shiftTabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-wv-element-1', `focus should've moved to the webview's element-1, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      webviewContents.sendInputEvent(shiftTabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-2', `focus should've moved to element-2, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(shiftTabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-1', `focus should've moved to element-1, it's instead in ${focusedElementId}`)
+
+      focusChange = expectFocusChange()
+      w.webContents.sendInputEvent(shiftTabPressEvent)
+      focusedElementId = await focusChange
+      expect(focusedElementId).to.equal('BUTTON-element-3', `focus should've looped back to element-3, it's instead in ${focusedElementId}`)
+    })
+  })
+})

spec/chromium-spec.js

@@ -1358,115 +1358,6 @@ describe('chromium feature', () => {
       await new Promise((resolve) => { utter.onend = resolve })
     })
   })
-
-  describe('focus handling', () => {
-    let webviewContents = null
-
-    beforeEach(async () => {
-      w = new BrowserWindow({
-        show: true,
-        webPreferences: {
-          nodeIntegration: true,
-          webviewTag: true
-        }
-      })
-
-      const webviewReady = emittedOnce(w.webContents, 'did-attach-webview')
-      await w.loadFile(path.join(fixtures, 'pages', 'tab-focus-loop-elements.html'))
-      const [, wvContents] = await webviewReady
-      webviewContents = wvContents
-      await emittedOnce(webviewContents, 'did-finish-load')
-      w.focus()
-    })
-
-    afterEach(() => {
-      webviewContents = null
-    })
-
-    const expectFocusChange = async () => {
-      const [, focusedElementId] = await emittedOnce(ipcMain, 'focus-changed')
-      return focusedElementId
-    }
-
-    describe('a TAB press', () => {
-      const tabPressEvent = {
-        type: 'keyDown',
-        keyCode: 'Tab'
-      }
-
-      it('moves focus to the next focusable item', async () => {
-        let focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(tabPressEvent)
-        let focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-1', `should start focused in element-1, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(tabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-2', `focus should've moved to element-2, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(tabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-wv-element-1', `focus should've moved to the webview's element-1, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        webviewContents.sendInputEvent(tabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-wv-element-2', `focus should've moved to the webview's element-2, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        webviewContents.sendInputEvent(tabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-3', `focus should've moved to element-3, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(tabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-1', `focus should've looped back to element-1, it's instead in ${focusedElementId}`)
-      })
-    })
-
-    describe('a SHIFT + TAB press', () => {
-      const shiftTabPressEvent = {
-        type: 'keyDown',
-        modifiers: ['Shift'],
-        keyCode: 'Tab'
-      }
-
-      it('moves focus to the previous focusable item', async () => {
-        let focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(shiftTabPressEvent)
-        let focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-3', `should start focused in element-3, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(shiftTabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-wv-element-2', `focus should've moved to the webview's element-2, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        webviewContents.sendInputEvent(shiftTabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-wv-element-1', `focus should've moved to the webview's element-1, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        webviewContents.sendInputEvent(shiftTabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-2', `focus should've moved to element-2, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(shiftTabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-1', `focus should've moved to element-1, it's instead in ${focusedElementId}`)
-
-        focusChange = expectFocusChange()
-        w.webContents.sendInputEvent(shiftTabPressEvent)
-        focusedElementId = await focusChange
-        expect(focusedElementId).to.equal('BUTTON-element-3', `focus should've looped back to element-3, it's instead in ${focusedElementId}`)
-      })
-    })
-  })
 })
 
 describe('console functions', () => {