Fix tunnel-state tests

Author: raksooo

gui/src/renderer/components/main-view/ConnectionActionButton.tsx

@@ -14,14 +14,14 @@ const StyledConnectionButton = styled(SmallButton)({
 export default function ConnectionActionButton() {
   const tunnelState = useSelector((state) => state.connection.status.state);
 
-  if (tunnelState === 'disconnected') {
-    return <ConnectButton />;
+  if (tunnelState === 'disconnected' || tunnelState === 'disconnecting') {
+    return <ConnectButton disabled={tunnelState === 'disconnecting'} />;
   } else {
-    return <DisconnectButton disabled={tunnelState === 'disconnecting'} />;
+    return <DisconnectButton />;
   }
 }
 
-function ConnectButton() {
+function ConnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) {
   const { connectTunnel } = useAppContext();
 
   const onConnect = useCallback(async () => {
@@ -34,13 +34,13 @@ function ConnectButton() {
   }, []);
 
   return (
-    <StyledConnectionButton color={SmallButtonColor.green} onClick={onConnect}>
+    <StyledConnectionButton color={SmallButtonColor.green} onClick={onConnect} {...props}>
       {messages.pgettext('tunnel-control', 'Connect')}
     </StyledConnectionButton>
   );
 }
 
-function DisconnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) {
+function DisconnectButton() {
   const { disconnectTunnel } = useAppContext();
   const tunnelState = useSelector((state) => state.connection.status.state);
 
@@ -56,7 +56,7 @@ function DisconnectButton(props: Partial<Parameters<typeof SmallButton>[0]>) {
   const displayAsCancel = tunnelState !== 'connected';
 
   return (
-    <StyledConnectionButton color={SmallButtonColor.red} onClick={onDisconnect} {...props}>
+    <StyledConnectionButton color={SmallButtonColor.red} onClick={onDisconnect}>
       {displayAsCancel ? messages.gettext('Cancel') : messages.gettext('Disconnect')}
     </StyledConnectionButton>
   );

gui/src/renderer/components/main-view/ConnectionDetails.tsx

@@ -76,14 +76,14 @@ export default function ConnectionDetails() {
       <StyledConnectionDetailsHeading>
         {messages.pgettext('connect-view', 'Connection details')}
       </StyledConnectionDetailsHeading>
-      <StyledConnectionDetailsLabel>
+      <StyledConnectionDetailsLabel data-testid="tunnel-protocol">
         {tunnelTypeToString(entry.tunnelType)}
       </StyledConnectionDetailsLabel>
       <StyledIpTable>
         <StyledConnectionDetailsTitle>
           {messages.pgettext('connection-info', 'In')}
         </StyledConnectionDetailsTitle>
-        <StyledConnectionDetailsLabel>
+        <StyledConnectionDetailsLabel data-testid="in-ip">
           {`${entry.ip}:${entry.port} ${entry.protocol.toUpperCase()}`}
         </StyledConnectionDetailsLabel>
         <StyledConnectionDetailsTitle>

gui/src/renderer/components/main-view/ConnectionStatus.tsx

@@ -19,7 +19,11 @@ export default function ConnectionStatus() {
   const color = getConnectionSTatusLabelColor(tunnelState, lockdownMode);
   const text = getConnectionStatusLabelText(tunnelState);
 
-  return <StyledConnectionStatus $color={color}>{text}</StyledConnectionStatus>;
+  return (
+    <StyledConnectionStatus role="status" $color={color}>
+      {text}
+    </StyledConnectionStatus>
+  );
 }
 
 function getConnectionSTatusLabelColor(tunnelState: TunnelState, lockdownMode: boolean) {

gui/src/renderer/components/main-view/Hostname.tsx

@@ -27,7 +27,7 @@ export default function Hostname() {
 
   return (
     <StyledAccordion expanded={tunnelState === 'connecting' || tunnelState === 'connected'}>
-      <StyledHostname>
+      <StyledHostname data-testid="hostname-line">
         <Marquee>{text}</Marquee>
       </StyledHostname>
     </StyledAccordion>

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');
@@ -151,14 +150,14 @@ test('App should disconnect', async () => {
 
 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 page.getByText('Connect').click();
 
-  await expectConnectedPq(page);
+  await expectConnected(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');

gui/test/e2e/shared/tunnel-state.ts

@@ -3,79 +3,62 @@ 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,
   });
 }
 
 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,
   });
 }