@wordpress/block-editor 16.0.0 → 16.1.0

package/src/components/global-styles/test/filters-panel.js

@@ -0,0 +1,194 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import FiltersPanel from '../filters-panel';
+
+// The inheritance treatment sits behind the
+// `gutenberg-global-styles-inheritance-ui` experiment. Turn it on so these
+// tests exercise the inheriting path.
+beforeEach( () => {
+	window.__experimentalGlobalStylesInheritanceUI = true;
+} );
+
+afterEach( () => {
+	delete window.__experimentalGlobalStylesInheritanceUI;
+} );
+
+/**
+ * Tests for the inherited Global Styles label treatment in `FiltersPanel`.
+ * The panel hosts a single duotone slot rendered as a `Dropdown` whose toggle
+ * shows a `DuotoneSwatch`.
+ *
+ * Display-without-commit behavior is preserved: clicking the preselected
+ * inherited duotone preset commits that value rather than clearing the slot.
+ */
+
+const baseSettings = {
+	color: {
+		customDuotone: true,
+		defaultDuotone: true,
+		duotone: {
+			default: [
+				{
+					name: 'Black and white',
+					slug: 'black-and-white',
+					colors: [ '#000000', '#ffffff' ],
+				},
+				{
+					name: 'Purple and yellow',
+					slug: 'purple-and-yellow',
+					colors: [ '#8c00b7', '#fcff41' ],
+				},
+			],
+		},
+		palette: {
+			default: [
+				{ name: 'Black', slug: 'black', color: '#000000' },
+				{ name: 'White', slug: 'white', color: '#ffffff' },
+			],
+		},
+	},
+};
+
+describe( 'FiltersPanel — visual treatment and display-without-commit', () => {
+	it( 'renders the InheritanceResetButton for a local override', () => {
+		const inheritedValue = {
+			filter: { duotone: [ '#000000', '#ffffff' ] },
+		};
+		const value = {
+			filter: { duotone: [ '#8c00b7', '#fcff41' ] },
+		};
+
+		render(
+			<FiltersPanel
+				value={ value }
+				inheritedValue={ inheritedValue }
+				settings={ baseSettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: /reset to inherited value/i,
+			} )
+		).toBeInTheDocument();
+	} );
+
+	it( 'renders the default reset button for a locally-set duotone with no inherited value', () => {
+		const value = {
+			filter: { duotone: [ '#8c00b7', '#fcff41' ] },
+		};
+
+		render(
+			<FiltersPanel
+				value={ value }
+				inheritedValue={ {} }
+				settings={ baseSettings }
+				onChange={ () => {} }
+				panelId="test-panel"
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: /^reset$/i } )
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', {
+				name: /reset to inherited value/i,
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'does not invoke onChange on mount when only inherited duotone is present (display-without-commit)', () => {
+		const onChange = jest.fn();
+		const inheritedValue = {
+			filter: { duotone: [ '#000000', '#ffffff' ] },
+		};
+
+		render(
+			<FiltersPanel
+				value={ {} }
+				inheritedValue={ inheritedValue }
+				settings={ baseSettings }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'commits the inherited value when the user clicks the preselected duotone preset', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		const inheritedValue = {
+			filter: { duotone: [ '#000000', '#ffffff' ] },
+		};
+
+		const { container } = render(
+			<FiltersPanel
+				value={ {} }
+				inheritedValue={ inheritedValue }
+				settings={ baseSettings }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		// Open the duotone dropdown.
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const toggle = container.querySelector(
+			'.block-editor-global-styles-filters-panel__dropdown-toggle'
+		);
+		expect( toggle ).not.toBeNull();
+		await user.click( toggle );
+
+		// The popover content is portalled to `document.body`, so it
+		// is queried directly. The `DuotonePicker` is rendered with
+		// `value={ duotone }` where `duotone` resolves to the inherited
+		// value at-rest, so the matching preset has
+		// `aria-selected="true"` (the picker is a `role="listbox"`).
+		// eslint-disable-next-line testing-library/no-node-access
+		const presetButton = document.body.querySelector(
+			'.components-circular-option-picker__option[aria-selected="true"]'
+		);
+		expect( presetButton ).not.toBeNull();
+		await user.click( presetButton );
+
+		// The interceptor commits the inherited duotone value rather
+		// than clearing the slot.
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		const lastCallArg = onChange.mock.calls[ 0 ][ 0 ];
+		expect( lastCallArg?.filter?.duotone ).toEqual( [
+			'#000000',
+			'#ffffff',
+		] );
+	} );
+
+	it( 'does not invoke onChange on mount when a local duotone is set (no spurious commit)', () => {
+		const onChange = jest.fn();
+		const value = {
+			filter: { duotone: [ '#8c00b7', '#fcff41' ] },
+		};
+
+		render(
+			<FiltersPanel
+				value={ value }
+				inheritedValue={ value }
+				settings={ baseSettings }
+				onChange={ onChange }
+				panelId="test-panel"
+			/>
+		);
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+} );

package/src/components/global-styles/test/inherited-value-context-core.js

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useResolvedStyle } from '../inherited-value-context';
+import { globalStylesDataKey } from '../../../store/private-keys';
+
+// Coverage for `useResolvedStyle` with the `gutenberg-global-styles-inheritance-ui`
+// experiment off, which is what WordPress Core gets. Deleted rather than set to
+// `false`, because an experiment that was never turned on leaves the global
+// unset, and `undefined` is the value that fires a receiving component's own
+// default parameter. Setting `false` here would test a state that does not
+// occur.
+beforeEach( () => {
+	delete window.__experimentalGlobalStylesInheritanceUI;
+} );
+
+afterEach( () => {
+	delete window.__experimentalGlobalStylesInheritanceUI;
+} );
+
+// Only `useSelect` is called by the hook. The other four are needed at import
+// time by the store modules this file pulls in transitively.
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+	register: jest.fn(),
+	createReduxStore: jest.fn(),
+	createSelector: jest.fn( ( callback ) => callback ),
+	combineReducers: jest.fn( ( reducers ) => reducers ),
+} ) );
+
+jest.mock( '../../../store', () => ( {
+	store: { name: 'core/block-editor' },
+} ) );
+
+// `inherited-value-context.js` imports the blocks store for
+// `useVariationAndElements`. Its real import chain needs data-module exports
+// the stub above does not provide, so stub the blocks module too.
+jest.mock( '@wordpress/blocks', () => ( {
+	store: { name: 'core/blocks' },
+	getBlockType: ( blockName ) =>
+		( { 'core/heading': { title: 'Heading' } } )[ blockName ],
+} ) );
+
+jest.mock( '../../../hooks/block-style-variation', () => ( {
+	getVariationNameFromClass: ( className ) => {
+		const match = /is-style-([\w-]+)/.exec( className || '' );
+		return match ? match[ 1 ] : null;
+	},
+} ) );
+
+describe( 'useResolvedStyle — experiment off', () => {
+	beforeEach( () => {
+		useSelect.mockReset();
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getSettings: () => ( {
+					// Root, block and element layers that the plugin path
+					// would resolve into a non-empty value for `core/heading`.
+					// The core path must ignore all of them.
+					[ globalStylesDataKey ]: {
+						typography: { lineHeight: '1.6' },
+						blocks: {
+							'core/heading': {
+								typography: { fontSize: '24px' },
+							},
+						},
+						elements: { h2: { color: { text: '#111111' } } },
+					},
+				} ),
+				getBlockStyles: () => [],
+				getBlockAttributes: () => ( { level: 2 } ),
+			} ) )
+		);
+	} );
+
+	// The hook must return undefined rather than an empty object. An empty
+	// object would still be passed down as `inheritedValue`, whereas undefined
+	// lets each panel apply its `inheritedValue = value` default. That default
+	// is what keeps core showing locally-set values only.
+	it( 'resolves nothing, so panels fall back to their `inheritedValue = value` default', () => {
+		const { result } = renderHook( () =>
+			useResolvedStyle( 'core/heading', 'is-style-fancy' )
+		);
+
+		expect( result.current.value ).toBeUndefined();
+		expect( result.current.sources ).toBeUndefined();
+	} );
+} );