Fix fuzzy matcher, but reduce to 2 decimal places

js-api-spec/setup.ts

@@ -355,6 +355,13 @@ const toLooselyEqual = (received: unknown, actual: number) => {
   };
 };
 
+// The max distance two Sass numbers can be from each another before they're
+// considered different (2 decimals).
+//
+// Uses ** instead of Math.pow() for constant folding.
+// TODO: Ideally this should be more precise, but ColorJS does not always match.
+const epsilon = 10 ** -2;
+
 const toLooselyEqualColor = (received: unknown, actual: sass.SassColor) => {
   function isSassColor(item: unknown): item is sass.SassColor {
     return !!(item as sass.SassColor).assertColor();
@@ -369,15 +376,17 @@ const toLooselyEqualColor = (received: unknown, actual: sass.SassColor) => {
       if (actualChannel !== null) unequalIndices.push(index);
     } else if (
       actualChannel === null ||
-      Math.round((channel * 10) ^ 5) !== Math.round((actualChannel * 10) ^ 5)
+      Math.abs(channel - actualChannel) > epsilon
     ) {
       unequalIndices.push(index);
     }
   });
+  const plural = unequalIndices.length !== 1;
+  const indexMessage = `${plural ? 'indices' : 'index'} ${unequalIndices.join(
+    ','
+  )}`;
   return {
-    message: `expected ${received} to loosely equal ${actual} to 5 decimal places, but indices ${unequalIndices.join(
-      ','
-    )} differ`,
+    message: `expected ${received} to loosely equal ${actual}, but channels at ${indexMessage} differ`,
     pass: unequalIndices.length === 0,
   };
 };

js-api-spec/value/color/color-4-conversions.test.ts

@@ -195,7 +195,7 @@ describe('Color 4 SassColors Conversions', () => {
         space.gamutExamples.forEach(([input, output]) => {
           it(`in own space, ${input} -> ${output}`, () => {
             const res = space.constructor(...input).toGamut();
-            expect(res).toEqualWithHash(space.constructor(...output));
+            expect(res).toLooselyEqualColor(space.constructor(...output));
           });
         });
       });

js-api-spec/value/color/color-4-nonparametizable.test.ts

@@ -16,9 +16,8 @@ import {skipForImpl} from '../../utils';
 import * as constructors from './constructors';
 
 describe('Color 4 SassColors Non-parametizable', () => {
-  // TODO: Waiting on a fix for:
-  // https://github.com/LeaVerou/color.js/issues/154
-  // PR: https://github.com/LeaVerou/color.js/pull/344
+  // TODO: Waiting on new ColorJS release to fix `toGamut` mapping:
+  // https://github.com/LeaVerou/color.js/pull/344
   skipForImpl('sass-embedded', () => {
     it('toGamut with space', () => {
       const cases: [SassColor, KnownColorSpace, SassColor][] = [
@@ -42,7 +41,7 @@ describe('Color 4 SassColors Non-parametizable', () => {
         ],
       ];
       cases.forEach(([input, space, output]) => {
-        expect(input.toGamut(space)).toEqualWithHash(output);
+        expect(input.toGamut(space)).toLooselyEqualColor(output);
       });
     });
   });