playwright: make all tests executable in electron

* Use unified AppLoader for both electron and browser tests
* Introduce environment variable USE_ELECTRON to run playwright tests in electron
* Add ui-tests-electron target to package.json
* Adjust workflow to use the new ui-tests-ci target (only one worker +
  both electron and browser tests)
* Merge electron playwright tests into the existing tests

Contributed on behalf of STMicroelectronics

Signed-off-by: Olaf Lessenich <[email protected]>

Author: xai

.github/workflows/playwright.yml

@@ -43,6 +43,15 @@ jobs:
           NODE_OPTIONS: --max_old_space_size=4096
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # https://github.com/microsoft/vscode-ripgrep/issues/9
 
+      - name: Build Electron
+        shell: bash
+        run: |
+          yarn --skip-integrity-check --network-timeout 100000
+          yarn electron build
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # https://github.com/microsoft/vscode-ripgrep/issues/9
+
       - name: Build Playwright
         shell: bash
         run: |
@@ -51,4 +60,4 @@ jobs:
       - name: Test (playwright)
         uses: GabrielBB/xvfb-action@v1
         with:
-          run: yarn test:playwright
+          run: yarn --cwd examples/playwright ui-tests-ci 

examples/playwright/configs/playwright.ci.config.ts

@@ -20,7 +20,8 @@ import baseConfig from './playwright.config';
 const ciConfig: PlaywrightTestConfig = {
     ...baseConfig,
     workers: 1,
-    retries: 1
+    retries: 1,
+    reporter: [['list'], ['allure-playwright'], ['github']]
 };
 
 export default ciConfig;

examples/playwright/configs/playwright.config.ts

@@ -19,7 +19,7 @@ import { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
     testDir: '../lib/tests',
     testMatch: ['**/*.js'],
-    workers: 2,
+    workers: 1,
     // Timeout for each test in milliseconds.
     timeout: 60 * 1000,
     use: {
@@ -32,7 +32,13 @@ const config: PlaywrightTestConfig = {
     reporter: [
         ['list'],
         ['allure-playwright']
-    ]
+    ],
+    // Reuse Theia backend on port 3000 or start instance before executing the tests
+    webServer: {
+        command: 'yarn theia:start',
+        port: 3000,
+        reuseExistingServer: true
+    }
 };
 
 export default config;

examples/playwright/package.json

@@ -20,7 +20,8 @@
     "lint:fix": "eslint -c ./.eslintrc.js --ext .ts ./src --fix",
     "playwright:install": "playwright install chromium",
     "ui-tests": "yarn build && playwright test --config=./configs/playwright.config.ts",
-    "ui-tests-ci": "yarn build && playwright test --config=./configs/playwright.ci.config.ts",
+    "ui-tests-electron": "yarn build && USE_ELECTRON=true playwright test --config=./configs/playwright.config.ts",
+    "ui-tests-ci": "yarn build && playwright test --config=./configs/playwright.ci.config.ts && USE_ELECTRON=true playwright test --config=./configs/playwright.ci.config.ts ",
     "ui-tests-headful": "yarn build && playwright test --config=./configs/playwright.headful.config.ts",
     "ui-tests-report-generate": "allure generate ./allure-results --clean -o allure-results/allure-report",
     "ui-tests-report": "yarn ui-tests-report-generate && allure open allure-results/allure-report"

examples/playwright/playwright.config.ts

@@ -16,11 +16,33 @@
 
 import { expect, test } from '@playwright/test';
 import { TheiaAppLoader } from '../theia-app-loader';
+import { TheiaApp } from '../theia-app';
 
 test.describe('Theia Application', () => {
+    let app: TheiaApp;
+
+    test.afterAll(async () => {
+        await app.page.close();
+    });
 
     test('should load and should show main content panel', async ({ playwright, browser }) => {
-        const app = await TheiaAppLoader.load({ playwright, browser });
+        let args;
+        if (process.env.USE_ELECTRON === 'true') {
+            args = {
+                playwright: playwright,
+                browser: browser,
+                useElectron: {
+                    electronAppPath: '../electron',
+                    pluginsPath: '../../plugins'
+                }
+            };
+        } else {
+            args = {
+                playwright: playwright,
+                browser: browser
+            };
+        }
+        app = await TheiaAppLoader.load(args);
         expect(await app.isMainContentPanelVisible()).toBe(true);
     });
 

examples/playwright/src/tests/theia-app.test.ts

@@ -17,6 +17,7 @@
 import { expect, test } from '@playwright/test';
 import { TheiaAppLoader } from '../theia-app-loader';
 import { TheiaApp } from '../theia-app';
+import { PreferenceIds, TheiaPreferenceView } from '../theia-preference-view';
 import { DOT_FILES_FILTER, TheiaExplorerView } from '../theia-explorer-view';
 import { TheiaWorkspace } from '../theia-workspace';
 
@@ -26,10 +27,36 @@ test.describe('Theia Explorer View', () => {
 
     let app: TheiaApp;
     let explorer: TheiaExplorerView;
+    let isElectron: boolean;
 
     test.beforeAll(async ({ playwright, browser }) => {
+        isElectron = process.env.USE_ELECTRON === 'true';
         const ws = new TheiaWorkspace(['src/tests/resources/sample-files1']);
-        app = await TheiaAppLoader.load({ playwright, browser }, ws);
+        let args;
+        if (isElectron) {
+            args = {
+                playwright: playwright,
+                browser: browser,
+                useElectron: {
+                    electronAppPath: '../electron',
+                    pluginsPath: '../../plugins'
+                }
+            };
+        } else {
+            args = {
+                playwright: playwright,
+                browser: browser
+            };
+        }
+        app = await TheiaAppLoader.load(args, ws);
+
+        if (isElectron) {
+            // set trash preference to off
+            const preferenceView = await app.openPreferences(TheiaPreferenceView);
+            await preferenceView.setBooleanPreferenceById(PreferenceIds.Files.EnableTrash, false);
+            await preferenceView.close();
+        }
+
         explorer = await app.openView(TheiaExplorerView);
         await explorer.waitForVisibleFileNodes();
     });
@@ -137,7 +164,9 @@ test.describe('Theia Explorer View', () => {
         const menuItems = await menu.visibleMenuItems();
         expect(menuItems).toContain('Open');
         expect(menuItems).toContain('Delete');
-        expect(menuItems).toContain('Download');
+        if (!isElectron) {
+            expect(menuItems).toContain('Download');
+        }
 
         await menu.close();
         expect(await menu.isOpen()).toBe(false);
@@ -192,4 +221,11 @@ test.describe('Theia Explorer View', () => {
         expect(updatedFileStatElements.length).toBe(fileStatElements.length - 1);
     });
 
+    test('open "sample.txt" via the context menu', async () => {
+        expect(await explorer.existsFileNode('sample.txt')).toBe(true);
+        await explorer.clickContextMenuItem('sample.txt', ['Open']);
+        const span = await app.page.waitForSelector('span:has-text("content line 2")');
+        expect(await span.isVisible()).toBe(true);
+    });
+
 });