From 06bd0f4d722ffc42ab6d614961c56960ad3678aa Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 20:22:09 +0000
Subject: [PATCH] Add no gamut map, tests

---
 src/lib/constants.ts                    |  3 ++-
 src/lib/utils.ts                        |  2 +-
 test/lib/components/GamutSelect.spec.ts | 22 ++++++++++++++++++++++
 test/lib/components/SpaceSelect.spec.ts |  2 +-
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 test/lib/components/GamutSelect.spec.ts

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 36d94e17..638b8d7b 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -26,7 +26,8 @@ export const FORMATS: ColorFormatId[] = [
 
 export type ColorGamutId = 'srgb' | 'p3' | 'rec2020';
 
-export const GAMUTS: { name: string; format: ColorGamutId }[] = [
+export const GAMUTS: { name: string; format: ColorGamutId | null }[] = [
+  { name: 'None', format: null },
   { name: 'sRGB', format: 'srgb' },
   { name: 'P3', format: 'p3' },
   { name: 'Rec2020', format: 'rec2020' },
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e1f77d5f..43fb2c7f 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -47,7 +47,7 @@ export const sliderGradient = ({
   const inGamutSteps: string[] = [];
   const stepWidth = 100 / (gradientSteps.length - 1);
 
-  if (channel === 'alpha') {
+  if (channel === 'alpha' || gamut === null) {
     return gradientSteps.map((c) => display(c)).join(', ');
   }
 
diff --git a/test/lib/components/GamutSelect.spec.ts b/test/lib/components/GamutSelect.spec.ts
new file mode 100644
index 00000000..eadaeb6a
--- /dev/null
+++ b/test/lib/components/GamutSelect.spec.ts
@@ -0,0 +1,22 @@
+import { fireEvent, render } from '@testing-library/svelte';
+import { get } from 'svelte/store';
+
+import Gamut from '$lib/components/GamutSelect.svelte';
+import { gamut, INITIAL_VALUES, reset } from '$lib/stores';
+
+describe('Space', () => {
+  afterEach(() => {
+    reset();
+  });
+
+  it('renders editable gamut select', async () => {
+    const { getByLabelText } = render(Gamut);
+
+    expect(get(gamut)).toBe(INITIAL_VALUES.gamut);
+
+    const select = getByLabelText('Gamut');
+    await fireEvent.change(select, { target: { value: 'rec2020' } });
+
+    expect(get(gamut)).toBe('rec2020');
+  });
+});
diff --git a/test/lib/components/SpaceSelect.spec.ts b/test/lib/components/SpaceSelect.spec.ts
index 8979bc3e..4697278a 100644
--- a/test/lib/components/SpaceSelect.spec.ts
+++ b/test/lib/components/SpaceSelect.spec.ts
@@ -15,7 +15,7 @@ describe('Space', () => {
     expect(get(bg).space.id).toBe(INITIAL_VALUES.format);
     expect(get(fg).space.id).toBe(INITIAL_VALUES.format);
 
-    const select = getByLabelText('Color Format');
+    const select = getByLabelText('Format');
     await fireEvent.change(select, { target: { value: 'hsl' } });
 
     expect(get(bg).space.id).toBe('hsl');