Fix tunnel-state tests

2 files changed, 39 insertions, 57 deletions

diff --git a/gui/test/e2e/installed/state-dependent/tunnel-state.spec.ts b/gui/test/e2e/installed/state-dependent/tunnel-state.spec.ts
index 6c079629fb..af32668efb 100644
--- a/gui/test/e2e/installed/state-dependent/tunnel-state.spec.ts
+++ b/gui/test/e2e/installed/state-dependent/tunnel-state.spec.ts
@@ -4,7 +4,6 @@ import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 import {
   expectConnected,
-  expectConnectedPq,
   expectDisconnected,
   expectError,
 } from '../../shared/tunnel-state';
@@ -35,7 +34,7 @@ test('App should show disconnected tunnel state', async () => {
 });
 
 test('App should connect', async () => {
-  await page.getByText('Secure my connection').click();
+  await page.getByText('Connect', { exact: true }).click();
   await expectConnected(page);
 
   const relay = page.getByTestId('hostname-line');
@@ -65,10 +64,12 @@ test('App should show correct WireGuard port', async () => {
   await exec('mullvad obfuscation set mode off');
   await exec('mullvad relay set tunnel wireguard --port=53');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp(':53'));
 
   await exec('mullvad relay set tunnel wireguard --port=51820');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp(':51820'));
 
   await exec('mullvad relay set tunnel wireguard --port=any');
@@ -80,10 +81,12 @@ test('App should show correct WireGuard transport protocol', async () => {
 
   await exec('mullvad obfuscation set mode udp2tcp');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp('TCP'));
 
   await exec('mullvad obfuscation set mode off');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp('UDP$'));
 });
 
@@ -94,6 +97,7 @@ test('App should show correct tunnel protocol', async () => {
   await exec('mullvad relay set tunnel-protocol openvpn');
   await exec('mullvad relay set location se');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(tunnelProtocol).toHaveText('OpenVPN');
 });
 
@@ -104,23 +108,28 @@ test('App should show correct OpenVPN transport protocol and port', async () =>
   await expect(inData).toContainText(new RegExp('(TCP|UDP)$'));
   await exec('mullvad relay set tunnel openvpn --transport-protocol udp --port 1195');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp(':1195'));
 
   await exec('mullvad relay set tunnel openvpn --transport-protocol udp --port 1300');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp(':1300'));
 
   await exec('mullvad relay set tunnel openvpn --transport-protocol tcp --port any');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp(':[0-9]+'));
   await expect(inData).toContainText(new RegExp('TCP$'));
 
   await exec('mullvad relay set tunnel openvpn --transport-protocol tcp --port 80');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp(':80'));
 
   await exec('mullvad relay set tunnel openvpn --transport-protocol tcp --port 443');
   await expectConnected(page);
+  await page.getByTestId('connection-panel-chevron').click();
   await expect(inData).toContainText(new RegExp(':443'));
 
   await exec('mullvad relay set tunnel openvpn --transport-protocol any');
@@ -144,29 +153,19 @@ test('App should enter blocked state', async () => {
   await expectConnected(page);
 });
 
-test('App should disconnect', async () => {
-  await page.getByText('Disconnect').click();
-  await expectDisconnected(page);
-});
-
-test('App should create quantum secure connection', async () => {
-  await exec('mullvad tunnel set wireguard --quantum-resistant on');
-  await page.getByText('Secure my connection').click();
-
-  await expectConnectedPq(page);
-});
-
 test('App should show multihop', async () => {
   await exec('mullvad relay set tunnel wireguard --use-multihop=on');
-  await expectConnectedPq(page);
+  await expectConnected(page);
   const relay = page.getByTestId('hostname-line');
   await expect(relay).toHaveText(new RegExp('^' + escapeRegExp(`${process.env.HOSTNAME} via`), 'i'));
   await exec('mullvad relay set tunnel wireguard --use-multihop=off');
-
-  await exec('mullvad tunnel set wireguard --quantum-resistant off');
   await page.getByText('Disconnect').click();
 });
 
+test('App should disconnect', async () => {
+  await page.getByText('Disconnect').click();
+  await expectDisconnected(page);
+});
 
 test('App should become connected when other frontend connects', async () => {
   await expectDisconnected(page);
diff --git a/gui/test/e2e/shared/tunnel-state.ts b/gui/test/e2e/shared/tunnel-state.ts
index db7b7e3658..4d75f79d01 100644
--- a/gui/test/e2e/shared/tunnel-state.ts
+++ b/gui/test/e2e/shared/tunnel-state.ts
@@ -3,51 +3,54 @@ import { Page } from 'playwright';
 import { colors } from '../../../src/config.json';
 import { anyOf } from '../utils';
 
-const UNSECURED_COLOR = colors.red;
-const SECURE_COLOR = colors.green;
+const DISCONNECTED_COLOR = colors.red;
+const CONNECTED_COLOR = colors.green;
 const WHITE_COLOR = colors.white;
 
-const UNSECURE_BUTTON_COLOR = anyOf(colors.red60, colors.red80);
-const SECURE_BUTTON_COLOR = anyOf(colors.green, colors.green90);
+const DISCONNECTED_BUTTON_COLOR = anyOf(colors.red, colors.red80);
+const DISCONNECTING_BUTTON_COLOR = anyOf(colors.green40);
+const CONNECTED_BUTTON_COLOR = anyOf(colors.green, colors.green90);
 
 const getLabel = (page: Page) => page.locator('span[role="status"]');
 const getHeader = (page: Page) => page.locator('header');
 
 export async function expectDisconnected(page: Page) {
   await expectTunnelState(page, {
-    labelText: 'unsecured connection',
-    labelColor: UNSECURED_COLOR,
-    headerColor: UNSECURED_COLOR,
-    buttonText: 'secure my connection',
-    buttonColor: SECURE_BUTTON_COLOR,
+    labelText: 'disconnected',
+    labelColor: DISCONNECTED_COLOR,
+    headerColor: DISCONNECTED_COLOR,
+    buttonText: 'connect',
+    buttonColor: CONNECTED_BUTTON_COLOR,
   });
 }
 
 export async function expectConnecting(page: Page) {
   await expectTunnelState(page, {
-    labelText: 'creating secure connection',
+    labelText: 'connecting',
     labelColor: WHITE_COLOR,
-    headerColor: SECURE_COLOR,
+    headerColor: CONNECTED_COLOR,
     buttonText: 'cancel',
-    buttonColor: UNSECURE_BUTTON_COLOR,
+    buttonColor: DISCONNECTED_BUTTON_COLOR,
   });
 }
 
 export async function expectConnected(page: Page) {
   await expectTunnelState(page, {
-    labelText: 'secure connection',
-    labelColor: SECURE_COLOR,
-    headerColor: SECURE_COLOR,
+    labelText: 'connected',
+    labelColor: CONNECTED_COLOR,
+    headerColor: CONNECTED_COLOR,
     buttonText: 'disconnect',
-    buttonColor: UNSECURE_BUTTON_COLOR,
+    buttonColor: DISCONNECTED_BUTTON_COLOR,
   });
 }
 
 export async function expectDisconnecting(page: Page) {
   await expectTunnelState(page, {
-    headerColor: UNSECURED_COLOR,
-    buttonText: 'secure my connection',
-    buttonColor: SECURE_BUTTON_COLOR,
+    labelText: 'disconnecting',
+    labelColor: WHITE_COLOR,
+    headerColor: DISCONNECTED_COLOR,
+    buttonText: 'connect',
+    buttonColor: DISCONNECTING_BUTTON_COLOR,
   });
 }
 
@@ -55,27 +58,7 @@ export async function expectError(page: Page) {
   await expectTunnelState(page, {
     labelText: 'blocked connection',
     labelColor: WHITE_COLOR,
-    headerColor: SECURE_COLOR,
-  });
-}
-
-export async function expectConnectingPq(page: Page) {
-  await expectTunnelState(page, {
-    labelText: 'creating quantum secure connection',
-    labelColor: WHITE_COLOR,
-    headerColor: SECURE_COLOR,
-    buttonText: 'cancel',
-    buttonColor: UNSECURE_BUTTON_COLOR,
-  });
-}
-
-export async function expectConnectedPq(page: Page) {
-  await expectTunnelState(page, {
-    labelText: 'quantum secure connection',
-    labelColor: SECURE_COLOR,
-    headerColor: SECURE_COLOR,
-    buttonText: 'disconnect',
-    buttonColor: UNSECURE_BUTTON_COLOR,
+    headerColor: CONNECTED_COLOR,
   });
 }