Add login functionality tests

3 files changed, 42 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/login.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/login.spec.ts
index fb868a639e..b7e0801ceb 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/login.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/login.spec.ts
@@ -10,7 +10,7 @@ let routes: RoutesObjectModel;
 
 test.describe.configure({ mode: 'parallel' });
 
-test.describe('Clear account history warnings', () => {
+test.describe('Login view', () => {
   const startup = async () => {
     ({ page, util } = await startMockedApp());
     routes = new RoutesObjectModel(page, util);
@@ -42,6 +42,32 @@ test.describe('Clear account history warnings', () => {
     await util.ipc.accountHistory[''].notify('1234123412341234');
   };
 
+  test('Should try to login when clicking login button', async () => {
+    await routes.login.fillAccountNumber('1234 1234 1234 1234');
+
+    await Promise.all([util.ipc.account.login.expect(), routes.login.loginByPressingEnter()]);
+    const header = routes.login.selectors.header();
+    await expect(header).toHaveText('Logging in...');
+    await expect(routes.login.selectors.loginButton()).toBeDisabled();
+  });
+
+  test('Should try to login when pressing enter', async () => {
+    await routes.login.fillAccountNumber('1234 1234 1234 1234');
+
+    await Promise.all([util.ipc.account.login.expect(), routes.login.loginByPressingEnter()]);
+    const header = routes.login.selectors.header();
+    await expect(header).toHaveText('Logging in...');
+    await expect(routes.login.selectors.loginButton()).toBeDisabled();
+  });
+
+  test('Should disable login button when input is invalid', async () => {
+    const loginButton = routes.login.selectors.loginButton();
+    await expect(loginButton).toBeDisabled();
+
+    await routes.login.fillAccountNumber('1234 1234');
+    await expect(loginButton).toBeDisabled();
+  });
+
   test('Should not warn about creating an account', async () => {
     const accountHistoryItemButton = routes.login.getAccountHistoryItemButton();
     await expect(accountHistoryItemButton).not.toBeVisible();
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/login-route-object-model.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/login-route-object-model.ts
index 4dfe73a2a8..a866052551 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/login-route-object-model.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/login-route-object-model.ts
@@ -18,6 +18,18 @@ export class LoginRouteObjectModel {
     await this.utils.waitForRoute(RoutePath.login);
   }
 
+  fillAccountNumber(accountNumber: string) {
+    return this.selectors.loginInput().fill(accountNumber);
+  }
+
+  async loginByPressingEnter() {
+    await this.selectors.loginInput().press('Enter');
+  }
+
+  async loginByClickingLoginButton() {
+    await this.selectors.loginButton().click();
+  }
+
   async createNewAccount() {
     await this.selectors.createNewAccountButton().click();
   }
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/selectors.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/selectors.ts
index c49df8ce87..f2e99ba158 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/selectors.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/login/selectors.ts
@@ -12,4 +12,7 @@ export const createSelectors = (page: Page) => ({
   confirmClearAccountHistoryButton: () => page.getByRole('button', { name: 'Remove' }),
 
   cancelDialogButton: () => page.getByRole('button', { name: 'Cancel' }),
+  loginInput: () => page.getByLabel('Enter your account number'),
+  loginButton: () => page.getByRole('button', { name: 'Login', exact: true }),
+  header: () => page.getByRole('heading', { level: 1 }),
 });