From 8b6608bcbe4215387756c57ba9a158a856714651 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Sun, 7 Jan 2024 14:19:40 +0900 Subject: [PATCH 01/11] PaletteEdit: improve unit tests --- .../src/palette-edit/test/index.tsx | 285 +++++++++++++++++- 1 file changed, 275 insertions(+), 10 deletions(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index 1bf2802709de7..7db2169f47f54 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -1,7 +1,8 @@ /** * External dependencies */ -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; /** * Internal dependencies @@ -82,18 +83,282 @@ describe( 'getNameForPosition', () => { describe( 'PaletteEdit', () => { const defaultProps = { - colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ], - onChange: jest.fn(), paletteLabel: 'Test label', - emptyMessage: 'Test empty message', - canOnlyChangeValues: true, - canReset: true, slugPrefix: '', + onChange: jest.fn(), }; - it( 'opens color selector for color palettes', () => { - render( ); - fireEvent.click( screen.getByLabelText( 'Color: Base' ) ); - expect( screen.getByLabelText( 'Hex color' ) ).toBeInTheDocument(); + const colors = [ + { color: '#1a4548', name: 'Primary', slug: 'primary' }, + { color: '#0000ff', name: 'Secondary', slug: 'secondary' }, + ]; + const gradients = [ + { + gradient: + 'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)', + name: 'Pale ocean', + slug: 'pale-ocean', + }, + { + gradient: + 'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)', + name: 'Midnight', + slug: 'midnight', + }, + ]; + + it( 'shows heading label', () => { + render( ); + + const paletteLabel = screen.getByRole( 'heading', { + level: 2, + name: 'Test label', + } ); + + expect( paletteLabel ).toBeInTheDocument(); + } ); + + it( 'shows heading label with custom heading level', () => { + render( + + ); + + expect( + screen.getByRole( 'heading', { + level: 5, + name: 'Test label', + } ) + ).toBeInTheDocument(); + } ); + + it( 'shows empty message', () => { + render( + + ); + + expect( screen.getByText( 'Test empty message' ) ).toBeInTheDocument(); + } ); + + it( 'can remove all colors', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( + screen.getByRole( 'button', { + name: 'Color options', + } ) + ); + + expect( + screen.getByRole( 'button', { + name: 'Remove all colors', + } ) + ).toBeInTheDocument(); + } ); + + it( 'can reset colors', async () => { + const user = userEvent.setup(); + render( + + ); + + await user.click( + screen.getByRole( 'button', { + name: 'Color options', + } ) + ); + expect( + screen.getByRole( 'button', { + name: 'Reset colors', + } ) + ).toBeInTheDocument(); + } ); + + it( 'can not reset colors', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( + screen.getByRole( 'button', { + name: 'Color options', + } ) + ); + expect( + screen.queryByRole( 'button', { + name: 'Reset colors', + } ) + ).not.toBeInTheDocument(); + } ); + + it( 'can add a new color palette', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( + screen.getByRole( 'button', { + name: 'Add color', + } ) + ); + + await waitFor( () => { + expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + ...colors, + { + color: '#000', + name: 'Color 1', + slug: 'color-1', + }, + ] ); + } ); + } ); + + it( 'can add a new graident palette', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( + screen.getByRole( 'button', { + name: 'Add gradient', + } ) + ); + + await waitFor( () => { + expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + ...colors, + { + color: '#000', + name: 'Color 1', + slug: 'color-1', + }, + ] ); + } ); + } ); + + it( 'can not add a new palette', () => { + render( ); + + expect( + screen.queryByRole( 'button', { + name: 'Add color', + } ) + ).not.toBeInTheDocument(); + } ); + + it( 'can delete palette', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( + screen.getByRole( 'button', { + name: 'Color options', + } ) + ); + await user.click( + screen.getByRole( 'button', { + name: 'Show details', + } ) + ); + await user.click( screen.getByText( 'Primary' ) ); + await user.click( + screen.getByRole( 'button', { + name: 'Remove color', + } ) + ); + + await waitFor( () => { + expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + colors[ 1 ], + ] ); + } ); + } ); + + it( 'can update palette name', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( + screen.getByRole( 'button', { + name: 'Color options', + } ) + ); + await user.click( + screen.getByRole( 'button', { + name: 'Show details', + } ) + ); + await user.click( screen.getByText( 'Primary' ) ); + await user.click( + screen.getByRole( 'textbox', { + name: 'Color name', + } ) + ); + const nameInput = screen.getByRole( 'textbox', { + name: 'Color name', + } ); + await user.clear( nameInput ); + await user.type( nameInput, 'Primary Updated' ); + + await waitFor( () => { + expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + { + ...colors[ 0 ], + name: 'Primary Updated', + slug: 'primary-updated', + }, + colors[ 1 ], + ] ); + } ); + } ); + + it( 'can update color palette value', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( screen.getByLabelText( 'Color: Primary' ) ); + const hexInput = screen.getByRole( 'textbox', { + name: 'Hex color', + } ); + await user.clear( hexInput ); + await user.type( hexInput, '000000' ); + + await waitFor( () => { + expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + { + ...colors[ 0 ], + color: '#000000', + }, + colors[ 1 ], + ] ); + } ); + } ); + + it( 'can update gradient palette value', async () => { + const user = userEvent.setup(); + render( ); + + await user.click( screen.getByLabelText( 'Gradient: Pale ocean' ) ); + + const typeSelectElement = screen.getByRole( 'combobox', { + name: 'Type', + } ); + await user.selectOptions( typeSelectElement, 'radial-gradient' ); + + await waitFor( () => { + expect( defaultProps.onChange ).toHaveBeenLastCalledWith( [ + { + ...gradients[ 0 ], + gradient: + 'radial-gradient(rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)', + }, + gradients[ 1 ], + ] ); + } ); } ); } ); From 3cf2b5bebb75f8182a7f9ed58b6e011339f7e52f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 8 Jan 2024 22:53:31 +0900 Subject: [PATCH 02/11] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8805736c2e440..d105bed2913f4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -31,6 +31,7 @@ - `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `TreeSelect`: Add `compact` size variant ([#57398](https://github.com/WordPress/gutenberg/pull/57398)). - `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)). - `Tooltip`: improve unit tests ([#57345](https://github.com/WordPress/gutenberg/pull/57345)). +- `PaletteEdit`: improve unit tests ([#57645](https://github.com/WordPress/gutenberg/pull/57645)). ### Experimental From d3503bf2f96ac4a53b79fe54119cc19873a8b5a6 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:03:40 +0900 Subject: [PATCH 03/11] Use toBeVisible instead of toBeInTheDocument Co-authored-by: Lena Morita --- packages/components/src/palette-edit/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index 7db2169f47f54..782d27567c335 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -115,7 +115,7 @@ describe( 'PaletteEdit', () => { name: 'Test label', } ); - expect( paletteLabel ).toBeInTheDocument(); + expect( paletteLabel ).toBeVisible(); } ); it( 'shows heading label with custom heading level', () => { From 42e87f1362b43da1510ab6fe30f80e1eb0b1fd14 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:05:15 +0900 Subject: [PATCH 04/11] Update test name Co-authored-by: Lena Morita --- packages/components/src/palette-edit/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index 782d27567c335..d305b41da98e0 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -197,7 +197,7 @@ describe( 'PaletteEdit', () => { ).not.toBeInTheDocument(); } ); - it( 'can add a new color palette', async () => { + it( 'calls the `onChange` with the new color appended', async () => { const user = userEvent.setup(); render( ); From 6a27ef22fb888d4afa4fcb2ef45aa224e1fb36a8 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:05:33 +0900 Subject: [PATCH 05/11] Update test name Co-authored-by: Lena Morita --- packages/components/src/palette-edit/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index d305b41da98e0..eaa93c4f72929 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -163,7 +163,7 @@ describe( 'PaletteEdit', () => { ).toBeInTheDocument(); } ); - it( 'can reset colors', async () => { + it( 'shows a reset option when the `canReset` prop is enabled', async () => { const user = userEvent.setup(); render( From e329ba2f991b16ca2ebce50f32cf93807f674eb2 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:05:45 +0900 Subject: [PATCH 06/11] Update test name Co-authored-by: Lena Morita --- packages/components/src/palette-edit/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index eaa93c4f72929..e52f37d6b0753 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -181,7 +181,7 @@ describe( 'PaletteEdit', () => { ).toBeInTheDocument(); } ); - it( 'can not reset colors', async () => { + it( 'does not show a reset colors option when `canReset` is disabled', async () => { const user = userEvent.setup(); render( ); From 7860258d5497e06d31e87e5e532cc5165964fa0d Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:05:53 +0900 Subject: [PATCH 07/11] Update test name Co-authored-by: Lena Morita --- packages/components/src/palette-edit/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index e52f37d6b0753..cf90900a47bac 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -241,7 +241,7 @@ describe( 'PaletteEdit', () => { } ); } ); - it( 'can not add a new palette', () => { + it( 'can not add new colors when `canOnlyChangeValues` is enabled', () => { render( ); expect( From 6c885e01a16a775af947be4ec064e23ceb955a40 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:06:06 +0900 Subject: [PATCH 08/11] Update test name Co-authored-by: Lena Morita --- packages/components/src/palette-edit/test/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index cf90900a47bac..0644e970535c4 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -251,7 +251,7 @@ describe( 'PaletteEdit', () => { ).not.toBeInTheDocument(); } ); - it( 'can delete palette', async () => { + it( 'can remove a color', async () => { const user = userEvent.setup(); render( ); From 791b2a3c84df6307e1d978795c95e8ab8a91cba5 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:07:22 +0900 Subject: [PATCH 09/11] Remove Unnecessary uerr click event Co-authored-by: Lena Morita --- packages/components/src/palette-edit/test/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index 0644e970535c4..4e4328fa0e228 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -294,11 +294,6 @@ describe( 'PaletteEdit', () => { } ) ); await user.click( screen.getByText( 'Primary' ) ); - await user.click( - screen.getByRole( 'textbox', { - name: 'Color name', - } ) - ); const nameInput = screen.getByRole( 'textbox', { name: 'Color name', } ); From a554bdca3fefc0b8323866413cc65f6e30dbd14f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 11 Jan 2024 11:09:52 +0900 Subject: [PATCH 10/11] Use toBeVisible instead of toBeInTheDocument --- packages/components/src/palette-edit/test/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index 4e4328fa0e228..cc64565025539 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -132,7 +132,7 @@ describe( 'PaletteEdit', () => { level: 5, name: 'Test label', } ) - ).toBeInTheDocument(); + ).toBeVisible(); } ); it( 'shows empty message', () => { @@ -143,7 +143,7 @@ describe( 'PaletteEdit', () => { /> ); - expect( screen.getByText( 'Test empty message' ) ).toBeInTheDocument(); + expect( screen.getByText( 'Test empty message' ) ).toBeVisible(); } ); it( 'can remove all colors', async () => { @@ -160,7 +160,7 @@ describe( 'PaletteEdit', () => { screen.getByRole( 'button', { name: 'Remove all colors', } ) - ).toBeInTheDocument(); + ).toBeVisible(); } ); it( 'shows a reset option when the `canReset` prop is enabled', async () => { @@ -178,7 +178,7 @@ describe( 'PaletteEdit', () => { screen.getByRole( 'button', { name: 'Reset colors', } ) - ).toBeInTheDocument(); + ).toBeVisible(); } ); it( 'does not show a reset colors option when `canReset` is disabled', async () => { From cf13511cdbd1ff6222eb4bf1e13b4c798626e78d Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 11 Jan 2024 11:34:55 +0900 Subject: [PATCH 11/11] use a fresh onChange mock for each test --- .../src/palette-edit/test/index.tsx | 87 +++++++++++++++---- 1 file changed, 68 insertions(+), 19 deletions(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index cc64565025539..31b712225a8dc 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event'; import PaletteEdit, { getNameForPosition } from '..'; import type { PaletteElement } from '../types'; +const noop = () => {}; + describe( 'getNameForPosition', () => { test( 'should return 1 by default', () => { const slugPrefix = 'test-'; @@ -85,7 +87,7 @@ describe( 'PaletteEdit', () => { const defaultProps = { paletteLabel: 'Test label', slugPrefix: '', - onChange: jest.fn(), + onChange: noop, }; const colors = [ @@ -146,7 +148,7 @@ describe( 'PaletteEdit', () => { expect( screen.getByText( 'Test empty message' ) ).toBeVisible(); } ); - it( 'can remove all colors', async () => { + it( 'shows an option to remove all colors', async () => { const user = userEvent.setup(); render( ); @@ -199,7 +201,15 @@ describe( 'PaletteEdit', () => { it( 'calls the `onChange` with the new color appended', async () => { const user = userEvent.setup(); - render( ); + const onChange = jest.fn(); + + render( + + ); await user.click( screen.getByRole( 'button', { @@ -208,7 +218,7 @@ describe( 'PaletteEdit', () => { ); await waitFor( () => { - expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + expect( onChange ).toHaveBeenCalledWith( [ ...colors, { color: '#000', @@ -219,9 +229,17 @@ describe( 'PaletteEdit', () => { } ); } ); - it( 'can add a new graident palette', async () => { + it( 'calls the `onChange` with the new gradient appended', async () => { const user = userEvent.setup(); - render( ); + const onChange = jest.fn(); + + render( + + ); await user.click( screen.getByRole( 'button', { @@ -230,10 +248,11 @@ describe( 'PaletteEdit', () => { ); await waitFor( () => { - expect( defaultProps.onChange ).toHaveBeenCalledWith( [ - ...colors, + expect( onChange ).toHaveBeenCalledWith( [ + ...gradients, { - color: '#000', + gradient: + 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)', name: 'Color 1', slug: 'color-1', }, @@ -253,7 +272,15 @@ describe( 'PaletteEdit', () => { it( 'can remove a color', async () => { const user = userEvent.setup(); - render( ); + const onChange = jest.fn(); + + render( + + ); await user.click( screen.getByRole( 'button', { @@ -273,15 +300,21 @@ describe( 'PaletteEdit', () => { ); await waitFor( () => { - expect( defaultProps.onChange ).toHaveBeenCalledWith( [ - colors[ 1 ], - ] ); + expect( onChange ).toHaveBeenCalledWith( [ colors[ 1 ] ] ); } ); } ); it( 'can update palette name', async () => { const user = userEvent.setup(); - render( ); + const onChange = jest.fn(); + + render( + + ); await user.click( screen.getByRole( 'button', { @@ -301,7 +334,7 @@ describe( 'PaletteEdit', () => { await user.type( nameInput, 'Primary Updated' ); await waitFor( () => { - expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + expect( onChange ).toHaveBeenCalledWith( [ { ...colors[ 0 ], name: 'Primary Updated', @@ -314,7 +347,15 @@ describe( 'PaletteEdit', () => { it( 'can update color palette value', async () => { const user = userEvent.setup(); - render( ); + const onChange = jest.fn(); + + render( + + ); await user.click( screen.getByLabelText( 'Color: Primary' ) ); const hexInput = screen.getByRole( 'textbox', { @@ -324,7 +365,7 @@ describe( 'PaletteEdit', () => { await user.type( hexInput, '000000' ); await waitFor( () => { - expect( defaultProps.onChange ).toHaveBeenCalledWith( [ + expect( onChange ).toHaveBeenCalledWith( [ { ...colors[ 0 ], color: '#000000', @@ -336,7 +377,15 @@ describe( 'PaletteEdit', () => { it( 'can update gradient palette value', async () => { const user = userEvent.setup(); - render( ); + const onChange = jest.fn(); + + render( + + ); await user.click( screen.getByLabelText( 'Gradient: Pale ocean' ) ); @@ -346,7 +395,7 @@ describe( 'PaletteEdit', () => { await user.selectOptions( typeSelectElement, 'radial-gradient' ); await waitFor( () => { - expect( defaultProps.onChange ).toHaveBeenLastCalledWith( [ + expect( onChange ).toHaveBeenCalledWith( [ { ...gradients[ 0 ], gradient: