[UI tests] [playwright] Start customizing suite for trace viewer, add…

… a few testcases

Create a "trace viewer app" from the generic @theia/playwright "theiaApp" and add
a "trace explorer view".  Enhance test suite with some related test cases.

Signed-off-by: Marc Dumais <marc.dumais@ericsson.com>

playwright-tests/package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@playwright/test": "^1.32.1",
-    "@theia/playwright": "1.37.0-next.9"
+    "@theia/playwright": "1.47.1"
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^5.57.1",

playwright-tests/tests/page-objects/theia-trace-viewer-app.ts

@@ -0,0 +1,53 @@
+/********************************************************************************
+ * Copyright (C) 2022 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+// The following covers enhancements made after initially copying the file
+// from the "theia-playwright-template":
+
+/********************************************************************************
+ * Copyright (C) 2024 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { TheiaApp, TheiaWorkspace } from '@theia/playwright';
+import { TraceExplorerView } from './trace-explorer-view';
+import { Page } from '@playwright/test';
+
+export class TraceViewerApp extends TheiaApp {
+    traceExplorerView: TraceExplorerView;
+
+    public constructor(
+        public page: Page,
+        public workspace: TheiaWorkspace,
+        public isElectron: boolean,
+     ) {
+        super(page, workspace,isElectron);
+        this.traceExplorerView = this.createTraceExplorer();
+    }
+
+    getTraceExplorer(): TraceExplorerView {
+        return this.traceExplorerView;
+    }
+
+    protected createTraceExplorer(): TraceExplorerView {
+        return new TraceExplorerView(this);
+    }
+}

playwright-tests/tests/page-objects/trace-explorer-view.ts

@@ -0,0 +1,36 @@
+/********************************************************************************
+ * Copyright (C) 2024 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { TheiaView } from '@theia/playwright';
+import { TraceViewerApp } from './theia-trace-viewer-app';
+
+/**
+ * Represents the Trace Explorer view. This view is by default part of the left panel,
+ * and is toggled by clicking on the "Trace Viewer" tab entry
+ */
+export class TraceExplorerView extends TheiaView {
+    constructor(public app: TraceViewerApp) {
+        super(
+            {
+                tabSelector: '#shell-tab-trace-explorer',
+                viewSelector: '#trace-explorer',
+                viewName: 'Trace Viewer'
+            },
+            app
+        );
+    }
+
+    async isTraceServerStarted(): Promise<boolean> {
+        const serverStatusElement = await this.page.waitForSelector('#server-status-id');
+        const statusColor = await serverStatusElement.getAttribute('style');
+        return statusColor?.includes('green')? true : false;
+    }
+
+}

playwright-tests/tests/trace-viewer-app.test.ts

@@ -0,0 +1,80 @@
+/********************************************************************************
+ * Copyright (C) 2022 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+// The following covers enhancements made after initially copying the file
+// from the "theia-playwright-template":
+
+/********************************************************************************
+ * Copyright (C) 2024 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import { expect, test } from '@playwright/test';
+import { TraceViewerApp } from './page-objects/theia-trace-viewer-app';
+import { TheiaAppLoader } from '@theia/playwright';
+import { TraceExplorerView } from './page-objects/trace-explorer-view';
+
+let app: TraceViewerApp;
+let traceExplorer: TraceExplorerView;
+
+test.beforeAll(async ({ playwright, browser }) => {
+    app = await TheiaAppLoader.load<TraceViewerApp>(
+        { playwright, browser },
+        undefined,
+        TraceViewerApp
+    );
+    traceExplorer = app.getTraceExplorer();
+});
+
+test.describe('My Trace viewer application', () => {
+    test('should show main content panel', async () => {
+        expect(await app.isMainContentPanelVisible()).toBe(true);
+    });
+});
+
+test.describe('My Trace Explorer View', () => {
+    test('Is initially not visible', async () => {
+        expect(await traceExplorer.isDisplayed()).toBe(false);
+    });
+    test('Once tab activated, becomes visible', async () => {
+        expect(await traceExplorer.isDisplayed()).toBe(false);
+        await traceExplorer.activate();
+        expect(await traceExplorer.isDisplayed()).toBe(true);
+    });
+    test('Is closable', async () => {
+        await traceExplorer.isClosable();
+        expect(await traceExplorer.isDisplayed()).toBe(true);
+    });
+    test('Once closed, is not visible any more', async () => {
+        expect(await traceExplorer.isDisplayed()).toBe(true);
+        await traceExplorer.close();
+        expect(await traceExplorer.isDisplayed()).toBe(false);
+    });
+    test('From closed, can be re-opened using the command palette', async () => {
+        expect(await traceExplorer.isDisplayed()).toBe(false);
+        await traceExplorer.open();
+        expect(await traceExplorer.isDisplayed()).toBe(true);
+    });
+    test('Trace Server status is shown as not started (red)', async () => {
+        await traceExplorer.activate();
+        expect(await traceExplorer.isTraceServerStarted()).toBe(false);
+    });
+});

yarn.lock

@@ -2594,7 +2594,7 @@
   resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@playwright/test@^1.32.1":
+"@playwright/test@^1.32.1", "@playwright/test@^1.37.1":
   version "1.42.1"
   resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.42.1.tgz#9eff7417bcaa770e9e9a00439e078284b301f31c"
   integrity sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==
@@ -3153,12 +3153,12 @@
     "@theia/request" "1.45.1"
     semver "^7.5.4"
 
-"@theia/playwright@1.37.0-next.9":
-  version "1.37.0-next.9"
-  resolved "https://registry.yarnpkg.com/@theia/playwright/-/playwright-1.37.0-next.9.tgz#8f1b24b579cb401fd97f1d1e2286f06a5b895753"
-  integrity sha512-GHQgw0Y+5Gqyfum+tintWSArkv/bQFb9d5PE+gAfY1i3ps5S3j1oifyckve1guNfz6DPSP3gzQD8PewwVDZ4+w==
+"@theia/playwright@1.47.1":
+  version "1.47.1"
+  resolved "https://registry.yarnpkg.com/@theia/playwright/-/playwright-1.47.1.tgz#d053d3309bf5b520d92d718c665c417f57ac8e84"
+  integrity sha512-JJS1BF+dZFaiVhgRlAmzPFQ2euIUH/dSXiL5fFH0LvwO+WkdUJf3rw46VJhQFKHkNf/Fv/wxenKRGb1UDgtdcw==
   dependencies:
-    "@playwright/test" "^1.32.1"
+    "@playwright/test" "^1.37.1"
     fs-extra "^9.0.8"
 
 "@theia/plugin-ext-vscode@1.45.1":