From 1249740e828c5d07ef6a56171a37534497bbea0e Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Mon, 13 Oct 2025 11:26:06 +0700 Subject: [PATCH 1/8] add test for block custom view --- .../block-custom-view/block-custom-view.js | 43 ++++++ .../block-custom-view.js.map | 1 + .../block-grid-custom-view.js | 23 +++ .../block-grid-custom-view.js.map | 1 + .../block-custom-view/umbraco-package.json | 21 +++ .../ExtensionRegistry/BlockCustomView.spec.ts | 132 ++++++++++++++++++ 6 files changed, 221 insertions(+) create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js.map create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js.map create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js new file mode 100644 index 000000000000..f275d6e50251 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js @@ -0,0 +1,43 @@ +import { LitElement as c, html as m, css as h, property as a, customElement as u } from "@umbraco-cms/backoffice/external/lit"; +import { UmbElementMixin as b } from "@umbraco-cms/backoffice/element-api"; +var d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (p, o, s, r) => { + for (var e = r > 1 ? void 0 : r ? f(o, s) : o, i = p.length - 1, n; i >= 0; i--) + (n = p[i]) && (e = (r ? n(o, s, e) : n(e)) || e); + return r && e && d(o, s, e), e; +}; +let t = class extends b(c) { + render() { + return m` +
My Custom View
+

Heading and Theme: ${this.content?.heading} - ${this.settings?.theme}

+ `; + } +}; +t.styles = [ + h` + :host { + display: block; + height: 100%; + box-sizing: border-box; + background-color: darkgreen; + color: white; + border-radius: 9px; + padding: 12px; + } + ` +]; +l([ + a({ attribute: !1 }) +], t.prototype, "content", 2); +l([ + a({ attribute: !1 }) +], t.prototype, "settings", 2); +t = l([ + u("block-custom-view") +], t); +const w = t; +export { + t as BlockCustomView, + w as default +}; +//# sourceMappingURL=block-custom-view.js.map diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js.map b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js.map new file mode 100644 index 000000000000..48adaed1164a --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js.map @@ -0,0 +1 @@ +{"version":3,"file":"block-custom-view.js","sources":["../../block-custom-view/src/block-custom-view.ts"],"sourcesContent":["import { html, customElement, LitElement, property, css } from '@umbraco-cms/backoffice/external/lit';\nimport { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';\nimport type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';\nimport type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';\n\n@customElement('block-custom-view')\nexport class BlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {\n\t\n\t@property({ attribute: false })\n\tcontent?: UmbBlockDataType;\n\n\t@property({ attribute: false })\n\tsettings?: UmbBlockDataType;\n\n\trender() {\n\t\treturn html`\n\t\t\t
My Custom View
\n\t\t\t

Heading and Theme: ${this.content?.heading} - ${this.settings?.theme}

\n\t\t`;\n\t}\n\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tbackground-color: darkgreen;\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 9px;\n\t\t\t\tpadding: 12px;\n\t\t\t}\n\t\t`,\n\t];\n\t\n}\nexport default BlockCustomView;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'block-custom-view': BlockCustomView;\n\t}\n}\n"],"names":["BlockCustomView","UmbElementMixin","LitElement","html","css","__decorateClass","property","customElement","BlockCustomView$1"],"mappings":";;;;;;;AAMO,IAAMA,IAAN,cAA8BC,EAAgBC,CAAU,EAA6C;AAAA,EAQ3G,SAAS;AACR,WAAOC;AAAA;AAAA,2BAEkB,KAAK,SAAS,OAAO,MAAM,KAAK,UAAU,KAAK;AAAA;AAAA,EAEzE;AAgBD;AA7BaH,EAeL,SAAS;AAAA,EACfI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWD;AAxBAC,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAFlBN,EAGZ,WAAA,WAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GALlBN,EAMZ,WAAA,YAAA,CAAA;AANYA,IAANK,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBP,CAAA;AA8Bb,MAAAQ,IAAeR;"} \ No newline at end of file diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js new file mode 100644 index 000000000000..30af1b6993b6 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js @@ -0,0 +1,23 @@ +import { LitElement as n, html as c, customElement as u } from "@umbraco-cms/backoffice/external/lit"; +import { UmbElementMixin as a } from "@umbraco-cms/backoffice/element-api"; +var d = Object.getOwnPropertyDescriptor, p = (o, l, i, m) => { + for (var e = m > 1 ? void 0 : m ? d(l, i) : l, t = o.length - 1, s; t >= 0; t--) + (s = o[t]) && (e = s(e) || e); + return e; +}; +let r = class extends a(n) { + render() { + return c` +
Block Grid Custom View
+ `; + } +}; +r = p([ + u("block-grid-custom-view") +], r); +const f = r; +export { + r as BlockGridCustomView, + f as default +}; +//# sourceMappingURL=block-grid-custom-view.js.map diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js.map b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js.map new file mode 100644 index 000000000000..d918c3052096 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js.map @@ -0,0 +1 @@ +{"version":3,"file":"block-grid-custom-view.js","sources":["../../block-custom-view/src/block-grid-custom-view.ts"],"sourcesContent":["import { html, customElement, LitElement } from '@umbraco-cms/backoffice/external/lit';\nimport { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';\nimport type { UmbBlockEditorCustomViewElement }\r\nfrom '@umbraco-cms/backoffice/block-custom-view';\n\n@customElement('block-grid-custom-view')\nexport class BlockGridCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement\r\n{\r\n render() {\r\n return html`\n
Block Grid Custom View
\n\t\t`;\r\n }\n\t\n}\nexport default BlockGridCustomView;\n\ndeclare global\r\n{\n\r\n interface HTMLElementTagNameMap\r\n{\n\t\t'block-grid-custom-view': BlockGridCustomView;\n\t}\n}\n"],"names":["BlockGridCustomView","UmbElementMixin","LitElement","html","__decorateClass","customElement","BlockGridCustomView$1"],"mappings":";;;;;;;AAMO,IAAMA,IAAN,cAAkCC,EAAgBC,CAAU,EACnE;AAAA,EACI,SAAS;AACL,WAAOC;AAAA;AAAA;AAAA,EAGX;AAEJ;AARaH,IAANI,EAAA;AAAA,EADNC,EAAc,wBAAwB;AAAA,GAC1BL,CAAA;AASb,MAAAM,IAAeN;"} \ No newline at end of file diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json new file mode 100644 index 000000000000..61ee715aa6bc --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json @@ -0,0 +1,21 @@ +{ + "$schema": "../../umbraco-package-schema.json", + "name": "My.CustomViewPackage", + "version": "0.1.0", + "extensions": [ + { + "type": "blockEditorCustomView", + "alias": "my.blockEditorCustomView.Example", + "name": "My Example Custom View", + "element": "/App_Plugins/block-custom-view/block-custom-view.js", + "forContentTypeAlias": "heroBanner" + }, + { + "type": "blockEditorCustomView", + "alias": "my.blockGridCustomView.Example", + "name": "My Block Grid Custom View", + "element": "/App_Plugins/block-custom-view/block-grid-custom-view.js", + "forBlockEditor": "block-grid" + } + ] +} diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts new file mode 100644 index 000000000000..8d609acfebe8 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -0,0 +1,132 @@ +import {ConstantHelper, test} from '@umbraco/playwright-testhelpers'; + +// Content +const contentName = 'TestContent'; +const contentGroupName = 'TestContentGroup'; +// DocumentType +const documentTypeName = 'TestDocumentTypeForContent'; +// DataType +const dataTypeName = 'Textstring'; +// BlockType +const blockGridName = 'TestBlockGridForContent'; +const blockListName = 'TestBlockListForContent'; +// ElementType +const elementGroupName = 'TestElementGroupForContent'; +const elementTypeName1 = 'TestElementTypeForContent'; +const elementTypeName2 = 'Hero Banner'; +// Setting Model +const settingModelName = 'Test Setting Model'; +const groupName = 'Test Group'; +// Block Custom View +const blockGridCustomViewLocator = 'block-grid-custom-view'; +const blockCustomViewLocator = 'block-custom-view'; +// Property Editor +const propertyEditorName = 'Heading'; +const propertyEditorSettingName = 'Theme'; + +test.afterEach(async ({umbracoApi}) => { + await umbracoApi.document.ensureNameNotExists(contentName); + await umbracoApi.documentType.ensureNameNotExists(documentTypeName); + await umbracoApi.dataType.ensureNameNotExists(blockGridName); + await umbracoApi.dataType.ensureNameNotExists(blockListName); + await umbracoApi.documentType.ensureNameNotExists(elementTypeName1); + await umbracoApi.documentType.ensureNameNotExists(elementTypeName2); + await umbracoApi.dataType.ensureNameNotExists(dataTypeName); +}); + +test('block custom view appears in a specific Block Type (BlockGrid)', async ({umbracoApi, umbracoUi}) => { + // Arrange + const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); + const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName1, elementGroupName, dataTypeName, textStringDataType.id); + const blockGridId = await umbracoApi.dataType.createBlockGridWithABlock(blockGridName, elementTypeId); + const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockGridName, blockGridId, contentGroupName); + await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); + + // Act + await umbracoUi.goToBackOffice(); + await umbracoUi.content.goToSection(ConstantHelper.sections.content); + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickAddBlockElementButton(); + await umbracoUi.content.clickBlockElementWithName(elementTypeName1); + await umbracoUi.content.clickCreateModalButton(); + + // Assert + await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator); + await umbracoUi.content.expectOnlyOneBlockElementVisible(false); +}); + +test('block custom view does not appear in a specific Block Type (BlockList)', async ({umbracoApi, umbracoUi}) => { + // Arrange + const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); + const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName1, elementGroupName, dataTypeName, textStringDataType.id); + const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithABlock(blockListName, elementTypeId); + const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName); + await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); + + // Act + await umbracoUi.goToBackOffice(); + await umbracoUi.content.goToSection(ConstantHelper.sections.content); + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickAddBlockElementButton(); + await umbracoUi.content.clickBlockElementWithName(elementTypeName1); + await umbracoUi.content.clickCreateModalButton(); + + // Assert + await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator, false); + await umbracoUi.content.expectOnlyOneBlockElementVisible(); +}); + +test('block custom view appears in a specific Block Element', async ({umbracoApi, umbracoUi}) => { + // Arrange + const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); + const elementTypeId1 = await umbracoApi.documentType.createDefaultElementType(elementTypeName1, elementGroupName, dataTypeName, textStringDataType.id); + const elementTypeId2 = await umbracoApi.documentType.createDefaultElementType(elementTypeName2, elementGroupName, dataTypeName, textStringDataType.id); + const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithTwoBlocks(blockListName, elementTypeId1, elementTypeId2); + const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName); + await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); + + // Act + await umbracoUi.goToBackOffice(); + await umbracoUi.content.goToSection(ConstantHelper.sections.content); + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickAddBlockElementButton(); + await umbracoUi.content.clickBlockCardWithName(elementTypeName2); + await umbracoUi.content.clickCreateModalButton(); + await umbracoUi.content.clickAddBlockElementButton(); + await umbracoUi.content.clickBlockCardWithName(elementTypeName1); + await umbracoUi.content.clickCreateModalButton(); + + // Assert + await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator); + await umbracoUi.content.expectOnlyOneBlockElementVisible(); +}); + +test('block custom view can display Content and Setting', async ({umbracoApi, umbracoUi}) => { + // Arrange + const contentValue = 'This is block test'; + const settingValue = 'This is setting test'; + const valueText = `Heading and Theme: ${contentValue} - ${settingValue}`; + const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); + const textAreaDataType = await umbracoApi.dataType.getByName('Textarea'); + const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName2, elementGroupName, propertyEditorName, textStringDataType.id); + const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(settingModelName, groupName, propertyEditorSettingName, textAreaDataType.id); + const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithContentAndSettingsElementType(blockListName, elementTypeId, settingsElementTypeId); + const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName); + await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); + + // Act + await umbracoUi.goToBackOffice(); + await umbracoUi.content.goToSection(ConstantHelper.sections.content); + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickAddBlockElementButton(); + await umbracoUi.content.clickBlockCardWithName(elementTypeName2); + await umbracoUi.content.enterTextstring(contentValue); + await umbracoUi.content.clickAddBlockSettingsTabButton(); + await umbracoUi.content.enterTextArea(settingValue); + await umbracoUi.content.clickCreateModalButton(); + await umbracoUi.waitForTimeout(5000); + + // Assert + await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator); + await umbracoUi.content.verifyBlockCustomViewDisplaysCorrectValues(blockCustomViewLocator, valueText); +}); \ No newline at end of file From 6f14694ad8ecab49e3c3c8988773a4e119ae80b5 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Mon, 13 Oct 2025 13:48:37 +0700 Subject: [PATCH 2/8] update format code --- .../ExtensionRegistry/BlockCustomView.spec.ts | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts index 8d609acfebe8..5a5e3d1d9460 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -1,4 +1,4 @@ -import {ConstantHelper, test} from '@umbraco/playwright-testhelpers'; +import { ConstantHelper, test } from '@umbraco/playwright-testhelpers'; // Content const contentName = 'TestContent'; @@ -12,8 +12,8 @@ const blockGridName = 'TestBlockGridForContent'; const blockListName = 'TestBlockListForContent'; // ElementType const elementGroupName = 'TestElementGroupForContent'; -const elementTypeName1 = 'TestElementTypeForContent'; -const elementTypeName2 = 'Hero Banner'; +const firstElementTypeName = 'TestElementTypeForContent'; +const secondElementTypeName = 'Hero Banner'; // Setting Model const settingModelName = 'Test Setting Model'; const groupName = 'Test Group'; @@ -24,20 +24,20 @@ const blockCustomViewLocator = 'block-custom-view'; const propertyEditorName = 'Heading'; const propertyEditorSettingName = 'Theme'; -test.afterEach(async ({umbracoApi}) => { - await umbracoApi.document.ensureNameNotExists(contentName); - await umbracoApi.documentType.ensureNameNotExists(documentTypeName); - await umbracoApi.dataType.ensureNameNotExists(blockGridName); - await umbracoApi.dataType.ensureNameNotExists(blockListName); - await umbracoApi.documentType.ensureNameNotExists(elementTypeName1); - await umbracoApi.documentType.ensureNameNotExists(elementTypeName2); - await umbracoApi.dataType.ensureNameNotExists(dataTypeName); +test.afterEach(async ({ umbracoApi }) => { + await umbracoApi.document.ensureNameNotExists(contentName); + await umbracoApi.documentType.ensureNameNotExists(documentTypeName); + await umbracoApi.dataType.ensureNameNotExists(blockGridName); + await umbracoApi.dataType.ensureNameNotExists(blockListName); + await umbracoApi.documentType.ensureNameNotExists(firstElementTypeName); + await umbracoApi.documentType.ensureNameNotExists(secondElementTypeName); + await umbracoApi.dataType.ensureNameNotExists(dataTypeName); }); -test('block custom view appears in a specific Block Type (BlockGrid)', async ({umbracoApi, umbracoUi}) => { +test('block custom view appears in a specific Block Type (BlockGrid)', async ({ umbracoApi, umbracoUi }) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); - const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName1, elementGroupName, dataTypeName, textStringDataType.id); + const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); const blockGridId = await umbracoApi.dataType.createBlockGridWithABlock(blockGridName, elementTypeId); const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockGridName, blockGridId, contentGroupName); await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); @@ -47,18 +47,18 @@ test('block custom view appears in a specific Block Type (BlockGrid)', async ({u await umbracoUi.content.goToSection(ConstantHelper.sections.content); await umbracoUi.content.goToContentWithName(contentName); await umbracoUi.content.clickAddBlockElementButton(); - await umbracoUi.content.clickBlockElementWithName(elementTypeName1); + await umbracoUi.content.clickBlockElementWithName(firstElementTypeName); await umbracoUi.content.clickCreateModalButton(); - + // Assert await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator); - await umbracoUi.content.expectOnlyOneBlockElementVisible(false); + await umbracoUi.content.isSingleBlockElementVisible(false); }); -test('block custom view does not appear in a specific Block Type (BlockList)', async ({umbracoApi, umbracoUi}) => { +test('block custom view does not appear in a specific Block Type (BlockList)', async ({ umbracoApi, umbracoUi }) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); - const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName1, elementGroupName, dataTypeName, textStringDataType.id); + const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithABlock(blockListName, elementTypeId); const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName); await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); @@ -68,20 +68,20 @@ test('block custom view does not appear in a specific Block Type (BlockList)', a await umbracoUi.content.goToSection(ConstantHelper.sections.content); await umbracoUi.content.goToContentWithName(contentName); await umbracoUi.content.clickAddBlockElementButton(); - await umbracoUi.content.clickBlockElementWithName(elementTypeName1); + await umbracoUi.content.clickBlockElementWithName(firstElementTypeName); await umbracoUi.content.clickCreateModalButton(); - + // Assert await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator, false); - await umbracoUi.content.expectOnlyOneBlockElementVisible(); + await umbracoUi.content.isSingleBlockElementVisible(); }); -test('block custom view appears in a specific Block Element', async ({umbracoApi, umbracoUi}) => { +test('block custom view appears in a specific Block Element', async ({ umbracoApi, umbracoUi }) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); - const elementTypeId1 = await umbracoApi.documentType.createDefaultElementType(elementTypeName1, elementGroupName, dataTypeName, textStringDataType.id); - const elementTypeId2 = await umbracoApi.documentType.createDefaultElementType(elementTypeName2, elementGroupName, dataTypeName, textStringDataType.id); - const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithTwoBlocks(blockListName, elementTypeId1, elementTypeId2); + const firstElementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); + const secondElementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); + const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithTwoBlocks(blockListName, firstElementTypeId, secondElementTypeId); const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName); await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); @@ -90,25 +90,25 @@ test('block custom view appears in a specific Block Element', async ({umbracoApi await umbracoUi.content.goToSection(ConstantHelper.sections.content); await umbracoUi.content.goToContentWithName(contentName); await umbracoUi.content.clickAddBlockElementButton(); - await umbracoUi.content.clickBlockCardWithName(elementTypeName2); + await umbracoUi.content.clickBlockCardWithName(secondElementTypeName); await umbracoUi.content.clickCreateModalButton(); await umbracoUi.content.clickAddBlockElementButton(); - await umbracoUi.content.clickBlockCardWithName(elementTypeName1); + await umbracoUi.content.clickBlockCardWithName(firstElementTypeName); await umbracoUi.content.clickCreateModalButton(); - + // Assert await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator); - await umbracoUi.content.expectOnlyOneBlockElementVisible(); + await umbracoUi.content.isSingleBlockElementVisible(); }); -test('block custom view can display Content and Setting', async ({umbracoApi, umbracoUi}) => { +test('block custom view can display Content and Setting', async ({ umbracoApi, umbracoUi }) => { // Arrange const contentValue = 'This is block test'; const settingValue = 'This is setting test'; const valueText = `Heading and Theme: ${contentValue} - ${settingValue}`; const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); const textAreaDataType = await umbracoApi.dataType.getByName('Textarea'); - const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName2, elementGroupName, propertyEditorName, textStringDataType.id); + const elementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementTypeName, elementGroupName, propertyEditorName, textStringDataType.id); const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(settingModelName, groupName, propertyEditorSettingName, textAreaDataType.id); const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithContentAndSettingsElementType(blockListName, elementTypeId, settingsElementTypeId); const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName); @@ -119,14 +119,14 @@ test('block custom view can display Content and Setting', async ({umbracoApi, um await umbracoUi.content.goToSection(ConstantHelper.sections.content); await umbracoUi.content.goToContentWithName(contentName); await umbracoUi.content.clickAddBlockElementButton(); - await umbracoUi.content.clickBlockCardWithName(elementTypeName2); + await umbracoUi.content.clickBlockCardWithName(secondElementTypeName); await umbracoUi.content.enterTextstring(contentValue); await umbracoUi.content.clickAddBlockSettingsTabButton(); await umbracoUi.content.enterTextArea(settingValue); await umbracoUi.content.clickCreateModalButton(); await umbracoUi.waitForTimeout(5000); - + // Assert await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator); - await umbracoUi.content.verifyBlockCustomViewDisplaysCorrectValues(blockCustomViewLocator, valueText); + await umbracoUi.content.doesBlockCustomViewHaveValue(blockCustomViewLocator, valueText); }); \ No newline at end of file From bac6354beb5ccd3d1fa4e1cf195ca137a601b4dd Mon Sep 17 00:00:00 2001 From: NguyenThuyLan <116753400+NguyenThuyLan@users.noreply.github.com> Date: Wed, 15 Oct 2025 08:53:08 +0700 Subject: [PATCH 3/8] Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> --- .../tests/ExtensionRegistry/BlockCustomView.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts index 5a5e3d1d9460..54b17acf00f2 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -34,7 +34,7 @@ test.afterEach(async ({ umbracoApi }) => { await umbracoApi.dataType.ensureNameNotExists(dataTypeName); }); -test('block custom view appears in a specific Block Type (BlockGrid)', async ({ umbracoApi, umbracoUi }) => { +test('block custom view appears in a specific block type', async ({ umbracoApi, umbracoUi }) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); From 409741ebd22368eefd6171fd18ddbfc2b4b3beed Mon Sep 17 00:00:00 2001 From: NguyenThuyLan <116753400+NguyenThuyLan@users.noreply.github.com> Date: Wed, 15 Oct 2025 08:53:27 +0700 Subject: [PATCH 4/8] Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> --- .../tests/ExtensionRegistry/BlockCustomView.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts index 54b17acf00f2..a1d99804f1ea 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -55,7 +55,7 @@ test('block custom view appears in a specific block type', async ({ umbracoApi, await umbracoUi.content.isSingleBlockElementVisible(false); }); -test('block custom view does not appear in a specific Block Type (BlockList)', async ({ umbracoApi, umbracoUi }) => { +test('block custom view does not appear in block list editor when configured for block grid only', async ({ umbracoApi, umbracoUi }) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); From bab56794a337d929db06bf9dcf5bbf8242c33279 Mon Sep 17 00:00:00 2001 From: NguyenThuyLan <116753400+NguyenThuyLan@users.noreply.github.com> Date: Wed, 15 Oct 2025 08:54:48 +0700 Subject: [PATCH 5/8] Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> --- .../tests/ExtensionRegistry/BlockCustomView.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts index a1d99804f1ea..87619cf2f567 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -76,7 +76,7 @@ test('block custom view does not appear in block list editor when configured for await umbracoUi.content.isSingleBlockElementVisible(); }); -test('block custom view appears in a specific Block Element', async ({ umbracoApi, umbracoUi }) => { +test('block custom view applies to correct content type', async ({ umbracoApi, umbracoUi }) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); const firstElementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); From 31686b39225d6eda99f201042356db4fd4e1037d Mon Sep 17 00:00:00 2001 From: NguyenThuyLan <116753400+NguyenThuyLan@users.noreply.github.com> Date: Wed, 15 Oct 2025 08:54:57 +0700 Subject: [PATCH 6/8] Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> --- .../tests/ExtensionRegistry/BlockCustomView.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts index 87619cf2f567..d7617d8df0ba 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -1,4 +1,4 @@ -import { ConstantHelper, test } from '@umbraco/playwright-testhelpers'; +import {ConstantHelper, test} from '@umbraco/playwright-testhelpers'; // Content const contentName = 'TestContent'; From 87b125a6d0eae4dc784b448785e1fe645b2ff26d Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Wed, 15 Oct 2025 09:10:19 +0700 Subject: [PATCH 7/8] fix some name test --- .../tests/ExtensionRegistry/BlockCustomView.spec.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts index d7617d8df0ba..705dfc9fac46 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -7,6 +7,7 @@ const contentGroupName = 'TestContentGroup'; const documentTypeName = 'TestDocumentTypeForContent'; // DataType const dataTypeName = 'Textstring'; +const textAreaDataTypeName = 'Textarea'; // BlockType const blockGridName = 'TestBlockGridForContent'; const blockListName = 'TestBlockListForContent'; @@ -34,7 +35,7 @@ test.afterEach(async ({ umbracoApi }) => { await umbracoApi.dataType.ensureNameNotExists(dataTypeName); }); -test('block custom view appears in a specific block type', async ({ umbracoApi, umbracoUi }) => { +test('block custom view appears in a specific block type', async ({umbracoApi, umbracoUi}) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); @@ -55,7 +56,7 @@ test('block custom view appears in a specific block type', async ({ umbracoApi, await umbracoUi.content.isSingleBlockElementVisible(false); }); -test('block custom view does not appear in block list editor when configured for block grid only', async ({ umbracoApi, umbracoUi }) => { +test('block custom view does not appear in block list editor when configured for block grid only', async ({umbracoApi, umbracoUi}) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); @@ -76,7 +77,7 @@ test('block custom view does not appear in block list editor when configured for await umbracoUi.content.isSingleBlockElementVisible(); }); -test('block custom view applies to correct content type', async ({ umbracoApi, umbracoUi }) => { +test('block custom view applies to correct content type', async ({umbracoApi, umbracoUi}) => { // Arrange const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); const firstElementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id); @@ -101,13 +102,13 @@ test('block custom view applies to correct content type', async ({ umbracoApi, u await umbracoUi.content.isSingleBlockElementVisible(); }); -test('block custom view can display Content and Setting', async ({ umbracoApi, umbracoUi }) => { +test('block custom view can display values from the content and settings parts', async ({umbracoApi, umbracoUi}) => { // Arrange const contentValue = 'This is block test'; const settingValue = 'This is setting test'; const valueText = `Heading and Theme: ${contentValue} - ${settingValue}`; const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); - const textAreaDataType = await umbracoApi.dataType.getByName('Textarea'); + const textAreaDataType = await umbracoApi.dataType.getByName(textAreaDataTypeName); const elementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementTypeName, elementGroupName, propertyEditorName, textStringDataType.id); const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(settingModelName, groupName, propertyEditorSettingName, textAreaDataType.id); const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithContentAndSettingsElementType(blockListName, elementTypeId, settingsElementTypeId); From 720ad663130c7ffd413aded82089a977da5b1575 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Fri, 17 Oct 2025 09:55:12 +0700 Subject: [PATCH 8/8] add new test for block custom view --- .../block-custom-view/umbraco-package.json | 2 +- .../ExtensionRegistry/BlockCustomView.spec.ts | 39 ++++++++++++++++++- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json index 61ee715aa6bc..d332f18297ab 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json @@ -8,7 +8,7 @@ "alias": "my.blockEditorCustomView.Example", "name": "My Example Custom View", "element": "/App_Plugins/block-custom-view/block-custom-view.js", - "forContentTypeAlias": "heroBanner" + "forContentTypeAlias": "elementTypeForCustomBlockView" }, { "type": "blockEditorCustomView", diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts index 705dfc9fac46..8ef280fdbaa9 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts @@ -14,7 +14,7 @@ const blockListName = 'TestBlockListForContent'; // ElementType const elementGroupName = 'TestElementGroupForContent'; const firstElementTypeName = 'TestElementTypeForContent'; -const secondElementTypeName = 'Hero Banner'; +const secondElementTypeName = 'Element Type For Custom Block View'; // Setting Model const settingModelName = 'Test Setting Model'; const groupName = 'Test Group'; @@ -125,9 +125,44 @@ test('block custom view can display values from the content and settings parts', await umbracoUi.content.clickAddBlockSettingsTabButton(); await umbracoUi.content.enterTextArea(settingValue); await umbracoUi.content.clickCreateModalButton(); - await umbracoUi.waitForTimeout(5000); // Assert await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator); await umbracoUi.content.doesBlockCustomViewHaveValue(blockCustomViewLocator, valueText); +}); + +test('block custom view can display values from the content and settings parts after update', async ({umbracoApi, umbracoUi}) => { + // Arrange + const contentValue = 'This is block test'; + const settingValue = 'This is setting test'; + const updatedContentValue = 'This is updated block test'; + const updatedSettingValue = 'This is updated setting test'; + const updatedValueText = `Heading and Theme: ${updatedContentValue} - ${updatedSettingValue}`; + const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName); + const textAreaDataType = await umbracoApi.dataType.getByName(textAreaDataTypeName); + const elementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementTypeName, elementGroupName, propertyEditorName, textStringDataType.id); + const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(settingModelName, groupName, propertyEditorSettingName, textAreaDataType.id); + const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithContentAndSettingsElementType(blockListName, elementTypeId, settingsElementTypeId); + const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName); + await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); + + // Act + await umbracoUi.goToBackOffice(); + await umbracoUi.content.goToSection(ConstantHelper.sections.content); + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickAddBlockElementButton(); + await umbracoUi.content.clickBlockCardWithName(secondElementTypeName); + await umbracoUi.content.enterTextstring(contentValue); + await umbracoUi.content.clickAddBlockSettingsTabButton(); + await umbracoUi.content.enterTextArea(settingValue); + await umbracoUi.content.clickCreateModalButton(); + await umbracoUi.content.clickEditBlockListBlockButton(); + await umbracoUi.content.enterTextstring(updatedContentValue); + await umbracoUi.content.clickAddBlockSettingsTabButton(); + await umbracoUi.content.enterTextArea(updatedSettingValue); + await umbracoUi.content.clickUpdateButton(); + + // Assert + await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator); + await umbracoUi.content.doesBlockCustomViewHaveValue(blockCustomViewLocator, updatedValueText); }); \ No newline at end of file