test: update tests for WYSIWYG dynamic values and fix existing test issues

- Jest: use getByRole('button') for Insert/Clear to avoid matching ProseMirror toolbar text
- Jest: add editor/wysiwyg to insert-only types; fix Clear button expectations
- PHPUnit: add tests for dynamic token rendering inside HTML and wysiwyg store/strip logic
- PHPUnit: fix enqueue regex multiline flag for WP 7.1-alpha inline script sourceURL suffix
- E2E: fix Tangible Fields plugin basename from tangible-fields/plugin to fields/plugin

Author: lloydsamson

assets/src/components/field/combo-box/async.tsx

@@ -80,6 +80,7 @@ const getAsyncProps = props => {
         ? mapResults(results, props.mapResults)
         : results
 
+      debounced.current.status = false
       return {
         items: getOptions(
           (formatedResults ?? []).reduce((items, item) => ({ ...items, [item.id]: item.title }), {})

tests/jest/cases/dynamic/render.test.ts

@@ -21,6 +21,11 @@ describe('dynamic values feature - render', () => {
    */
   const testTypes = allowedTypes.filter(type => type !== 'conditional-panel')
 
+  /**
+   * Types that only support insert mode (no replace/clear)
+   */
+  const insertOnlyTypes = [ 'text', 'editor', 'wysiwyg' ]
+
   test.each(testTypes)('%p type do not render dynamic values UI if not specified', type => {
 
     const { container } = render(
@@ -31,8 +36,8 @@ describe('dynamic values feature - render', () => {
       })
     )
 
-    expect(within(container).queryByText('Insert')).toBeFalsy()
-    expect(within(container).queryByText('Clear')).toBeFalsy()
+    expect(within(container).queryByRole('button', { name: 'Insert' })).toBeFalsy()
+    expect(within(container).queryByRole('button', { name: 'Clear' })).toBeFalsy()
   })
 
   test.each(testTypes)('%p type do not render dynamic values UI if dynamic is false', type => {
@@ -46,8 +51,8 @@ describe('dynamic values feature - render', () => {
       })
     )
 
-    expect(within(container).queryByText('Insert')).toBeFalsy()
-    expect(within(container).queryByText('Clear')).toBeFalsy()
+    expect(within(container).queryByRole('button', { name: 'Insert' })).toBeFalsy()
+    expect(within(container).queryByRole('button', { name: 'Clear' })).toBeFalsy()
   })
 
   test.each(testTypes)('%p type does render dynamic values UI if dynamic is true', type => {
@@ -61,13 +66,13 @@ describe('dynamic values feature - render', () => {
       })
     )
 
-    expect(within(container).getByText('Insert')).toBeTruthy()
+    expect(within(container).getByRole('button', { name: 'Insert' })).toBeTruthy()
 
-    // Special case for text, as it uses insert mode by default instead if replace like other types
-    if( type === 'text' ) {
-      expect(within(container).queryByText('Clear')).toBeFalsy()
+    // Insert-only types (text, editor, wysiwyg) do not show a Clear button
+    if( insertOnlyTypes.includes(type) ) {
+      expect(within(container).queryByRole('button', { name: 'Clear' })).toBeFalsy()
     }
-    else expect(within(container).getByText('Clear')).toBeTruthy()
+    else expect(within(container).getByRole('button', { name: 'Clear' })).toBeTruthy()
   })
 
   test.each(testTypes)('%p type open dynamic value combobox when clicking on insert button', async type => {
@@ -87,15 +92,15 @@ describe('dynamic values feature - render', () => {
 
     expect(document.querySelector('.tf-dynamic-wrapper-popover')).toBeFalsy()
 
-    await user.click(within(container).getByText('Insert'))
+    await user.click(within(container).getByRole('button', { name: 'Insert' }))
 
     expect(document.querySelector('.tf-dynamic-wrapper-popover')).toBeTruthy()
 
     await user.click(within(container).getByText('Test click outside'))
 
     expect(document.querySelector('.tf-dynamic-wrapper-popover')).toBeFalsy()
 
-    await user.click(within(container).getByText('Insert'))
+    await user.click(within(container).getByRole('button', { name: 'Insert' }))
 
     expect(document.querySelector('.tf-dynamic-wrapper-popover')).toBeTruthy()
   })

tests/phpunit/cases/dynamics.php

@@ -297,6 +297,67 @@ function test_dynamic_value_render_with_context() {
     $this->assertEquals($parsed_value, $expected_value, 'parsed was not equal to config');
   }
 
+  /**
+   * @depends test_dynamic_value_category_registration
+   */
+  function test_dynamic_value_render_in_html_content() {
+
+    $fields = tangible_fields();
+    $fields->register_dynamic_value([
+      'name'     => 'test-value-html',
+      'category' => 'test-category',
+      'callback' => function() {
+        return 'World';
+      },
+      'permission_callback_store' => '__return_true',
+      'permission_callback_parse' => '__return_true'
+    ]);
+
+    // Simulate a wysiwyg field value: token inside HTML
+    $parsed = $fields->render_value('<p>Hello [[test-value-html]]</p>');
+    $this->assertEquals('<p>Hello World</p>', $parsed, 'dynamic value was not replaced inside HTML content');
+
+    // Multiple tokens in HTML
+    $parsed = $fields->render_value('<p>[[test-value-html]] [[test-value-html]]</p>');
+    $this->assertEquals('<p>World World</p>', $parsed, 'multiple dynamic values were not replaced inside HTML content');
+
+    // Token inside an attribute value should still be replaced
+    $parsed = $fields->render_value('<a title="[[test-value-html]]">link</a>');
+    $this->assertEquals('<a title="World">link</a>', $parsed, 'dynamic value was not replaced inside an HTML attribute');
+  }
+
+  /**
+   * @depends test_dynamic_value_category_registration
+   */
+  function test_dynamic_value_store_strips_tokens_for_wysiwyg() {
+
+    $fields = tangible_fields();
+
+    $fields->register_field('wysiwyg-dv-test',
+      [ 'permission_callback' => '__return_true' ]
+      + $fields->_store_callbacks['memory']()
+    );
+
+    // Unauthorized token should be stripped on store
+    $fields->store_value('wysiwyg-dv-test', '<p>Hello [[unauthorized-dynamic-value]]</p>');
+    $this->assertEquals(
+      '<p>Hello </p>',
+      $fields->fetch_value('wysiwyg-dv-test'),
+      'unauthorized dynamic value was not stripped from wysiwyg content on store'
+    );
+
+    // Authorized token should be preserved on store
+    $fields->store_value('wysiwyg-dv-test', '<p>Hello [[test-value-html]]</p>');
+    $this->assertEquals(
+      '<p>Hello [[test-value-html]]</p>',
+      $fields->fetch_value('wysiwyg-dv-test'),
+      'authorized dynamic value token was incorrectly stripped from wysiwyg content on store'
+    );
+
+    // Cleanup
+    $fields->store_value('wysiwyg-dv-test', null);
+  }
+
   /**
    * @depends test_dynamic_value_category_registration
    */

tests/phpunit/cases/enqueue.php

@@ -58,7 +58,7 @@ public function test_items_enqueue(string $type, array $args) {
     }
     $this->assertGreaterThan(
       0,
-      preg_match('#var TangibleFieldsConfig = (.+?);#', $data, $matches),
+      preg_match('#^var TangibleFieldsConfig = (.+);$#m', $data, $matches),
       'wp_add_inline_script does not have TangibleFieldsConfig'
     );
     $data = json_decode($matches[1], true);
@@ -93,13 +93,13 @@ public function test_fields_enqueue_conditions(string $type, array $args) {
 
     if ( version_compare($wp_version, '6.3', '>') ) {
       preg_match(
-        '#var TangibleFieldsConfig = (.+?);#',
+        '#^var TangibleFieldsConfig = (.+);$#m',
         wp_scripts()->get_inline_script_data('tangible-fields', 'before'),
         $matches
       );
     } else {
       preg_match(
-        '#^var TangibleFieldsConfig = (.+?);$#',
+        '#^var TangibleFieldsConfig = (.+);$#m',
         wp_scripts()->print_inline_script('tangible-fields', 'before', false),
         $matches
       );