e2e tests added

.gitignore

@@ -5,4 +5,6 @@ package-lock.json
 redhat-sandbox.cdix
 test-resources
 yarn-error.log
-coverage
+coverage
+tests/**/output
+test-results

package.json

@@ -62,29 +62,37 @@
     "watch": "vite build -w",
     "format:check": "prettier --check \"**/*.ts\" \"scripts/*.cjs\"",
     "format:fix": "prettier --write \"**/*.ts\" \"scripts/*.cjs\"",
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage",
+    "test:e2e:setup": "xvfb-maybe --auto-servernum --server-args='-screen 0 1280x960x24' --",
+    "test:e2e": "npm run test:e2e:setup npx playwright test tests/src"
   },
   "dependencies": {
     "@kubernetes/client-node": "^0.22.1",
     "@podman-desktop/api": "^1.13.2",
     "fs-extra": "^11.2.0",
-    "got": "^14.4.3",
-    "js-yaml": "^4.1.0"
+    "got": "^14.4.2"
   },
   "devDependencies": {
-    "7zip-min": "^1.4.5",
+    "@playwright/test": "1.48.0",
+    "@podman-desktop/tests-playwright": "next",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.16.14",
     "@vitest/coverage-v8": "^2.0.5",
+    "7zip-min": "^1.4.5",
     "byline": "^5.0.0",
     "copyfiles": "^2.4.1",
+    "cross-env": "7.0.3",
+    "electron": "^32.1.1",
     "jsdom": "^25.0.1",
     "mkdirp": "^3.0.1",
     "prettier": "^3.3.3",
     "typescript": "^5.6.3",
     "vite": "^5.4.9",
     "vitest": "^2.0.5",
     "vscode-uri": "^3.0.8",
-    "zip-local": "^0.3.5"
+    "xvfb-maybe": "^0.2.1",
+    "zip-local": "^0.3.5",
+    "js-yaml": "^4.1.0",
+    "node-fetch": "^2.6.1"
   }
 }

playwright.config.ts

@@ -0,0 +1,41 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  outputDir: 'tests/output/',
+  workers: 1,
+  timeout: 60000,
+
+  reporter: [
+    ['list'],
+    ['junit', { outputFile: 'tests/output/junit-results.xml' }],
+    ['json', { outputFile: 'tests/output/json-results.json' }],
+    ['html', { open: 'never', outputFolder: 'tests/playwright/output/html-results' }],
+  ],
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+});

tests/src/developer-sandbox.spec.ts

@@ -0,0 +1,184 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import type { NavigationBar } from '@podman-desktop/tests-playwright';
+import {
+  ResourcesPage,
+  expect as playExpect,
+  ExtensionCardPage,
+  RunnerOptions,
+  test,
+} from '@podman-desktop/tests-playwright';
+import { DeveloperSandboxPage } from './model/pages/developer-sandbox-page';
+
+let extensionInstalled = false;
+let extensionCard: ExtensionCardPage;
+const imageName = 'ghcr.io/redhat-developer/podman-desktop-sandbox-ext:latest';
+const extensionLabel = 'redhat.redhat-sandbox';
+const extensionLabelName = 'redhat-sandbox';
+const extensionResourceLabel = 'redhat.sandbox';
+const extensionProvider = 'Developer Sandbox Provider';
+const activeExtensionStatus = 'ACTIVE';
+const disabledExtensionStatus = 'DISABLED';
+const activeConnectionStatus = 'RUNNING';
+const skipInstallation = process.env.SKIP_INSTALLATION === 'true';
+
+test.use({
+  runnerOptions: new RunnerOptions({ customFolder: 'sandbox-tests-pd', autoUpdate: false, autoCheckUpdates: false }),
+});
+test.beforeAll(async ({ runner, page, welcomePage }) => {
+  runner.setVideoAndTraceName('sandbox-e2e');
+  await welcomePage.handleWelcomePage(true);
+  extensionCard = new ExtensionCardPage(page, extensionLabelName, extensionLabel);
+});
+
+test.afterAll(async ({ runner }) => {
+  await runner.close();
+});
+
+test.describe.serial('Red Hat Developer Sandbox extension verification', () => {
+  test.describe.serial('Red Hat Developer Sandbox extension installation', () => {
+    // PR check builds extension locally and so it is available already
+    test('Go to extensions and check if extension is already installed', async ({ navigationBar }) => {
+      const extensions = await navigationBar.openExtensions();
+      if (await extensions.extensionIsInstalled(extensionLabel)) {
+        extensionInstalled = true;
+      }
+    });
+
+    // we want to skip removing of the extension when we are running tests from PR check
+    test('Uninstall previous version of sandbox extension', async ({ navigationBar }) => {
+      test.skip(!extensionInstalled || skipInstallation);
+      test.setTimeout(60000);
+      await removeExtension(navigationBar);
+    });
+
+    // we want to install extension from OCI image (usually using latest tag) after new code was added to the codebase
+    // and extension was published already
+    test('Extension can be installed using OCI image', async ({ navigationBar }) => {
+      test.skip(skipInstallation);
+      test.setTimeout(200000);
+      const extensions = await navigationBar.openExtensions();
+      await extensions.installExtensionFromOCIImage(imageName);
+      await playExpect(extensionCard.card).toBeVisible();
+    });
+
+    test('Extension (card) is installed, present and active', async ({ navigationBar }) => {
+      const extensions = await navigationBar.openExtensions();
+      await playExpect
+        .poll(async () => await extensions.extensionIsInstalled(extensionLabel), { timeout: 30000 })
+        .toBeTruthy();
+      const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
+      await playExpect(extensionCard.status).toHaveText(activeExtensionStatus);
+    });
+
+    test("Extension's details show correct status, no error", async ({ page, navigationBar }) => {
+      const extensions = await navigationBar.openExtensions();
+      const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
+      await extensionCard.openExtensionDetails('Red Hat Openshift Sandbox extension');
+      const details = new DeveloperSandboxPage(page);
+      await playExpect(details.heading).toBeVisible();
+      await playExpect(details.status).toHaveText(activeExtensionStatus);
+      const errorTab = details.tabs.getByRole('button', { name: 'Error' });
+      // we would like to propagate the error's stack trace into test failure message
+      let stackTrace = '';
+      if ((await errorTab.count()) > 0) {
+        await details.activateTab('Error');
+        stackTrace = await details.errorStackTrace.innerText();
+      }
+      await playExpect(errorTab, `Error Tab was present with stackTrace: ${stackTrace}`).not.toBeVisible();
+    });
+
+    test('Developer Sandbox is available in Resources Page', async ({ navigationBar }) => {
+      await checkSandboxInResources(navigationBar, true);
+    });
+
+    test('Developer Sandbox is available in Dashboard', async ({ navigationBar }) => {
+      await checkSandboxInDashboard(navigationBar, true);
+    });
+  });
+
+  test.describe.serial('Developer Sandbox extension handling', () => {
+    test('Extension can be disabled', async ({ navigationBar }) => {
+      const extensions = await navigationBar.openExtensions();
+      playExpect(await extensions.extensionIsInstalled(extensionLabel)).toBeTruthy();
+      const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
+      await playExpect(extensionCard.status).toHaveText(activeExtensionStatus);
+      await extensionCard.disableExtension();
+      await playExpect(extensionCard.status).toHaveText(disabledExtensionStatus);
+
+      await checkSandboxInResources(navigationBar, false);
+      await checkSandboxInDashboard(navigationBar, false);
+    });
+
+    test('Extension can be re-enabled correctly', async ({ navigationBar }) => {
+      const extensions = await navigationBar.openExtensions();
+      playExpect(await extensions.extensionIsInstalled(extensionLabel)).toBeTruthy();
+      const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
+      await playExpect(extensionCard.status).toHaveText(disabledExtensionStatus);
+      await extensionCard.enableExtension();
+      await playExpect(extensionCard.status).toHaveText(activeExtensionStatus);
+
+      await checkSandboxInResources(navigationBar, true);
+      await checkSandboxInDashboard(navigationBar, true);
+    });
+  });
+
+  test('Extension can be removed', async ({ navigationBar }) => {
+    await removeExtension(navigationBar);
+  });
+});
+
+async function removeExtension(navBar: NavigationBar): Promise<void> {
+  const extensions = await navBar.openExtensions();
+  const extensionCard = await extensions.getInstalledExtension(extensionLabelName, extensionLabel);
+  await extensionCard.disableExtension();
+  await extensionCard.removeExtension();
+  await playExpect
+    .poll(async () => await extensions.extensionIsInstalled(extensionLabel), { timeout: 15000 })
+    .toBeFalsy();
+}
+
+async function checkSandboxInResources(navigationBar: NavigationBar, isInstalled: boolean) {
+  const settingsBar = await navigationBar.openSettings();
+  const resourcesPage = await settingsBar.openTabPage(ResourcesPage);
+  const sandboxResourceCard = resourcesPage.featuredProviderResources.getByRole('region', {
+    name: extensionResourceLabel,
+  });
+  const createButton = sandboxResourceCard.getByRole('button', { name: 'Create new Developer Sandbox' });
+
+  if (isInstalled) {
+    await playExpect(sandboxResourceCard).toBeVisible();
+    await playExpect(createButton).toBeVisible();
+  } else {
+    await playExpect(sandboxResourceCard).toBeHidden();
+  }
+}
+
+async function checkSandboxInDashboard(navigationBar: NavigationBar, isInstalled: boolean) {
+  const dashboardPage = await navigationBar.openDashboard();
+  const sandboxProviderCard = dashboardPage.content.getByRole('region', { name: extensionProvider });
+  const sandboxStatus = sandboxProviderCard.getByLabel('Connection Status Label');
+
+  if (isInstalled) {
+    await playExpect(sandboxProviderCard).toBeVisible();
+    await playExpect(sandboxStatus).toHaveText(activeConnectionStatus);
+  } else {
+    await playExpect(sandboxProviderCard).toBeHidden();
+  }
+}

tests/src/model/pages/developer-sandbox-page.ts

@@ -0,0 +1,26 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import type { Page } from '@playwright/test';
+import { ExtensionDetailsPage } from '@podman-desktop/tests-playwright';
+
+export class DeveloperSandboxPage extends ExtensionDetailsPage {
+  constructor(page: Page) {
+    super(page, 'Red Hat OpenShift Sandbox extension');
+  }
+}

tests/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "strictNullChecks": true,
+      "lib": [ "ES2017", "webworker" ],
+      "module": "esnext",
+      "target": "esnext",
+      "sourceMap": true,
+      "rootDir": "src",
+      "outDir": "dist",
+      "skipLibCheck": true,
+      "types": [ "node" ],
+      "allowSyntheticDefaultImports": true,
+      "moduleResolution": "Node",
+      "esModuleInterop": true
+    }
+  }

vitest.config.js

@@ -21,11 +21,20 @@
  * @type {import('vite').UserConfig}
  * @see https://vitest.dev/config/
  */
+const excludeArray = [
+  'tests/**', '**/builtin/**',
+  '**/node_modules/**',
+  '**/dist/**',
+  '**/.{idea,git,cache,output,temp,cdix}/**',
+  '**/{.electron-builder,babel,changelog,docusaurus,jest,postcss,prettier,rollup,svelte,tailwind,vite,vitest*,webpack}.config.*',];
+
 const config = {
   test: {
     globals: true,
+    exclude: excludeArray,
     coverage: {
-      include: ['**/*.ts'],
+      include: ['./src/**/*.ts}'],
+      exclude: excludeArray,
     },
   },
   resolve: {