Add bug outline icon and add reactivity to CodeSnippet element (#608)

viamrobotics · Dec 17, 2024 · 9186465 · 9186465
1 parent 6f7bdf7
commit 9186465
Show file tree

Hide file tree

Showing 5 changed files with 529 additions and 346 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -61,7 +61,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/svelte": "^4.1.0",
+    "@testing-library/svelte": "^5.2.6",
     "@testing-library/user-event": "^14.5.1",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.3",

diff --git a/packages/core/src/lib/__tests__/code-snippet.spec.ts b/packages/core/src/lib/__tests__/code-snippet.spec.ts
@@ -61,4 +61,20 @@ describe('CodeSnippet', () => {
 
     expect(screen.getByText('This is the caption text.')).toBeInTheDocument();
   });
+
+  it('Re-renders code block when code prop updates', async () => {
+    const { rerender } = render(CodeSnippet, common);
+
+    const initialCode = screen.getByText(common.code);
+    expect(initialCode).toBeInTheDocument();
+
+    const newCode = '{ their: "json" }';
+    await rerender({
+      ...common,
+      code: newCode,
+    });
+    const updatedCode = screen.getByText(newCode);
+    expect(updatedCode).toBeInTheDocument();
+    expect(screen.queryByText(common.code)).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/core/src/lib/code-snippet.svelte b/packages/core/src/lib/code-snippet.svelte
@@ -94,9 +94,11 @@ const copyToClipboard = async () => {
 
   <div class="flex gap-x-4 bg-light p-4">
     <!-- The formatting here is intentional to preserve the formatting of `code` -->
-    <pre
-      class="flex-1 overflow-x-auto"
-      use:highlightCode><code class="language-{language}">{code}</code></pre>
+    {#key code}
+      <pre
+        class="flex-1 overflow-x-auto"
+        use:highlightCode><code class="language-{language}">{code}</code></pre>
+    {/key}
 
     {#if showCopyButton}
       <IconButton

diff --git a/packages/core/src/lib/icon/icons.ts b/packages/core/src/lib/icon/icons.ts
@@ -38,6 +38,7 @@ export const paths = {
   'backup-restore': MDI.mdiBackupRestore,
   'broadcast-off': MDI.mdiBroadcastOff,
   bug: MDI.mdiBug,
+  'bug-outline': MDI.mdiBugOutline,
   broadcast: MDI.mdiBroadcast,
   'card-text-outline': MDI.mdiCardTextOutline,
   'camera-flip-outline': MDI.mdiCameraFlipOutline,