fix: tests

Signed-off-by: axel7083 <[email protected]>

packages/frontend/src/lib/RecipeCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { Recipe } from '@shared/src/models/IRecipe';
 import { router } from 'tinro';
-import { faArrowUpRightFromSquare, faDownload, faCircleChevronDown, faFolder } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUpRightFromSquare, faFolder } from '@fortawesome/free-solid-svg-icons';
 import Fa from 'svelte-fa';
 import { localRepositories } from '../stores/localRepositories';
 import { findLocalRepositoryByRecipeId } from '/@/utils/localRepositoriesUtils';
@@ -30,7 +30,7 @@ $: localPath = findLocalRepositoryByRecipeId($localRepositories, recipe.id);
 
       <!-- right column -->
       <div>
-        <RecipeStatus recipe="{recipe}" localPath="{localPath}" />
+        <RecipeStatus recipe="{recipe}" localRepository="{localPath}" />
       </div>
     </div>
 

packages/frontend/src/lib/RecipeStatus.spec.ts

@@ -0,0 +1,72 @@
+/**********************************************************************
+ * 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 '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { expect, test, vi } from 'vitest';
+import RecipeStatus from '/@/lib/RecipeStatus.svelte';
+import type { Recipe } from '@shared/src/models/IRecipe';
+import { studioClient } from '/@/utils/client';
+
+vi.mock('../utils/client', async () => ({
+  studioClient: {
+    cloneApplication: vi.fn(),
+  },
+}));
+
+test('download icon should be visible when localPath is undefined', async () => {
+  render(RecipeStatus, {
+    recipe: {} as unknown as Recipe,
+    localRepository: undefined,
+  });
+
+  const icon = screen.getByLabelText('download icon');
+  expect(icon).toBeDefined();
+});
+
+test('chevron down icon should be visible when localPath is defined', async () => {
+  render(RecipeStatus, {
+    recipe: {} as unknown as Recipe,
+    localRepository: {
+      labels: {},
+      path: 'random-path',
+      sourcePath: 'random-source-path',
+    },
+  });
+
+  const icon = screen.getByLabelText('chevron down icon');
+  expect(icon).toBeDefined();
+});
+
+test('click on download icon should call cloneApplication', async () => {
+  vi.mocked(studioClient.cloneApplication).mockResolvedValue(undefined);
+
+  render(RecipeStatus, {
+    recipe: {
+      id: 'dummy-recipe-id',
+    } as unknown as Recipe,
+    localRepository: undefined,
+  });
+
+  const button = screen.getByRole('button');
+  await fireEvent.click(button);
+
+  await vi.waitFor(() => {
+    expect(studioClient.cloneApplication).toHaveBeenCalledWith('dummy-recipe-id');
+  });
+});

packages/frontend/src/lib/RecipeStatus.svelte

@@ -7,12 +7,12 @@ import { Spinner } from '@podman-desktop/ui-svelte';
 import { studioClient } from '/@/utils/client';
 
 export let recipe: Recipe;
-export let localPath: LocalRepository | undefined;
+export let localRepository: LocalRepository | undefined;
 
 let loading: boolean = false;
 
 function onClick(): void {
-  if (loading || localPath) return;
+  if (loading || localRepository) return;
   loading = true;
 
   studioClient
@@ -31,12 +31,16 @@ function onClick(): void {
     on:click="{onClick}"
     disabled="{loading}"
     class="border-2 justify-center relative rounded border-dustypurple-700 text-dustypurple-700 hover:bg-charcoal-800 hover:text-dustypurple-600 w-10 p-2 text-center cursor-pointer flex flex-row">
-    {#if localPath}
-      <Fa size="sm" icon="{faCircleChevronDown}" />
+    {#if localRepository}
+      <div aria-label="chevron down icon">
+        <Fa size="sm" icon="{faCircleChevronDown}" />
+      </div>
     {:else if loading}
       <Spinner size="1em" />
     {:else}
-      <Fa size="sm" icon="{faDownload}" />
+      <div aria-label="download icon">
+        <Fa size="sm" icon="{faDownload}" />
+      </div>
     {/if}
   </button>
 {/key}

packages/frontend/src/lib/RecipesCard.spec.ts

@@ -18,9 +18,22 @@
 
 import '@testing-library/jest-dom/vitest';
 import { render, screen } from '@testing-library/svelte';
-import { expect, test } from 'vitest';
+import { expect, test, vi } from 'vitest';
 import RecipesCard from '/@/lib/RecipesCard.svelte';
 
+vi.mock('../utils/client', async () => ({
+  studioClient: {},
+}));
+
+vi.mock('../stores/localRepositories', () => ({
+  localRepositories: {
+    subscribe: (f: (msg: any) => void) => {
+      f([]);
+      return () => {};
+    },
+  },
+}));
+
 test('recipes card without recipes should display empty message', async () => {
   render(RecipesCard, {
     recipes: [],

packages/frontend/src/pages/Recipes.spec.ts

@@ -30,6 +30,19 @@ vi.mock('/@/stores/catalog', async () => {
   };
 });
 
+vi.mock('../utils/client', async () => ({
+  studioClient: {},
+}));
+
+vi.mock('../stores/localRepositories', () => ({
+  localRepositories: {
+    subscribe: (f: (msg: any) => void) => {
+      f([]);
+      return () => {};
+    },
+  },
+}));
+
 beforeEach(() => {
   vi.resetAllMocks();
   const catalog: ApplicationCatalog = {