Tests for FormatGroup

src/lib/components/colors/Output.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <ul data-group="output {type}">
-  <li>
+  <li data-testid={`format-${format}`}>
     <CopyButton text={targetColorValue} />
     <span data-color-info="value">{targetColorValue}</span>
     <SupportWarning {format} />

test/js/fixtures.ts

@@ -18,3 +18,9 @@ export const HSL_BLACK: PlainColorObject = {
 };
 
 export const HSL_WHITE_SERIALIZED = serialize(HSL_WHITE, { inGamut: false });
+
+export const OUT_OF_BOUNDED_GAMUTS: PlainColorObject = {
+  space: ColorSpace.get('oklch'),
+  coords: [1, 1, 1],
+  alpha: 1,
+};

test/js/lib/components/colors/FormatGroup.spec.ts

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/svelte';
+
+import FormatGroup from '$lib/components/colors/FormatGroup.svelte';
+import { FORMAT_GROUPS } from '$src/lib/constants';
+import { HSL_WHITE, OUT_OF_BOUNDED_GAMUTS } from '$test/fixtures';
+
+describe('FormatGroup', () => {
+  it('renders selected group', () => {
+    const GROUP_NAME = 'sRGB Formats';
+    const { getByTestId, getByText } = render(FormatGroup, {
+      type: 'bg',
+      color: HSL_WHITE,
+      name: GROUP_NAME,
+      formats: FORMAT_GROUPS[GROUP_NAME]!,
+    });
+
+    expect(getByText(GROUP_NAME)).toBeVisible();
+    FORMAT_GROUPS[GROUP_NAME]?.forEach((format) => {
+      expect(getByTestId(`format-${format}`)).toBeVisible();
+    });
+  });
+
+  it('renders warning if out of gamut', () => {
+    const GROUP_NAME = 'sRGB Formats';
+    const { getByTestId, getByText } = render(FormatGroup, {
+      type: 'bg',
+      color: OUT_OF_BOUNDED_GAMUTS,
+      name: GROUP_NAME,
+      formats: FORMAT_GROUPS[GROUP_NAME]!,
+    });
+
+    expect(getByText(GROUP_NAME)).toBeVisible();
+    FORMAT_GROUPS[GROUP_NAME]?.forEach((format) => {
+      expect(getByTestId(`format-${format}`)).toBeVisible();
+    });
+    expect(
+      getByText('Selected color is outside the sRGB gamut.'),
+    ).toBeVisible();
+  });
+});