Add full tests for Color and Swatch classes (#259)

Author: bheston

change/@adaptive-web-adaptive-ui-e17e5bd7-2c91-4d33-a2cf-7554ac72eb6a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add full tests for Color and Swatch classes",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui/src/core/color/color.spec.ts

@@ -1,6 +1,7 @@
 import chai from "chai";
 import { Color } from "./color.js";
 import { type Rgb } from "culori/fn";
+import { _white } from "./utilities/color-constants.js";
 
 const { expect } = chai;
 
@@ -43,4 +44,28 @@ describe("Color", () => {
         expect(color.color).to.deep.equal(opacityColor);
         expect(color.toColorString()).to.equal(opacityRgba);
     });
+
+    it("should provide the correct relative luminance", () => {
+        const color = Color.from(greyObject);
+
+        expect(color.relativeLuminance).to.approximately(0.21, 0.01);
+    });
+
+    it("should provide a string representation", () => {
+        const color = Color.from(greyObject);
+
+        expect(color.toString()).to.equal(greyHex);
+    });
+
+    it("should provide a css representation", () => {
+        const color = Color.from(greyObject);
+
+        expect(color.createCSS()).to.equal(greyHex);
+    });
+
+    it("should provide its contrast with another value", () => {
+        const color = Color.from(greyObject);
+
+        expect(color.contrast(_white)).to.approximately(3.9, 0.1);
+    });
 });

packages/adaptive-ui/src/core/color/swatch.spec.ts

@@ -1,6 +1,8 @@
 import chai from "chai";
+import { Color } from "./color.js";
 import { Swatch } from "./swatch.js";
 import { type Rgb } from "culori/fn";
+import { _white } from "./utilities/color-constants.js";
 
 const { expect } = chai;
 
@@ -12,6 +14,9 @@ const opacityColor: Rgb = { mode: "rgb", r: 0.2, g: 0.4, b: 0.6, alpha: 0.501960
 const opacityHex = "#33669980";
 const opacityRgba = "rgba(51, 102, 153, 0.5)";
 
+const lightGreyObject = { r: 0.75, g: 0.75, b: 0.75, alpha: undefined };
+const darkGreyObject = { r: 0.25, g: 0.25, b: 0.25, alpha: undefined };
+
 describe("Swatch", () => {
     it("should create a Swatch from the provided object", () => {
         const swatch = Swatch.from(greyObject);
@@ -29,7 +34,16 @@ describe("Swatch", () => {
         expect(swatch.toColorString()).to.equal(greyHex);
     });
 
-    it("should create a Swatch from the provided hex swatch", () => {
+    it("should create a Swatch from a Color", () => {
+        const color = Color.from(greyObject);
+        const swatch = Swatch.fromColor(color);
+
+        expect(swatch).to.be.instanceof(Swatch);
+        expect(swatch.color).to.deep.equal(greyColor);
+        expect(swatch.toColorString()).to.equal(greyHex);
+    });
+
+    it("should create a Swatch from the provided hex color", () => {
         const swatch = Swatch.parse(greyHex)!;
 
         expect(swatch).to.be.instanceof(Swatch);
@@ -43,4 +57,59 @@ describe("Swatch", () => {
         expect(swatch.color).to.deep.equal(opacityColor);
         expect(swatch.toColorString()).to.equal(opacityRgba);
     });
+
+    it("should create a light Swatch as an overlay", () => {
+        const lightGrey = Swatch.from(lightGreyObject);
+        const grey = Swatch.from(greyObject);
+        const swatch = Swatch.asOverlay(lightGrey, grey)!;
+
+        expect(swatch).to.be.instanceof(Swatch);
+        expect(swatch.color).to.deep.equal({ mode: "rgb", r: 1, g: 1, b: 1, alpha: 0.5 });
+    });
+
+    it("should create a dark Swatch as an overlay", () => {
+        const darkGrey = Swatch.from(darkGreyObject);
+        const grey = Swatch.from(greyObject);
+        const swatch = Swatch.asOverlay(darkGrey, grey)!;
+
+        expect(swatch).to.be.instanceof(Swatch);
+        expect(swatch.color).to.deep.equal({ mode: "rgb", r: 0, g: 0, b: 0, alpha: 0.5 });
+    });
+
+    it("should provide the correct relative luminance", () => {
+        const swatch = Swatch.from(greyObject);
+
+        expect(swatch.relativeLuminance).to.approximately(0.21, 0.01);
+    });
+
+    it("should provide a string representation", () => {
+        const swatch = Swatch.from(greyObject);
+
+        expect(swatch.toString()).to.equal(greyHex);
+    });
+
+    it("should provide a css representation", () => {
+        const swatch = Swatch.from(greyObject);
+
+        expect(swatch.createCSS()).to.equal(greyHex);
+    });
+
+    it("should provide its contrast with another value", () => {
+        const swatch = Swatch.from(greyObject);
+
+        expect(swatch.contrast(_white)).to.approximately(3.9, 0.1);
+    });
+
+    it("should provide a transparent equivalent", () => {
+        const swatch = Swatch.from(greyObject);
+
+        const halfTransparent = swatch.toTransparent(0.5);
+        expect(halfTransparent).to.be.instanceof(Swatch);
+        expect(halfTransparent.color).to.deep.equal(Object.assign(greyColor, { alpha: 0.5 }));
+        expect(halfTransparent.toColorString()).to.equal("rgba(128, 128, 128, 0.5)");
+        expect(halfTransparent.toString()).to.equal("rgba(128, 128, 128, 0.5)");
+        expect(halfTransparent.createCSS()).to.equal("rgba(128, 128, 128, 0.5)");
+        expect(halfTransparent.relativeLuminance).to.approximately(0.21, 0.01);
+        expect(halfTransparent.contrast(_white)).to.approximately(3.9, 0.1);
+    });
 });