Merge branch 'add-ipv6-out-ip-test'

4 files changed, 90 insertions, 58 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/ConnectionDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/ConnectionDetails.tsx
index 7d5d826222..395fba8321 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/ConnectionDetails.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/main/components/connection-panel/components/connection-details/ConnectionDetails.tsx
@@ -110,10 +110,14 @@ export function ConnectionDetails() {
         </StyledConnectionDetailsTitle>
         <StyledIpLabelContainer>
           {connection.ipv4 && (
-            <StyledConnectionDetailsLabel>{connection.ipv4}</StyledConnectionDetailsLabel>
+            <StyledConnectionDetailsLabel data-testid="out-ip">
+              {connection.ipv4}
+            </StyledConnectionDetailsLabel>
           )}
           {connection.ipv6 && (
-            <StyledConnectionDetailsLabel>{connection.ipv6}</StyledConnectionDetailsLabel>
+            <StyledConnectionDetailsLabel data-testid="out-ip">
+              {connection.ipv6}
+            </StyledConnectionDetailsLabel>
           )}
         </StyledIpLabelContainer>
       </StyledIpTable>
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/tunnel-state.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/tunnel-state.spec.ts
index d1790925c9..bca0eee1c5 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/tunnel-state.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/tunnel-state.spec.ts
@@ -1,8 +1,8 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
 import { ErrorStateCause, ILocation, ITunnelEndpoint } from '../../../src/shared/daemon-rpc-types';
-import { RoutePath } from '../../../src/shared/routes';
+import { RoutesObjectModel } from '../route-object-models';
 import {
   expectConnected,
   expectConnecting,
@@ -18,73 +18,96 @@ const mockLocation: ILocation = {
   latitude: 58,
   longitude: 12,
   mullvadExitIp: false,
+  ipv4: '127.0.0.1',
+  ipv6: '00:00:00:00:00:00:00:01',
 };
 
 let page: Page;
 let util: MockedTestUtils;
+let routes: RoutesObjectModel;
 
-test.beforeAll(async () => {
-  ({ page, util } = await startMockedApp());
-  await util.waitForRoute(RoutePath.main);
-});
+test.describe('Connection states', () => {
+  test.beforeAll(async () => {
+    ({ page, util } = await startMockedApp());
+    routes = new RoutesObjectModel(page, util);
+    await routes.main.waitForRoute();
+  });
 
-test.afterAll(async () => {
-  await page.close();
-});
+  test.afterAll(async () => {
+    await page.close();
+  });
 
-/**
- * Disconnected state
- */
-test('App should show disconnected tunnel state', async () => {
-  await util.ipc.tunnel[''].notify({ state: 'disconnected', lockedDown: false });
-  await expectDisconnected(page);
-});
+  /**
+   * Disconnected state
+   */
+  test('App should show disconnected tunnel state', async () => {
+    await util.ipc.tunnel[''].notify({ state: 'disconnected', lockedDown: false });
+    await expectDisconnected(page);
+  });
 
-/**
- * Connecting state
- */
-test('App should show connecting tunnel state', async () => {
-  await util.ipc.tunnel[''].notify({ state: 'connecting', featureIndicators: undefined });
-  await expectConnecting(page);
-});
+  /**
+   * Connecting state
+   */
+  test('App should show connecting tunnel state', async () => {
+    await util.ipc.tunnel[''].notify({ state: 'connecting', featureIndicators: undefined });
+    await expectConnecting(page);
+  });
 
-/**
- * Connected state
- */
-test('App should show connected tunnel state', async () => {
-  const location: ILocation = { ...mockLocation, mullvadExitIp: true };
+  /**
+   * Disconnecting state
+   */
+  test('App should show disconnecting tunnel state', async () => {
+    await util.ipc.tunnel[''].notify({ state: 'disconnecting', details: 'nothing' });
+    await expectDisconnecting(page);
+  });
 
-  const endpoint: ITunnelEndpoint = {
-    address: 'wg10:80',
-    protocol: 'tcp',
-    quantumResistant: false,
-    tunnelType: 'wireguard',
-    daita: false,
-  };
-  await util.ipc.tunnel[''].notify({
-    state: 'connected',
-    details: { endpoint, location },
-    featureIndicators: undefined,
+  /**
+   * Error state
+   */
+  test('App should show error tunnel state', async () => {
+    await util.ipc.tunnel[''].notify({
+      state: 'error',
+      details: { cause: ErrorStateCause.isOffline },
+    });
+    await expectError(page);
   });
 
-  await expectConnected(page);
-});
+  /**
+   * Connected state
+   */
+  test.describe('Connected state', () => {
+    test.beforeEach(async () => {
+      const location: ILocation = { ...mockLocation, mullvadExitIp: true };
 
-/**
- * Disconnecting state
- */
-test('App should show disconnecting tunnel state', async () => {
-  await util.ipc.tunnel[''].notify({ state: 'disconnecting', details: 'nothing' });
-  await expectDisconnecting(page);
-});
+      const endpoint: ITunnelEndpoint = {
+        address: 'wg10:80',
+        protocol: 'tcp',
+        quantumResistant: false,
+        tunnelType: 'wireguard',
+        daita: false,
+      };
+      await util.ipc.tunnel[''].notify({
+        state: 'connected',
+        details: { endpoint, location },
+        featureIndicators: undefined,
+      });
+    });
+
+    test.afterEach(async () => {
+      await util.ipc.tunnel[''].notify({ state: 'disconnecting', details: 'nothing' });
+    });
+
+    test('App should show connected tunnel state', async () => {
+      await expectConnected(page);
+    });
+
+    test('App should show both IPv4 and IPv6 out address', async () => {
+      await routes.main.expandConnectionPanel();
 
-/**
- * Error state
- */
-test('App should show error tunnel state', async () => {
-  await util.ipc.tunnel[''].notify({
-    state: 'error',
-    details: { cause: ErrorStateCause.isOffline },
+      const outIps = routes.main.getOutIps();
+      await expect(outIps).toHaveCount(2);
+      await expect(outIps.first()).toHaveText(mockLocation.ipv4!);
+      await expect(outIps.last()).toHaveText(mockLocation.ipv6!);
+    });
   });
-  await expectError(page);
 });
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/main-route-object-model.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/main-route-object-model.ts
index ec73d591a4..d0e295e929 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/main-route-object-model.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/main-route-object-model.ts
@@ -40,4 +40,8 @@ export class MainRouteObjectModel {
   getInIpText() {
     return this.getInIp().innerText();
   }
+
+  getOutIps() {
+    return this.selectors.outIpLabels();
+  }
 }
diff --git a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/selectors.ts b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/selectors.ts
index 8a0d96ac18..95f300c460 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/selectors.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/route-object-models/main/selectors.ts
@@ -5,6 +5,7 @@ export const createSelectors = (page: Page) => ({
   selectLocationButton: () => page.getByLabel('Select location'),
   connectionPanelChevronButton: () => page.getByTestId('connection-panel-chevron'),
   inIpLabel: () => page.getByTestId('in-ip'),
+  outIpLabels: () => page.getByTestId('out-ip'),
   featureIndicators: () => page.getByTestId('feature-indicator'),
   featureIndicator: (name: string) =>
     page.getByTestId('feature-indicator').filter({ hasText: name }),