fix: edit button label and add test

Signed-off-by: lstocchi <lstocchi@redhat.com>

packages/main/src/plugin/index.spec.ts

@@ -25,6 +25,7 @@ import type { WebContents } from 'electron';
 import { shell, clipboard } from 'electron';
 import type { MessageBox } from './message-box.js';
 import { securityRestrictionCurrentHandler } from '../security-restrictions-handler.js';
+import { CancellationTokenRegistry } from './cancellation-token-registry.js';
 
 let pluginSystem: PluginSystem;
 
@@ -191,3 +192,23 @@ test('Should apiSender handle local receive events', async () => {
   // data should have been received
   expect(fooReceived).toBe('hello-world');
 });
+
+test('Should return no AbortController if the token is undefined', async () => {
+  const cancellationTokenRegistry = new CancellationTokenRegistry();
+  const abortController = pluginSystem.createAbortControllerOnCancellationToken(cancellationTokenRegistry);
+  expect(abortController).toBeUndefined();
+});
+
+test('Should return AbortController that should be aborted if token is cancelled', async () => {
+  const abortMock = vi.spyOn(AbortController.prototype, 'abort');
+  const cancellationTokenRegistry = new CancellationTokenRegistry();
+  const tokenId = cancellationTokenRegistry.createCancellationTokenSource();
+  const abortController = pluginSystem.createAbortControllerOnCancellationToken(cancellationTokenRegistry, tokenId);
+
+  expect(abortController).toBeDefined();
+
+  const token = cancellationTokenRegistry.getCancellationTokenSource(tokenId);
+  token?.cancel();
+
+  expect(abortMock).toBeCalled();
+});

packages/renderer/src/lib/image/BuildImageFromContainerfile.spec.ts

@@ -26,6 +26,7 @@ import type { ProviderStatus } from '@podman-desktop/api';
 import type { ProviderContainerConnectionInfo, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
 import userEvent from '@testing-library/user-event';
 import BuildImageFromContainerfile from '/@/lib/image/BuildImageFromContainerfile.svelte';
+import { buildImagesInfo } from '/@/stores/build-images';
 
 // fake the window.events object
 beforeAll(() => {
@@ -121,3 +122,24 @@ test('Expect Done button is enabled once build is done', async () => {
   expect(doneButton).toBeInTheDocument();
   expect(doneButton).toBeEnabled();
 });
+
+test('Expect Abort button to hidden when image build is not in progress', async () => {
+  setup();
+  render(BuildImageFromContainerfile);
+
+  const abortButton = screen.queryByRole('button', { name: 'Cancel' });
+  expect(abortButton).not.toBeInTheDocument();
+});
+
+test('Expect Abort button to being visible when image build is in progress', async () => {
+  setup();
+  buildImagesInfo.set({
+    buildImageKey: Symbol(),
+    buildRunning: true,
+  });
+  render(BuildImageFromContainerfile);
+
+  const abortButton = screen.getByRole('button', { name: 'Cancel' });
+  expect(abortButton).toBeInTheDocument();
+  expect(abortButton).toBeEnabled();
+});

packages/renderer/src/lib/image/BuildImageFromContainerfile.svelte

@@ -29,12 +29,12 @@ let containerFilePath: string;
 let containerBuildContextDirectory: string;
 
 let buildImageInfo: BuildImageInfo | undefined = undefined;
+let cancellableTokenId: number | undefined = undefined;
 let providers: ProviderInfo[] = [];
 let providerConnections: ProviderContainerConnectionInfo[] = [];
 let selectedProvider: ProviderContainerConnectionInfo | undefined = undefined;
 let selectedProviderConnection: ProviderContainerConnectionInfo | undefined = undefined;
 let logsTerminal: Terminal;
-let cancellableTokenId: number | undefined;
 
 $: hasInvalidFields = !containerFilePath || !containerBuildContextDirectory;
 
@@ -233,7 +233,7 @@ async function abortBuild() {
         <TerminalWindow bind:terminal="{logsTerminal}" />
         <div class="w-full">
           {#if buildImageInfo?.buildRunning}
-            <Button on:click="{() => abortBuild()}" class="w-full">Abort</Button>
+            <Button on:click="{() => abortBuild()}" class="w-full">Cancel</Button>
           {/if}
         </div>
       </div>