Merge branch 'fix-gui-test-too-many-devices'

2 files changed, 9 insertions, 1 deletions

diff --git a/gui/test/e2e/installed/state-dependent/too-many-devices.spec.ts b/gui/test/e2e/installed/state-dependent/too-many-devices.spec.ts
index 6da1993777..9b6dbdbe3d 100644
--- a/gui/test/e2e/installed/state-dependent/too-many-devices.spec.ts
+++ b/gui/test/e2e/installed/state-dependent/too-many-devices.spec.ts
@@ -40,10 +40,16 @@ test('App should show too many devices', async () => {
 
   await expect(loginButton).toBeEnabled();
 
+  // Trigger transition: too-many-devices -> login -> main
   expect(await util.waitForNavigation(() => {
     loginButton.click();
   })).toEqual(RoutePath.login);
-  expect(await util.waitForNavigation()).toEqual(RoutePath.main);
+
+  // Note: `util.waitForNavigation` won't return the navigation event when
+  // transitioning from login -> main, so we need to observe the state of the
+  // app after the entire transition chain has finished.
+  await util.waitForNoTransition();
+  await expect(page.getByTestId(RoutePath.main)).toBeVisible();
 });
 
 function getInput(page: Page): Locator {
diff --git a/gui/test/e2e/utils.ts b/gui/test/e2e/utils.ts
index 24926fe7fd..2242e80f7e 100644
--- a/gui/test/e2e/utils.ts
+++ b/gui/test/e2e/utils.ts
@@ -9,6 +9,7 @@ export interface StartAppResponse {
 export interface TestUtils {
   currentRoute: () => Promise<string>;
   waitForNavigation: (initiateNavigation?: () => Promise<void> | void) =>  Promise<string>;
+  waitForNoTransition: () => Promise<void>;
 }
 
 interface History {
@@ -31,6 +32,7 @@ export const startApp = async (options: LaunchOptions): Promise<StartAppResponse
   const util: TestUtils = {
     currentRoute: currentRouteFactory(app),
     waitForNavigation: waitForNavigationFactory(app, page),
+    waitForNoTransition: () => waitForNoTransition(page),
   };
 
   return { app, page, util };