V17 Updated test helper for document with both variant and invariant blocks (#343)

* Updated ui helper for block list properties

* Updated api helper for creating a document type with variant and invariant block lists

* Bumped version

* Removed params desscription

* Removed unused comment

Author: nhudinh0309

lib/helpers/ContentUiHelper.ts

@@ -177,6 +177,7 @@ export class ContentUiHelper extends UiBaseLocators {
   private readonly hostNameItem: Locator;
   private readonly languageToggle: Locator;
   private readonly contentVariantDropdown: Locator;
+  private readonly blockProperty: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -365,6 +366,7 @@ export class ContentUiHelper extends UiBaseLocators {
     this.entityPickerTree = page.locator('umb-tree[alias="Umb.Tree.EntityDataPicker"]');
     this.languageToggle = page.getByTestId('input:entity-name').locator('#toggle');
     this.contentVariantDropdown = page.locator('umb-document-workspace-split-view-variant-selector uui-popover-container #dropdown');
+    this.blockProperty = page.locator('umb-block-workspace-view-edit-property');
   }
 
   async enterContentName(name: string) {
@@ -1813,4 +1815,34 @@ export class ContentUiHelper extends UiBaseLocators {
     await languageOptionLocator.click();
     await expect(languageOptionLocator).toContainClass('selected');
   }
+
+  async clickAddBlockListElementWithName(blockName: string) {
+    const createNewButtonLocator = this.page.getByTestId('property:' + blockName.toLowerCase()).getByLabel('Create new');
+    await expect(createNewButtonLocator).toBeVisible();
+    await createNewButtonLocator.click();
+  }
+
+  async isAddBlockListElementWithNameDisabled(blockName: string) {
+    const createNewButtonLocator = this.page.getByTestId('property:' + blockName.toLowerCase()).locator('uui-button[label="Create new"]');
+    await expect(createNewButtonLocator).toHaveAttribute('disabled');
+  }
+
+  async isAddBlockListElementWithNameVisible(blockName: string) {
+    const createNewButtonLocator = this.page.getByTestId('property:' + blockName.toLowerCase()).locator('uui-button[label="Create new"]');
+    await expect(createNewButtonLocator).toBeVisible();
+    await expect(createNewButtonLocator).not.toHaveAttribute('disabled');
+  }
+
+  async enterBlockPropertyValue(propertyName: string, value: string) {
+    const property = this.blockProperty.filter({hasText: propertyName});
+    await expect(property).toBeVisible();
+    await property.locator('input').clear();
+    await property.locator('input').fill(value);
+  }
+
+  async isBlockPropertyEditable(propertyName: string, isEditable: boolean = true) {
+    const propertyLocator = this.blockProperty.filter({hasText: propertyName}).locator('#input');
+    await expect(propertyLocator).toBeVisible();
+    await expect(propertyLocator).toBeEditable({editable: isEditable});
+  }
 }

lib/helpers/DocumentTypeApiHelper.ts

@@ -810,4 +810,122 @@ export class DocumentTypeApiHelper {
       return null;
     }
   }
+
+  async createElementTypeWithTwoPropertyEditors(elementTypeName: string, firstDataTypeName: string, firstDataTypeId: string, secondDataTypeName: string, secondDataTypeId: string, elementTypeVaryByCulture: boolean = false, firstPropertyVaryByCulture: boolean = false, secondPropertyVaryByCulture: boolean = false) {
+    const crypto = require('crypto');
+    await this.ensureNameNotExists(elementTypeName);
+
+    const containerId = crypto.randomUUID();
+    const elementType = new DocumentTypeBuilder()
+      .withName(elementTypeName)
+      .withAlias(AliasHelper.toAlias(elementTypeName))
+      .withIsElement(true)
+      .withVariesByCulture(elementTypeVaryByCulture)
+      .withIcon("icon-plugin")
+      .addContainer()
+        .withName('Content')
+        .withId(containerId)
+        .withType("Group")
+        .done()
+      .addProperty()
+        .withContainerId(containerId)
+        .withAlias(AliasHelper.toAlias(firstDataTypeName))
+        .withName(firstDataTypeName)
+        .withDataTypeId(firstDataTypeId)
+        .withVariesByCulture(firstPropertyVaryByCulture)
+        .done()
+      .addProperty()
+        .withContainerId(containerId)
+        .withAlias(AliasHelper.toAlias(secondDataTypeName))
+        .withName(secondDataTypeName)
+        .withDataTypeId(secondDataTypeId)
+        .withVariesByCulture(secondPropertyVaryByCulture)
+        .done()
+      .build();
+
+    return await this.create(elementType);
+  }
+
+  /**
+   * Creates a document type with variant and invariant block lists for testing multilingual scenarios.
+   *
+   * Structure created:
+   * - Document Type (Vary by culture)
+   *   - Text 1 (Vary by culture)
+   *   - Text 2 (Shared)
+   *   - Block List 1 (Vary by culture) - contains Block 1 and Block 2
+   *   - Block List 2 (Shared) - contains Block 1 and Block 2
+   *
+   * - Block 1 Element Type (Vary by culture)
+   *   - Text 1 (Vary by culture)
+   *   - Text 2 (Shared)
+   *
+   * - Block 2 Element Type (Shared/Invariant)
+   *   - Text 1
+   *   - Text 2
+   */
+  async createDocumentTypeWithVariantAndInvariantBlockLists(documentTypeName: string, firstDataTypeName: string, firstDataTypeId: string, secondDataTypeName: string, secondDataTypeId: string, blockList1DataTypeName: string, blockList2DataTypeName: string, block1ElementTypeName: string, block2ElementTypeName: string) {
+    const crypto = require('crypto');
+    await this.ensureNameNotExists(documentTypeName);
+
+    // Create Block 1 Element Type (Vary by culture) with first property (vary by culture) and second property (shared)
+    const block1ElementTypeId = await this.createElementTypeWithTwoPropertyEditors(block1ElementTypeName, firstDataTypeName, firstDataTypeId, secondDataTypeName, secondDataTypeId, true, true, false) as string;
+
+    // Create Block 2 Element Type (Shared/Invariant) with first property and second property
+    const block2ElementTypeId = await this.createElementTypeWithTwoPropertyEditors(block2ElementTypeName, firstDataTypeName, firstDataTypeId, secondDataTypeName, secondDataTypeId, false, false, false) as string;
+
+    // Create Block List 1 Data Type (will be used with vary by culture property)
+    const blockList1DataTypeId = await this.api.dataType.createBlockListDataTypeWithTwoBlocks(blockList1DataTypeName, block1ElementTypeId, block2ElementTypeId) as string;
+
+    // Create Block List 2 Data Type (will be used with shared property)
+    const blockList2DataTypeId = await this.api.dataType.createBlockListDataTypeWithTwoBlocks(blockList2DataTypeName, block1ElementTypeId, block2ElementTypeId) as string;
+
+    // Create Document Type (Vary by culture)
+    const containerId = crypto.randomUUID();
+    const documentType = new DocumentTypeBuilder()
+      .withName(documentTypeName)
+      .withAlias(AliasHelper.toAlias(documentTypeName))
+      .withAllowedAsRoot(true)
+      .withVariesByCulture(true)
+      .addContainer()
+        .withName('Content')
+        .withId(containerId)
+        .withType("Group")
+        .done()
+      .addProperty()
+        .withContainerId(containerId)
+        .withAlias(AliasHelper.toAlias(firstDataTypeName))
+        .withName(firstDataTypeName)
+        .withDataTypeId(firstDataTypeId)
+        .withVariesByCulture(true)
+        .withSortOrder(0)
+        .done()
+      .addProperty()
+        .withContainerId(containerId)
+        .withAlias(AliasHelper.toAlias(secondDataTypeName))
+        .withName(secondDataTypeName)
+        .withDataTypeId(secondDataTypeId)
+        .withVariesByCulture(false)
+        .withSortOrder(1)
+        .done()
+      .addProperty()
+        .withContainerId(containerId)
+        .withAlias(AliasHelper.toAlias(blockList1DataTypeName))
+        .withName(blockList1DataTypeName)
+        .withDataTypeId(blockList1DataTypeId)
+        .withVariesByCulture(true)
+        .withSortOrder(2)
+        .done()
+      .addProperty()
+        .withContainerId(containerId)
+        .withAlias(AliasHelper.toAlias(blockList2DataTypeName))
+        .withName(blockList2DataTypeName)
+        .withDataTypeId(blockList2DataTypeId)
+        .withVariesByCulture(false)
+        .withSortOrder(3)
+        .done()
+      .build();
+
+    return await this.create(documentType);
+  }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco/playwright-testhelpers",
-  "version": "17.0.15",
+  "version": "17.0.16",
   "description": "Test helpers for making playwright tests for Umbraco solutions",
   "main": "dist/lib/index.js",
   "files": [