Support unique IDs in iAPI directives processing

tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-bind.php

@@ -398,4 +398,22 @@ public function test_wp_bind_handles_true_value() {
 		list($p) = $this->process_directives( $html );
 		$this->assertSame( true, $p->get_attribute( 'id' ) );
 	}
+
+	/**
+	 * Tests ignores unique IDs in bind directive.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_bind_ignores_unique_ids() {
+		$html    = '<div data-wp-bind--id="myPlugin::state.trueValue"></div>';
+		list($p) = $this->process_directives( $html );
+		$this->assertSame( true, $p->get_attribute( 'id' ) );
+
+		$html    = '<div data-wp-bind--id---unique-id="myPlugin::state.trueValue"></div>';
+		list($p) = $this->process_directives( $html );
+		$this->assertNull( $p->get_attribute( 'id' ) );
+		$this->assertNull( $p->get_attribute( 'id---unique-id' ) );
+	}
 }

tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-class.php

@@ -76,7 +76,7 @@ public function test_wp_class_sets_multiple_class_names() {
 				data-wp-class--other-class="myPlugin::state.true"
 			>Text</div>';
 		list($p) = $this->process_directives( $html );
-		$this->assertSame( 'some-class other-class', $p->get_attribute( 'class' ) );
+		$this->assertSame( 'other-class some-class', $p->get_attribute( 'class' ) );
 	}
 
 	/**
@@ -328,4 +328,25 @@ public function test_wp_class_sets_class_name_on_falsy_values() {
 		list($p) = $this->process_directives( $html );
 		$this->assertNull( $p->get_attribute( 'class' ) );
 	}
+
+	/**
+	 * Tests that classes with several dashes can be used.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_class_can_use_several_dashes() {
+		$html    = '<div data-wp-class--main-bg--color="myPlugin::state.true">Text</div>';
+		list($p) = $this->process_directives( $html );
+		$this->assertSame( 'main-bg--color', $p->get_attribute( 'class' ) );
+
+		$html    = '<div data-wp-class--main-bg---color="myPlugin::state.true">Text</div>';
+		list($p) = $this->process_directives( $html );
+		$this->assertSame( 'main-bg---color', $p->get_attribute( 'class' ) );
+
+		$html    = '<div data-wp-class--main-bg----color="myPlugin::state.true">Text</div>';
+		list($p) = $this->process_directives( $html );
+		$this->assertSame( 'main-bg----color', $p->get_attribute( 'class' ) );
+	}
 }

tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-context.php

@@ -522,4 +522,45 @@ public function test_wp_context_directive_replaces_old_context_after_closing_tag
 		$p->next_tag( array( 'class_name' => 'test' ) );
 		$this->assertSame( 'some-id-1', $p->get_attribute( 'id' ) );
 	}
+
+	/**
+	 * Tests supports multiple context directives in the same element.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_context_supports_multiple_directives_in_the_same_element() {
+		$html    = '
+			<div
+				data-wp-interactive="directive-context/multiple"
+				data-wp-context=\'{ "prop": "parent", "parent": true }\'
+			>
+				<div
+					data-wp-context---id2=\'other-namespace::{ "prop": true }\'
+					data-wp-context=\'{ "prop": "default", "default": true }\'
+					data-wp-context---id1=\'{ "prop": "id1", "id1": true }\'
+				>
+					<span
+						class="test"
+						data-wp-bind--data-test-prop="context.prop"
+						data-wp-bind--data-test-parent="context.parent"
+						data-wp-bind--data-test-default="context.default"
+						data-wp-bind--data-test-id1="context.id1"
+						data-wp-bind--data-test-other="other-namespace::context.prop"
+					></span>
+				</div>
+			</div>
+		';
+		list($p) = $this->process_directives( $html );
+		$this->assertSame( 'id1', $p->get_attribute( 'data-test-prop' ) );
+		foreach ( array( 'parent', 'default', 'id1', 'other' ) as $attribute ) {
+			$attr_name = "data-test-$attribute";
+			$this->assertSame(
+				'true',
+				$p->get_attribute( $attr_name ),
+				"Failed asserting that $attr_name equals 'true'"
+			);
+		}
+	}
 }

tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-each.php

@@ -684,4 +684,36 @@ public function test_wp_each_doesnt_process_with_manual_server_directive_process
 		$new      = $this->interactivity->process_directives( $original );
 		$this->assertSame( $expected, $new );
 	}
+
+	/**
+	 * Tests it doesn't support multiple directives.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_each_doesnt_support_multiple_directives() {
+		$original = '' .
+			'<div data-wp-interactive="directive-each">' .
+				'<template data-wp-each="myPlugin::state.list" data-wp-each--item="myPlugin::state.list">' .
+					'<span data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<template data-wp-each---unique-id="myPlugin::state.list">' .
+					'<span data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<div data-wp-bind--id="myPlugin::state.after">Text</div>' .
+			'</div>';
+		$expected = '' .
+			'<div data-wp-interactive="directive-each">' .
+				'<template data-wp-each="myPlugin::state.list" data-wp-each--item="myPlugin::state.list">' .
+					'<span data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<template data-wp-each---unique-id="myPlugin::state.list">' .
+					'<span data-wp-text="myPlugin::context.item"></span>' .
+				'</template>' .
+				'<div id="after-wp-each" data-wp-bind--id="myPlugin::state.after">Text</div>' .
+			'</div>';
+		$new      = $this->interactivity->process_directives( $original );
+		$this->assertSame( $expected, $new );
+	}
 }

tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-style.php

@@ -190,7 +190,7 @@ public function test_wp_style_sets_multiple_style_properties() {
 				data-wp-style--background="myPlugin::state.green"
 			>Text</div>';
 		list($p) = $this->process_directives( $html );
-		$this->assertSame( 'color:green;background:green;', $p->get_attribute( 'style' ) );
+		$this->assertSame( 'background:green;color:green;', $p->get_attribute( 'style' ) );
 	}
 
 	/**
@@ -448,4 +448,30 @@ public function test_wp_style_doesnt_add_style_property_on_falsy_values() {
 		list($p) = $this->process_directives( $html );
 		$this->assertNull( $p->get_attribute( 'style' ) );
 	}
+
+	/**
+	 * Tests it can use CSS variables.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_style_can_use_CSS_variables() {
+		$html    = '<div data-wp-style----text-color="myPlugin::state.green">Text</div>';
+		list($p) = $this->process_directives( $html );
+		$this->assertSame( '--text-color:green;', $p->get_attribute( 'style' ) );
+	}
+
+	/**
+	 * Tests it ignores unique IDs.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_style_ignores_unique_ids() {
+		$html    = '<div data-wp-style--color---unique-id="myPlugin::state.green">Text</div>';
+		list($p) = $this->process_directives( $html );
+		$this->assertNull( $p->get_attribute( 'style' ) );
+	}
 }

tests/phpunit/tests/interactivity-api/wpInteractivityAPI-wp-text.php

@@ -12,7 +12,7 @@
  *
  * @group interactivity-api
  */
-class Tests_Interactivity_API_WpInteractivityAPIWPText extends WP_UnitTestCase {
+class Tests_WP_Interactivity_API_WP_Text extends WP_UnitTestCase {
 	/**
 	 * Instance of WP_Interactivity_API.
 	 *
@@ -154,4 +154,35 @@ public function test_wp_text_cant_set_inner_html_in_the_content() {
 		$new_html = $this->interactivity->process_directives( $html );
 		$this->assertSame( '<div data-wp-text="myPlugin::state.text">&lt;span&gt;Updated&lt;/span&gt;</div>', $new_html );
 	}
+
+	/**
+	 * Tests it ignores suffixes and unique-ids.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_text_ignores_suffixes_and_unique_ids() {
+		$html     = '<span data-wp-text--suffix="myPlugin::state.text">Text</span>';
+		$new_html = $this->interactivity->process_directives( $html );
+		$this->assertSame( $html, $new_html );
+
+		$html     = '<span data-wp-text---unique-id="myPlugin::state.text">Text</span>';
+		$new_html = $this->interactivity->process_directives( $html );
+		$this->assertSame( $html, $new_html );
+	}
+
+	/**
+	 * Tests first `data-wp-text` works even when suffixes and unique-ids are included.
+	 *
+	 * @ticket 64106
+	 *
+	 * @covers ::process_directives
+	 */
+	public function test_wp_text_works_even_when_suffixes_and_unique_ids_are_included() {
+		$original = '<span data-wp-text--suffix="myPlugin::state.text" data-wp-text---unique-id="myPlugin::state.text" data-wp-text="myPlugin::state.text">Text</span>';
+		$expected = '<span data-wp-text--suffix="myPlugin::state.text" data-wp-text---unique-id="myPlugin::state.text" data-wp-text="myPlugin::state.text">Updated</span>';
+		$new_html = $this->interactivity->process_directives( $original );
+		$this->assertSame( $expected, $new_html );
+	}
 }