From e54b9142425bc3c5e452b8b08582c98ac8c9fc49 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 26 Sep 2023 14:20:52 -0400
Subject: [PATCH] review

---
 src/lib/components/colors/Header.svelte   |  4 ++--
 src/lib/components/util/CopyButton.svelte |  5 +++--
 test/js/lib/components/CopyButton.spec.ts | 10 ++++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index 1edb0d2f..d955fb52 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -14,8 +14,8 @@
   $: targetSpace = getSpaceFromFormatId(format);
   $: display = serialize($color, { inGamut: false, format });
   $: displayType = type === 'bg' ? 'Background' : 'Foreground';
-  $: editing = false;
-  $: inputValue = '';
+  let editing = false;
+  let inputValue = '';
   let hasError = false;
 
   // When not editing, sync input value with color (e.g. when sliders change)
diff --git a/src/lib/components/util/CopyButton.svelte b/src/lib/components/util/CopyButton.svelte
index 672efbaa..ca174b2c 100644
--- a/src/lib/components/util/CopyButton.svelte
+++ b/src/lib/components/util/CopyButton.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
   import Icon from '$lib/components/util/Icon.svelte';
+
   export let text: string;
   export let size: string | null = null;
 
   let justCopied = false;
   let timeout: ReturnType<typeof setTimeout>;
 
-  function copyOutput() {
+  const copyOutput = () => {
     justCopied = true;
     void navigator.clipboard.writeText(text);
     clearTimeout(timeout);
     timeout = setTimeout(() => {
       justCopied = false;
     }, 1000);
-  }
+  };
 </script>
 
 <button on:click={copyOutput} type="button" data-btn="icon">
diff --git a/test/js/lib/components/CopyButton.spec.ts b/test/js/lib/components/CopyButton.spec.ts
index 15b33f60..566a4324 100644
--- a/test/js/lib/components/CopyButton.spec.ts
+++ b/test/js/lib/components/CopyButton.spec.ts
@@ -6,23 +6,29 @@ describe('Copy Button', () => {
   beforeEach(() => {
     vi.useFakeTimers();
   });
+
   afterEach(() => {
     vi.restoreAllMocks();
   });
+
   it('renders a button', () => {
     const { getByRole } = render(CopyButton, {
       props: { text: 'Copy' },
     });
     const button = getByRole('button');
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
   });
+
   it('copies content', async () => {
     const spy = vi.spyOn(navigator.clipboard, 'writeText');
     const { getByRole } = render(CopyButton, {
       props: { text: 'Copy' },
     });
     const button = getByRole('button');
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+
     await fireEvent.click(button);
 
     expect(spy).toHaveBeenCalledWith('Copy');
@@ -33,9 +39,13 @@ describe('Copy Button', () => {
       props: { text: 'Copy' },
     });
     const button = getByRole('button');
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+
     await fireEvent.click(button);
+
     expect(button.firstChild).toHaveAttribute('data-icon', 'copy');
+
     vi.runAllTimers();
     await waitFor(() => {
       expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');