E2E: QA added entity picker acceptance tests

build/nightly-E2E-test-pipelines.yml

@@ -564,6 +564,23 @@ stages:
               CONNECTIONSTRINGS__UMBRACODBDSN: Server=(local);Database=Umbraco;User Id=sa;Password=$(SA_PASSWORD);Encrypt=True;TrustServerCertificate=True
               CONNECTIONSTRINGS__UMBRACODBDSN_PROVIDERNAME: Microsoft.Data.SqlClient
               additionalEnvironmentVariables: false
+            # EntityDataPicker
+            WindowsEntityDataPicker:
+              vmImage: "windows-latest"
+              testFolder: "EntityDataPicker"
+              port: ''
+              testCommand: "npx playwright test --project=entityDataPicker"
+              CONNECTIONSTRINGS__UMBRACODBDSN: Data Source=(localdb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Umbraco.mdf;Integrated Security=True
+              CONNECTIONSTRINGS__UMBRACODBDSN_PROVIDERNAME: Microsoft.Data.SqlClient
+              additionalEnvironmentVariables: false
+            LinuxEntityDataPicker:
+              vmImage: "ubuntu-latest"
+              testFolder: "EntityDataPicker"
+              port: ''
+              testCommand: "npx playwright test --project=entityDataPicker"
+              CONNECTIONSTRINGS__UMBRACODBDSN: Server=(local);Database=Umbraco;User Id=sa;Password=$(SA_PASSWORD);Encrypt=True;TrustServerCertificate=True
+              CONNECTIONSTRINGS__UMBRACODBDSN_PROVIDERNAME: Microsoft.Data.SqlClient
+              additionalEnvironmentVariables: false
         pool:
           vmImage: $(vmImage)
         steps:

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -22,10 +22,10 @@
     "typescript": "^4.8.3"
   },
   "dependencies": {
-    "@umbraco/json-models-builders": "^2.0.41",
+    "@umbraco/json-models-builders": "^2.0.42",
     "@umbraco/playwright-testhelpers": "^17.0.6",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"
   }
-}
+}

tests/Umbraco.Tests.AcceptanceTest/playwright.config.ts

@@ -65,6 +65,17 @@ export default defineConfig({
         storageState: STORAGE_STATE
       }
     },
+    {
+      name: 'entityDataPicker',
+      testMatch: 'EntityDataPicker/**/*.spec.ts',
+      dependencies: ['setup'],
+      use: {
+        ...devices['Desktop Chrome'],
+        // Use prepared auth state.
+        ignoreHTTPSErrors: true,
+        storageState: STORAGE_STATE
+      }
+    },
     {
       name: 'deliveryApi',
       testMatch: 'DeliveryApi/**',

tests/Umbraco.Tests.AcceptanceTest/tests/EntityDataPicker/AdditionalSetup/App_Plugins/picker-data-source/collection-api.js

@@ -0,0 +1,73 @@
+import {UmbControllerBase} from "@umbraco-cms/backoffice/class-api";
+
+export class ExampleCustomPickerCollectionPropertyEditorDataSource extends UmbControllerBase {
+  collectionPickableFilter = (item) => item.isPickable;
+
+  async requestCollection(args) {
+    const data = {
+      items: customItems,
+      total: customItems.length,
+    };
+
+    return {data};
+  }
+
+  async requestItems(uniques) {
+    const items = customItems.filter((x) => uniques.includes(x.unique));
+    return {data: items};
+  }
+
+  async search(args) {
+    const items = customItems.filter((item) =>
+      item.name?.toLowerCase().includes(args.query.toLowerCase())
+    );
+    const total = items.length;
+
+    const data = {
+      items,
+      total,
+    };
+
+    return {data};
+  }
+}
+
+export {ExampleCustomPickerCollectionPropertyEditorDataSource as api};
+
+const customItems = [
+  {
+    unique: "1",
+    entityType: "example",
+    name: "Example 1",
+    icon: "icon-shape-triangle",
+    isPickable: true,
+  },
+  {
+    unique: "2",
+    entityType: "example",
+    name: "Example 2",
+    icon: "icon-shape-triangle",
+    isPickable: true,
+  },
+  {
+    unique: "3",
+    entityType: "example",
+    name: "Example 3",
+    icon: "icon-shape-triangle",
+    isPickable: true,
+  },
+  {
+    unique: "4",
+    entityType: "example",
+    name: "Example 4",
+    icon: "icon-shape-triangle",
+    isPickable: false,
+  },
+  {
+    unique: "5",
+    entityType: "example",
+    name: "Example 5",
+    icon: "icon-shape-triangle",
+    isPickable: true,
+  },
+];

tests/Umbraco.Tests.AcceptanceTest/tests/EntityDataPicker/AdditionalSetup/App_Plugins/picker-data-source/tree-api.js

@@ -0,0 +1,129 @@
+import {UmbControllerBase} from "@umbraco-cms/backoffice/class-api";
+
+export class MyPickerDataSource extends UmbControllerBase {
+  treePickableFilter = (treeItem) =>
+    !!treeItem.unique && treeItem.entityType === "example";
+
+  searchPickableFilter = (searchItem) =>
+    !!searchItem.unique && searchItem.entityType === "example";
+
+  async requestTreeRoot() {
+    const root = {
+      unique: null,
+      name: "Examples",
+      icon: "icon-folder",
+      hasChildren: true,
+      entityType: "example-root",
+      isFolder: true,
+    };
+
+    return {data: root};
+  }
+
+  async requestTreeRootItems() {
+    const rootItems = customItems.filter((item) => item.parent.unique === null);
+
+    const data = {
+      items: rootItems,
+      total: rootItems.length,
+    };
+
+    return {data};
+  }
+
+  async requestTreeItemsOf(args) {
+    const items = customItems.filter(
+      (item) =>
+        item.parent.entityType === args.parent.entityType &&
+        item.parent.unique === args.parent.unique
+    );
+
+    const data = {
+      items: items,
+      total: items.length,
+    };
+
+    return {data};
+  }
+
+  async requestTreeItemAncestors() {
+    // TODO: implement when needed
+    return {data: []};
+  }
+
+  async requestItems(uniques) {
+    const items = customItems.filter((x) => uniques.includes(x.unique));
+    return {data: items};
+  }
+
+  async search(args) {
+    const result = customItems.filter((item) =>
+      item.name.toLowerCase().includes(args.query.toLowerCase())
+    );
+
+    const data = {
+      items: result,
+      total: result.length,
+    };
+
+    return {data};
+  }
+}
+
+export {MyPickerDataSource as api};
+
+const customItems = [
+  {
+    unique: "1",
+    entityType: "example",
+    name: "Example 1",
+    icon: "icon-shape-triangle",
+    parent: {unique: null, entityType: "example-root"},
+    isFolder: false,
+    hasChildren: false,
+  },
+  {
+    unique: "2",
+    entityType: "example",
+    name: "Example 2",
+    icon: "icon-shape-triangle",
+    parent: {unique: null, entityType: "example-root"},
+    isFolder: false,
+    hasChildren: false,
+  },
+  {
+    unique: "3",
+    entityType: "example",
+    name: "Example 3",
+    icon: "icon-shape-triangle",
+    parent: {unique: null, entityType: "example-root"},
+    isFolder: false,
+    hasChildren: false,
+  },
+  {
+    unique: "4",
+    entityType: "example",
+    name: "Example 4",
+    icon: "icon-shape-triangle",
+    parent: {unique: "6", entityType: "example-folder"},
+    isFolder: false,
+    hasChildren: false,
+  },
+  {
+    unique: "5",
+    entityType: "example",
+    name: "Example 5",
+    icon: "icon-shape-triangle",
+    parent: {unique: "6", entityType: "example-folder"},
+    isFolder: false,
+    hasChildren: false,
+  },
+  {
+    unique: "6",
+    entityType: "example-folder",
+    name: "Example Folder 1",
+    parent: {unique: null, entityType: "example-root"},
+    isFolder: true,
+    hasChildren: true,
+  },
+];

tests/Umbraco.Tests.AcceptanceTest/tests/EntityDataPicker/AdditionalSetup/App_Plugins/picker-data-source/umbraco-package.json

@@ -0,0 +1,30 @@
+{
+  "name": "My Picker Data Source",
+  "alias": "My.PickerDataSource",
+  "extensions": [
+    {
+      "type": "propertyEditorDataSource",
+      "dataSourceType": "Umb.DataSourceType.Picker",
+      "alias": "My.PickerDataSource.Tree",
+      "name": "My Picker Tree Data Source",
+      "api": "/App_Plugins/picker-data-source/tree-api.js",
+      "meta": {
+        "icon": "icon-database",
+        "label": "My Picker Tree Data Source",
+        "description": "Some description goes here"
+      }
+    },
+    {
+      "type": "propertyEditorDataSource",
+      "dataSourceType": "Umb.DataSourceType.Picker",
+      "alias": "My.PickerDataSource.Collection",
+      "name": "My Picker Collection Data Source",
+      "api": "/App_Plugins/picker-data-source/collection-api.js",
+      "meta": {
+        "icon": "icon-database",
+        "label": "My Picker Collection Data Source",
+        "description": "Some description goes here"
+      }
+    }
+  ]
+}

tests/Umbraco.Tests.AcceptanceTest/tests/EntityDataPicker/AdditionalSetup/appsettings.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "appsettings-schema.json",
+  "Serilog": {
+    "MinimumLevel": {
+      "Default": "Information",
+      "Override": {
+        "Microsoft": "Warning",
+        "Microsoft.Hosting.Lifetime": "Information",
+        "System": "Warning"
+      }
+    },
+    "WriteTo": [
+      {
+        "Name": "Async",
+        "Args": {
+          "Configure": [
+            {
+              "Name": "Console"
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "Umbraco": {
+    "CMS": {
+      "Unattended": {
+        "InstallUnattended": true,
+        "UnattendedUserName": "Playwright Test",
+        "UnattendedUserEmail": "playwright@umbraco.com",
+        "UnattendedUserPassword": "UmbracoAcceptance123!"
+      },
+      "Content": {
+        "ContentVersionCleanupPolicy": {
+          "EnableCleanup": false
+        }
+      },
+      "Global": {
+        "DisableElectionForSingleServer": true,
+        "InstallMissingDatabase": true,
+        "Id": "00000000-0000-0000-0000-000000000042",
+        "VersionCheckPeriod": 0,
+        "UseHttps": true
+      },
+      "HealthChecks": {
+        "Notification": {
+          "Enabled": false
+        }
+      },
+      "KeepAlive": {
+        "DisableKeepAliveTask": true
+      },
+      "WebRouting": {
+        "UmbracoApplicationUrl": "https://localhost:44331/"
+      }
+    }
+  }
+}