Theme: Add tests for ThemeProvider and useThemeProviderStyles

packages/theme/CHANGELOG.md

@@ -16,6 +16,10 @@
 
 -   `ThemeProvider`: Strictly enforce the documented seed-color input contract for `color.primary` / `color.background`. Inputs outside sRGB (e.g. `oklch()`), previously accepted incidentally, now throw a clear error ([#79148](https://github.com/WordPress/gutenberg/pull/79148)).
 
+### Internal
+
+-   Add unit tests for `ThemeProvider` and `useThemeProviderStyles` ([#79126](https://github.com/WordPress/gutenberg/pull/79126)).
+
 ## 0.15.0 (2026-06-10)
 
 ### New Features

packages/theme/package.json

@@ -91,7 +91,9 @@
 		"@terrazzo/parser": "^2.0.3",
 		"@terrazzo/plugin-css": "^2.0.3",
 		"@terrazzo/token-tools": "^2.0.3",
+		"@testing-library/dom": "^10.4.1",
 		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
 		"@types/jest": "^29.5.14",
 		"@types/node": "^20.19.39",
 		"esbuild": "^0.27.2",

packages/theme/src/test/theme-provider.test.tsx

@@ -0,0 +1,176 @@
+// These tests read the resolved CSS custom properties produced by the provider.
+// jsdom does not cascade custom properties to descendant elements, so the value
+// is asserted on the provider's own scoping element (where the property is
+// defined and from which real children would inherit) and on the document root.
+
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../theme-provider';
+
+// Mock the CSS module so the provider's scoping class is a real, stable class
+// name. Without this the global Jest CSS mock leaves the class `undefined`, and
+// jsdom cannot match the generated rules to compute the custom properties.
+jest.mock( '../style.module.css', () => ( {
+	root: 'theme-provider-root',
+} ) );
+
+// The "strong" brand background resolves to the `color.primary` seed itself, and
+// the neutral surface resolves to the `color.background` seed itself, which makes
+// the expected values predictable. (Extreme seeds get snapped into the accessible
+// ramp, so the seeds below are deliberately mid-range/light hex values that
+// round-trip. Ramp generation itself is covered by the color-ramps tests.)
+const BRAND_BG = '--wpds-color-background-interactive-brand-strong';
+const SURFACE_BG = '--wpds-color-background-surface-neutral';
+const CURSOR_CONTROL = '--wpds-cursor-control';
+const PRIMARY = '#1e90ff';
+const OTHER_PRIMARY = '#8e44ad';
+const BACKGROUND = '#f8f8f8';
+
+function readProp( element: Element, property: string ) {
+	return getComputedStyle( element ).getPropertyValue( property ).trim();
+}
+
+// The `ThemeProvider` wrapper element that scopes the given descendant.
+function getScopingProvider( element: Element ) {
+	return element.closest< HTMLElement >( '[data-wpds-theme-provider-id]' )!;
+}
+
+describe( 'ThemeProvider', () => {
+	it( 'renders its children', () => {
+		render( <ThemeProvider>content</ThemeProvider> );
+
+		expect( screen.getByText( 'content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'defines the color tokens from the seeds within its subtree', () => {
+		render(
+			<ThemeProvider
+				color={ { primary: PRIMARY, background: BACKGROUND } }
+			>
+				<div data-testid="child">x</div>
+			</ThemeProvider>
+		);
+
+		const provider = getScopingProvider( screen.getByTestId( 'child' ) );
+		expect( readProp( provider, BRAND_BG ) ).toBe( PRIMARY );
+		expect( readProp( provider, SURFACE_BG ) ).toBe( BACKGROUND );
+	} );
+
+	it( 'does not define the custom property outside of the provider', () => {
+		render(
+			<ThemeProvider color={ { primary: PRIMARY } }>
+				<div data-testid="child">x</div>
+			</ThemeProvider>
+		);
+
+		const outside = document.createElement( 'div' );
+		document.body.appendChild( outside );
+
+		expect( readProp( outside, BRAND_BG ) ).toBe( '' );
+	} );
+
+	it( 'applies the cursor custom property when set', () => {
+		render(
+			<ThemeProvider cursor={ { control: 'pointer' } }>
+				<div data-testid="child">x</div>
+			</ThemeProvider>
+		);
+
+		const provider = getScopingProvider( screen.getByTestId( 'child' ) );
+		expect( readProp( provider, CURSOR_CONTROL ) ).toBe( 'pointer' );
+	} );
+
+	describe( 'cornerRadius', () => {
+		it( 'reflects the preset as a data attribute', () => {
+			render(
+				<ThemeProvider cornerRadius="pronounced">
+					<div data-testid="child">x</div>
+				</ThemeProvider>
+			);
+
+			expect(
+				getScopingProvider( screen.getByTestId( 'child' ) )
+			).toHaveAttribute( 'data-wpds-corner-radius', 'pronounced' );
+		} );
+
+		it( 'defaults to the subtle preset', () => {
+			render(
+				<ThemeProvider>
+					<div data-testid="child">x</div>
+				</ThemeProvider>
+			);
+
+			expect(
+				getScopingProvider( screen.getByTestId( 'child' ) )
+			).toHaveAttribute( 'data-wpds-corner-radius', 'subtle' );
+		} );
+	} );
+
+	describe( 'isRoot', () => {
+		it( 'defines the token on the document root', () => {
+			render(
+				<ThemeProvider isRoot color={ { primary: PRIMARY } }>
+					<div>x</div>
+				</ThemeProvider>
+			);
+
+			expect( readProp( document.documentElement, BRAND_BG ) ).toBe(
+				PRIMARY
+			);
+		} );
+
+		it( 'does not affect the document root by default', () => {
+			render(
+				<ThemeProvider color={ { primary: PRIMARY } }>
+					<div>x</div>
+				</ThemeProvider>
+			);
+
+			expect( readProp( document.documentElement, BRAND_BG ) ).toBe( '' );
+		} );
+	} );
+
+	describe( 'nested providers', () => {
+		it( 'overrides the settings it defines and inherits the rest', () => {
+			render(
+				<ThemeProvider
+					color={ { primary: PRIMARY, background: BACKGROUND } }
+					cursor={ { control: 'pointer' } }
+					cornerRadius="pronounced"
+				>
+					<ThemeProvider>
+						<div data-testid="inheriting">a</div>
+					</ThemeProvider>
+					<ThemeProvider color={ { primary: OTHER_PRIMARY } }>
+						<div data-testid="overriding">b</div>
+					</ThemeProvider>
+				</ThemeProvider>
+			);
+
+			const inheriting = getScopingProvider(
+				screen.getByTestId( 'inheriting' )
+			);
+			const overriding = getScopingProvider(
+				screen.getByTestId( 'overriding' )
+			);
+
+			// A nested provider with no settings of its own inherits everything.
+			expect( readProp( inheriting, BRAND_BG ) ).toBe( PRIMARY );
+			expect( readProp( inheriting, SURFACE_BG ) ).toBe( BACKGROUND );
+			expect( readProp( inheriting, CURSOR_CONTROL ) ).toBe( 'pointer' );
+			expect( inheriting ).toHaveAttribute(
+				'data-wpds-corner-radius',
+				'pronounced'
+			);
+
+			// A nested provider overrides only what it defines (`primary`),
+			// inheriting the rest (`background`, `cursor`, `cornerRadius`).
+			expect( readProp( overriding, BRAND_BG ) ).toBe( OTHER_PRIMARY );
+			expect( readProp( overriding, SURFACE_BG ) ).toBe( BACKGROUND );
+			expect( readProp( overriding, CURSOR_CONTROL ) ).toBe( 'pointer' );
+			expect( overriding ).toHaveAttribute(
+				'data-wpds-corner-radius',
+				'pronounced'
+			);
+		} );
+	} );
+} );