Property action: Add tests for create and using Property Action UI Extension (#20291)

* add property action tests

* add extension property action code

* remove extension registry config

* update helper version

* Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/PropertyAction.spec.ts

Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>

* Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/PropertyAction.spec.ts

Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>

* Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-property-action/write-property-action.api.js

Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>

* Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-property-action/read-property-action.api.js

Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>

* change tab space size

---------

Co-authored-by: Lan Nguyen Thuy <lnt@umbraco.dk>
Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>

tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-property-action/my-property-action.manifests.js

@@ -0,0 +1,28 @@
+export const manifests = [
+  {
+    type: 'propertyAction',
+    kind: 'default',
+    alias: 'My.propertyAction.Write',
+    name: 'Write Property Action ',
+    forPropertyEditorUis: ["Umb.PropertyEditorUi.TextBox"],
+    api: () => import('./write-property-action.api.js'),
+    weight: 200,
+    meta: {
+      icon: 'icon-brush',
+      label: 'Write text',
+    }
+  },
+  {
+    type: 'propertyAction',
+    kind: 'default',
+    alias: 'My.propertyAction.Read',
+    name: 'Read Property Action ',
+    forPropertyEditorUis: ["Umb.PropertyEditorUi.TextBox"],
+    api: () => import('./read-property-action.api.js'),
+    weight: 200,
+    meta: {
+      icon: 'icon-eye',
+      label: 'Read text',
+    }
+  }
+]

tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-property-action/read-property-action.api.js

@@ -0,0 +1,20 @@
+import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
+import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
+export class ReadPropertyAction extends UmbPropertyActionBase {
+  async execute() {
+    const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
+    if (!propertyContext) {
+      return;
+    }
+    const value = propertyContext.getValue();
+    const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+    notificationContext?.peek('positive', {
+      data: {
+        headline: '',
+        message: value,
+      },
+    });
+  }
+}
+export { ReadPropertyAction as api };

tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-property-action/umbraco-package.json

@@ -0,0 +1,12 @@
+{
+  "name": "E2E Test Package",
+  "version": "1.0.0",
+  "extensions": [
+    {
+      "type": "bundle",
+      "alias": "My.PropertyAction.Bundle",
+      "name": "My property action bundle",
+      "js": "/App_Plugins/my-property-action/my-property-action.manifests.js"
+    }
+  ]
+}

tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-property-action/write-property-action.api.js

@@ -0,0 +1,13 @@
+import { UmbPropertyActionBase } from '@umbraco-cms/backoffice/property-action';
+import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+export class WritePropertyAction extends UmbPropertyActionBase {
+  async execute() {
+    const propertyContext = await this.getContext(UMB_PROPERTY_CONTEXT);
+    if (!propertyContext) {
+      return;
+    }
+    propertyContext.setValue('Hello world');
+    
+  }
+}
+export { WritePropertyAction as api };

tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/PropertyAction.spec.ts

@@ -0,0 +1,59 @@
+import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
+import { expect } from '@playwright/test';
+
+// Content
+const contentName = 'TestContent';
+// DocumentType
+const documentTypeName = 'TestDocumentTypeForContent';
+// GroupName
+const groupName = 'Content';
+// DataType
+const dataTypeName = 'Textstring';
+// Property actions name
+const writeActionName = 'Write text';
+const readActionName = 'Read text';
+// Test values
+const readTextValue = 'Test text value';
+const writeTextValue = 'Hello world';
+
+test.afterEach(async ({umbracoApi}) => {
+	await umbracoApi.document.ensureNameNotExists(contentName);
+	await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+});
+
+test('can read value from textstring editor using read property action', async ({umbracoApi, umbracoUi}) => {
+  // Arrange 
+  const dataTypeData = await umbracoApi.dataType.getByName(dataTypeName);
+  const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataTypeData.id, groupName);
+  await umbracoApi.document.createDocumentWithTextContent(contentName, documentTypeId, readTextValue, dataTypeName);
+  await umbracoUi.goToBackOffice();
+  await umbracoUi.content.goToSection(ConstantHelper.sections.content);
+
+  // Act
+  await umbracoUi.content.goToContentWithName(contentName);
+  await umbracoUi.content.clickActionsMenuForProperty(groupName, dataTypeName);
+  await umbracoUi.content.clickPropertyActionWithName(readActionName);
+
+  // Assert
+  await umbracoUi.content.doesSuccessNotificationHaveText(readTextValue);
+});
+
+test('can write value to textstring editor using write property action', async ({umbracoApi, umbracoUi}) => {
+  // Arrange 
+  const dataTypeData = await umbracoApi.dataType.getByName(dataTypeName);
+  const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataTypeData.id, groupName);
+  const contentId = await umbracoApi.document.createDocumentWithTextContent(contentName, documentTypeId, '', dataTypeName);
+  await umbracoUi.goToBackOffice();
+  await umbracoUi.content.goToSection(ConstantHelper.sections.content);
+
+  // Act
+  await umbracoUi.content.goToContentWithName(contentName);
+  await umbracoUi.content.clickActionsMenuForProperty(groupName, dataTypeName);
+  await umbracoUi.content.clickPropertyActionWithName(writeActionName);
+  await umbracoUi.content.clickSaveButton();
+
+  // Assert
+  await umbracoUi.content.isSuccessStateVisibleForSaveButton();
+  const updatedContentData = await umbracoApi.document.get(contentId);
+  expect(updatedContentData.values[0].value).toBe(writeTextValue);
+});