fix: update icon image (podman-desktop#8903)

Signed-off-by: Philippe Martin <[email protected]>

packages/renderer/src/lib/appearance/IconImage.spec.ts

@@ -51,6 +51,13 @@ test('Expect valid source and alt text with dark mode', async () => {
   // expect to have valid source
   expect(imageElement).toHaveAttribute('src', 'dark.png');
   expect(imageElement).toHaveAttribute('alt', 'this is alt text');
+
+  await image.rerender({ image: { light: 'light2.png', dark: 'dark2.png' }, alt: 'this is another alt text' });
+  // wait getImage
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  expect(imageElement).toHaveAttribute('src', 'dark2.png');
+  expect(imageElement).toHaveAttribute('alt', 'this is another alt text');
 });
 
 test('Expect valid source and alt text with light mode', async () => {
@@ -67,6 +74,13 @@ test('Expect valid source and alt text with light mode', async () => {
   // expect to have valid source
   expect(imageElement).toHaveAttribute('src', 'light.png');
   expect(imageElement).toHaveAttribute('alt', 'this is alt text');
+
+  await image.rerender({ image: { light: 'light2.png', dark: 'dark2.png' }, alt: 'this is another alt text' });
+  // wait getImage
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  expect(imageElement).toHaveAttribute('src', 'light2.png');
+  expect(imageElement).toHaveAttribute('alt', 'this is another alt text');
 });
 
 test('Expect no alt attribute if missing and default image', async () => {
@@ -86,3 +100,24 @@ test('Expect no alt attribute if missing and default image', async () => {
   // alt should be missing
   expect(imageElement).not.toHaveAttribute('alt');
 });
+
+test('Expect string as image', async () => {
+  const image = render(IconImage, { image: 'image1', alt: 'this is alt text' });
+
+  // wait for image to be loaded
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  // grab image element
+  const imageElement = image.getByRole('img');
+
+  // expect to have valid source
+  expect(imageElement).toHaveAttribute('src', 'image1');
+  expect(imageElement).toHaveAttribute('alt', 'this is alt text');
+
+  await image.rerender({ image: 'image2', alt: 'this is another alt text' });
+  // wait getImage
+  await new Promise(resolve => setTimeout(resolve, 0));
+
+  expect(imageElement).toHaveAttribute('src', 'image2');
+  expect(imageElement).toHaveAttribute('alt', 'this is another alt text');
+});

packages/renderer/src/lib/appearance/IconImage.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-import { onMount } from 'svelte';
-
 import { AppearanceUtil } from './appearance-util';
 
 export let image: string | { light: string; dark: string } | undefined = undefined;
 export let alt: string | undefined = undefined;
 
 let imgSrc: string | undefined = undefined;
 
-onMount(async () => {
-  const appearanceUtil = new AppearanceUtil();
-  imgSrc = await appearanceUtil.getImage(image);
-});
+$: getImgSrc(image);
+
+function getImgSrc(image: string | { light: string; dark: string } | undefined) {
+  new AppearanceUtil().getImage(image).then(s => (imgSrc = s));
+}
 </script>
 
 {#if imgSrc}