Issue #3476469 by christian.wiedemann: Add performance tests

README.md

@@ -33,3 +33,9 @@ The UI Patterns project provides 3 "toolset" modules:
 ## Documentation
 
 Documentation is available [here](https://www.drupal.org/docs/contributed-modules/ui-patterns).
+
+## Testing
+
+### Performance testing
+UI Patterns uses [Gander](https://www.drupal.org/docs/develop/automated-testing/performance-tests) to automate performance measuring.
+We suggest to use ddev with the [Gander Addon](https://github.com/tag1consulting/ddev-gander) to view render results. 

modules/ui_patterns_field_formatters/tests/src/FunctionalJavascriptTests/LayoutFieldFormatterRenderPerformanceTest.php

+<?php
+
+namespace Drupal\Tests\ui_patterns_layouts\FunctionalJavascriptTests;
+
+use Drupal\FunctionalJavascriptTests\PerformanceTestBase;
+use Drupal\node\NodeInterface;
+use Drupal\Tests\ui_patterns\Traits\ConfigImporterTrait;
+use Drupal\Tests\ui_patterns\Traits\TestContentCreationTrait;
+use Drupal\Tests\ui_patterns\Traits\TestDataTrait;
+
+/**
+ * Performance measuring of field ui.
+ *
+ * @group ui_patterns_layouts
+ */
+class LayoutFieldFormatterRenderPerformanceTest extends PerformanceTestBase {
+
+  /**
+   * The default theme.
+   *
+   * @var string
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * The tested node.
+   *
+   * @var \Drupal\node\NodeInterface
+   */
+  protected NodeInterface $node;
+
+  use TestContentCreationTrait;
+  use TestDataTrait;
+  use ConfigImporterTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'node',
+    'ui_patterns',
+    'ui_patterns_test',
+    'ui_patterns_layouts',
+    'ui_patterns_field_formatters',
+    'field_ui',
+    'field_layout',
+    'layout_builder',
+    'block',
+  ];
+
+  /**
+   * Tests preview and output of props.
+   */
+  public function testRenderFieldFormatter(): void {
+
+    $test_data_field_formatters = self::loadTestDataFixture(__DIR__ . "/../../fixtures/tests.formatter_per_item.yml");
+    $test_set = $test_data_field_formatters->getTestSets('nesting_1');
+
+    $this->node = $this->createTestContentNode('page', $test_set['entity'] ?? []);
+    $ui_patterns_config_to_set = $this->buildUiPatternsConfig($test_set);
+    $config_import = $this->loadConfigFixture(__DIR__ . '/../../fixtures/config/core.entity_view_display.node.page.full.layout.classic.yml');
+    $ui_patterns_config_layout_1 = &$config_import['content']['body']['settings']['ui_patterns'];
+    $ui_patterns_config_layout_1 = $ui_patterns_config_to_set;
+    $field_name = (isset($test_set["contexts"]) && isset($test_set["contexts"]["field_name"])) ? $test_set["contexts"]["field_name"] : NULL;
+    if (!empty($field_name) && $field_name !== "body") {
+      $config_import['content'][$field_name] = $config_import['content']["body"];
+      unset($config_import['content']["body"]);
+    }
+    $this->importConfigFixture('core.entity_view_display.node.page.full', $config_import);
+    $this->collectPerformanceData(function () {
+      $this->drupalGet('node/' . $this->node->id());
+    }, 'UIPatternsRenderFieldFormatter');
+  }
+
+}

modules/ui_patterns_layouts/tests/src/FunctionalJavascriptTests/LayoutBuilderRenderPerformanceTest.php

+<?php
+
+namespace Drupal\Tests\ui_patterns_layouts\FunctionalJavascriptTests;
+
+use Drupal\FunctionalJavascriptTests\PerformanceTestBase;
+use Drupal\node\NodeInterface;
+use Drupal\Tests\ui_patterns\Traits\ConfigImporterTrait;
+use Drupal\Tests\ui_patterns\Traits\TestContentCreationTrait;
+use Drupal\Tests\ui_patterns\Traits\TestDataTrait;
+
+/**
+ * Performance measuring of layout builder sections.
+ *
+ * @group ui_patterns_layouts
+ */
+class LayoutBuilderRenderPerformanceTest extends PerformanceTestBase {
+
+  /**
+   * The default theme.
+   *
+   * @var string
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * The tested node.
+   *
+   * @var \Drupal\node\NodeInterface
+   */
+  protected NodeInterface $node;
+
+  use TestContentCreationTrait;
+  use TestDataTrait;
+  use ConfigImporterTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'node',
+    'ui_patterns',
+    'ui_patterns_test',
+    'ui_patterns_layouts',
+    'field_ui',
+    'layout_builder',
+    'block',
+  ];
+
+  /**
+   * Tests preview and output of props.
+   */
+  public function testRenderSections(): void {
+    $config_import = $this->loadConfigFixture(__DIR__ . '/../../fixtures/config/core.entity_view_display.node.page.full.yml');
+    $ui_patterns_config = &$config_import['third_party_settings']['layout_builder']['sections'][0]['layout_settings']['ui_patterns'];
+    $test_data = $this->loadTestDataFixture();
+    $test_set = $test_data->getTestSet('textfield_default');
+    $this->node = $this->createTestContentNode('page', $test_set['entity'] ?? []);
+    $ui_patterns_config = $this->buildUiPatternsConfig($test_set);
+    $config_import['third_party_settings']['layout_builder']['sections'][0]['layout_id'] = 'ui_patterns:' . str_replace('-', '_', $test_set['component']['component_id']);
+    $section = $config_import['third_party_settings']['layout_builder']['sections'][0];
+    for ($i = 0; $i < 1000; $i++) {
+      $config_import['third_party_settings']['layout_builder']['sections'][$i + 1] = $section;
+    }
+    $this->importConfigFixture(
+        'core.entity_view_display.node.page.full',
+        $config_import
+    );
+
+    $this->collectPerformanceData(function () {
+      $this->drupalGet('node/' . $this->node->id());
+    }, 'UIPatternsRenderSections');
+  }
+
+}

tests/src/Functional/UiPatternsFunctionalTestBase.php

@@ -60,16 +60,6 @@ abstract class UiPatternsFunctionalTestBase extends BrowserTestBase {
     }
   }
 
-  /**
-   * Initialize config.
-   */
-  private function initializeConfig() {
-    if ($this->configInitialize === FALSE) {
-      $this->copyConfig(\Drupal::service('config.storage'), \Drupal::service('config.storage.sync'));
-    }
-    $this->configInitialize = TRUE;
-  }
-
   /**
    * Load a configure fixture.
    *
@@ -87,38 +77,6 @@ abstract class UiPatternsFunctionalTestBase extends BrowserTestBase {
     return Yaml::decode($yaml);
   }
 
-  /**
-   * Import config fixture.
-   *
-   * @param string $config_id
-   *   The config id.
-   * @param array $config
-   *   The config fixture.
-   */
-  public function importConfigFixture(string $config_id, array $config) {
-    $this->configInitialize = FALSE;
-    $this->initializeConfig();
-    \Drupal::service('config.storage.sync')->write($config_id, $config);
-    $config_importer = $this->configImporter();
-    $config_importer->import();
-  }
-
-  /**
-   * Build UI Patterns compatible configuration for given test_set.
-   *
-   * @param array $test_set
-   *   The test_set to build the configuration from.
-   *
-   * @return array
-   *   The builded configuration.
-   */
-  protected function buildUiPatternsConfig(array $test_set):array {
-    if (!isset($test_set['component']['slots'])) {
-      $test_set['component']['slots'] = [];
-    }
-    return $test_set['component'];
-  }
-
   /**
    * Validates rendered component.
    *
@@ -134,7 +92,7 @@ abstract class UiPatternsFunctionalTestBase extends BrowserTestBase {
     foreach ($output as $prop_or_slot => $prop_or_slot_item) {
       foreach ($prop_or_slot_item as $prop_name => $output) {
         $expected_outputs_here = ($prop_or_slot === "props") ? [$output] : $output;
-        foreach ($expected_outputs_here as $index => $expected_output) {
+        foreach ($expected_outputs_here as $expected_output) {
           $type = $prop_or_slot;
           $selector = '.ui-patterns-' . $type . '-' . $prop_name;
           $element = $page->find('css', $selector);

tests/src/Traits/ConfigImporterTrait.php

@@ -43,6 +43,22 @@ trait ConfigImporterTrait {
     return Yaml::decode($yaml);
   }
 
+  /**
+   * Build UI Patterns compatible configuration for given test_set.
+   *
+   * @param array $test_set
+   *   The test_set to build the configuration from.
+   *
+   * @return array
+   *   The builded configuration.
+   */
+  protected function buildUiPatternsConfig(array $test_set):array {
+    if (!isset($test_set['component']['slots'])) {
+      $test_set['component']['slots'] = [];
+    }
+    return $test_set['component'];
+  }
+
   /**
    * Import config fixture.
    *