test(color-picker-web): refactor tests to improve snapshot readability

Author: samuelreichert

packages/pluggableWidgets/color-picker-web/src/components/__tests__/ColorPicker.spec.tsx

@@ -4,14 +4,6 @@ import userEvent, { UserEvent } from "@testing-library/user-event";
 import { createElement } from "react";
 import { ColorPicker, ColorPickerProps } from "../ColorPicker";
 
-jest.mock("react-color/lib", () => {
-    const actualModule = jest.requireActual("react-color/lib");
-    return {
-        ...actualModule,
-        SketchPicker: () => <div className="sketch-picker" />
-    };
-});
-
 describe("ColorPicker", () => {
     let colorPickerProps: ColorPickerProps;
     let user: UserEvent;
@@ -44,7 +36,7 @@ describe("ColorPicker", () => {
 
     it("that is disabled renders with the structure", () => {
         const colorPickerComponent = renderColorPicker({ disabled: true });
-        expect(colorPickerComponent.asFragment).toMatchSnapshot();
+        expect(colorPickerComponent.asFragment()).toMatchSnapshot();
     });
 
     it("renders picker with pre-defined default colors", () => {
@@ -174,17 +166,4 @@ describe("ColorPicker", () => {
             expect(container.querySelector(".swatches-picker")).toBeInTheDocument();
         });
     });
-
-    describe("with a mode as", () => {
-        it("popover or input renders with the structure", () => {
-            const colorPickerComponent = renderColorPicker({ mode: "popover" });
-
-            expect(colorPickerComponent.asFragment()).toMatchSnapshot();
-        });
-
-        it("inline renders with the structure", () => {
-            const colorPickerComponent = renderColorPicker({ mode: "inline" });
-            expect(colorPickerComponent.asFragment()).toMatchSnapshot();
-        });
-    });
 });

packages/pluggableWidgets/color-picker-web/src/components/__tests__/ColorPickerSnapshots.spec.tsx

@@ -0,0 +1,45 @@
+import "@testing-library/jest-dom";
+import { render, RenderResult } from "@testing-library/react";
+import { createElement } from "react";
+import { ColorPicker, ColorPickerProps } from "../ColorPicker";
+
+jest.mock("react-color/lib", () => ({
+    SketchPicker: "sketch-picker"
+}));
+
+describe("ColorPicker", () => {
+    let colorPickerProps: ColorPickerProps;
+
+    beforeEach(() => {
+        colorPickerProps = {
+            color: "#000000",
+            disabled: false,
+            defaultColors: [],
+            format: "hex",
+            mode: "popover",
+            type: "sketch",
+            onChange: jest.fn(),
+            onColorChange: jest.fn(),
+            id: "color-picker",
+            name: "color picker"
+        };
+    });
+
+    function renderColorPicker(configs: Partial<ColorPickerProps> = {}): RenderResult {
+        return render(<ColorPicker {...colorPickerProps} {...configs} />);
+    }
+
+    describe("with a mode as", () => {
+        it("popover or input renders with the structure", () => {
+            const colorPickerComponent = renderColorPicker({ mode: "popover" });
+
+            expect(colorPickerComponent.asFragment()).toMatchSnapshot();
+        });
+
+        it("inline renders with the structure", () => {
+            const colorPickerComponent = renderColorPicker({ mode: "inline" });
+
+            expect(colorPickerComponent.asFragment()).toMatchSnapshot();
+        });
+    });
+});

packages/pluggableWidgets/color-picker-web/src/components/__tests__/__snapshots__/ColorPicker.spec.tsx.snap

@@ -25,31 +25,13 @@ exports[`ColorPicker renders the structure correctly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ColorPicker that is disabled renders with the structure 1`] = `[Function]`;
-
-exports[`ColorPicker with a mode as inline renders with the structure 1`] = `
-<DocumentFragment>
-  <div
-    class="widget-color-picker widget-color-picker-picker"
-  >
-    <div
-      class=""
-    >
-      <div
-        class="sketch-picker"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`ColorPicker with a mode as popover or input renders with the structure 1`] = `
+exports[`ColorPicker that is disabled renders with the structure 1`] = `
 <DocumentFragment>
   <div
-    class="widget-color-picker widget-color-picker-picker"
+    class="widget-color-picker widget-color-picker-picker widget-color-picker-disabled"
   >
     <button
-      class="btn"
+      class="btn disabled"
     >
       <div
         class="widget-color-picker-inner"

packages/pluggableWidgets/color-picker-web/src/components/__tests__/__snapshots__/ColorPickerSnapshots.spec.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorPicker with a mode as inline renders with the structure 1`] = `
+<DocumentFragment>
+  <div
+    class="widget-color-picker widget-color-picker-picker"
+  >
+    <div
+      class=""
+    >
+      <sketch-picker
+        color="#000000"
+        disablealpha="true"
+        disabled="false"
+        displaycolorpicker="false"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ColorPicker with a mode as popover or input renders with the structure 1`] = `
+<DocumentFragment>
+  <div
+    class="widget-color-picker widget-color-picker-picker"
+  >
+    <button
+      class="btn"
+    >
+      <div
+        class="widget-color-picker-inner"
+        style="background: rgb(0, 0, 0);"
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;