From 15fffbce5d22a33b6e81da584700931a1c1eb86a Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Tue, 6 Dec 2022 10:14:13 +1100
Subject: [PATCH] PaletteEdit: add changelog (#46095)

* Initial commit:
- Add changelog for changes merged in #45681
- Test case for Popover

* Change log entry

* Formatting

* Changelog formatting
Relying on existing control aria labels to test for the presence of gradient and color pickers rather than the container.

* Remove unnecessary async function dec

* Export no longer required

* Testing async queries using findByLabelText because the CI tests are failing (not local)

* Let's try this.

* Let's try this.

* What about this?

* Why not

* And so it continues

* Removing tests so we can debug them separately

* Reinstate test for color only. Gradient needs some async magic
---
 packages/components/CHANGELOG.md              | 12 +++++----
 .../components/src/palette-edit/test/index.js | 26 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9e9b804346b62c..833519075ccba7 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -22,8 +22,9 @@
 -   `InputControl`, `NumberControl`, `UnitControl`: Add `help` prop for additional description ([#45931](https://github.com/WordPress/gutenberg/pull/45931)).
 -   `BorderControl`, `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#45985](https://github.com/WordPress/gutenberg/pull/45985)).
 -   `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)).
--   `ResizableBox`: Prevent unnecessary paint on resize handles ([#46196](https://github.com/WordPress/gutenberg/pull/46196))
--   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201))
+-   `ResizableBox`: Prevent unnecessary paint on resize handles ([#46196](https://github.com/WordPress/gutenberg/pull/46196)).
+-   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201)).
+-   `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681).
 
 ### Experimental
 
@@ -31,11 +32,12 @@
 
 ### Internal
 
--   `useControlledValue`: let TypeScript infer the return type ([#46164](https://github.com/WordPress/gutenberg/pull/46164))
--   `LinkedButton`: remove unnecessary `span` tag ([#46063](https://github.com/WordPress/gutenberg/pull/46063))
+-   `useControlledValue`: let TypeScript infer the return type ([#46164](https://github.com/WordPress/gutenberg/pull/46164)).
+-   `LinkedButton`: remove unnecessary `span` tag ([#46063](https://github.com/WordPress/gutenberg/pull/46063)).
 -   NumberControl: refactor styles/tests/stories to TypeScript, replace fireEvent with user-event ([#45990](https://github.com/WordPress/gutenberg/pull/45990)).
 -   `useBaseField`: Convert to TypeScript ([#45712](https://github.com/WordPress/gutenberg/pull/45712)).
--  `Dashicon`: Convert to TypeScript ([#45924](https://github.com/WordPress/gutenberg/pull/45924)).
+-   `Dashicon`: Convert to TypeScript ([#45924](https://github.com/WordPress/gutenberg/pull/45924)).
+-   `PaletteEdit`: add follow up changelog for #45681 and tests [#46095](https://github.com/WordPress/gutenberg/pull/46095).
 
 ### Documentation
 
diff --git a/packages/components/src/palette-edit/test/index.js b/packages/components/src/palette-edit/test/index.js
index f13b324efac3de..c08185cc4fc653 100644
--- a/packages/components/src/palette-edit/test/index.js
+++ b/packages/components/src/palette-edit/test/index.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent, screen } from '@testing-library/react';
+
 /**
  * Internal dependencies
  */
-import { getNameForPosition } from '../';
+import PaletteEdit, { getNameForPosition } from '../';
 
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
@@ -61,3 +66,22 @@ describe( 'getNameForPosition', () => {
 		);
 	} );
 } );
+
+describe( 'PaletteEdit', () => {
+	const defaultProps = {
+		gradients: false,
+		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],
+		onChange: jest.fn(),
+		paletteLabel: 'Test label',
+		emptyMessage: 'Test empty message',
+		canOnlyChangeValues: true,
+		canReset: true,
+		slugPrefix: '',
+	};
+
+	it( 'opens color selector for color palettes', () => {
+		render( <PaletteEdit { ...defaultProps } /> );
+		fireEvent.click( screen.getByLabelText( 'Color: Base' ) );
+		expect( screen.getByLabelText( 'Hex color' ) ).toBeInTheDocument();
+	} );
+} );