E2E: Added acceptance tests for block grid area

tests/Umbraco.Tests.AcceptanceTest/lib/builders/dataTypes/blockGridBuilder/blockGridAreaBuilder.ts

@@ -94,7 +94,7 @@ export class BlockGridAreaBuilder {
     }
 
     if (this.blockGridSpecifiedAllowanceBuilder && this.blockGridSpecifiedAllowanceBuilder.length > 0) {
-      values.specifiedAllowances = this.blockGridSpecifiedAllowanceBuilder.map((builder) => {
+      values.specifiedAllowance = this.blockGridSpecifiedAllowanceBuilder.map((builder) => {
         return builder.getValues();
       });
     }

tests/Umbraco.Tests.AcceptanceTest/lib/helpers/DataTypeApiHelper.ts

@@ -1,4 +1,4 @@
 import {ApiHelpers} from "./ApiHelpers";
 import {
   CheckboxListDataTypeBuilder,
   DatePickerDataTypeBuilder,
@@ -602,6 +602,96 @@
     return await this.save(blockGrid);
   }
 
+  async createBlockGridWithAnAreaWithSpecifiedAllowanceInABlock(blockGridName: string, contentElementTypeId: string, specifiedAllowanceElementTypeId: string, areaAlias: string = 'area', createLabel: string = 'CreateLabel', columnSpan: number = 6, rowSpan: number = 1) {
+    await this.ensureNameNotExists(blockGridName);
+
+    const blockGrid = new BlockGridDataTypeBuilder()
+      .withName(blockGridName)
+      .addBlock()
+        .withContentElementTypeKey(contentElementTypeId)
+        .withAllowAtRoot(true)
+        .addArea()
+          .withAlias(areaAlias)
+          .withCreateLabel(createLabel)
+          .withColumnSpan(columnSpan)
+          .withRowSpan(rowSpan)
+          .addSpecifiedAllowance()
+            .withElementTypeKey(specifiedAllowanceElementTypeId)
+            .done()
+          .done()
+        .done()
+      .addBlock()
+        .withContentElementTypeKey(specifiedAllowanceElementTypeId)
+        .withAllowInAreas(true)
+        .done()
+      .build();
+
+    return await this.save(blockGrid);
+  }
+
+  async createBlockGridWithAnAreaWithSpecifiedAllowanceWithMinMaxInABlock(blockGridName: string, contentElementTypeId: string, specifiedAllowanceElementTypeId: string, minAllowed: number, maxAllowed: number, areaAlias: string = 'area', createLabel: string = 'CreateLabel', columnSpan: number = 6, rowSpan: number = 1) {
+    await this.ensureNameNotExists(blockGridName);
+
+    const blockGrid = new BlockGridDataTypeBuilder()
+      .withName(blockGridName)
+      .addBlock()
+        .withContentElementTypeKey(contentElementTypeId)
+        .withAllowAtRoot(true)
+        .addArea()
+          .withAlias(areaAlias)
+          .withCreateLabel(createLabel)
+          .withColumnSpan(columnSpan)
+          .withRowSpan(rowSpan)
+          .addSpecifiedAllowance()
+            .withElementTypeKey(specifiedAllowanceElementTypeId)
+            .withMinAllowed(minAllowed)
+            .withMaxAllowed(maxAllowed)
+            .done()
+          .done()
+        .done()
+      .addBlock()
+        .withContentElementTypeKey(specifiedAllowanceElementTypeId)
+        .withAllowInAreas(true)
+        .done()
+      .build();
+
+    return await this.save(blockGrid);
+  }
+
+  async createBlockGridWithAnAreaWithTwoSpecifiedAllowancesInABlock(blockGridName: string, contentElementTypeId: string, firstSpecifiedAllowanceElementTypeId: string, secondSpecifiedAllowanceElementTypeId: string, areaAlias: string = 'area', createLabel: string = 'CreateLabel', columnSpan: number = 6, rowSpan: number = 1) {
+    await this.ensureNameNotExists(blockGridName);
+
+    const blockGrid = new BlockGridDataTypeBuilder()
+      .withName(blockGridName)
+      .addBlock()
+        .withContentElementTypeKey(contentElementTypeId)
+        .withAllowAtRoot(true)
+        .addArea()
+          .withAlias(areaAlias)
+          .withCreateLabel(createLabel)
+          .withColumnSpan(columnSpan)
+          .withRowSpan(rowSpan)
+          .addSpecifiedAllowance()
+            .withElementTypeKey(firstSpecifiedAllowanceElementTypeId)
+            .done()
+          .addSpecifiedAllowance()
+            .withElementTypeKey(secondSpecifiedAllowanceElementTypeId)
+            .done()
+          .done()
+        .done()
+      .addBlock()
+        .withContentElementTypeKey(firstSpecifiedAllowanceElementTypeId)
+        .withAllowInAreas(true)
+        .done()
+      .addBlock()
+        .withContentElementTypeKey(secondSpecifiedAllowanceElementTypeId)
+        .withAllowInAreas(true)
+        .done()
+      .build();
+
+    return await this.save(blockGrid);
+  }
+
   async createBlockGridWithAnAreaInABlockWithAllowInAreas(blockGridName: string, contentElementTypeId: string, areaAlias: string = 'area', allowInAreas = false, createButtonLabel :string = 'CreateLabel', columnSpan: number = 6, rowSpan: number = 1, minAllowed: number = 0, maxAllowed: number = 2) {
     await this.ensureNameNotExists(blockGridName);
 
@@ -939,11 +1029,35 @@
   }
 
   async doesBlockEditorBlockContainAreaWithSpecifiedAllowance(blockGridName: string, elementTypeKey: string, areaAlias: string = 'area') {
-    const block = await this.getBlockWithContentElementTypeId(blockGridName, elementTypeKey);
-    const area = block.areas.find(area => area.alias === areaAlias);
+    const area = await this.getBlockAreaByAlias(blockGridName, elementTypeKey, areaAlias);
     return area && area.specifiedAllowance && area.specifiedAllowance.length > 0;
   }
 
+  async doesBlockGridBlockContainAreaWithSpecifiedAllowanceForElementType(blockGridName: string, elementTypeKey: string, specifiedAllowanceElementTypeKey: string, areaAlias: string = 'area') {
+    const area = await this.getBlockAreaByAlias(blockGridName, elementTypeKey, areaAlias);
+    return area && area.specifiedAllowance && area.specifiedAllowance.some(sa => sa.elementTypeKey === specifiedAllowanceElementTypeKey);
+  }
+
+  async doesBlockGridBlockContainAreaWithSpecifiedAllowanceCount(blockGridName: string, elementTypeKey: string, count: number, areaAlias: string = 'area') {
+    const area = await this.getBlockAreaByAlias(blockGridName, elementTypeKey, areaAlias);
+    return area && area.specifiedAllowance && area.specifiedAllowance.length === count;
+  }
+
+  async doesBlockGridBlockContainAreaWithSpecifiedAllowanceMinMax(blockGridName: string, elementTypeKey: string, specifiedAllowanceElementTypeKey: string, minAllowed: number, maxAllowed: number, areaAlias: string = 'area') {
+    const area = await this.getBlockAreaByAlias(blockGridName, elementTypeKey, areaAlias);
+    return area && area.specifiedAllowance &&
+      area.specifiedAllowance.some(sa =>
+        sa.elementTypeKey === specifiedAllowanceElementTypeKey &&
+        sa.minAllowed === minAllowed &&
+        sa.maxAllowed === maxAllowed
+      );
+  }
+
+  private async getBlockAreaByAlias(blockGridName: string, elementTypeKey: string, areaAlias: string) {
+    const block = await this.getBlockWithContentElementTypeId(blockGridName, elementTypeKey);
+    return block.areas.find(area => area.alias === areaAlias);
+  }
+
   async doesBlockEditorBlockContainStylesheet(blockGridName: string, elementTypeKey: string, stylesheetPath: string) {
     const block = await this.getBlockWithContentElementTypeId(blockGridName, elementTypeKey);
     const encodedSecondStylesheetPath = await this.api.stylesheet.encodeStylesheetPath(stylesheetPath);

tests/Umbraco.Tests.AcceptanceTest/lib/helpers/DataTypeUiHelper.ts

@@ -1,4 +1,4 @@
 import {Page, Locator, expect} from "@playwright/test";
 import {UiBaseLocators} from "./UiBaseLocators";
 import {ConstantHelper} from "./ConstantHelper";
 
@@ -146,6 +146,8 @@
   private readonly dynamicRootOriginPickerModal: Locator;
   private readonly dynamicRootQueryStepPickerModal: Locator;
   private readonly closeDynamicRootOriginPickerModalBtn: Locator;
+  private readonly specifiedAllowance: Locator;
+  private readonly specifiedAllowanceItems: Locator;
 
   constructor(page: Page) {
     super(page);
@@ -296,14 +298,16 @@
     this.blockGridAreaWorkspaceSubmitBtn = this.page.locator('umb-block-grid-area-type-workspace-editor').getByLabel('Submit');
     this.createLabelTxt = this.page.locator('[alias="createLabel"]').locator('#input');
     this.minAllowedTxt = this.page.locator('#container').getByLabel('Low value');
     this.maxAllowedTxt = this.page.locator('#container').getByLabel('High value');
-    this.addSpecifiedAllowanceBtn = this.page.locator('[alias="specifiedAllowance"]').getByLabel('Add');
     this.advancedTabBtn = this.page.getByRole('tab', {name: 'Advanced'});
     this.allowBlockAtRootToggle = this.page.getByTestId('property:allowAtRoot').locator('#toggle');
     this.allowInAreasToggle = this.page.getByTestId('property:allowInAreas').locator('#toggle');
     this.expandChildItemsForMediaBtn = this.page.getByLabel('Expand child items for media', {exact: true});
     this.chooseCustomStylesheetBtn = this.page.locator('[label="Custom stylesheet"]').getByLabel('Choose');
     this.blockThumbnailRemoveBtn = this.page.getByTestId('property:thumbnail').getByLabel('Remove', {exact: true});
+    this.specifiedAllowance = this.page.getByTestId('property:specifiedAllowance');
+    this.addSpecifiedAllowanceBtn = this.specifiedAllowance.getByLabel('Add');
+    this.specifiedAllowanceItems = this.specifiedAllowance.locator('.permission-setting');
 
     // Tiptap
     this.tiptapToolbarConfiguration = this.page.locator('umb-property-editor-ui-tiptap-toolbar-configuration');
@@ -835,7 +839,7 @@
   }
 
   async goToBlockWithName(name: string) {
-    await this.click(this.page.getByRole('link', {name: name}));
+    await this.click(this.page.getByRole('link', {name: name, exact: true}));
   }
 
   async enterBlockLabelText(label: string) {
@@ -1058,6 +1062,41 @@
     await this.click(this.addSpecifiedAllowanceBtn);
   }
 
+  async clickSpecifiedAllowanceComboboxByIndex(index: number = 0) {
+    const combobox = this.specifiedAllowanceItems.nth(index).locator('uui-combobox');
+    await this.click(combobox);
+  }
+
+  async selectSpecifiedAllowanceOptionByName(elementTypeName: string) {
+    const option = this.specifiedAllowanceItems.locator('uui-combobox-list-option').filter({hasText: elementTypeName});
+    await this.click(option);
+  }
+
+  async clickRemoveSpecifiedAllowanceByIndex(index: number = 0) {
+    const removeBtn = this.specifiedAllowanceItems.nth(index).locator('uui-button[label="Remove"]');
+    await this.click(removeBtn);
+  }
+
+  async enterSpecifiedAllowanceMinByIndex(value: number | undefined, index: number = 0) {
+    const minInput = this.specifiedAllowanceItems.nth(index).locator('uui-input[type="number"]').first().locator('input');
+    if (value === undefined) {
+      await this.focus(minInput); // Focus is needed
+      await this.clearText(minInput);
+      return;
+    } 
+    await this.enterText(minInput, value.toString());
+  }
+
+  async enterSpecifiedAllowanceMaxByIndex(value: number | undefined, index: number = 0) {
+    const maxInput = this.specifiedAllowanceItems.nth(index).locator('uui-input[type="number"]').nth(1).locator('input');
+    if (value === undefined) {
+      await this.focus(maxInput); // Focus is needed
+      await this.clearText(maxInput);
+      return;
+    }
+    await this.enterText(maxInput, value.toString());
+  }
+
   async goToBlockAdvancedTab() {
     await this.click(this.advancedTabBtn);
   }