Merge branch '100-copy-colors-to-clipboard' of https://github.com/odd…

…bird/oddcontrast into 100-copy-colors-to-clipboard
oddbird · Sep 27, 2023 · be56d59 · be56d59
2 parents 4a16883 + e54b914
commit be56d59
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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');