Block Custom View: Add tests for create and using block custom view (#20472)
* add test for block custom view * update format code * Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> * Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> * Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> * Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> * fix some name test * add new test for block custom view --------- Co-authored-by: Lan Nguyen Thuy <lnt@umbraco.dk> Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>
This commit is contained in:
NguyenThuyLan
@@ -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`
|
||||
<h5>My Custom View</h5>
|
||||
<p>Heading and Theme: ${this.content?.heading} - ${this.settings?.theme}</p>
|
||||
`;
|
||||
}
|
||||
};
|
||||
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
|
||||
@@ -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<h5>My Custom View</h5>\n\t\t\t<p>Heading and Theme: ${this.content?.heading} - ${this.settings?.theme}</p>\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;"}
|
||||
@@ -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`
|
||||
<h5> Block Grid Custom View</h5>
|
||||
`;
|
||||
}
|
||||
};
|
||||
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
|
||||
@@ -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 <h5> Block Grid Custom View</h5>\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;"}
|
||||
@@ -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": "elementTypeForCustomBlockView"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
|
||||
|
||||
// Content
|
||||
const contentName = 'TestContent';
|
||||
const contentGroupName = 'TestContentGroup';
|
||||
// DocumentType
|
||||
const documentTypeName = 'TestDocumentTypeForContent';
|
||||
// DataType
|
||||
const dataTypeName = 'Textstring';
|
||||
const textAreaDataTypeName = 'Textarea';
|
||||
// BlockType
|
||||
const blockGridName = 'TestBlockGridForContent';
|
||||
const blockListName = 'TestBlockListForContent';
|
||||
// ElementType
|
||||
const elementGroupName = 'TestElementGroupForContent';
|
||||
const firstElementTypeName = 'TestElementTypeForContent';
|
||||
const secondElementTypeName = 'Element Type For Custom Block View';
|
||||
// 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(firstElementTypeName);
|
||||
await umbracoApi.documentType.ensureNameNotExists(secondElementTypeName);
|
||||
await umbracoApi.dataType.ensureNameNotExists(dataTypeName);
|
||||
});
|
||||
|
||||
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);
|
||||
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(firstElementTypeName);
|
||||
await umbracoUi.content.clickCreateModalButton();
|
||||
|
||||
// Assert
|
||||
await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator);
|
||||
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}) => {
|
||||
// Arrange
|
||||
const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName);
|
||||
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);
|
||||
|
||||
// Act
|
||||
await umbracoUi.goToBackOffice();
|
||||
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
|
||||
await umbracoUi.content.goToContentWithName(contentName);
|
||||
await umbracoUi.content.clickAddBlockElementButton();
|
||||
await umbracoUi.content.clickBlockElementWithName(firstElementTypeName);
|
||||
await umbracoUi.content.clickCreateModalButton();
|
||||
|
||||
// Assert
|
||||
await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator, false);
|
||||
await umbracoUi.content.isSingleBlockElementVisible();
|
||||
});
|
||||
|
||||
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);
|
||||
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);
|
||||
|
||||
// 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.clickCreateModalButton();
|
||||
await umbracoUi.content.clickAddBlockElementButton();
|
||||
await umbracoUi.content.clickBlockCardWithName(firstElementTypeName);
|
||||
await umbracoUi.content.clickCreateModalButton();
|
||||
|
||||
// Assert
|
||||
await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator);
|
||||
await umbracoUi.content.isSingleBlockElementVisible();
|
||||
});
|
||||
|
||||
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(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();
|
||||
|
||||
// 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);
|
||||
});
|
||||
Reference in New Issue
Block a user