test(color-picker-web): refactor snapshots and tests for improved structure

Author: samuelreichert

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

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { act, render, RenderResult } from "@testing-library/react";
+import { render, RenderResult } from "@testing-library/react";
 import userEvent, { UserEvent } from "@testing-library/user-event";
 import { createElement } from "react";
 import { ColorPicker, ColorPickerProps } from "../ColorPicker";
@@ -28,33 +28,6 @@ describe("ColorPicker", () => {
         return render(<ColorPicker {...colorPickerProps} {...configs} />);
     }
 
-    it("renders the structure correctly", () => {
-        const colorPickerComponent = renderColorPicker();
-
-        expect(colorPickerComponent.asFragment()).toMatchSnapshot();
-    });
-
-    it("that is disabled renders with the structure", () => {
-        const colorPickerComponent = renderColorPicker({ disabled: true });
-        expect(colorPickerComponent.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders picker with pre-defined default colors", () => {
-        const colorPickerComponent = renderColorPicker();
-
-        act(() => {
-            colorPickerComponent.rerender(
-                <ColorPicker
-                    {...colorPickerProps}
-                    mode="inline"
-                    defaultColors={[{ color: "#2CCCE4" }, { color: "#555555" }]}
-                />
-            );
-        });
-
-        expect(colorPickerComponent.asFragment()).toMatchSnapshot();
-    });
-
     it("should handle on change event", async () => {
         const { getByTitle } = renderColorPicker({
             type: "block",

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

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { render, RenderResult } from "@testing-library/react";
+import { act, render, RenderResult } from "@testing-library/react";
 import { createElement } from "react";
 import { ColorPicker, ColorPickerProps } from "../ColorPicker";
 
@@ -29,6 +29,33 @@ describe("ColorPicker", () => {
         return render(<ColorPicker {...colorPickerProps} {...configs} />);
     }
 
+    it("renders the structure correctly", () => {
+        const colorPickerComponent = renderColorPicker();
+
+        expect(colorPickerComponent.asFragment()).toMatchSnapshot();
+    });
+
+    it("that is disabled renders with the structure", () => {
+        const colorPickerComponent = renderColorPicker({ disabled: true });
+        expect(colorPickerComponent.asFragment()).toMatchSnapshot();
+    });
+
+    it("renders picker with pre-defined default colors", () => {
+        const colorPickerComponent = renderColorPicker();
+
+        act(() => {
+            colorPickerComponent.rerender(
+                <ColorPicker
+                    {...colorPickerProps}
+                    mode="inline"
+                    defaultColors={[{ color: "#2CCCE4" }, { color: "#555555" }]}
+                />
+            );
+        });
+
+        expect(colorPickerComponent.asFragment()).toMatchSnapshot();
+    });
+
     describe("with a mode as", () => {
         it("popover or input renders with the structure", () => {
             const colorPickerComponent = renderColorPicker({ mode: "popover" });

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

@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ColorPicker renders picker with pre-defined default colors 1`] = `
+<DocumentFragment>
+  <div
+    class="widget-color-picker widget-color-picker-picker"
+  />
+</DocumentFragment>
+`;
+
+exports[`ColorPicker renders the structure correctly 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>
+`;
+
+exports[`ColorPicker that is disabled renders with the structure 1`] = `
+<DocumentFragment>
+  <div
+    class="widget-color-picker widget-color-picker-picker widget-color-picker-disabled"
+  >
+    <button
+      class="btn disabled"
+    >
+      <div
+        class="widget-color-picker-inner"
+        style="background: rgb(0, 0, 0);"
+      />
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`ColorPicker with a mode as inline renders with the structure 1`] = `
 <DocumentFragment>
   <div