chore(test): add e2e test to verify llama stack (#3486)

Signed-off-by: serbangeorge-m <[email protected]>

Author: serbangeorge-m

tests/playwright/src/ai-lab-extension.spec.ts

@@ -56,6 +56,7 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type { AILabTryInstructLabPage } from './model/ai-lab-try-instructlab-page';
+import type { AiLlamaStackPage } from './model/ai-lab-model-llamastack-page';
 
 const AI_LAB_EXTENSION_OCI_IMAGE =
   process.env.EXTENSION_OCI_IMAGE ?? 'ghcr.io/containers/podman-desktop-extension-ai-lab:nightly';
@@ -188,6 +189,79 @@ test.describe.serial(`AI Lab extension installation and verification`, () => {
     );
   });
 
+  test.describe.serial(`Start Llama Stack from sidebar and verify containers`, { tag: '@smoke' }, () => {
+    let llamaStackPage: AiLlamaStackPage;
+    const llamaStackContainerNames: string[] = [];
+
+    test.beforeAll(`Open Llama Stack`, async ({ runner, page, navigationBar }) => {
+      aiLabPage = await reopenAILabDashboard(runner, page, navigationBar);
+      await aiLabPage.navigationBar.waitForLoad();
+      llamaStackPage = await aiLabPage.navigationBar.openLlamaStack();
+      await llamaStackPage.waitForLoad();
+    });
+
+    test(`Start Llama Stack containers`, async () => {
+      test.setTimeout(300_000);
+      await llamaStackPage.waitForLoad();
+      await llamaStackPage.runLlamaStackContainer();
+      await playExpect(llamaStackPage.openLlamaStackContainerButton).toBeVisible({ timeout: 120_000 });
+      await playExpect(llamaStackPage.exploreLlamaStackEnvironmentButton).toBeVisible({ timeout: 120_000 });
+      await playExpect(llamaStackPage.openLlamaStackContainerButton).toBeEnabled({ timeout: 30_000 });
+      await playExpect(llamaStackPage.exploreLlamaStackEnvironmentButton).toBeEnabled({ timeout: 30_000 });
+    });
+
+    test(`Verify Llama Stack containers are running`, async ({ navigationBar }) => {
+      let containersPage = await navigationBar.openContainers();
+      await playExpect(containersPage.heading).toBeVisible();
+
+      await playExpect
+        .poll(
+          async () => {
+            const allRows = await containersPage.getAllTableRows();
+            llamaStackContainerNames.length = 0;
+            for (const row of allRows) {
+              const text = await row.textContent();
+              if (text?.includes('llama-stack')) {
+                const containerNameMatch = RegExp(/\b(llama-stack[^\s]*)/).exec(text);
+                if (containerNameMatch) {
+                  llamaStackContainerNames.push(containerNameMatch[1]);
+                }
+              }
+            }
+            return llamaStackContainerNames.length;
+          },
+          {
+            timeout: 30_000,
+            intervals: [5_000],
+          },
+        )
+        .toBe(2);
+
+      console.log(`Found containers: ${llamaStackContainerNames.join(', ')}`);
+
+      for (const container of llamaStackContainerNames) {
+        containersPage = await navigationBar.openContainers();
+        await playExpect(containersPage.heading).toBeVisible();
+        const containersDetailsPage = await containersPage.openContainersDetails(container);
+        await playExpect(containersDetailsPage.heading).toBeVisible();
+        await playExpect
+          .poll(async () => containersDetailsPage.getState(), { timeout: 30_000 })
+          .toContain(ContainerState.Running);
+      }
+    });
+
+    test.afterAll(`Stop Llama Stack containers`, async ({ navigationBar }) => {
+      for (const container of llamaStackContainerNames) {
+        const containersPage = await navigationBar.openContainers();
+        await playExpect(containersPage.heading).toBeVisible();
+        await containersPage.deleteContainer(container);
+        await playExpect
+          .poll(async () => await containersPage.containerExists(container), { timeout: 30_000 })
+          .toBeFalsy();
+      }
+    });
+  });
+
   test.describe.serial('AI Lab API endpoint e2e test', { tag: '@smoke' }, () => {
     let localServerPort: string;
     let extensionVersion: string | undefined;

tests/playwright/src/model/ai-lab-model-llamastack-page.ts

@@ -0,0 +1,50 @@
+/**********************************************************************
+ * 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/test';
+import { AILabBasePage } from './ai-lab-base-page';
+
+export class AiLlamaStackPage extends AILabBasePage {
+  readonly startLlamaStackContainerButton: Locator;
+  readonly openLlamaStackContainerButton: Locator;
+  readonly exploreLlamaStackEnvironmentButton: Locator;
+
+  constructor(page: Page, webview: Page) {
+    super(page, webview, 'Llama Stack');
+    this.startLlamaStackContainerButton = this.webview.getByRole('button', { name: 'Start Llama Stack container' });
+    this.openLlamaStackContainerButton = this.webview.getByRole('button', { name: 'Open Llama Stack container' });
+    this.exploreLlamaStackEnvironmentButton = this.webview.getByRole('button', {
+      name: 'Explore Llama-Stack environment',
+    });
+  }
+
+  async waitForLoad(): Promise<void> {
+    await this.startLlamaStackContainerButton.waitFor({ state: 'visible' });
+  }
+
+  async runLlamaStackContainer(): Promise<void> {
+    await this.startLlamaStackContainerButton.click();
+  }
+
+  async waitForOpenLlamaStackContainerButton(): Promise<void> {
+    await this.openLlamaStackContainerButton.waitFor({ state: 'visible' });
+  }
+
+  async waitForExploreLlamaStackEnvironmentButton(): Promise<void> {
+    await this.exploreLlamaStackEnvironmentButton.waitFor({ state: 'visible' });
+  }
+}

tests/playwright/src/model/ai-lab-navigation-bar.ts

@@ -27,6 +27,7 @@ import { AILabPlaygroundsPage } from './ai-lab-playgrounds-page';
 import { AILabLocalServerPage } from './ai-lab-local-server-page';
 import { AILabDashboardPage } from './ai-lab-dashboard-page';
 import { AILabTryInstructLabPage } from './ai-lab-try-instructlab-page';
+import { AiLlamaStackPage } from './ai-lab-model-llamastack-page';
 
 export class AILabNavigationBar extends AILabBasePage {
   readonly navigationBar: Locator;
@@ -36,6 +37,7 @@ export class AILabNavigationBar extends AILabBasePage {
   readonly catalogButton: Locator;
   readonly servicesButton: Locator;
   readonly playgroundsButton: Locator;
+  readonly llamaStackButton: Locator;
   readonly tuneButton: Locator;
   readonly localServerButton: Locator;
   readonly tryInstructLabButton: Locator;
@@ -49,6 +51,7 @@ export class AILabNavigationBar extends AILabBasePage {
     this.catalogButton = this.navigationBar.getByRole('link', { name: 'Catalog', exact: true });
     this.servicesButton = this.navigationBar.getByRole('link', { name: 'Services' });
     this.playgroundsButton = this.navigationBar.getByRole('link', { name: 'Playgrounds' });
+    this.llamaStackButton = this.navigationBar.getByRole('link', { name: 'Llama Stack' });
     this.tuneButton = this.navigationBar.getByRole('link', { name: 'Tune with InstructLab' });
     this.localServerButton = this.navigationBar.getByRole('link', { name: 'Local Server' });
     this.tryInstructLabButton = this.navigationBar.getByRole('link', { name: 'Try InstructLab' });
@@ -94,6 +97,12 @@ export class AILabNavigationBar extends AILabBasePage {
     return new AILabPlaygroundsPage(this.page, this.webview);
   }
 
+  async openLlamaStack(): Promise<AiLlamaStackPage> {
+    await playExpect(this.llamaStackButton).toBeEnabled();
+    await this.llamaStackButton.click();
+    return new AiLlamaStackPage(this.page, this.webview);
+  }
+
   async openLocalServer(): Promise<AILabLocalServerPage> {
     await playExpect(this.localServerButton).toBeEnabled();
     await this.localServerButton.click();