Add unsecured test for installed

4 files changed, 110 insertions, 72 deletions

diff --git a/gui/test.pkg.json b/gui/test.pkg.json
index e61c0e5103..587e05f065 100644
--- a/gui/test.pkg.json
+++ b/gui/test.pkg.json
@@ -7,6 +7,7 @@
   "assets": [
     "build/src/config.json",
     "build/test/e2e/utils.js",
+    "build/test/e2e/shared/*.js",
     "build/test/e2e/installed/**/*.js",
     "node_modules/.bin/playwright",
     "node_modules/playwright",
diff --git a/gui/test/e2e/installed/state-dependent/disconnected.spec.ts b/gui/test/e2e/installed/state-dependent/disconnected.spec.ts
new file mode 100644
index 0000000000..7fa853099e
--- /dev/null
+++ b/gui/test/e2e/installed/state-dependent/disconnected.spec.ts
@@ -0,0 +1,22 @@
+import { test } from '@playwright/test';
+import { Page } from 'playwright';
+import { assertDisconnected } from '../../shared/tunnel-state';
+
+import { startInstalledApp } from '../installed-utils';
+
+// This test expects the daemon to be logged into an account that has time left and to be
+// disconnected.
+
+let page: Page;
+
+test.beforeAll(async () => {
+  ({ page } = await startInstalledApp());
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('App should show disconnected tunnel state', async () => {
+  await assertDisconnected(page)
+});
diff --git a/gui/test/e2e/mocked/tunnel-state.spec.ts b/gui/test/e2e/mocked/tunnel-state.spec.ts
index d77ae165ef..51e76cb150 100644
--- a/gui/test/e2e/mocked/tunnel-state.spec.ts
+++ b/gui/test/e2e/mocked/tunnel-state.spec.ts
@@ -1,14 +1,9 @@
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
 import { startMockedApp, MockIpcHandle, SendMockIpcResponse } from './mocked-utils';
 import { ErrorStateCause, ILocation, ITunnelEndpoint, TunnelState } from '../../../src/shared/daemon-rpc-types';
-import { getBackgroundColor, getColor } from '../utils';
-
-const UNSECURED_COLOR = colors.red;
-const SECURE_COLOR = colors.green;
-const WHITE_COLOR = colors.white;
+import { assertConnected, assertConnecting, assertDisconnected, assertDisconnecting, assertError } from '../shared/tunnel-state';
 
 const mockLocation: ILocation = {
   country: 'Sweden',
@@ -18,9 +13,6 @@ const mockLocation: ILocation = {
   mullvadExitIp: false,
 };
 
-const getLabel = () => page.locator('span[role="status"]');
-const getHeader = () => page.locator('header');
-
 let page: Page;
 let mockIpcHandle: MockIpcHandle;
 let sendMockIpcResponse: SendMockIpcResponse;
@@ -41,24 +33,11 @@ test('App should show disconnected tunnel state', async () => {
     channel: 'location-get',
     response: mockLocation,
   });
-
   await sendMockIpcResponse<TunnelState>({
     channel: 'tunnel-',
     response: { state: 'disconnected' },
   });
-
-  const statusLabel = getLabel();
-  await expect(statusLabel).toContainText(/unsecured connection/i);
-  const labelColor = await getColor(statusLabel);
-  expect(labelColor).toBe(UNSECURED_COLOR);
-
-  const header = getHeader();
-  const headerColor = await getBackgroundColor(header);
-  expect(headerColor).toBe(UNSECURED_COLOR);
-
-  const button = page.locator('button', { hasText: /secure my connection/i });
-  const buttonColor = await getBackgroundColor(button);
-  expect(buttonColor).toBe(SECURE_COLOR);
+  await assertDisconnected(page);
 });
 
 /**
@@ -69,24 +48,11 @@ test('App should show connecting tunnel state', async () => {
     channel: 'location-get',
     response: mockLocation,
   });
-
   await sendMockIpcResponse<TunnelState>({
     channel: 'tunnel-',
     response: { state: 'connecting' },
   });
-
-  const statusLabel = getLabel();
-  await expect(statusLabel).toContainText(/creating secure connection/i);
-  const labelColor = await getColor(statusLabel);
-  expect(labelColor).toBe(WHITE_COLOR);
-
-  const header = getHeader();
-  const headerColor = await getBackgroundColor(header);
-  expect(headerColor).toBe(SECURE_COLOR);
-
-  const button = page.locator('button', { hasText: /cancel/i });
-  const buttonColor = await getBackgroundColor(button);
-  expect(buttonColor).toBe('rgba(227, 64, 57, 0.6)');
+  await assertConnecting(page);
 });
 
 /**
@@ -110,18 +76,7 @@ test('App should show connected tunnel state', async () => {
     response: { state: 'connected', details: { endpoint, location } },
   });
 
-  const statusLabel = getLabel();
-  await expect(statusLabel).toContainText(/secure connection/i);
-  const labelColor = await getColor(statusLabel);
-  expect(labelColor).toBe(SECURE_COLOR);
-
-  const header = getHeader();
-  const headerColor = await getBackgroundColor(header);
-  expect(headerColor).toBe(SECURE_COLOR);
-
-  const button = page.locator('button', { hasText: /switch location/i });
-  const buttonColor = await getBackgroundColor(button);
-  expect(buttonColor).toBe('rgba(255, 255, 255, 0.2)');
+  await assertConnected(page);
 });
 
 /**
@@ -132,22 +87,11 @@ test('App should show disconnecting tunnel state', async () => {
     channel: 'location-get',
     response: mockLocation,
   });
-
   await sendMockIpcResponse<TunnelState>({
     channel: 'tunnel-',
     response: { state: 'disconnecting', details: 'nothing' },
   });
-
-  const statusLabel = getLabel();
-  await expect(statusLabel).toBeEmpty();
-
-  const header = getHeader();
-  const headerColor = await getBackgroundColor(header);
-  expect(headerColor).toBe(UNSECURED_COLOR);
-
-  const button = page.locator('button', { hasText: /secure my connection/i });
-  const buttonColor = await getBackgroundColor(button);
-  expect(buttonColor).toBe(SECURE_COLOR);
+  await assertDisconnecting(page);
 });
 
 /**
@@ -158,18 +102,9 @@ test('App should show error tunnel state', async () => {
     channel: 'location-get',
     response: mockLocation,
   });
-
   await sendMockIpcResponse<TunnelState>({
     channel: 'tunnel-',
     response: { state: 'error', details: { cause: ErrorStateCause.isOffline } },
   });
-
-  const statusLabel = getLabel();
-  await expect(statusLabel).toContainText(/blocked connection/i);
-  const labelColor = await getColor(statusLabel);
-  expect(labelColor).toBe(WHITE_COLOR);
-
-  const header = getHeader();
-  const headerColor = await getBackgroundColor(header);
-  expect(headerColor).toBe(SECURE_COLOR);
+  await assertError(page);
 });
diff --git a/gui/test/e2e/shared/tunnel-state.ts b/gui/test/e2e/shared/tunnel-state.ts
new file mode 100644
index 0000000000..bd59aa248a
--- /dev/null
+++ b/gui/test/e2e/shared/tunnel-state.ts
@@ -0,0 +1,80 @@
+import { expect } from '@playwright/test';
+import { Page } from 'playwright';
+import { colors } from '../../../src/config.json';
+import { getBackgroundColor, getColor } from '../utils';
+
+const UNSECURED_COLOR = colors.red;
+const SECURE_COLOR = colors.green;
+const WHITE_COLOR = colors.white;
+
+const getLabel = (page: Page) => page.locator('span[role="status"]');
+const getHeader = (page: Page) => page.locator('header');
+
+export async function assertDisconnected(page: Page) {
+  const statusLabel = getLabel(page);
+  await expect(statusLabel).toContainText(/unsecured connection/i);
+  const labelColor = await getColor(statusLabel);
+  expect(labelColor).toBe(UNSECURED_COLOR);
+
+  const header = getHeader(page);
+  const headerColor = await getBackgroundColor(header);
+  expect(headerColor).toBe(UNSECURED_COLOR);
+
+  const button = page.locator('button', { hasText: /secure my connection/i });
+  const buttonColor = await getBackgroundColor(button);
+  expect(buttonColor).toBe(SECURE_COLOR);
+}
+
+export async function assertConnecting(page: Page) {
+  const statusLabel = getLabel(page);
+  await expect(statusLabel).toContainText(/creating secure connection/i);
+  const labelColor = await getColor(statusLabel);
+  expect(labelColor).toBe(WHITE_COLOR);
+
+  const header = getHeader(page);
+  const headerColor = await getBackgroundColor(header);
+  expect(headerColor).toBe(SECURE_COLOR);
+
+  const button = page.locator('button', { hasText: /cancel/i });
+  const buttonColor = await getBackgroundColor(button);
+  expect(buttonColor).toBe('rgba(227, 64, 57, 0.6)');
+}
+
+export async function assertConnected(page: Page) {
+  const statusLabel = getLabel(page);
+  await expect(statusLabel).toContainText(/secure connection/i);
+  const labelColor = await getColor(statusLabel);
+  expect(labelColor).toBe(SECURE_COLOR);
+
+  const header = getHeader(page);
+  const headerColor = await getBackgroundColor(header);
+  expect(headerColor).toBe(SECURE_COLOR);
+
+  const button = page.locator('button', { hasText: /switch location/i });
+  const buttonColor = await getBackgroundColor(button);
+  expect(buttonColor).toBe('rgba(255, 255, 255, 0.2)');
+}
+
+export async function assertDisconnecting(page: Page) {
+  const statusLabel = getLabel(page);
+  await expect(statusLabel).toBeEmpty();
+
+  const header = getHeader(page);
+  const headerColor = await getBackgroundColor(header);
+  expect(headerColor).toBe(UNSECURED_COLOR);
+
+  const button = page.locator('button', { hasText: /secure my connection/i });
+  const buttonColor = await getBackgroundColor(button);
+  expect(buttonColor).toBe(SECURE_COLOR);
+}
+
+export async function assertError(page: Page) {
+  const statusLabel = getLabel(page);
+  await expect(statusLabel).toContainText(/blocked connection/i);
+  const labelColor = await getColor(statusLabel);
+  expect(labelColor).toBe(WHITE_COLOR);
+
+  const header = getHeader(page);
+  const headerColor = await getBackgroundColor(header);
+  expect(headerColor).toBe(SECURE_COLOR);
+}