Add test for too many devices flow

2 files changed, 52 insertions, 1 deletions

diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 954992acf3..435342f54c 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -121,7 +121,7 @@ export default function TooManyDevices() {
               </StyledStatusIcon>
               {devices !== undefined && (
                 <>
-                  <StyledTitle>{title}</StyledTitle>
+                  <StyledTitle data-testid="title">{title}</StyledTitle>
                   <StyledLabel>{subtitle}</StyledLabel>
                   <DeviceList devices={devices} onRemoveDevice={onRemoveDevice} />
                 </>
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
new file mode 100644
index 0000000000..6da1993777
--- /dev/null
+++ b/gui/test/e2e/installed/state-dependent/too-many-devices.spec.ts
@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+import { Locator, Page } from 'playwright';
+import { RoutePath } from '../../../../src/renderer/lib/routes';
+import { TestUtils } from '../../utils';
+
+import { startInstalledApp } from '../installed-utils';
+
+// This test expects the daemon to be logged out and the provided account to have five registered
+// devices..
+// Env parameters:
+//   `ACCOUNT_NUMBER`: Account number to use when logging in
+
+let page: Page;
+let util: TestUtils;
+
+test.beforeAll(async () => {
+  ({ page, util } = await startInstalledApp());
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('App should show too many devices', async () => {
+  expect(await util.currentRoute()).toEqual(RoutePath.login);
+
+  const loginInput = getInput(page);
+  await loginInput.type(process.env.ACCOUNT_NUMBER!);
+
+  expect(await util.waitForNavigation(() => {
+    loginInput.press('Enter');
+  })).toEqual(RoutePath.tooManyDevices);
+
+  const loginButton = page.getByText('Continue with login');
+
+  await expect(page.getByTestId('title')).toHaveText('Too many devices');
+  await expect(loginButton).toBeDisabled();
+  await page.getByLabel(/^Remove device named/).first().click();
+  await page.getByText('Yes, log out device').click();
+
+  await expect(loginButton).toBeEnabled();
+
+  expect(await util.waitForNavigation(() => {
+    loginButton.click();
+  })).toEqual(RoutePath.login);
+  expect(await util.waitForNavigation()).toEqual(RoutePath.main);
+});
+
+function getInput(page: Page): Locator {
+  return page.getByPlaceholder('0000 0000 0000 0000');
+}