From 3df11e5c046f001eba12345ccedd5bf026d1809d Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos.bravo@automattic.com>
Date: Thu, 9 May 2024 18:35:53 +0200
Subject: [PATCH] Add some tests

---
 .../interactive-blocks/namespace/block.json   | 15 ++++++
 .../interactive-blocks/namespace/render.php   | 23 +++++++++
 .../namespace/view.asset.php                  |  1 +
 .../interactive-blocks/namespace/view.js      | 16 ++++++
 .../e2e/specs/interactivity/namespace.spec.ts | 49 +++++++++++++++++++
 5 files changed, 104 insertions(+)
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/namespace/block.json
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/namespace/render.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php
 create mode 100644 packages/e2e-tests/plugins/interactive-blocks/namespace/view.js
 create mode 100644 test/e2e/specs/interactivity/namespace.spec.ts

diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json b/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json
new file mode 100644
index 0000000000000..c0382286a1621
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test-namespace/directive-bind",
+	"title": "E2E Interactivity tests - directive bind",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php b/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php
new file mode 100644
index 0000000000000..6fdc2d07e350c
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php
@@ -0,0 +1,23 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="">
+	<a data-wp-bind--href="state.url" data-testid="empty namespace"></a>
+</div>
+
+<div data-wp-interactive="namespace">
+	<a data-wp-bind--href="state.url" data-testid="correct namespace"></a>
+</div>
+
+<div data-wp-interactive="{}">
+	<a data-wp-bind--href="state.url" data-testid="object namespace"></a>
+</div>
+
+<div data-wp-interactive>
+	<a data-wp-bind--href="other::state.url" data-testid="other namespace"></a>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php
new file mode 100644
index 0000000000000..db23afdf657a1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js
new file mode 100644
index 0000000000000..9225f88ce9d27
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+store( 'namespace', {
+	state: {
+		url: '/some-url',
+	},
+} );
+
+store( 'other', {
+	state: {
+		url: '/other-store-url',
+	},
+} );
diff --git a/test/e2e/specs/interactivity/namespace.spec.ts b/test/e2e/specs/interactivity/namespace.spec.ts
new file mode 100644
index 0000000000000..fd38a7ecf6ed6
--- /dev/null
+++ b/test/e2e/specs/interactivity/namespace.spec.ts
@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Namespaces', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test-namespace/directive-bind' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test-namespace/directive-bind' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'Empty string as namespace should not work', async ( { page } ) => {
+		const el = page.getByTestId( 'empty namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/some-url' );
+	} );
+
+	test( 'A string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'correct namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/some-url' );
+	} );
+
+	test( 'An empty object as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'object namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/some-url' );
+	} );
+
+	test( 'A wrong namespace should not break the runtime', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'object namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/some-url' );
+		const correct = page.getByTestId( 'correct namespace' );
+		await expect( correct ).toHaveAttribute( 'href', '/some-url' );
+	} );
+
+	test( 'A different store namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'other namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/other-store-url' );
+	} );
+} );