diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/my-collection-view.js b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/my-collection-view.js new file mode 100644 index 000000000000..38ef5a40de09 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/my-collection-view.js @@ -0,0 +1,217 @@ +import { UMB_DOCUMENT_COLLECTION_CONTEXT as T, UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN as P } from "@umbraco-cms/backoffice/document"; +import { css as D, state as d, customElement as x, html as n } from "@umbraco-cms/backoffice/external/lit"; +import { UmbLitElement as E } from "@umbraco-cms/backoffice/lit-element"; +import { UmbTextStyles as A } from "@umbraco-cms/backoffice/style"; +import { fromCamelCase as O } from "@umbraco-cms/backoffice/utils"; +var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, y = (e) => { + throw TypeError(e); +}, c = (e, t, a, s) => { + for (var r = s > 1 ? void 0 : s ? $(t, a) : t, p = e.length - 1, m; p >= 0; p--) + (m = e[p]) && (r = (s ? m(t, a, r) : m(r)) || r); + return s && r && S(t, a, r), r; +}, f = (e, t, a) => t.has(e) || y("Cannot " + a), u = (e, t, a) => (f(e, t, "read from private field"), t.get(e)), _ = (e, t, a) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), I = (e, t, a, s) => (f(e, t, "write to private field"), t.set(e, a), a), h = (e, t, a) => (f(e, t, "access private method"), a), b, o, l, w, g, v, C; +let i = class extends E { + constructor() { + super(), _(this, l), this._tableColumns = [], _(this, b, [ + { + name: this.localize.term("general_name"), + alias: "name", + elementName: "umb-document-table-column-name", + allowSorting: !0 + }, + { + name: this.localize.term("content_publishStatus"), + alias: "state", + elementName: "umb-document-table-column-state", + allowSorting: !1 + } + ]), this._tableItems = [], _(this, o), this.consumeContext(T, (e) => { + I(this, o, e), e?.setupView(this), this.observe( + e?.workspacePathBuilder, + (t) => { + this._workspacePathBuilder = t, u(this, o) && h(this, l, v).call(this, u(this, o).getItems()); + }, + "observePath" + ), h(this, l, w).call(this); + }); + } + render() { + return n` + + + + ${this._tableColumns.map( + (e) => n`` + )} + + + + ${this._tableItems.map( + (e) => n` + + ${this._tableColumns.map((t) => { + const s = e.data.find((r) => r.columnAlias === t.alias)?.value ?? ""; + return t.alias === "name" && s?.item ? n`` : t.alias === "state" && s?.item ? n`` : t.alias === "entityActions" ? n`` : n``; + })} + + ` + )} + +
${e.name}
${s.item.name}${s.item.state}⋮${s}
`; + } +}; +b = /* @__PURE__ */ new WeakMap(); +o = /* @__PURE__ */ new WeakMap(); +l = /* @__PURE__ */ new WeakSet(); +w = function() { + u(this, o) && (this.observe( + u(this, o).userDefinedProperties, + (e) => { + this._userDefinedProperties = e, h(this, l, g).call(this); + }, + "_observeUserDefinedProperties" + ), this.observe( + u(this, o).items, + (e) => { + this._items = e, h(this, l, v).call(this, this._items); + }, + "_observeItems" + )); +}; +g = function() { + if (this._userDefinedProperties && this._userDefinedProperties.length > 0) { + const e = this._userDefinedProperties.map((t) => ({ + name: this.localize.string(t.header), + alias: t.alias, + elementName: t.elementName, + labelTemplate: t.nameTemplate, + allowSorting: !0 + })); + this._tableColumns = [ + ...u(this, b), + ...e, + { name: "", alias: "entityActions", align: "right" } + ]; + } +}; +v = function(e) { + this._tableItems = e.map((t) => { + if (!t.unique) throw new Error("Item id is missing."); + const a = this._tableColumns?.map((s) => { + if (s.alias === "entityActions") + return { + columnAlias: "entityActions", + value: n`` + }; + const r = t.unique && this._workspacePathBuilder ? this._workspacePathBuilder({ entityType: t.entityType }) + P.generateLocal({ + unique: t.unique + }) : ""; + return { + columnAlias: s.alias, + value: s.elementName ? { item: t, editPath: r } : h(this, l, C).call(this, t, s.alias) + }; + }) ?? []; + return { + id: t.unique, + icon: t.documentType.icon, + entityType: "document", + data: a + }; + }); +}; +C = function(e, t) { + switch (t) { + case "contentTypeAlias": + return e.contentTypeAlias; + case "createDate": + return e.createDate.toLocaleString(); + case "creator": + case "owner": + return e.creator; + case "name": + return e.name; + case "state": + return O(e.state); + case "published": + return e.state !== "Draft" ? "True" : "False"; + case "sortOrder": + return e.sortOrder; + case "updateDate": + return e.updateDate.toLocaleString(); + case "updater": + return e.updater; + default: + return e.values.find((a) => a.alias === t)?.value ?? ""; + } +}; +i.styles = [ + A, + D` + :host { + display: block; + box-sizing: border-box; + height: auto; + width: 100%; + padding: var(--uui-size-space-3) 0; + } + + .container { + display: flex; + justify-content: center; + align-items: center; + } + + :host { + display: block; + width: 100%; + overflow-x: auto; + } + table { + width: 100%; + border-collapse: collapse; + font-size: 14px; + } + th, + td { + padding: 6px 10px; + border: 1px solid #ddd; + white-space: nowrap; + } + th { + background: #f8f8f8; + font-weight: 600; + } + a { + color: var(--uui-color-interactive, #0366d6); + text-decoration: none; + } + a:hover { + text-decoration: underline; + } + ` +]; +c([ + d() +], i.prototype, "_workspacePathBuilder", 2); +c([ + d() +], i.prototype, "_userDefinedProperties", 2); +c([ + d() +], i.prototype, "_items", 2); +c([ + d() +], i.prototype, "_tableColumns", 2); +c([ + d() +], i.prototype, "_tableItems", 2); +i = c([ + x("my-document-table-collection-view") +], i); +const z = i; +export { + i as MyDocumentTableCollectionViewElement, + z as default +}; +//# sourceMappingURL=my-collection-view.js.map diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/my-collection-view.js.map b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/my-collection-view.js.map new file mode 100644 index 000000000000..b613f3d7c86c --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/my-collection-view.js.map @@ -0,0 +1 @@ +{"version":3,"file":"my-collection-view.js","sources":["../../my-collection-view/src/my-collection-view.ts"],"sourcesContent":["import { UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN } from '@umbraco-cms/backoffice/document';\r\nimport type { UmbDocumentCollectionItemModel } from '@umbraco-cms/backoffice/document';\r\nimport { UMB_DOCUMENT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/document';\r\nimport type { UmbCollectionColumnConfiguration } from '@umbraco-cms/backoffice/collection';\r\nimport { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit';\r\nimport { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';\r\nimport { UmbTextStyles } from '@umbraco-cms/backoffice/style';\r\nimport type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';\r\nimport { fromCamelCase } from '@umbraco-cms/backoffice/utils';\r\nimport type {\r\n\tUmbTableColumn,\r\n\tUmbTableItem,\r\n} from '@umbraco-cms/backoffice/components';\r\n\r\n@customElement('my-document-table-collection-view')\r\nexport class MyDocumentTableCollectionViewElement extends UmbLitElement {\r\n\t@state()\r\n\tprivate _workspacePathBuilder?: UmbModalRouteBuilder;\r\n\r\n\t@state()\r\n\tprivate _userDefinedProperties?: Array;\r\n\r\n\t@state()\r\n\tprivate _items?: Array;\r\n\r\n\t@state()\r\n\tprivate _tableColumns: Array = [];\r\n\r\n\t#systemColumns: Array = [\r\n\t\t{\r\n\t\t\tname: this.localize.term('general_name'),\r\n\t\t\talias: 'name',\r\n\t\t\telementName: 'umb-document-table-column-name',\r\n\t\t\tallowSorting: true,\r\n\t\t},\r\n\t\t{\r\n\t\t\tname: this.localize.term('content_publishStatus'),\r\n\t\t\talias: 'state',\r\n\t\t\telementName: 'umb-document-table-column-state',\r\n\t\t\tallowSorting: false,\r\n\t\t},\r\n\t];\r\n\r\n\t@state()\r\n\tprivate _tableItems: Array = [];\r\n\r\n\t#collectionContext?: typeof UMB_DOCUMENT_COLLECTION_CONTEXT.TYPE;\r\n\r\n\tconstructor() {\r\n\t\tsuper();\r\n\r\n\t\tthis.consumeContext(UMB_DOCUMENT_COLLECTION_CONTEXT, (collectionContext) => {\r\n\t\t\tthis.#collectionContext = collectionContext;\r\n\t\t\tcollectionContext?.setupView(this);\r\n\t\t\tthis.observe(\r\n\t\t\t\tcollectionContext?.workspacePathBuilder,\r\n\t\t\t\t(builder) => {\r\n\t\t\t\t\tthis._workspacePathBuilder = builder;\r\n\t\t\t\t\tif (this.#collectionContext) {\r\n\t\t\t\t\t\tthis.#createTableItems(this.#collectionContext.getItems());\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t'observePath',\r\n\t\t\t);\r\n\t\t\tthis.#observeCollectionContext();\r\n\t\t});\r\n\t}\r\n\r\n\t#observeCollectionContext() {\r\n\t\tif (!this.#collectionContext) return;\r\n\r\n\t\tthis.observe(\r\n\t\t\tthis.#collectionContext.userDefinedProperties,\r\n\t\t\t(userDefinedProperties) => {\r\n\t\t\t\tthis._userDefinedProperties = userDefinedProperties;\r\n\t\t\t\tthis.#createTableHeadings();\r\n\t\t\t},\r\n\t\t\t'_observeUserDefinedProperties',\r\n\t\t);\r\n\r\n\t\tthis.observe(\r\n\t\t\tthis.#collectionContext.items,\r\n\t\t\t(items) => {\r\n\t\t\t\tthis._items = items;\r\n\t\t\t\tthis.#createTableItems(this._items);\r\n\t\t\t},\r\n\t\t\t'_observeItems',\r\n\t\t);\r\n\t}\r\n\r\n\t#createTableHeadings() {\r\n\t\tif (this._userDefinedProperties && this._userDefinedProperties.length > 0) {\r\n\t\t\tconst userColumns: Array = this._userDefinedProperties.map((item) => {\r\n\t\t\t\treturn {\r\n\t\t\t\t\tname: this.localize.string(item.header),\r\n\t\t\t\t\talias: item.alias,\r\n\t\t\t\t\telementName: item.elementName,\r\n\t\t\t\t\tlabelTemplate: item.nameTemplate,\r\n\t\t\t\t\tallowSorting: true,\r\n\t\t\t\t};\r\n\t\t\t});\r\n\r\n\t\t\tthis._tableColumns = [\r\n\t\t\t\t...this.#systemColumns,\r\n\t\t\t\t...userColumns,\r\n\t\t\t\t{ name: '', alias: 'entityActions', align: 'right' },\r\n\t\t\t];\r\n\t\t}\r\n\t}\r\n\r\n\t#createTableItems(items: Array) {\r\n\t\tthis._tableItems = items.map((item) => {\r\n\t\t\tif (!item.unique) throw new Error('Item id is missing.');\r\n\r\n\t\t\tconst data =\r\n\t\t\t\tthis._tableColumns?.map((column) => {\r\n\t\t\t\t\tif (column.alias === 'entityActions') {\r\n\t\t\t\t\t\treturn {\r\n\t\t\t\t\t\t\tcolumnAlias: 'entityActions',\r\n\t\t\t\t\t\t\tvalue: html``,\r\n\t\t\t\t\t\t};\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tconst editPath =\r\n\t\t\t\t\t\titem.unique && this._workspacePathBuilder\r\n\t\t\t\t\t\t\t? this._workspacePathBuilder({ entityType: item.entityType }) +\r\n\t\t\t\t\t\t\tUMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN.generateLocal({\r\n\t\t\t\t\t\t\t\tunique: item.unique,\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t\t: '';\r\n\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\tcolumnAlias: column.alias,\r\n\t\t\t\t\t\tvalue: column.elementName ? { item, editPath } : this.#getPropertyValueByAlias(item, column.alias),\r\n\t\t\t\t\t};\r\n\t\t\t\t}) ?? [];\r\n\r\n\t\t\treturn {\r\n\t\t\t\tid: item.unique,\r\n\t\t\t\ticon: item.documentType.icon,\r\n\t\t\t\tentityType: 'document',\r\n\t\t\t\tdata: data,\r\n\t\t\t};\r\n\t\t});\r\n\t}\r\n\r\n\t#getPropertyValueByAlias(item: UmbDocumentCollectionItemModel, alias: string) {\r\n\tswitch (alias) {\r\n\t\tcase 'contentTypeAlias':\r\n\t\t\treturn item.contentTypeAlias;\r\n\t\tcase 'createDate':\r\n\t\t\treturn item.createDate.toLocaleString();\r\n\t\tcase 'creator':\r\n\t\tcase 'owner':\r\n\t\t\treturn item.creator;\r\n\t\tcase 'name':\r\n\t\t\treturn item.name;\r\n\t\tcase 'state':\r\n\t\t\treturn fromCamelCase(item.state);\r\n\t\tcase 'published':\r\n\t\t\treturn item.state !== 'Draft' ? 'True' : 'False';\r\n\t\tcase 'sortOrder':\r\n\t\t\treturn item.sortOrder;\r\n\t\tcase 'updateDate':\r\n\t\t\treturn item.updateDate.toLocaleString();\r\n\t\tcase 'updater':\r\n\t\t\treturn item.updater;\r\n\t\tdefault:\r\n\t\t\treturn item.values.find((value) => value.alias === alias)?.value ?? '';\r\n\t}\r\n}\r\n\r\n\toverride render() {\r\n\t\treturn html`\r\n\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t${this._tableColumns.map(\r\n\t\t\t\t\t\t\t(col) => html``,\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t${this._tableItems.map(\r\n\t\t\t\t\t\t\t(item) => html`\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t${this._tableColumns.map((col) => {\r\n\t\t\t\t\t\t\t\tconst cell = item.data.find((d) => d.columnAlias === col.alias);\r\n\t\t\t\t\t\t\t\tconst val = cell?.value ?? '';\r\n\t\t\t\t\t\t\t\tif (col.alias === 'name' && val?.item) {\r\n\t\t\t\t\t\t\t\t\treturn html``;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\tif (col.alias === 'state' && val?.item) {\r\n\t\t\t\t\t\t\t\t\treturn html``;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\tif (col.alias === 'entityActions') {\r\n\t\t\t\t\t\t\t\t\treturn html``;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\treturn html``;\r\n\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t`,\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\r\n\t\t\t
${col.name}
${val.item.name}${val.item.state}⋮${val}
`;\r\n\t}\r\n\r\n\tstatic override styles = [\r\n\t\tUmbTextStyles,\r\n\t\tcss`\r\n\t\t\t:host {\r\n\t\t\t\tdisplay: block;\r\n\t\t\t\tbox-sizing: border-box;\r\n\t\t\t\theight: auto;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\tpadding: var(--uui-size-space-3) 0;\r\n\t\t\t}\r\n\r\n\t\t\t.container {\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\tjustify-content: center;\r\n\t\t\t\talign-items: center;\r\n\t\t\t}\r\n\r\n\t\t\t:host {\r\n\t\t\tdisplay: block;\r\n\t\t\twidth: 100%;\r\n\t\t\toverflow-x: auto;\r\n\t\t\t}\r\n\t\t\ttable {\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\tborder-collapse: collapse;\r\n\t\t\t\tfont-size: 14px;\r\n\t\t\t}\r\n\t\t\tth,\r\n\t\t\ttd {\r\n\t\t\t\tpadding: 6px 10px;\r\n\t\t\t\tborder: 1px solid #ddd;\r\n\t\t\t\twhite-space: nowrap;\r\n\t\t\t}\r\n\t\t\tth {\r\n\t\t\t\tbackground: #f8f8f8;\r\n\t\t\t\tfont-weight: 600;\r\n\t\t\t}\r\n\t\t\ta {\r\n\t\t\t\tcolor: var(--uui-color-interactive, #0366d6);\r\n\t\t\t\ttext-decoration: none;\r\n\t\t\t}\r\n\t\t\ta:hover {\r\n\t\t\t\ttext-decoration: underline;\r\n\t\t\t}\r\n\t\t\t`,\r\n\t];\r\n}\r\n\r\nexport default MyDocumentTableCollectionViewElement;\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'my-document-table-collection-view': MyDocumentTableCollectionViewElement;\r\n\t}\r\n}\r\n"],"names":["_systemColumns","_collectionContext","_MyDocumentTableCollectionViewElement_instances","observeCollectionContext_fn","createTableHeadings_fn","createTableItems_fn","getPropertyValueByAlias_fn","MyDocumentTableCollectionViewElement","UmbLitElement","__privateAdd","UMB_DOCUMENT_COLLECTION_CONTEXT","collectionContext","__privateSet","builder","__privateGet","__privateMethod","html","col","item","val","d","userDefinedProperties","items","userColumns","data","column","editPath","UMB_EDIT_DOCUMENT_WORKSPACE_PATH_PATTERN","alias","fromCamelCase","value","UmbTextStyles","css","__decorateClass","state","customElement","MyDocumentTableCollectionViewElement$1"],"mappings":"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"} \ No newline at end of file diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/umbraco-package.json b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/umbraco-package.json new file mode 100644 index 000000000000..7cbeb21c79e5 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/my-collection-view/umbraco-package.json @@ -0,0 +1,24 @@ +{ + "$schema": "../../umbraco-package-schema.json", + "name": "My Collection View", + "version": "0.1.0", + "extensions": [ + { + "type": "collectionView", + "alias": "My.CollectionView.Document.Table", + "name": "My Collection View Table", + "element": "/App_Plugins/my-collection-view/my-collection-view.js", + "meta": { + "label": "Table", + "icon": "icon-list", + "pathName": "table" + }, + "conditions": [ + { + "alias": "Umb.Condition.CollectionAlias", + "match": "Umb.Collection.Document" + } + ] + } + ] +} diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/CollectionView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/CollectionView.spec.ts new file mode 100644 index 000000000000..8ebda107cfef --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/CollectionView.spec.ts @@ -0,0 +1,71 @@ +import {ConstantHelper, test} from '@umbraco/playwright-testhelpers'; +import {expect} from "@playwright/test"; + +// Content +const parentContentName = 'parentContentName'; +// DocumentType +const documentTypeParentName = 'ParentDocumentType'; +const documentTypeChildName = 'ChildDocumentType'; +// DataType +const customDataTypeName = 'Custom List View'; +const layoutName = 'My Collection View Table'; +const layoutCollectionView = 'My.CollectionView.Document.Table'; + +test.afterEach(async ({umbracoApi}) => { + await umbracoApi.document.ensureNameNotExists(parentContentName); + await umbracoApi.documentType.ensureNameNotExists(documentTypeParentName); + await umbracoApi.documentType.ensureNameNotExists(documentTypeChildName); + await umbracoApi.dataType.ensureNameNotExists(customDataTypeName); +}); + +test('can see the custom collection view when choosing layout for new collection data type', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoUi.goToBackOffice(); + await umbracoUi.dataType.goToSettingsTreeItem('Data Types'); + await umbracoApi.dataType.createListViewContentDataType(customDataTypeName); + await umbracoUi.dataType.goToDataType(customDataTypeName); + + // Act + await umbracoUi.dataType.addLayouts(layoutName); + await umbracoUi.dataType.clickSaveButton(); + + // Assert + await umbracoUi.dataType.isSuccessStateVisibleForSaveButton(); + expect(await umbracoApi.dataType.doesListViewHaveLayout(customDataTypeName, layoutName, 'icon-list', layoutCollectionView)).toBeTruthy(); +}); + +test('can see the pagination works when using custom collection view in content section', async ({umbracoApi, umbracoUi}) => { + // Arrange + const pageSize = 5; + const totalItems = 7; + await umbracoUi.goToBackOffice(); + await umbracoUi.dataType.goToSettingsTreeItem('Data Types'); + const dataTypeId = await umbracoApi.dataType.createListViewContentDataTypeWithLayoutAndPageSize(customDataTypeName,layoutCollectionView, layoutName, pageSize); + const documentTypeChildId = await umbracoApi.documentType.createDefaultDocumentType(documentTypeChildName); + const documentTypeParentId = await umbracoApi.documentType.createDocumentTypeWithAllowedChildNodeAndCollectionId(documentTypeParentName, documentTypeChildId, dataTypeId); + const documentParentId = await umbracoApi.document.createDefaultDocument(parentContentName, documentTypeParentId); + for (let i = 1; i <= totalItems; i++) { + await umbracoApi.document.createDefaultDocumentWithParent('Test child ' + i, documentTypeChildId, documentParentId); + } + await umbracoUi.goToBackOffice(); + await umbracoUi.content.goToSection(ConstantHelper.sections.content); + + // Act + await umbracoUi.content.goToContentWithName(parentContentName); + + // Assert + // Page 1 + await umbracoUi.content.doesListViewItemsHaveCount(pageSize); + await umbracoUi.content.isListViewItemWithNameVisible('Test child 1', 0); + await umbracoUi.content.isListViewItemWithNameVisible('Test child 5', 4); + // Page 2 + await umbracoUi.content.clickPaginationNextButton(); + await umbracoUi.content.doesListViewItemsHaveCount(2); + await umbracoUi.content.isListViewItemWithNameVisible('Test child 6', 0); + await umbracoUi.content.isListViewItemWithNameVisible('Test child 7', 1); + + // Clean + for (let i = 1; i <= totalItems; i++) { + await umbracoApi.document.ensureNameNotExists('Test child ' + i); + } +}); \ No newline at end of file