Add obfuscation tests

3 files changed, 115 insertions, 0 deletions

diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index 035ecc6af1..1f4709159f 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -276,6 +276,7 @@ function ObfuscationSettings() {
           value={obfuscationType}
           onSelect={selectObfuscationType}
           automaticValue={ObfuscationType.auto}
+          automaticTestId="automatic-obfuscation"
         />
       </StyledSelectorContainer>
     </AriaInputGroup>
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index 2868a50aee..3c1988a502 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -38,6 +38,7 @@ interface CommonSelectorProps<T, U> {
   thinTitle?: boolean;
   automaticLabel?: string;
   automaticValue?: U;
+  automaticTestId?: string;
   children?: React.ReactNode | Array<React.ReactNode>;
 }
 
@@ -73,6 +74,7 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
     items.unshift(
       <SelectorCell
         key={'automatic'}
+        data-testid={props.automaticTestId}
         value={props.automaticValue}
         isSelected={selected}
         disabled={props.disabled}
diff --git a/gui/test/e2e/installed/state-dependent/obfuscation.spec.ts b/gui/test/e2e/installed/state-dependent/obfuscation.spec.ts
new file mode 100644
index 0000000000..af72ded6d5
--- /dev/null
+++ b/gui/test/e2e/installed/state-dependent/obfuscation.spec.ts
@@ -0,0 +1,112 @@
+import { expect, test } from '@playwright/test';
+import { execSync } from 'child_process';
+import { Page } from 'playwright';
+
+import { startInstalledApp } from '../installed-utils';
+import { TestUtils } from '../../utils';
+import { colors } from '../../../../src/config.json';
+import { RoutePath } from '../../../../src/renderer/lib/routes';
+
+const SHADOWSOCKS_PORT = 65_000;
+const UDPOVERTCP_PORT = '80';
+
+// This test sets different obfuscation settings combinations and verifies that it was set in the
+// daemon.
+
+let page: Page;
+let util: TestUtils;
+
+test.beforeAll(async () => {
+  ({ page, util } = await startInstalledApp());
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('App should have automatic obfuscation', async () => {
+  await util.waitForNavigation(async () => await page.click('button[aria-label="Settings"]'));
+  expect(
+    await util.waitForNavigation(async () => await page.getByText('VPN settings').click()),
+  ).toBe(RoutePath.vpnSettings);
+
+  expect(
+    await util.waitForNavigation(async () => await page.getByText('WireGuard settings').click()),
+  ).toBe(RoutePath.wireguardSettings);
+
+  const automatic = page.getByTestId('automatic-obfuscation');
+  await expect(automatic).toHaveCSS('background-color', colors.green);
+
+  const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n');
+  expect(cliObfuscation[0]).toEqual('Obfuscation mode: auto');
+  expect(cliObfuscation[1]).toEqual('udp2tcp settings: any port');
+  expect(cliObfuscation[2]).toEqual('Shadowsocks settings: any port');
+});
+
+test('App should set obfuscation to shadowsocks with custom port', async () => {
+  expect(
+    await util.waitForNavigation(
+      async () => await page.click('button[aria-label="Shadowsocks settings"]'),
+    ),
+  ).toBe(RoutePath.shadowsocks);
+
+  const automatic = page.locator('button', { hasText: 'Automatic' });
+  await expect(automatic).toHaveCSS('background-color', colors.green);
+
+  const customInput = page.locator('input[type="text"]');
+  await customInput.click();
+  await customInput.fill(`${SHADOWSOCKS_PORT}`);
+  await customInput.blur();
+
+  const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
+  await expect(customItem).toHaveCSS('background-color', colors.green);
+
+  await util.waitForNavigation(async () => await page.click('button[aria-label="Back"]'));
+
+  const shadowsocksItem = page.locator('button', { hasText: 'Shadowsocks' });
+  await shadowsocksItem.click();
+  await expect(shadowsocksItem).toHaveCSS('background-color', colors.green);
+  await expect(shadowsocksItem).toContainText(`Port: ${SHADOWSOCKS_PORT}`);
+
+  const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n')[2];
+  expect(cliObfuscation).toEqual(`Shadowsocks settings: port ${SHADOWSOCKS_PORT}`);
+});
+
+test('App should still have shadowsocks custom port', async () => {
+  expect(
+    await util.waitForNavigation(
+      async () => await page.click('button[aria-label="Shadowsocks settings"]'),
+    ),
+  ).toBe(RoutePath.shadowsocks);
+
+  const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
+  await expect(customItem).toHaveCSS('background-color', colors.green);
+
+  await util.waitForNavigation(async () => await page.click('button[aria-label="Back"]'));
+});
+
+test('App should set obfuscation to UDP-over-TCP with port', async () => {
+  expect(
+    await util.waitForNavigation(
+      async () => await page.click('button[aria-label="UDP-over-TCP settings"]'),
+    ),
+  ).toBe(RoutePath.udpOverTcp);
+
+  const automatic = page.locator('button', { hasText: 'Automatic' });
+  await expect(automatic).toHaveCSS('background-color', colors.green);
+
+  const portButton = page.locator('button', { hasText: UDPOVERTCP_PORT });
+  await portButton.click();
+
+  await expect(portButton).toHaveCSS('background-color', colors.green);
+
+  await util.waitForNavigation(async () => await page.click('button[aria-label="Back"]'));
+
+  const udpOverTcpItem = page.locator('button', { hasText: 'UDP-over-TCP' });
+  await udpOverTcpItem.click();
+  await expect(udpOverTcpItem).toHaveCSS('background-color', colors.green);
+  await expect(udpOverTcpItem).toContainText(`Port: ${UDPOVERTCP_PORT}`);
+
+  const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n')[1];
+  expect(cliObfuscation).toEqual(`udp2tcp settings: port ${UDPOVERTCP_PORT}`);
+});