Interactivity API: add tests for the getElement() attributes

packages/e2e-tests/plugins/interactive-blocks/get-element/block.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/get-element",
+	"title": "E2E Interactivity tests - getElement",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}

packages/e2e-tests/plugins/interactive-blocks/get-element/render.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * HTML for testing the `store` function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="test/get-element">
+	<div
+		data-testid="read from attributes"
+		data-some-value="Initial value"
+		data-wp-bind--data-some-value="state.dataSomeValue"
+		data-wp-text="state.someValue"
+	></div>
+	<button
+		data-testid="mutate DOM"
+ 		data-wp-on-async--click="actions.mutateDOM"
+	>
+		Mutate via DOM manipulation
+	</button>
+	<button
+		data-testid="mutate prop"
+ 		data-wp-on-async--click="actions.mutateProp"
+	>
+		Mutate via data-wp-bind
+	</button>
+</div>

packages/e2e-tests/plugins/interactive-blocks/get-element/view.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );

packages/e2e-tests/plugins/interactive-blocks/get-element/view.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+const { state } = store( 'test/get-element', {
+	state: {
+		prefix: '+',
+		dataSomeValue: 'Initial value',
+		get someValue() {
+			const { attributes } = getElement();
+			return attributes[ 'data-some-value' ]; // Should this be reactive?
+		},
+	},
+	actions: {
+		mutateDOM() {
+			state.prefix = '++';
+			const el = document.querySelector(
+				'[data-testid="read from attributes"]'
+			);
+			el.setAttribute( 'data-some-value', 'New DOM value' );
+		},
+		mutateProp() {
+			const { attributes } = getElement();
+
+			attributes[ 'data-some-value' ] = state.dataSomeValue; // Does this make sense?
+
+			state.dataSomeValue = 'New prop value';
+		},
+	},
+} );

packages/interactivity/src/hooks.tsx

@@ -101,30 +101,6 @@ interface DirectivesProps {
 // Main context.
 const context = createContext< any >( {} );
 
-// Wrap the element props to prevent modifications.
-const immutableMap = new WeakMap();
-const immutableError = () => {
-	throw new Error(
-		'Please use `data-wp-bind` to modify the attributes of an element.'
-	);
-};
-const immutableHandlers: ProxyHandler< object > = {
-	get( target, key, receiver ) {
-		const value = Reflect.get( target, key, receiver );
-		return !! value && typeof value === 'object'
-			? deepImmutable( value )
-			: value;
-	},
-	set: immutableError,
-	deleteProperty: immutableError,
-};
-const deepImmutable = < T extends object = {} >( target: T ): T => {
-	if ( ! immutableMap.has( target ) ) {
-		immutableMap.set( target, new Proxy( target, immutableHandlers ) );
-	}
-	return immutableMap.get( target );
-};
-
 // Store stacks for the current scope and the default namespaces and export APIs
 // to interact with them.
 const scopeStack: Scope[] = [];
@@ -158,7 +134,7 @@ export const getElement = () => {
 	const { ref, attributes } = getScope();
 	return Object.freeze( {
 		ref: ref.current,
-		attributes: deepImmutable( attributes ),
+		attributes: Object.freeze( { ...attributes } ),
 	} );
 };
 

test/e2e/specs/interactivity/get-element.spec.ts

@@ -0,0 +1,43 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'store', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/get-element' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/get-element' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'initial attributes can be accessed', async ( { page } ) => {
+		const el = page.getByTestId( 'read from attributes' );
+		await expect( el ).toHaveText( 'Initial value' );
+	} );
+
+	test( 'mutated attributes via DOM manipulation can be accessed', async ( {
+		page,
+	} ) => {
+		const button = page.getByTestId( 'mutate DOM' );
+		await button.click();
+		const el = page.getByTestId( 'read from attributes' );
+		await expect( el ).toHaveText( 'New DOM value' );
+	} );
+
+	test( 'mutated attributes via data-wp-bind can be accessed', async ( {
+		page,
+	} ) => {
+		const button = page.getByTestId( 'mutate prop' );
+		await button.click();
+		const el = page.getByTestId( 'read from attributes' );
+		await expect( el ).toHaveText( 'New prop value' );
+	} );
+} );