Add mocked test for making sure out-ip is shown

4 files changed, 57 insertions, 27 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..b2c4fb86ef 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,14 +18,18 @@ 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);
+  routes = new RoutesObjectModel(page, util);
+  await routes.main.waitForRoute();
 });
 
 test.afterAll(async () => {
@@ -49,28 +53,6 @@ test('App should show connecting tunnel state', async () => {
 });
 
 /**
- * Connected state
- */
-test('App should show connected tunnel state', async () => {
-  const location: ILocation = { ...mockLocation, mullvadExitIp: true };
-
-  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,
-  });
-
-  await expectConnected(page);
-});
-
-/**
  * Disconnecting state
  */
 test('App should show disconnecting tunnel state', async () => {
@@ -88,3 +70,42 @@ test('App should show error tunnel state', async () => {
   });
   await expectError(page);
 });
+
+/**
+ * Connected state
+ */
+test.describe('Connected state', () => {
+  test.beforeEach(async () => {
+    const location: ILocation = { ...mockLocation, mullvadExitIp: true };
+
+    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();
+
+    const outIps = routes.main.getOutIps();
+    await expect(outIps).toHaveCount(2);
+    await expect(outIps.first()).toHaveText(mockLocation.ipv4!);
+    await expect(outIps.last()).toHaveText(mockLocation.ipv6!);
+  });
+});
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 }),