Also test rendered children of PanelColorSettings in snapshot tests

WordPress · Oct 17, 2018 · 6719168 · 6719168
1 parent 42b4476
commit 6719168
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 0 deletions.
diff --git a/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap b/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -21,6 +21,42 @@ exports[`PanelColorSettings matches the snapshot 1`] = `
 />
 `;
 
+exports[`PanelColorSettings matches the snapshot 2`] = `
+<PanelBody
+  className="editor-panel-color-settings"
+  title={
+    <span
+      className="editor-panel-color-settings__panel-title"
+    >
+      Test Title
+      <ColorIndicator
+        aria-label="(border color: #000)"
+        colorValue="#000"
+      />
+      <ColorIndicator
+        aria-label="(background color: #111)"
+        colorValue="#111"
+      />
+    </span>
+  }
+>
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    key="0"
+    label="border color"
+    onChange={[Function]}
+    value="#000"
+  />
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    key="1"
+    label="background color"
+    onChange={[Function]}
+    value="#111"
+  />
+</PanelBody>
+`;
+
 exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 1`] = `
 <Component
   colorSettings={
@@ -50,6 +86,52 @@ exports[`PanelColorSettings should render a color panel if at least one setting
 />
 `;
 
+exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 2`] = `
+<PanelBody
+  className="editor-panel-color-settings"
+  title={
+    <span
+      className="editor-panel-color-settings__panel-title"
+    >
+      Test Title
+      <ColorIndicator
+        aria-label="(border color: #000)"
+        colorValue="#000"
+      />
+      <ColorIndicator
+        aria-label="(background color: #111)"
+        colorValue="#111"
+      />
+    </span>
+  }
+>
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={
+      Array [
+        Object {
+          "color": "#ff0000",
+          "name": "Red",
+          "slug": "red",
+        },
+      ]
+    }
+    disableCustomColors={true}
+    key="0"
+    label="border color"
+    onChange={[Function]}
+    value="#000"
+  />
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    disableCustomColors={true}
+    key="1"
+    label="background color"
+    onChange={[Function]}
+    value="#111"
+  />
+</PanelBody>
+`;
+
 exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 1`] = `
 <Component
   colorSettings={
@@ -72,3 +154,41 @@ exports[`PanelColorSettings should render a color panel if at least one setting
   title="Test Title"
 />
 `;
+
+exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 2`] = `
+<PanelBody
+  className="editor-panel-color-settings"
+  title={
+    <span
+      className="editor-panel-color-settings__panel-title"
+    >
+      Test Title
+      <ColorIndicator
+        aria-label="(border color: #000)"
+        colorValue="#000"
+      />
+      <ColorIndicator
+        aria-label="(background color: #111)"
+        colorValue="#111"
+      />
+    </span>
+  }
+>
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    disableCustomColors={true}
+    key="0"
+    label="border color"
+    onChange={[Function]}
+    value="#000"
+  />
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    disableCustomColors={false}
+    key="1"
+    label="background color"
+    onChange={[Function]}
+    value="#111"
+  />
+</PanelBody>
+`;
diff --git a/packages/editor/src/components/panel-color-settings/test/index.js b/packages/editor/src/components/panel-color-settings/test/index.js
@@ -31,6 +31,7 @@ describe( 'PanelColorSettings', () => {
 		);
 
 		expect( wrapper ).toMatchSnapshot();
+		expect( wrapper.dive() ).toMatchSnapshot();
 	} );
 
 	it( 'should not render anything if there are no colors to choose', () => {
@@ -80,6 +81,7 @@ describe( 'PanelColorSettings', () => {
 		);
 		expect( wrapper.type() ).not.toBeNull();
 		expect( wrapper ).toMatchSnapshot();
+		expect( wrapper.dive() ).toMatchSnapshot();
 	} );
 
 	it( 'should render a color panel if at least one setting specifies some colors to choose', () => {
@@ -109,6 +111,7 @@ describe( 'PanelColorSettings', () => {
 		);
 		expect( wrapper.type() ).not.toBeNull();
 		expect( wrapper ).toMatchSnapshot();
+		expect( wrapper.dive() ).toMatchSnapshot();
 	} );
 
 	it( 'should not render anything if none of the setting panels has colors to choose', () => {