diff options
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 }), |