fix: refresh component when field is updated

fixes podman-desktop#3524 Signed-off-by: Florent Benoit <[email protected]>
benoitf · Aug 14, 2023 · 5277096 · 5277096
1 parent 87f9f62
commit 5277096
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/packages/renderer/src/lib/ui/AuditMessageBox.spec.ts b/packages/renderer/src/lib/ui/AuditMessageBox.spec.ts
@@ -72,3 +72,43 @@ test('Should display error message', async () => {
   expect(errMessage).toBeInTheDocument();
   expect(errMessage).toHaveTextContent('Dummy error message');
 });
+
+test('Should update data when audit result is updated', async () => {
+  const dummyResult = {
+    records: [
+      {
+        type: 'error',
+        record: 'Dummy error message',
+      } as AuditRecord,
+    ],
+  } as AuditResult;
+  const renderComponent = render(AuditMessageBox, { auditResult: dummyResult });
+  const errMessage = screen.getByLabelText('error');
+
+  expect(errMessage).toBeInTheDocument();
+  expect(errMessage).toHaveTextContent('Dummy error message');
+
+  // now we update the audit result field
+  renderComponent.component.$set({
+    auditResult: {
+      records: [
+        {
+          type: 'info',
+          record: 'Dummy info message',
+        },
+      ],
+    },
+  });
+
+  // wait for tick
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  const afterUpdateError = screen.queryByLabelText('error');
+  expect(afterUpdateError).not.toBeInTheDocument();
+
+  // check the info message now
+  const infoMessage = screen.getByLabelText('info');
+
+  expect(infoMessage).toBeInTheDocument();
+  expect(infoMessage).toHaveTextContent('Dummy info message');
+});
diff --git a/packages/renderer/src/lib/ui/AuditMessageBox.svelte b/packages/renderer/src/lib/ui/AuditMessageBox.svelte
@@ -2,19 +2,16 @@
 import Fa from 'svelte-fa/src/fa.svelte';
 import { faTriangleExclamation, faCircleInfo, faXmarkCircle } from '@fortawesome/free-solid-svg-icons';
 import type { AuditRecord, AuditResult } from '@podman-desktop/api';
-import { onMount } from 'svelte';
 
 export let auditResult: AuditResult;
 
 let infoRecords: AuditRecord[];
 let warningRecords: AuditRecord[];
 let errorRecords: AuditRecord[];
 
-onMount(async () => {
-  infoRecords = auditResult?.records.filter(record => record.type === 'info');
-  warningRecords = auditResult?.records.filter(record => record.type === 'warning');
-  errorRecords = auditResult?.records.filter(record => record.type === 'error');
-});
+$: infoRecords = auditResult?.records.filter(record => record.type === 'info');
+$: warningRecords = auditResult?.records.filter(record => record.type === 'warning');
+$: errorRecords = auditResult?.records.filter(record => record.type === 'error');
 </script>
 
 {#if errorRecords && errorRecords.length > 0}