Add tests for derived state as keys

packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php

@@ -175,6 +175,28 @@
 			<p data-wp-text="context.item" data-testid="item"></p>
 		</div>
 	</div>
+
+
+	<div data-testid="derived state">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateFruits"
+		>Rotate</button>
+		<template
+			data-wp-context='{ "idPrefix": "fruit-" }'
+			data-wp-each--fruit="state.fruits"
+			data-wp-each-key="state.fruitId"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="context.fruit"
+				data-wp-bind--data-fruit-id="state.fruitId"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>avocado</p>
+		<p data-testid="item" data-wp-each-child>banana</p>
+		<p data-testid="item" data-wp-each-child>cherimoya</p>
+	</div>
 </div>
 
 <hr>

packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js

@@ -14,6 +14,10 @@ store( 'directive-each', {
 store( 'directive-each', {
 	state: {
 		fruits: [ 'avocado', 'banana', 'cherimoya' ],
+		get fruitId() {
+			const { idPrefix, fruit } = getContext();
+			return `${idPrefix}${fruit}`;
+		}
 	},
 	actions: {
 		removeFruit() {

test/e2e/specs/interactivity/directive-each.spec.ts

@@ -450,4 +450,37 @@ test.describe( 'data-wp-each', () => {
 		await expect( elements ).toHaveCount( 1 );
 		await expect( elements ).toBeEmpty();
 	} );
+
+	test( 'should work with derived state as keys', async ( { page } ) => {
+		const elements = page
+			.getByTestId( 'derived state' )
+			.getByTestId( 'item' );
+
+		// These tags are included to check that the elements are not unmounted
+		// and mounted again. If an element remounts, its tag should be missing.
+		await elements.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		await page
+			.getByTestId( 'derived state' )
+			.getByTestId( 'rotate' )
+			.click();
+
+		await expect( elements ).toHaveText( [
+			'cherimoya',
+			'avocado',
+			'banana',
+		] );
+
+		// Get the tags. They should not have disappeared or changed.
+		const [ cherimoya, avocado, banana ] = await elements.all();
+		await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
+		await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+	} );
 } );