ColorPalette: refine test query (#53704)

* ColorPalette: refine test query

* Improve variables based on review feedback

* Update selectors to classes and remove selectors from non-existent queries

packages/components/src/color-palette/test/index.tsx

@@ -225,6 +225,8 @@ describe( 'ColorPalette', () => {
 
 		render( <ControlledColorPalette /> );
 
+		const { name: colorName, color: colorCode } = EXAMPLE_COLORS[ 0 ];
+
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
 
 		// Click the first unpressed button
@@ -236,24 +238,28 @@ describe( 'ColorPalette', () => {
 		);
 
 		// Confirm the correct color name, color value, and button label are used
-		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].name ) ).toBeVisible();
-		expect( screen.getByText( EXAMPLE_COLORS[ 0 ].color ) ).toBeVisible();
+		expect(
+			screen.getByText( colorName, {
+				selector: '.components-color-palette__custom-color-name',
+			} )
+		).toBeVisible();
+		expect(
+			screen.getByText( colorCode, {
+				selector: '.components-color-palette__custom-color-value',
+			} )
+		).toBeVisible();
 		expect(
 			screen.getByRole( 'button', {
-				name: `Custom color picker. The currently selected color is called "${ EXAMPLE_COLORS[ 0 ].name }" and has a value of "${ EXAMPLE_COLORS[ 0 ].color }".`,
+				name: `Custom color picker. The currently selected color is called "${ colorName }" and has a value of "${ colorCode }".`,
 				expanded: false,
 			} )
 		).toBeInTheDocument();
 
 		// Clear the color, confirm that the relative values are cleared/updated.
 		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
-		expect(
-			screen.queryByText( EXAMPLE_COLORS[ 0 ].name )
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByText( EXAMPLE_COLORS[ 0 ].color )
-		).not.toBeInTheDocument();
+		expect( screen.queryByText( colorName ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument();
 		expect(
 			screen.getByRole( 'button', {
 				name: /^Custom color picker.$/,