chore: add tests

Adding tests for the command redirecting to the build page, and for the build
page allowing an initial selection.

To test a select control the values must be strings, so I had to rework the
Build page a bit to use string values.

Signed-off-by: Tim deBoer <[email protected]>

packages/backend/src/extension.spec.ts

@@ -19,8 +19,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
-import type * as podmanDesktopApi from '@podman-desktop/api';
-import { activate, deactivate } from './extension';
+import * as podmanDesktopApi from '@podman-desktop/api';
+import { activate, deactivate, openBuildPage } from './extension';
 import * as fs from 'node:fs';
 import os from 'node:os';
 
@@ -48,6 +48,10 @@ vi.mock('@podman-desktop/api', async () => {
         },
         onDidChangeViewState: vi.fn(),
       }),
+      listWebviews: vi.fn().mockReturnValue([{ viewType: 'a' }, { id: 'test', viewType: 'bootc' }, { viewType: 'b' }]),
+    },
+    navigation: {
+      navigateToWebview: vi.fn(),
     },
     fs: {
       createFileSystemWatcher: () => ({
@@ -89,3 +93,19 @@ test('check deactivate', async () => {
 
   expect(consoleLogMock).toBeCalledWith('stopping bootc extension');
 });
+
+test('check command triggers webview and redirects', async () => {
+  const postMessageMock = vi.fn();
+  const panel = {
+    webview: {
+      postMessage: postMessageMock,
+    },
+  } as unknown as podmanDesktopApi.WebviewPanel;
+
+  const image = { name: 'build', tag: 'latest' };
+
+  await openBuildPage(panel, image);
+
+  expect(podmanDesktopApi.navigation.navigateToWebview).toHaveBeenCalled();
+  expect(postMessageMock).toHaveBeenCalledWith({ body: 'build/latest', id: 'navigate-build' });
+});

packages/frontend/src/Build.spec.ts

@@ -94,7 +94,7 @@ vi.mock('./api/client', async () => {
   };
 });
 
-async function waitRender(customProperties: object): Promise<void> {
+async function waitRender(customProperties?: object): Promise<void> {
   const result = render(Build, { ...customProperties });
   // wait that result.component.$$.ctx[2] is set
   while (result.component.$$.ctx[2] === undefined) {
@@ -105,7 +105,7 @@ async function waitRender(customProperties: object): Promise<void> {
 test('Render shows correct images and history', async () => {
   vi.mocked(bootcClient.listHistoryInfo).mockResolvedValue(mockHistoryInfo);
   vi.mocked(bootcClient.listBootcImages).mockResolvedValue(mockBootcImages);
-  await waitRender(Build);
+  await waitRender();
 
   // Wait until children length is 2 meaning it's fully rendered / propagated the changes
   while (screen.getByLabelText('image-select')?.children.length !== 2) {
@@ -139,7 +139,30 @@ test('Render shows correct images and history', async () => {
 });
 
 test('Check that VMDK option is there', async () => {
-  await waitRender(Build);
+  await waitRender();
   const vmdk = screen.getByLabelText('vmdk-select');
   expect(vmdk).toBeDefined();
 });
+
+test('Check that preselecting an image works', async () => {
+  vi.mocked(bootcClient.listHistoryInfo).mockResolvedValue(mockHistoryInfo);
+  vi.mocked(bootcClient.listBootcImages).mockResolvedValue(mockBootcImages);
+  await waitRender({ imageName: 'image2', imageTag: 'latest' });
+
+  // Wait until children length is 2 meaning it's fully rendered / propagated the changes
+  while (screen.getByLabelText('image-select')?.children.length !== 2) {
+    await new Promise(resolve => setTimeout(resolve, 100));
+  }
+  const select = screen.getByLabelText('image-select') as HTMLSelectElement;
+  expect(select).toBeDefined();
+  expect(select.children.length).toEqual(2);
+
+  // Expect image:1 to be first since it's the last one in the history
+  expect(select.children[0].textContent).toEqual('image1:latest');
+  expect(select.children[1].textContent).toEqual('image2:latest');
+
+  // Expect the one we passed in to be selected
+  const selectedImage = select.value as unknown as any[];
+  expect(selectedImage).toBeDefined();
+  expect(selectedImage).toEqual('image2:latest');
+});

packages/frontend/src/Build.svelte

@@ -16,7 +16,7 @@ export let imageName: string | undefined = undefined;
 export let imageTag: string | undefined = undefined;
 
 // Image variables
-let selectedImage: ImageInfo;
+let selectedImage: string | undefined;
 let buildImageName: string;
 let buildTag: string;
 let buildEngineId: string;
@@ -26,13 +26,18 @@ let buildFolder: string;
 let buildType: BuildType[];
 let buildArch: string | undefined;
 
-// Other variabler
+// Other variable
 let success = false;
 let buildInProgress = false;
-let bootcAvailableImages: any[] = [];
+let bootcAvailableImages: ImageInfo[] = [];
 let errorMessage = '';
 let errorFormValidation = '';
 
+function findImage(repoTag: string): ImageInfo | undefined {
+  return bootcAvailableImages.find(
+    image => image.RepoTags && image.RepoTags.length > 0 && image.RepoTags[0] === repoTag,
+  );
+}
 // Function that will use listHistoryInfo, if there is anything in the list, pick the first one in the list (as it's the most recent)
 // and fill buildFolder, buildType and buildArch with the values from the selected image.
 async function fillBuildOptions() {
@@ -45,22 +50,22 @@ async function fillBuildOptions() {
     buildArch = latestBuild.arch;
   }
 
-  // If an image name and tag were passed in, try to use it as the selected image
+  // If an image name and tag were passed in, try to use it as the initially selected image
+  let initialImage: ImageInfo | undefined;
   if (imageName && imageTag) {
     console.log('Preselecting image: ' + imageName + ' ' + imageTag);
-    selectedImage = bootcAvailableImages.find(
-      image => image.RepoTags && image.RepoTags.length > 0 && image.RepoTags[0] === `${imageName}:${imageTag}`,
-    );
+    initialImage = findImage(`${imageName}:${imageTag}`);
   }
 
   // If not, use the last image from history if it is valid
-  if (!selectedImage && historyInfo.length > 0) {
+  if (!initialImage && historyInfo.length > 0) {
     const latestBuild = historyInfo[0];
     // Find the image that matches the latest build's name and tag
-    selectedImage = bootcAvailableImages.find(
-      image =>
-        image.RepoTags && image.RepoTags.length > 0 && image.RepoTags[0] === `${latestBuild.image}:${latestBuild.tag}`,
-    );
+    initialImage = findImage(`${latestBuild.image}:${latestBuild.tag}`);
+  }
+
+  if (initialImage && initialImage.RepoTags && initialImage.RepoTags.length > 0) {
+    selectedImage = initialImage.RepoTags[0];
   }
 }
 
@@ -157,7 +162,10 @@ function cleanup() {
 }
 
 onMount(async () => {
-  bootcAvailableImages = await bootcClient.listBootcImages();
+  const imageInfos = await bootcClient.listBootcImages();
+
+  // filter to images that have a repo tag here, to avoid doing it everywhere
+  bootcAvailableImages = imageInfos.filter(image => image.RepoTags && image.RepoTags.length > 0);
 
   // Fills the build options with the last options
   await fillBuildOptions();
@@ -166,10 +174,11 @@ onMount(async () => {
 // each time imageName updated, "split" it between : to image and tag
 $: {
   if (selectedImage !== undefined) {
-    if (selectedImage.RepoTags && selectedImage.RepoTags.length > 0) {
-      buildImageName = selectedImage.RepoTags[0].split(':')[0];
-      buildTag = selectedImage.RepoTags[0].split(':')[1];
-      buildEngineId = selectedImage.engineId;
+    const image = findImage(selectedImage);
+    if (image) {
+      buildImageName = selectedImage.split(':')[0];
+      buildTag = selectedImage.split(':')[1];
+      buildEngineId = image.engineId;
     }
   }
 }
@@ -226,7 +235,7 @@ $: {
                   {#each bootcAvailableImages as image}
                     <!-- Repo tags is an array, only show if it is > 0 and show the first one -->
                     {#if image.RepoTags && image.RepoTags.length > 0}
-                      <option value="{image}">{image.RepoTags[0]}</option>
+                      <option value="{image.RepoTags[0]}">{image.RepoTags[0]}</option>
                     {/if}
                   {/each}
                 {/if}