Add test for object overwritten

WordPress · Feb 21, 2024 · 802478b · 802478b
1 parent d588025
commit 802478b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -18,6 +18,7 @@
 		>
 			<!-- rendered during hydration -->
 		</pre>
+		<button data-testid="parent replace" data-wp-on--click="actions.replaceObj">Replace obj</button>
 		<button
 			data-testid="parent prop1"
 			name="prop1"
@@ -67,6 +68,7 @@
 			>
 				<!-- rendered during hydration -->
 			</pre>
+			<button data-testid="child replace" data-wp-on--click="actions.replaceObj">Replace obj</button>
 			<button
 				data-testid="child prop1"
 				name="prop1"

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -30,6 +30,10 @@ store( 'directive-context', {
 			const ctx = getContext();
 			const value = parseInt( event.target.value );
 			ctx.selected = ctx.list.find( ( { id } ) => id === value );
+		},
+		replaceObj() {
+			const ctx = getContext();
+			ctx.obj = { overwritten: true };
 		}
 	},
 } );

diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/test/e2e/specs/interactivity/directive-context.spec.ts
@@ -170,6 +170,52 @@ test.describe( 'data-wp-context', () => {
 		expect( childContext.array ).toMatchObject( [ 4, 5, 6 ] );
 	} );
 
+	test( 'overwritten objects updates inherited values', async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'parent replace' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.obj.prop4 ).toBeUndefined();
+		expect( childContext.obj.prop5 ).toBe( 'child' );
+		expect( childContext.obj.prop6 ).toBe( 'child' );
+		expect( childContext.obj.overwritten ).toBe( true );
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.obj.prop4 ).toBeUndefined();
+		expect( parentContext.obj.prop5 ).toBeUndefined();
+		expect( parentContext.obj.prop6 ).toBeUndefined();
+		expect( parentContext.obj.overwritten ).toBe( true );
+	} );
+
+	test( 'overwritten objects do not inherit values', async ( { page } ) => {
+		await page.getByTestId( 'child replace' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.obj.prop4 ).toBeUndefined();
+		expect( childContext.obj.prop5 ).toBeUndefined();
+		expect( childContext.obj.prop6 ).toBeUndefined();
+		expect( childContext.obj.overwritten ).toBe( true );
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.obj.prop4 ).toBe( 'parent' );
+		expect( parentContext.obj.prop5 ).toBe( 'parent' );
+		expect( parentContext.obj.prop6 ).toBeUndefined();
+		expect( parentContext.obj.overwritten ).toBeUndefined();
+	} );
+
 	test( 'can be accessed in other directives on the same element', async ( {
 		page,
 	} ) => {