Test tab out of editor scenarios (#1051)

Regression test for #1048

Try to make the existing focus tests simpler to follow.
Create a method to assert focus that we can use to create more such assertions.

Author: microbit-matt-hillsdon

src/e2e/accessibility.test.ts

@@ -12,18 +12,30 @@ describe("Browser - accessibility", () => {
   afterAll(app.dispose.bind(app));
 
   it("focuses the correct element on tabbing after load", async () => {
-    expect(await app.assertFocusOnLoad()).toBe(true);
+    await app.assertFocusOnLoad();
+  });
+
+  it("focuses the correct elements on collapsing and expanding the simulator", async () => {
+    await app.collapseSimulator();
+    await app.assertFocusOnExpandSimulator();
+
+    await app.expandSimulator();
+    await app.assertFocusOnSimulator();
   });
 
   it("focuses the correct elements on collapsing and expanding the sidebar", async () => {
-    expect(await app.assertFocusOnAreaToggle("Collapse", "simulator")).toBe(
-      true
-    );
-    expect(await app.assertFocusOnAreaToggle("Expand", "simulator")).toBe(true);
+    await app.collapseSidebar();
+    await app.assertFocusOnExpandSidebar();
+
+    await app.expandSidebar();
+    await app.assertFocusOnSidebar();
   });
 
-  it("focuses the correct elements on collapsing and expanding the simulator", async () => {
-    expect(await app.assertFocusOnAreaToggle("Collapse", "sidebar")).toBe(true);
-    expect(await app.assertFocusOnAreaToggle("Expand", "sidebar")).toBe(true);
+  it("allows tab out of editor", async () => {
+    await app.tabOutOfEditorForwards();
+    await app.assertFocusAfterEditor();
+
+    await app.tabOutOfEditorBackwards();
+    await app.assertFocusBeforeEditor();
   });
 });

src/e2e/app.ts

@@ -1113,6 +1113,22 @@ export class App {
     await result[0].click();
   }
 
+  async tabOutOfEditorForwards(): Promise<void> {
+    const content = await this.focusEditorContent();
+    await content.press("Escape");
+    await content.press("Tab");
+  }
+
+  async tabOutOfEditorBackwards(): Promise<void> {
+    const keyboard = (await this.page).keyboard;
+
+    const content = await this.focusEditorContent();
+    await content.press("Escape");
+    await keyboard.down("Shift");
+    await content.press("Tab");
+    await keyboard.up("Shift");
+  }
+
   private async document(): Promise<puppeteer.ElementHandle<Element>> {
     const page = await this.page;
     return page.getDocument();
@@ -1163,12 +1179,6 @@ export class App {
     await keyboard.press(key);
   }
 
-  private async getActiveElement(): Promise<puppeteer.ElementHandle<Element>> {
-    return (await this.page).evaluateHandle<ElementHandle>(
-      () => document.activeElement
-    );
-  }
-
   private async getElementByRoleAndLabel(
     role: string,
     name: string
@@ -1187,38 +1197,89 @@ export class App {
     );
   }
 
-  private async compareElementHandles(
-    e1: puppeteer.ElementHandle<Element>,
-    e2: puppeteer.ElementHandle<Element>
-  ): Promise<boolean> {
-    return (await this.page).evaluate((e1, e2) => e1 === e2, e1, e2);
+  async assertActiveElement(
+    accessExpectedElement: () => Promise<puppeteer.ElementHandle<Element>>
+  ) {
+    return waitFor(async () => {
+      const page = await this.page;
+      const expectedElement = await accessExpectedElement();
+
+      expect(
+        await page.evaluate((e) => {
+          return e === document.activeElement;
+        }, expectedElement)
+      ).toEqual(true);
+    }, defaultWaitForOptions);
   }
 
-  async assertFocusOnLoad(): Promise<boolean> {
+  async assertFocusOnLoad(): Promise<void> {
     await this.keyboardPress("Tab");
-    const activeElement = await this.getActiveElement();
-    const firstFocusableElement = await this.getElementByRoleAndLabel(
-      "link",
-      "visit microbit.org (opens in a new tab)"
+    return this.assertActiveElement(() =>
+      this.getElementByRoleAndLabel(
+        "link",
+        "visit microbit.org (opens in a new tab)"
+      )
+    );
+  }
+
+  collapseSimulator(): Promise<void> {
+    return this.findAndClickButton("Collapse simulator");
+  }
+
+  expandSimulator(): Promise<void> {
+    return this.findAndClickButton("Expand simulator");
+  }
+
+  collapseSidebar(): Promise<void> {
+    return this.findAndClickButton("Collapse sidebar");
+  }
+
+  expandSidebar(): Promise<void> {
+    return this.findAndClickButton("Expand sidebar");
+  }
+
+  async assertFocusOnExpandSimulator(): Promise<void> {
+    const document = await this.document();
+    return this.assertActiveElement(() =>
+      document.getByRole("button", { name: "Expand simulator" })
+    );
+  }
+
+  assertFocusOnSimulator(): Promise<void> {
+    return this.assertActiveElement(() =>
+      this.getElementByQuerySelector("iframe[name='Simulator']")
+    );
+  }
+
+  async assertFocusOnExpandSidebar(): Promise<void> {
+    const document = await this.document();
+    return this.assertActiveElement(() =>
+      document.findByRole("button", { name: "Expand sidebar" })
+    );
+  }
+
+  assertFocusOnSidebar(): Promise<void> {
+    return this.assertActiveElement(() =>
+      this.getElementByQuerySelector("[role='tabpanel']")
+    );
+  }
+
+  async assertFocusBeforeEditor(): Promise<void> {
+    const document = await this.document();
+    return this.assertActiveElement(() =>
+      document.findByRole("button", {
+        name: "Zoom in",
+      })
+    );
+  }
+
+  async assertFocusAfterEditor(): Promise<void> {
+    const document = await this.document();
+    return this.assertActiveElement(() =>
+      document.findByRole("button", {
+        name: "Send to micro:bit",
+      })
     );
-    return this.compareElementHandles(activeElement, firstFocusableElement);
-  }
-
-  async assertFocusOnAreaToggle(
-    action: "Collapse" | "Expand",
-    area: "simulator" | "sidebar"
-  ): Promise<boolean> {
-    await this.findAndClickButton(`${action} ${area}`);
-    const activeElement = await this.getActiveElement();
-    const proposedActiveElement =
-      action === "Collapse"
-        ? await this.getElementByRoleAndLabel("button", `Expand ${area}`)
-        : await this.getElementByQuerySelector(
-            area === "simulator"
-              ? "iframe[name='Simulator']"
-              : "[role='tabpanel']"
-          );
-    return this.compareElementHandles(activeElement, proposedActiveElement);
   }
 
   // Simulator functions