dx: introduce playwright for desktop e2e tests

package.json

@@ -49,6 +49,7 @@
     "update-top-backers": "./tools/update-top-backers.mjs && pretty-quick --pattern \"**/backers.ts\"",
     "test-e2e-android": "./tools/test-e2e-android",
     "test-smoke-android": "./tools/test-smoke-android",
+    "test-e2e-desktop": "./tools/test-e2e-desktop",
     "apply-prettier": "pretty-quick --staged --pattern \"**/*.*(ts|tsx|js|jsx)\"",
     "validate-license-year": "./tools/validate-license-year.sh",
     "precommit-hook": "npm run apply-prettier && npm run validate-license-year",
@@ -167,6 +168,7 @@
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@babel/runtime": "^7.16.3",
+    "@playwright/test": "1.28.1",
     "@react-native-community/cli": "~6.4.0",
     "@types/electron": "1.6.10",
     "@types/node": "~12.20.10",
@@ -182,6 +184,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "5.2.7",
     "electron-builder": "22.13.1",
+    "electron-playwright-helpers": "1.2.2",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "graceful-fs": "~4.2.9",
@@ -199,6 +202,7 @@
     "node-gyp-build": "4.3.0",
     "ora": "^5.4.1",
     "patch-package": "6.4.7",
+    "playwright-core": "1.28.1",
     "prettier": "~2.5.1",
     "pretty-quick": "~3.1.3",
     "propagate-replacement-fields": "1.3.0",
@@ -220,4 +224,4 @@
   "react-native": {
     "os": "react-native-os-staltz"
   }
-}
+}

playwright.config.ts

@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: 2021-2022 The Manyverse Authors
+//
+// SPDX-License-Identifier: CC0-1.0
+
+import {PlaywrightTestConfig} from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: './test/e2e/desktop',
+  maxFailures: 2,
+  workers: 1, // no parallelism
+};
+
+export default config;

src/backend/loader.desktop.ts

@@ -40,13 +40,13 @@ process.env ??= {};
 app.setName('manyverse');
 
 // Set default directories
-app.setPath('userData', path.join(app.getPath('appData'), 'manyverse'));
+process.env.MV_USER_DATA ??= path.join(app.getPath('appData'), 'manyverse');
+app.setPath('userData', process.env.MV_USER_DATA);
 process.env.APP_DATA_DIR = app.getAppPath();
 process.env.APP_TMP_DIR = app.getPath('temp');
 process.env.OS = os.platform();
 process.env.SHARED_SSB_DIR = path.resolve(os.homedir(), '.ssb');
-process.env.SSB_DIR =
-  process.env.SSB_DIR ?? path.resolve(app.getPath('userData'), 'ssb');
+process.env.SSB_DIR ??= path.resolve(app.getPath('userData'), 'ssb');
 
 // Set global variables
 process.env.MANYVERSE_PLATFORM = 'desktop';

src/frontend/screens/central/view.ts

@@ -59,6 +59,10 @@ class CurrentTabPage extends PureComponent<{
     } = this.props;
     const shown = styles.pageShown;
     const hidden = styles.pageHidden;
+    const isPublic = currentTab === 'public';
+    const isPrivate = currentTab === 'private';
+    const isActivity = currentTab === 'activity';
+    const isConnections = currentTab === 'connections';
 
     const fabSection =
       Platform.OS === 'web'
@@ -73,20 +77,18 @@ class CurrentTabPage extends PureComponent<{
         : h(FloatingAction, fab);
 
     return h(Fragment, [
-      h(View, {style: [currentTab === 'public' ? shown : hidden]}, [
+      h(View, {style: [isPublic ? shown : hidden]}, [
         publicTab,
-        fabSection,
+        isPublic ? fabSection : null,
       ]),
-      h(View, {style: [currentTab === 'private' ? shown : hidden]}, [
+      h(View, {style: [isPrivate ? shown : hidden]}, [
         privateTab,
-        fabSection,
+        isPrivate ? fabSection : null,
       ]),
-      h(View, {style: [currentTab === 'activity' ? shown : hidden]}, [
-        activityTab,
-      ]),
-      h(View, {style: [currentTab === 'connections' ? shown : hidden]}, [
+      h(View, {style: [isActivity ? shown : hidden]}, [activityTab]),
+      h(View, {style: [isConnections ? shown : hidden]}, [
         connectionsTab,
-        fabSection,
+        isConnections ? fabSection : null,
       ]),
     ]);
   }

test/e2e/index.js → test/e2e/android/index.js

@@ -22,6 +22,7 @@ const localCapabilities = {
     __dirname,
     '..',
     '..',
+    '..',
     'android',
     'app',
     'build',

test/e2e/desktop/01-welcome.test.ts

@@ -0,0 +1,54 @@
+// SPDX-FileCopyrightText: 2022 The Manyverse Authors
+//
+// SPDX-License-Identifier: CC0-1.0
+
+import {expect, test} from '@playwright/test';
+import {Page} from 'playwright-core';
+import setup from './utils';
+
+const ctx = setup();
+
+let page: Page;
+
+test.describe('welcome', () => {
+  test('overview', async () => {
+    page = await ctx.electronApp!.firstWindow();
+
+    expect(await page.title()).toBe('Manyverse');
+    expect(await page.waitForSelector('"Welcome to Manyverse!"')).toBeTruthy();
+    await page.locator('text="Continue" >> nth=0').click();
+  });
+
+  test('off the grid', async () => {
+    expect(await page.waitForSelector('"Off-the-grid"')).toBeTruthy();
+    await page.locator('text="Continue" >> nth=1').click();
+  });
+
+  test('connections', async () => {
+    expect(await page.waitForSelector('"Many ways to connect"')).toBeTruthy();
+    await page.locator('text="Continue" >> nth=2').click();
+  });
+
+  test('moderation', async () => {
+    expect(await page.waitForSelector('"Shared moderation"')).toBeTruthy();
+    await page.locator('text="Continue" >> nth=3').click();
+  });
+
+  test('permanence', async () => {
+    expect(await page.waitForSelector('"Permanence"')).toBeTruthy();
+    await page.locator('text="Continue" >> nth=4').click();
+  });
+
+  test('in construction', async () => {
+    expect(await page.waitForSelector('"In construction!"')).toBeTruthy();
+    await page.locator('text="Continue" >> nth=5').click();
+  });
+
+  test('account', async () => {
+    expect(
+      await page.waitForSelector('"Is this your first time?"'),
+    ).toBeTruthy();
+    await page.locator('text="Create account"').click();
+    await page.waitForTimeout(5000); // give it time to save to localstorage
+  });
+});

test/e2e/desktop/02-central.test.ts

@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: 2022 The Manyverse Authors
+//
+// SPDX-License-Identifier: CC0-1.0
+
+import {expect, test} from '@playwright/test';
+import {Page} from 'playwright-core';
+import setup from './utils';
+
+const ctx = setup();
+
+let page: Page;
+
+test.describe('central', () => {
+  test('public tab', async () => {
+    page = await ctx.electronApp!.firstWindow();
+
+    expect(await page.waitForSelector('"Public posts"')).toBeTruthy();
+    expect(
+      await page.waitForSelector(':has-text("Where is everybody")'),
+    ).toBeTruthy();
+  });
+
+  test('private tab', async () => {
+    await page.locator('text="Private"').click();
+    expect(await page.waitForSelector('"Private chats"')).toBeTruthy();
+    expect(
+      await page.waitForSelector(':has-text("Where is everybody")'),
+    ).toBeTruthy();
+  });
+
+  test('activity tab', async () => {
+    await page.locator('text="Activity"').click();
+    expect(await page.waitForSelector('"Activity"')).toBeTruthy();
+    expect(
+      await page.waitForSelector(':has-text("Where is everybody")'),
+    ).toBeTruthy();
+  });
+
+  test('connections tab', async () => {
+    await page.locator('text="Connections"').click();
+    expect(await page.waitForSelector('"Connected peers"')).toBeTruthy();
+    expect(await page.waitForSelector('"Not connected"')).toBeTruthy();
+  });
+
+  test('back to public tab', async () => {
+    await page.locator('text="Public"').click();
+    expect(await page.waitForSelector('"Public posts"')).toBeTruthy();
+  });
+});

test/e2e/desktop/03-compose.test.ts

@@ -0,0 +1,43 @@
+// SPDX-FileCopyrightText: 2022 The Manyverse Authors
+//
+// SPDX-License-Identifier: CC0-1.0
+
+import {expect, test} from '@playwright/test';
+import {Page} from 'playwright-core';
+import setup from './utils';
+
+const ctx = setup();
+
+let page: Page;
+
+test.describe('compose', () => {
+  test('opens', async () => {
+    page = await ctx.electronApp!.firstWindow();
+
+    const selector = '[aria-label="Floating Action Button"]';
+    expect(await page.waitForSelector(selector)).toBeTruthy();
+    await page.locator(selector).click();
+  });
+
+  test('can write on the text field', async () => {
+    const fieldSelector = '[placeholder="Write a public message"]';
+    expect(await page.waitForSelector(fieldSelector)).toBeTruthy();
+    await page.locator(fieldSelector).fill('Hello mom');
+
+    const buttonSelector = '"Preview"';
+    expect(await page.waitForSelector(buttonSelector)).toBeTruthy();
+    await page.locator(buttonSelector).click();
+
+    const buttonSelector2 = '"Publish"';
+    expect(await page.waitForSelector(buttonSelector2)).toBeTruthy();
+    await page.locator(buttonSelector2).click();
+  });
+
+  test('can see my post on the feed', async () => {
+    await page.waitForSelector('"Preview"', {state: 'hidden' as any});
+    await page.waitForSelector('"Publish"', {state: 'hidden' as any});
+
+    const postSelector = '"Hello mom"';
+    expect(await page.waitForSelector(postSelector)).toBeTruthy();
+  });
+});