ISTWCMS-4182: Test codepen embed block

tests/src/Functional/UwWcmsBasicTest.php

@@ -673,6 +673,7 @@ class UwWcmsBasicTest extends BrowserTestBase {
     $blocks = [
       'Blockquote',
       'Call to action',
+      'CodePen',
       'Copy text',
       'Facebook',
       'Facts and figures',
@@ -712,8 +713,39 @@ class UwWcmsBasicTest extends BrowserTestBase {
       $this->assertSession()->pageTextNotContains('Generate automatic URL alias');
       $this->assertSession()->pageTextNotContains('URL alias');
 
-      // Test Tableau block.
+      // Test specific blocks.
       switch ($block) {
+        case 'CodePen':
+          // Create CodePen block.
+          $edit = [
+            'edit-settings-label' => $this->randomString(),
+            // Letters only, 6-7 characters.
+            'edit-settings-block-form-field-codepen-id-0-value' => substr(preg_replace('/[^a-zA-Z]+/', '', $this->randomMachineName(24)), 0, 7),
+            'edit-settings-block-form-field-codepen-username-0-value' => $this->randomMachineName(),
+            'edit-settings-block-form-field-codepen-displayed-author-0-value' => $this->randomString(),
+            // Double-quote not possible because it will make the XPath invalid
+            // later in this test. In normal use, double-quote would be allowed.
+            'edit-settings-block-form-field-codepen-displayed-title-0-value' => str_replace('"', '', $this->randomString()),
+            'edit-settings-block-form-field-codepen-default-tabs' => 'result',
+            'edit-settings-block-form-field-codepen-pixel-height-0-value' => rand(150, 1000),
+          ];
+          $this->submitForm($edit, 'Add block');
+
+          // Test that the CodePen block markup appears on the page.
+          $this->assertSession()->pageTextContains($edit['edit-settings-label']);
+          $this->assertFieldByXPath('//div[@class="uw-codepen"]/div[
+            @class="codepen"
+            and @data-height="' . $edit['edit-settings-block-form-field-codepen-pixel-height-0-value'] . '"
+            and @data-theme-id="dark"
+            and @data-slug-hash="' . $edit['edit-settings-block-form-field-codepen-id-0-value'] . '"
+            and @data-default-tab="' . $edit['edit-settings-block-form-field-codepen-default-tabs'] . '"
+            and @data-user="' . $edit['edit-settings-block-form-field-codepen-username-0-value'] . '"
+            and @data-pen-title="' . $edit['edit-settings-block-form-field-codepen-displayed-title-0-value'] . '"
+            and @data-preview="true"
+          ]/a[@href="https://codepen.io/' . $edit['edit-settings-block-form-field-codepen-username-0-value'] . '/pen/' . $edit['edit-settings-block-form-field-codepen-id-0-value'] . '/"]');
+          $this->assertFieldByXPath('//div[@class="uw-codepen"]/script[@src="https://static.codepen.io/assets/embed/ei.js"]');
+          break;
+
         case 'Google Maps':
           // Create Google Maps block.
           $edit = [
@@ -747,8 +779,8 @@ class UwWcmsBasicTest extends BrowserTestBase {
           $edit = [
             'edit-settings-label' => $this->randomString(),
             'edit-settings-block-form-field-uw-tbl-server' => 'Public',
-            'edit-settings-block-form-field-uw-tbl-site-name-0-value' => $this->randomString(),
-            'edit-settings-block-form-field-uw-tbl-tableau-name-0-value' => $this->randomString(),
+            'edit-settings-block-form-field-uw-tbl-site-name-0-value' => $this->randomMachineName(),
+            'edit-settings-block-form-field-uw-tbl-tableau-name-0-value' => $this->randomMachineName(),
             'edit-settings-block-form-field-uw-tbl-tableau-height-0-value' => rand(100, 1000),
             'edit-settings-block-form-field-uw-tbl-display-tabs' => 'Yes',
           ];