refactor: adapt unit tests

Signed-off-by: Philippe Martin <[email protected]>
containers · Mar 2, 2024 · 180fc26 · 180fc26
1 parent b2ffb31
commit 180fc26
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/packages/renderer/src/lib/preferences/PreferencesCliTool.spec.ts b/packages/renderer/src/lib/preferences/PreferencesCliTool.spec.ts
@@ -82,7 +82,7 @@ suite('CLI Tool item', () => {
  render(PreferencesCliTool, {
  cliTool: cliToolInfoItem1,
  });
- const nameElement = screen.getByLabelText('cli-name');
+ const nameElement = screen.getByLabelText('title');
  expect(nameElement).toBeDefined();
  expect(nameElement.textContent).equal(cliToolInfoItem1.name);
  const registeredByElement = screen.getByLabelText('cli-registered-by');
@@ -101,7 +101,7 @@ suite('CLI Tool item', () => {
  render(PreferencesCliTool, {
  cliTool: cliToolInfoItem2,
  });
- const nameElement = screen.getByLabelText('cli-name');
+ const nameElement = screen.getByLabelText('title');
  expect(nameElement).toBeDefined();
  expect(nameElement.textContent).equal(cliToolInfoItem2.name);
  const registeredByElement = screen.getByLabelText('cli-registered-by');
@@ -122,7 +122,7 @@ suite('CLI Tool item', () => {
  render(PreferencesCliTool, {
  cliTool: cliToolInfoItem3,
  });
- const nameElement = screen.getByLabelText('cli-name');
+ const nameElement = screen.getByLabelText('title');
  expect(nameElement).toBeDefined();
  expect(nameElement.textContent).equal(cliToolInfoItem3.name);
  const registeredByElement = screen.getByLabelText('cli-registered-by');

diff --git a/packages/renderer/src/lib/preferences/PreferencesCliToolsRendering.spec.ts b/packages/renderer/src/lib/preferences/PreferencesCliToolsRendering.spec.ts
@@ -20,7 +20,7 @@
 
 import '@testing-library/jest-dom/vitest';
 import { within } from '@testing-library/dom';
-import { afterEach, beforeAll, expect, suite, test, vi } from 'vitest';
+import { afterEach, beforeEach, expect, suite, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import { cliToolInfos } from '/@/stores/cli-tools';
 import type { CliToolInfo } from '../../../../main/src/plugin/api/cli-tool-info';
@@ -102,7 +102,7 @@ suite('CLI Tool Prefernces page shows', () => {
  });
  }
 
- beforeAll(() => {
+ beforeEach(async () => {
  cliToolInfos.set(cliTools);
  render(PreferencesCliToolsRendering, {});
  const cliToolsTable = screen.getByRole('table', { name: 'cli-tools' });
@@ -114,7 +114,7 @@ suite('CLI Tool Prefernces page shows', () => {
  });
 
  test('tool`s name', () => {
- validatePropertyPresentation('cli-name', toolInfo => toolInfo.name);
+ validatePropertyPresentation('title', toolInfo => toolInfo.name);
  });
 
  test('extension`s name that registered the tool', () => {
@@ -130,12 +130,12 @@ suite('CLI Tool Prefernces page shows', () => {
  });
 
  test('tool`s logo is not shown if images.icon property is not present or images property is empty', () => {
- expect(within(cliToolRows[0]).queryAllByLabelText('cli-logo').length).equals(0);
- expect(within(cliToolRows[1]).queryAllByLabelText('cli-logo').length).equals(0);
+ expect(within(cliToolRows[0]).queryAllByLabelText('logo').length).equals(0);
+ expect(within(cliToolRows[1]).queryAllByLabelText('logo').length).equals(0);
  });
 
  test('tool`s logo is shown when images.icon property is present', () => {
- expect(within(cliToolRows[2]).getAllByLabelText('cli-logo').length).equals(1);
+ expect(within(cliToolRows[2]).getAllByLabelText('logo').length).equals(1);
  });
 
  test('test tools version is shown', () => {

diff --git a/packages/renderer/src/lib/ui/HorizontalCard.svelte b/packages/renderer/src/lib/ui/HorizontalCard.svelte
@@ -6,19 +6,19 @@ export let icon: string | { light: string; dark: string } | undefined = undefine
 
 <div role="row" class="bg-charcoal-600 mb-5 rounded-md p-3 flex flex-col" aria-label="{label}">
  <div class="divide-x divide-gray-900 flex flex-row">
- <div role="region" aria-label="Title">
+ <div role="region" aria-label="Title Region">
  <!-- left col: icon/name + actions -->
  <div class="min-w-[170px] max-w-[200px]">
  <div class="flex">
  {#if icon}
  {#if typeof icon === 'string'}
- <img src="{icon}" alt="{title}" class="max-w-[40px] max-h-[40px] h-full" />
+ <img src="{icon}" alt="{title}" aria-label="logo" class="max-w-[40px] max-h-[40px] h-full" />
  <!-- TODO check theme used for image, now use dark by default -->
  {:else}
  <img src="{icon.dark}" alt="{title}" aria-label="logo" class="max-w-[40px]" />
  {/if}
  {/if}
- <span class="my-auto text-gray-400 ml-3 break-words">{title}</span>
+ <span class="my-auto text-gray-400 ml-3 break-words" aria-label="title">{title}</span>
  </div>
  <div class="text-center mt-10">
  <slot name="actions" />