fix: remove path from recipe details (#2053)

* fix: remove path from recipe details Fixes #1980 Signed-off-by: Jeff MAURY <[email protected]>
containers · Nov 6, 2024 · 7c2b7f4 · 7c2b7f4
1 parent 85d0968
commit 7c2b7f4
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 14 deletions.
diff --git a/packages/frontend/src/lib/RecipeCard.spec.ts b/packages/frontend/src/lib/RecipeCard.spec.ts
@@ -0,0 +1,94 @@
+/**********************************************************************
+ * 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 { vi, test, expect, beforeEach } from 'vitest';
+import { screen, render } from '@testing-library/svelte';
+import { findLocalRepositoryByRecipeId } from '/@/utils/localRepositoriesUtils';
+import RecipeCard from './RecipeCard.svelte';
+import { writable, type Writable } from 'svelte/store';
+import type { LocalRepository } from '@shared/src/models/ILocalRepository';
+import { localRepositories } from '../stores/localRepositories';
+
+vi.mock('/@/utils/localRepositoriesUtils', () => ({
+  findLocalRepositoryByRecipeId: vi.fn(),
+}));
+
+vi.mock('../stores/localRepositories', () => ({
+  localRepositories: {
+    subscribe: vi.fn(),
+    unsubscribe: vi.fn(),
+  },
+}));
+
+vi.mock('../utils/client', async () => {
+  return {
+    studioClient: {},
+  };
+});
+
+const mockLocalRepositories: Writable<LocalRepository[]> = writable([]);
+
+const recipe = {
+  id: 'recipe 1',
+  name: 'Recipe 1',
+  readme: 'readme 1',
+  categories: [],
+  recommended: ['model1', 'model2'],
+  description: 'description 1',
+  repository: 'repo 1',
+};
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  vi.mocked(localRepositories).subscribe.mockImplementation(run => mockLocalRepositories.subscribe(run));
+});
+
+test('recipe name and description', async () => {
+  // eslint-disable-next-line sonarjs/publicly-writable-directories
+  vi.mocked(findLocalRepositoryByRecipeId).mockReturnValue({ path: 'recipe1', sourcePath: '/tmp/recipe1', labels: {} });
+  render(RecipeCard, {
+    recipe,
+  });
+
+  const name = screen.queryByLabelText('Recipe 1 name');
+  expect(name).toBeInTheDocument();
+
+  const description = screen.queryByLabelText('Recipe 1 description');
+  expect(description).toBeInTheDocument();
+
+  const reference = screen.queryByLabelText('Recipe 1 ref');
+  expect(reference).not.toBeInTheDocument();
+});
+
+test('recipe name, description and reference', async () => {
+  // eslint-disable-next-line sonarjs/publicly-writable-directories
+  vi.mocked(findLocalRepositoryByRecipeId).mockReturnValue({ path: 'recipe1', sourcePath: '/tmp/recipe1', labels: {} });
+  render(RecipeCard, {
+    recipe: { ...recipe, ref: 'myref' },
+  });
+
+  const name = screen.queryByLabelText('Recipe 1 name');
+  expect(name).toBeInTheDocument();
+
+  const description = screen.queryByLabelText('Recipe 1 description');
+  expect(description).toBeInTheDocument();
+
+  const reference = screen.queryByLabelText('Recipe 1 ref');
+  expect(reference).toBeInTheDocument();
+});
diff --git a/packages/frontend/src/lib/RecipeCard.svelte b/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, faFolder } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import Fa from 'svelte-fa';
 import { localRepositories } from '../stores/localRepositories';
 import { findLocalRepositoryByRecipeId } from '/@/utils/localRepositoriesUtils';
@@ -27,8 +27,9 @@ function handleClick(): void {
     <div class="flex flex-row text-base grow">
       <!-- left column -->
       <div class="flex flex-col grow">
-        <span class="text-[var(--pd-content-card-header-text)]">{recipe.name}</span>
-        <span class="text-sm text-[var(--pd-content-card-text)]">{recipe.description}</span>
+        <span class="text-[var(--pd-content-card-header-text)]" aria-label="{recipe.name} name">{recipe.name}</span>
+        <span class="text-sm text-[var(--pd-content-card-text)]" aria-label="{recipe.name} description"
+          >{recipe.description}</span>
       </div>
 
       <!-- right column -->
@@ -37,23 +38,13 @@ function handleClick(): void {
       </div>
     </div>
 
-    {#if localPath}
-      <div
-        class="bg-[var(--pd-label-bg)] text-[var(--pd-label-text)] max-w-full rounded-md p-2 mb-2 flex flex-row w-min h-min text-sm text-nowrap items-center">
-        <Fa class="mr-2" icon={faFolder} />
-        <span class="overflow-x-hidden text-ellipsis max-w-full">
-          {localPath.path}
-        </span>
-      </div>
-    {/if}
-
     <!-- footer -->
     <div class="flex flex-row">
       <!-- version -->
       <div
         class="flex-grow text-[var(--pd-content-card-text)] opacity-50 whitespace-nowrap overflow-x-hidden text-ellipsis">
         {#if recipe.ref}
-          <span>{recipe.ref}</span>
+          <span aria-label="{recipe.name} ref">{recipe.ref}</span>
         {/if}
       </div>