chore(tests): compose onboarding e2e tests added

packages/renderer/src/lib/preferences/PreferencesCliTool.svelte

@@ -49,7 +49,7 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
 }
 </script>
 
-<div role="row" class="bg-charcoal-600 mb-5 rounded-md p-3 flex flex-col">
+<div role="row" class="bg-charcoal-600 mb-5 rounded-md p-3 flex flex-col" aria-label="{cliTool.displayName}">
   <div class="divide-x divide-gray-900 flex flex-row">
     <div>
       <!-- left col - cli-tool icon/name + "create new" button -->

tests/playwright/src/model/pages/cli-tools-page.ts

@@ -0,0 +1,38 @@
+/**********************************************************************
+ * 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 { Locator, Page } from 'playwright';
+
+import { SettingsPage } from './settings-page';
+
+export class CLIToolsPage extends SettingsPage {
+  readonly main: Locator;
+  readonly header: Locator;
+  readonly content: Locator;
+  readonly heading: Locator;
+  readonly toolsTable: Locator;
+
+  constructor(page: Page) {
+    super(page, 'CLI Tools');
+    this.main = page.getByRole('region', { name: 'CLI Tools' }); //check name
+    this.header = this.main.getByRole('region', { name: 'Header' });
+    this.heading = this.header.getByRole('heading', { name: 'CLI Tools', exact: true });
+    this.content = this.main.getByRole('region', { name: 'Content' });
+    this.toolsTable = this.content.getByRole('table', { name: 'cli-tools' });
+  }
+}

tests/playwright/src/model/pages/compose-onboarding-page.ts

@@ -0,0 +1,30 @@
+/**********************************************************************
+ * 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 { Locator, Page } from 'playwright';
+
+import { OnboardingPage } from './onboarding-page';
+
+export class ComposeOnboardingPage extends OnboardingPage {
+  readonly heading: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.heading = this.header.getByRole('heading', { name: 'Compose Setup Header' });
+  }
+}

tests/playwright/src/model/pages/settings-bar.ts

@@ -31,6 +31,7 @@ export class SettingsBar {
   readonly extensionsTab: Locator;
   readonly desktopExtensionsTab: Locator;
   readonly preferencesTab: Locator;
+  readonly cliToolsTab: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -42,6 +43,7 @@ export class SettingsBar {
     this.extensionsTab = this.settingsNavBar.getByRole('link', { name: 'Extensions', exact: true });
     this.desktopExtensionsTab = this.settingsNavBar.getByRole('link', { name: 'DesktopExtensions' });
     this.preferencesTab = this.settingsNavBar.getByRole('link', { name: 'preferences' });
+    this.cliToolsTab = this.settingsNavBar.getByRole('link', { name: 'CLI Tools' });
   }
 
   public async openTabPage<T extends SettingsPage>(type: new (page: Page) => T): Promise<T> {

tests/playwright/src/specs/compose-onboarding-smoke.spec.ts

@@ -0,0 +1,141 @@
+/**********************************************************************
+ * 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 * as os from 'node:os';
+
+import type { Page } from '@playwright/test';
+import { expect as playExpect } from '@playwright/test';
+import { afterAll, beforeAll, beforeEach, describe, test } from 'vitest';
+
+import { CLIToolsPage } from '../model/pages/cli-tools-page';
+import { ComposeOnboardingPage } from '../model/pages/compose-onboarding-page';
+import { ResourcesPage } from '../model/pages/resources-page';
+import { SettingsBar } from '../model/pages/settings-bar';
+import { WelcomePage } from '../model/pages/welcome-page';
+import { NavigationBar } from '../model/workbench/navigation';
+import { PodmanDesktopRunner } from '../runner/podman-desktop-runner';
+import type { RunnerTestContext } from '../testContext/runner-test-context';
+
+let pdRunner: PodmanDesktopRunner;
+let page: Page;
+let navBar: NavigationBar;
+let composeVersion: string;
+const isLinux = os.platform() === 'linux';
+
+beforeAll(async () => {
+  pdRunner = new PodmanDesktopRunner();
+  page = await pdRunner.start();
+  pdRunner.setVideoAndTraceName('compose-onboarding-e2e');
+
+  const welcomePage = new WelcomePage(page);
+  await welcomePage.handleWelcomePage(true);
+  navBar = new NavigationBar(page);
+});
+
+afterAll(async () => {
+  await pdRunner.close();
+});
+
+beforeEach<RunnerTestContext>(async ctx => {
+  ctx.pdRunner = pdRunner;
+});
+
+describe.skipIf(isLinux)('Compose onboarding workflow verification', async () => {
+  test('Can enter Compose onboarding', async () => {
+    await navBar.openSettings();
+    const settingsBar = new SettingsBar(page);
+    const resourcesPage = await settingsBar.openTabPage(ResourcesPage);
+
+    const composeBox = resourcesPage.featuredProviderResources.getByRole('region', { name: 'Compose' });
+    await playExpect(composeBox).toBeVisible();
+    await composeBox.scrollIntoViewIfNeeded();
+
+    const setupButton = composeBox.getByRole('button', { name: 'Setup Compose' });
+    await playExpect(setupButton).toBeVisible({ timeout: 50000 });
+
+    await setupButton.click();
+
+    const onboardingPage = new ComposeOnboardingPage(page);
+
+    await playExpect(onboardingPage.heading).toBeVisible();
+    await playExpect(onboardingPage.onboardingStatusMessage).toHaveText('Compose Download');
+
+    const downloadAvailableText = page.getByText(
+      /Compose will be downloaded in the next step \(Version v[0-9.]+\). Want to download/,
+      { exact: true },
+    );
+    await playExpect(downloadAvailableText).toBeVisible();
+
+    const versionInfoFullText = await downloadAvailableText.textContent();
+    const matches = versionInfoFullText?.match(/v\d+(\.\d+)+/);
+    if (matches) {
+      composeVersion = matches[0];
+    }
+  });
+
+  test('Can install Compose locally', async () => {
+    const onboardingPage = new ComposeOnboardingPage(page);
+    await onboardingPage.nextStepButton.click();
+
+    await playExpect(onboardingPage.onboardingStatusMessage).toHaveText('Compose Successfully Downloaded', {
+      timeout: 50000,
+    });
+
+    await onboardingPage.cancelSetupButtion.click();
+
+    const skipDialog = page.getByRole('dialog', { name: 'Skip Setup Popup', exact: true });
+    const skipOkButton = skipDialog.getByRole('button', { name: 'Ok' });
+    await skipOkButton.click();
+  });
+
+  test('Can install Compose system-wide', async () => {
+    const resourcesPage = new ResourcesPage(page);
+    const composeBox = resourcesPage.featuredProviderResources.getByRole('region', { name: 'Compose' });
+    const setupButton = composeBox.getByRole('button', { name: 'Setup Compose' });
+    await setupButton.click();
+
+    const onboardingPage = new ComposeOnboardingPage(page);
+    await playExpect(onboardingPage.onboardingStatusMessage).toHaveText('Compose Successfully Downloaded');
+    const downloadAvailableText = page.getByText(
+      'The next step will install Compose system-wide. You will be prompted for system',
+    );
+    await playExpect(downloadAvailableText).toBeVisible();
+
+    await onboardingPage.nextStepButton.click();
+
+    await playExpect(onboardingPage.onboardingStatusMessage).toHaveText('Compose Installed', { timeout: 50000 });
+    let downloadFinishedText = page.locator('p');
+    downloadFinishedText = downloadFinishedText.filter({ hasText: 'Compose is installed system-wide!' });
+    await playExpect(downloadFinishedText).toBeVisible();
+
+    await onboardingPage.nextStepButton.click();
+  });
+
+  test('Verify Compose was installed', async () => {
+    const resourcesPage = new ResourcesPage(page);
+    const composeBox = resourcesPage.featuredProviderResources.getByRole('region', { name: 'Compose' });
+    const setupButton = composeBox.getByRole('button', { name: 'Setup Compose' });
+    await playExpect(setupButton).toBeHidden();
+
+    const settingsBar = new SettingsBar(page);
+    const cliToolsPage = await settingsBar.openTabPage(CLIToolsPage);
+    const composeRow = cliToolsPage.toolsTable.getByLabel('Compose');
+    const composeVersionInfo = composeRow.getByLabel('cli-version');
+    await playExpect(composeVersionInfo).toHaveText('docker-compose ' + composeVersion);
+  });
+});