Issue #64: Add tests.

Esri · Feb 7, 2020 · 6f13f1a · 6f13f1a
1 parent d8b9914
commit 6f13f1a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 17 deletions.
diff --git a/src/components/calcite-color-picker/calcite-color-picker.e2e.ts b/src/components/calcite-color-picker/calcite-color-picker.e2e.ts
@@ -1,19 +1,70 @@
+import { defaults, renders } from "../../tests/commonTests";
+
+import {
+  CSS,
+  DEFAULT_HEX_COLOR,
+  DEFAULT_STORAGE_KEY_PREFIX
+} from "./resources";
 import { newE2EPage } from "@stencil/core/testing";
 
-describe("my-component", () => {
-  it("renders", async () => {
+describe("calcite-color-picker", () => {
+  it("renders", async () => renders("calcite-color-picker"));
+
+  it("has a default color", async () =>
+    defaults("calcite-color-picker", [
+      {
+        propertyName: "value",
+        defaultValue: DEFAULT_HEX_COLOR
+      }
+    ]));
+
+  it("emits color selection change", async () => {
     const page = await newE2EPage();
+    await page.setContent("<calcite-color-picker></calcite-color-picker>");
+    const picker = await page.find("calcite-color-picker");
 
-    await page.setContent("<my-component></my-component>");
-    const element = await page.find("my-component");
-    expect(element).toHaveClass("hydrated");
+    const spy = await picker.spyOnEvent("calciteColorPickerColorChange");
+
+    picker.setProperty("value", "#FF00FF");
+    await page.waitForChanges();
+
+    expect(spy).toHaveReceivedEventTimes(1);
   });
 
-  it.skip("has a default color", async () => {});
+  it("it allows saving unique colors", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-color-picker></calcite-color-picker>`
+    );
 
-  it.skip("emits color selection change", async () => {});
+    const picker = await page.find("calcite-color-picker");
+    const saveColor = await page.find(
+      `calcite-color-picker >>> .${CSS.saveColor}`
+    );
+    await saveColor.click();
 
-  it.skip("uses local storage to keep colors", async () => {});
+    const color1 = "#FF00FF";
+    const color2 = "#BEEFEE";
 
-  it.skip("uses local storage to keep colors", async () => {});
+    picker.setProperty("value", color1);
+    await page.waitForChanges();
+    await saveColor.click();
+
+    picker.setProperty("value", color2);
+    await page.waitForChanges();
+    await saveColor.click();
+
+    picker.setProperty("value", color1);
+    await page.waitForChanges();
+    await saveColor.click();
+
+    picker.setProperty("value", color2);
+    await page.waitForChanges();
+    await saveColor.click();
+
+    const savedColors = await page.findAll(
+      `calcite-color-picker >>> .${CSS.savedColors} calcite-color-swatch`
+    );
+    expect(savedColors).toHaveLength(3);
+  });
 });
diff --git a/src/components/calcite-color-picker/calcite-color-picker.tsx b/src/components/calcite-color-picker/calcite-color-picker.tsx
@@ -13,7 +13,7 @@ import {
 import Color from "color";
 import { ColorMode } from "../../interfaces/ColorPicker";
 import { Scale, Theme } from "../../interfaces/common";
-import { CSS } from "./resources";
+import { CSS, DEFAULT_HEX_COLOR, DEFAULT_STORAGE_KEY_PREFIX } from "./resources";
 
 // TODO: extract into ColorMode object w/ more details: parts, limits, labels, render()? etc...
 const RGB_LIMITS = {
@@ -61,6 +61,8 @@ const DIMENSIONS = {
   }
 };
 
+const defaultColor = Color(DEFAULT_HEX_COLOR);
+
 @Component({
   tag: "calcite-color-picker",
   styleUrl: "calcite-color-picker.scss",
@@ -165,7 +167,11 @@ export class CalciteColorPicker {
   /**
    * The color value in hex.
    */
-  @Prop() value: string;
+  @Prop() value = defaultColor.hex();
+  @Watch("value")
+  handleColorChange(value): void {
+    this.activeColor = Color(value);
+  }
 
   colorPaletteCanvas: HTMLCanvasElement;
   hueSliderCanvas: HTMLCanvasElement;
@@ -176,14 +182,13 @@ export class CalciteColorPicker {
   //
   //--------------------------------------------------------------------------
 
-  @State() activeColor = Color("#FF00FF");
+  @State() activeColor = defaultColor;
   @Watch("activeColor")
   handleActiveColorChange(): void {
     this.renderCanvasParts();
+    this.calciteColorPickerColorChange.emit();
   }
 
-  @State() spectrumColor = Color("#FF00FF");
-
   @State() dimensions = DIMENSIONS.m;
 
   @State() colorPart0: number;
@@ -246,7 +251,7 @@ export class CalciteColorPicker {
   //--------------------------------------------------------------------------
 
   componentWillLoad(): void {
-    const storageKey = `calcite-color-picker-${this.storageId}`;
+    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
 
     if (this.storageId && localStorage.getItem(storageKey)) {
       this.savedColors = JSON.parse(localStorage.getItem(storageKey));
@@ -440,7 +445,7 @@ export class CalciteColorPicker {
 
     this.savedColors = savedColors;
 
-    const storageKey = `calcite-color-picker-${this.storageId}`;
+    const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
 
     if (this.storageId) {
       localStorage.setItem(storageKey, JSON.stringify(savedColors));

diff --git a/src/components/calcite-color-picker/resources.ts b/src/components/calcite-color-picker/resources.ts
@@ -20,3 +20,6 @@ export const CSS = {
   savedColorsSection: "saved-colors-section",
   saveColor: "save-color"
 };
+
+export const DEFAULT_HEX_COLOR = "#007AC2";
+export const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-picker-";
diff --git a/src/components/calcite-color-swatch/calcite-color-swatch.e2e.ts b/src/components/calcite-color-swatch/calcite-color-swatch.e2e.ts
@@ -2,7 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
 import { CSS } from "./resources";
 import { defaults, reflects, renders } from "../../tests/commonTests";
 
-describe("my-component", () => {
+describe("calcite-color-swatch", () => {
   it("renders", () => renders("calcite-color-swatch"));
 
   it("has defaults", () => defaults("calcite-color-swatch", [