Issue #3268680 by phenaproxima, xjm, Spokje, ravi.shankar, bnjmmn: [random test failure] Restore and fix LayoutBuilderDisableInteractionsTest::testFormsLinksDisabled()

core/modules/layout_builder/tests/src/FunctionalJavascript/LayoutBuilderDisableInteractionsTest.php

@@ -9,6 +9,7 @@ use Drupal\Component\Render\FormattableMarkup;
 use Drupal\FunctionalJavascriptTests\JSWebAssert;
 use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
 use Drupal\Tests\contextual\FunctionalJavascript\ContextualLinkClickTrait;
+use Drupal\Tests\system\Traits\OffCanvasTestTrait;
 
 /**
  * Tests the Layout Builder disables interactions of rendered blocks.
@@ -18,6 +19,7 @@ use Drupal\Tests\contextual\FunctionalJavascript\ContextualLinkClickTrait;
 class LayoutBuilderDisableInteractionsTest extends WebDriverTestBase {
 
   use ContextualLinkClickTrait;
+  use OffCanvasTestTrait;
 
   /**
    * {@inheritdoc}
@@ -31,6 +33,7 @@ class LayoutBuilderDisableInteractionsTest extends WebDriverTestBase {
     'node',
     'search',
     'contextual',
+    'off_canvas_test',
   ];
 
   /**
@@ -88,7 +91,6 @@ class LayoutBuilderDisableInteractionsTest extends WebDriverTestBase {
    * Tests that forms and links are disabled in the Layout Builder preview.
    */
   public function testFormsLinksDisabled() {
-    $this->markTestSkipped();
     // Resize window due to bug in Chromedriver when clicking on overlays over
     // iFrames.
     // @see https://bugs.chromium.org/p/chromedriver/issues/detail?id=2758
@@ -219,6 +221,11 @@ class LayoutBuilderDisableInteractionsTest extends WebDriverTestBase {
 
     $this->clickContextualLink('.block-field-blocknodebundle-with-section-fieldbody [data-contextual-id^="layout_builder_block"]', 'Configure');
     $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ui-dialog-titlebar [title="Close"]'));
+    // We explicitly wait for the off-canvas area to be fully resized before
+    // trying to press the Close button, instead of waiting for the Close button
+    // itself to become visible. This is to prevent a regularly occurring random
+    // test failure.
+    $this->waitForOffCanvasArea();
     $page->pressButton('Close');
     $assert_session->assertNoElementAfterWait('css', '#drupal-off-canvas');
 

core/modules/system/tests/modules/off_canvas_test/js/resize-helper.es6.js

@@ -0,0 +1,18 @@
+(function ({ offCanvas }) {
+  const originalResetSize = offCanvas.resetSize;
+
+  /**
+   * Wraps the Drupal.offCanvas.resetSize() method.
+   *
+   * @param {jQuery.Event} event
+   *   The event triggered.
+   * @param {object} event.data
+   *   Data attached to the event.
+   */
+  offCanvas.resetSize = (event) => {
+    originalResetSize(event);
+    // Set an attribute so that tests can reliably detect when the off-canvas
+    // area has been resized.
+    event.data.$element.attr('data-resize-done', 'true');
+  };
+})(Drupal);

core/modules/system/tests/modules/off_canvas_test/js/resize-helper.js

@@ -0,0 +1,16 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function (_ref) {
+  var offCanvas = _ref.offCanvas;
+  var originalResetSize = offCanvas.resetSize;
+
+  offCanvas.resetSize = function (event) {
+    originalResetSize(event);
+    event.data.$element.attr('data-resize-done', 'true');
+  };
+})(Drupal);

core/modules/system/tests/modules/off_canvas_test/off_canvas_test.libraries.yml

@@ -0,0 +1,5 @@
+resize_helper:
+  js:
+    js/resize-helper.js: {}
+  dependencies:
+    - 'core/drupal.dialog.off_canvas'

core/modules/system/tests/modules/off_canvas_test/off_canvas_test.module

@@ -0,0 +1,18 @@
+<?php
+
+/**
+ * @file
+ * Contains hook implementations for testing the off-canvas area.
+ */
+
+/**
+ * Implements hook_page_attachments().
+ */
+function off_canvas_test_page_attachments(array &$attachments) {
+  // This library wraps around the Drupal.offCanvas.resetSize() method and adds
+  // a special data-resize-done attribute to help functional JavaScript tests
+  // use the off-canvas area when it is fully loaded and ready to be interacted
+  // with.
+  // @see \Drupal\Tests\system\Traits\OffCanvasTestTrait::waitForOffCanvasArea()
+  $attachments['#attached']['library'][] = 'off_canvas_test/resize_helper';
+}

core/modules/system/tests/src/Traits/OffCanvasTestTrait.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Drupal\Tests\system\Traits;
+
+/**
+ * Provides helper methods for interacting with the off-canvas area.
+ *
+ * This trait is only useful in functional JavaScript tests which need to use
+ * the off-canvas area. Tests using this trait should also list off_canvas_test
+ * in their $modules property.
+ */
+trait OffCanvasTestTrait {
+
+  /**
+   * Waits for the off-canvas area to appear, resized and visible.
+   */
+  protected function waitForOffCanvasArea(): void {
+    // The data-resize-done attribute is added by the off_canvas_test module's
+    // wrapper around Drupal.offCanvas.resetSize.
+    $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '[data-resize-done="true"]'));
+  }
+
+}