[tests] Stabilizing Public UI Tests

Signed-off-by: Victor Rubezhny <vrubezhny@redhat.com>

Author: vrubezhny

.github/workflows/continuous-integration-workflow.yml

@@ -59,7 +59,8 @@ jobs:
         if: (success() || failure()) && runner.os == 'Linux'
         uses: helm/kind-action@v1.14.0
         with:
-          version: v0.24.0
+          version: v0.31.0
+          node_image: kindest/node:v1.34.0
 
       - name: Configure cluster
         if: (success() || failure()) && runner.os == 'Linux'
@@ -105,6 +106,7 @@ jobs:
         with:
           name: artifacts-${{ matrix.os }}
           path: |
+            /tmp/test-resources/settings/logs/**/*.log
             /tmp/test-resources/screenshots/**/*.png
           retention-days: 2
 

package-lock.json

@@ -129,7 +129,7 @@
 		"dompurify": "^3.3.2",
 		"dpdm": "^4.0.1",
 		"esbuild": "^0.27.3",
-		"esbuild-node-externals": "^1.20.1",
+		"esbuild-node-externals": "^1.21.0",
 		"esbuild-sass-plugin": "^3.6.0",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",

package.json

@@ -183,8 +183,26 @@ export class OpenShiftExplorer implements TreeDataProvider<ExplorerItem>, Dispos
             .then(result => (allTrue(result) ? `${contextValue}.can-delete` : contextValue));
     }
 
+
     // eslint-disable-next-line class-methods-use-this
     async getTreeItem(element: ExplorerItem): Promise<TreeItem> {
+        try {
+            return await this._getTreeItem(element);
+        } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('getTreeItem failed:', err, element);
+
+            return {
+                label: '⚠️ Broken item',
+                tooltip: `${err}`,
+                iconPath: new ThemeIcon('error'),
+                collapsibleState: TreeItemCollapsibleState.None
+            };
+        }
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    async _getTreeItem(element: ExplorerItem): Promise<TreeItem> {
         if ('command' in element || ('label' in element && 'iconPath' in element)) {
             return element;
         }
@@ -474,7 +492,23 @@ export class OpenShiftExplorer implements TreeDataProvider<ExplorerItem>, Dispos
     }
 
     // eslint-disable-next-line class-methods-use-this
+
     async getChildren(element?: ExplorerItem): Promise<ExplorerItem[]> {
+        try {
+            return await this._getChildren(element);
+        } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('getChildren failed:', err);
+
+            return [{
+                label: '⚠️ Error loading tree',
+                tooltip: String(err),
+                iconPath: new ThemeIcon('error')
+            }];
+        }
+    }
+
+    async _getChildren(element?: ExplorerItem): Promise<ExplorerItem[]> {
         let result: ExplorerItem[] = [];
         // don't show Open In Developer Dashboard if not openshift cluster
         const isOpenshiftCluster = await isOpenShiftCluster(this.executionContext);

src/explorer.ts

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 import { By, Key, WebElement, WebView } from 'vscode-extension-tester';
+import { debugClick } from '../../utils';
 import { WebViewForm } from './WebViewForm';
 
 //TODO: Add support for create from git page and from local codebase page
@@ -160,7 +161,8 @@ export class GitProjectPage extends Page {
     public async clickContinueButton(): Promise<void> {
         await this.enterWebView(async (webView) => {
             const button = await this.continueButtonExists(webView);
-            await button.click();
+            // await button.click();
+            await debugClick(button, 'Continue');
         });
     }
 
@@ -202,14 +204,16 @@ export class LocalCodeBasePage extends Page {
     public async clickSelectFolderButton(): Promise<void> {
         await this.enterWebView(async (webView) => {
             const button = await this.getSelectFolderButton(webView);
-            await button.click();
+            // await button.click();
+            await debugClick(button, 'Select Folder');
         });
     }
 
     public async clickCreateComponent(): Promise<void> {
         await this.enterWebView(async (webView) => {
             const button = await this.createButtonExists(webView);
-            await button.click();
+            // await button.click();
+            await debugClick(button, 'Create Component');
         });
     }
 

test/ui/common/ui/webview/newComponentWebViewEditor.ts

@@ -0,0 +1,47 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+
+import { VSBrowser, ViewItem, ViewSection } from 'vscode-extension-tester';
+
+export async function waitForItem(
+    getSection: () => Promise<ViewSection>,
+    label: string,
+    timeout = 15000
+) {
+    return VSBrowser.instance.driver.wait(async () => {
+        try {
+            const section = await getSection();
+            const item = await section.findItem(label);
+            return item ?? false;
+        } catch {
+            return false;
+        }
+    }, timeout, `Item "${label}" not found within ${timeout}ms`) as Promise<ViewItem>;
+}
+
+export async function step<T>(name: string, fn: () => Promise<T>): Promise<T> {
+    const stack = new Error().stack;
+
+    try {
+        return await fn();
+    } catch (err) {
+        const error = err as Error;
+        error.message = `Step failed: ${name}\n${error.message}`;
+        error.stack = stack;
+        throw error;
+    }
+}
+
+export async function debugClick(element, name: string) {
+    try {
+        await element.click();
+    } catch (e) {
+        /* eslint-disable no-console */
+        console.error(`Failed to click: ${name}`);
+        console.error(await element.getAttribute('outerHTML'));
+        /* eslint-enable no-console */
+        throw e;
+    }
+}

test/ui/common/utils.ts

@@ -13,6 +13,7 @@ import {
     InputBox,
     NotificationType,
     SideBarView,
+    ViewSection,
     VSBrowser,
     WelcomeContentButton,
     Workbench
@@ -30,6 +31,7 @@ import {
     RegistryWebViewDevfileWindow,
     RegistryWebViewEditor,
 } from '../common/ui/webview/registryWebViewEditor';
+import { step, waitForItem } from '../common/utils';
 
 //TODO: Add more checks for different elements
 export function testCreateComponent(path: string) {
@@ -82,15 +84,15 @@ export function testCreateComponent(path: string) {
 
             componentName = 'node-js-runtime';
 
-            const item = await waitForItem(componentName);
+            const item = await waitForItem(getSection, componentName);
             expect(item).to.be.not.undefined;
 
             dlt = false;
         });
 
         it('Create component from local folder', async function test() {
             this.timeout(25_000);
-            const component = await waitForItem(componentName);
+            const component = await waitForItem(getSection, componentName);
             const contextMenu = await component.openContextMenu();
             await contextMenu.select(MENUS.deleteConfiguration);
 
@@ -115,20 +117,42 @@ export function testCreateComponent(path: string) {
 
             const localCodeBasePage = new LocalCodeBasePage();
             await localCodeBasePage.initializeEditor();
-            await localCodeBasePage.insertComponentName(componentName);
-            await localCodeBasePage.clickSelectFolderButton();
 
-            const input = await InputBox.create();
-            await input.setText(pth.join(path, componentName));
-            await input.confirm();
+            await step('Insert component name', async () => {
+                await localCodeBasePage.insertComponentName(componentName);
+            });
 
-            await localCodeBasePage.clickNextButton();
-            await new Promise((res) => {
-                setTimeout(res, 500);
+            await step('Click Select Folder button', async () => {
+                await localCodeBasePage.clickSelectFolderButton();
+            });
+
+            await step('Input component path', async () => {
+                const input = await InputBox.create();
+                await input.setText(pth.join(path, componentName));
+                await input.confirm();
+                // critical: wait until InputBox is gone
+                await VSBrowser.instance.driver.wait(async () => {
+                    try {
+                        await InputBox.create();
+                        return false;
+                    } catch {
+                        return true;
+                    }
+                }, 10000);
+            });
+
+            await step('Click Next button', async () => {
+                await localCodeBasePage.clickNextButton();
+                await new Promise((res) => {
+                    setTimeout(res, 500);
+                });
+            });
+
+            await step('Click Create Component button', async () => {
+                await localCodeBasePage.clickCreateComponent();
             });
-            await localCodeBasePage.clickCreateComponent();
 
-            const item = await waitForItem(componentName);
+            const item = await waitForItem(getSection, componentName);
             expect(item).to.be.not.undefined;
 
             dlt = true;
@@ -162,7 +186,7 @@ export function testCreateComponent(path: string) {
 
             //check if component is in component view
             componentName = 'nodejs-starter';
-            const item = await waitForItem(componentName);
+            const item = await waitForItem(getSection, componentName);
             expect(item).to.be.not.undefined;
 
             dlt = false;
@@ -172,7 +196,7 @@ export function testCreateComponent(path: string) {
         afterEach(async function context() {
             this.timeout(30_000);
             if (componentName && dlt) {
-                const component = await waitForItem(componentName);
+                const component = await waitForItem(getSection, componentName);
                 const contextMenu = await component.openContextMenu();
                 await contextMenu.select(MENUS.deleteSourceCodeFolder);
                 const notification = await notificationExists(
@@ -253,25 +277,8 @@ export function testCreateComponent(path: string) {
             }, 10_000);
         }
 
-        async function waitForItem(label, timeout = 15000) {
-            const section = await view.getContent().getSection(VIEWS.components);
-
-            const start = Date.now();
-
-            while (Date.now() - start < timeout) {
-                try {
-                    const item = await section.findItem(label);
-                    if (item) {
-                        return item;
-                    }
-                } catch {
-                    // ignore transient errors
-                }
-
-                await new Promise(res => setTimeout(res, 500));
-            }
-
-            throw new Error(`Item "${label}" not found in section within ${timeout}ms`);
+        async function getSection(): Promise<ViewSection> {
+            return await view.getContent().getSection(VIEWS.components);
         }
     });
 }

test/ui/suite/createComponent.ts

@@ -19,6 +19,7 @@ import {
 import { activateCommand } from '../common/command-activator';
 import { itemExists, notificationExists } from '../common/conditions';
 import { INPUTS, MENUS, NOTIFICATIONS, VIEWS } from '../common/constants';
+import { waitForItem } from '../common/utils';
 
 export function projectTest(isOpenshiftCluster: boolean) {
     describe('Work with project', function () {
@@ -70,7 +71,8 @@ export function projectTest(isOpenshiftCluster: boolean) {
 
         it('Create a new project', async function () {
             this.timeout(30_000);
-            const clusterItem = (await (await getExplorer()).findItem(clusterName)) as TreeItem;
+
+            const clusterItem = await waitForItem(getExplorer, clusterName) as TreeItem;
             await clusterItem.expand();
             const contextMenu = await clusterItem.openContextMenu();
             await contextMenu.select(newProject);
@@ -90,9 +92,10 @@ export function projectTest(isOpenshiftCluster: boolean) {
 
         it('Project can be changed', async function () {
             this.timeout(30_000);
+
             anotherProjectName = getProjectName();
 
-            const clusterItem = (await (await getExplorer()).findItem(clusterName)) as TreeItem;
+            const clusterItem = await waitForItem(getExplorer, clusterName) as TreeItem;
             await clusterItem.expand();
             const contextMenu = await clusterItem.openContextMenu();
             await contextMenu.select(newProject);
@@ -121,7 +124,7 @@ export function projectTest(isOpenshiftCluster: boolean) {
         it('Delete a project', async function () {
             this.timeout(30_000);
 
-            const projectItem = await (await getExplorer()).findItem(projectName);
+            const projectItem = await waitForItem(getExplorer, projectName) as TreeItem;
             const contextMenu = await projectItem.openContextMenu();
 
             await contextMenu.select(deleteProject);