Skip to content

Commit e155fdf

Browse files
NguyenThuyLanLanThuyNguyennhudinh0309
authored
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 <[email protected]> * Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <[email protected]> * Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <[email protected]> * Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts Co-authored-by: Nhu Dinh <[email protected]> * fix some name test * add new test for block custom view --------- Co-authored-by: Lan Nguyen Thuy <[email protected]> Co-authored-by: Nhu Dinh <[email protected]>
1 parent 594c3f4 commit e155fdf

File tree

6 files changed

+257
-0
lines changed

6 files changed

+257
-0
lines changed

‎tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js‎

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-custom-view.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js‎

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/block-grid-custom-view.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/AdditionalSetup/App_Plugins/block-custom-view/umbraco-package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "../../umbraco-package-schema.json",
3+
"name": "My.CustomViewPackage",
4+
"version": "0.1.0",
5+
"extensions": [
6+
{
7+
"type": "blockEditorCustomView",
8+
"alias": "my.blockEditorCustomView.Example",
9+
"name": "My Example Custom View",
10+
"element": "/App_Plugins/block-custom-view/block-custom-view.js",
11+
"forContentTypeAlias": "elementTypeForCustomBlockView"
12+
},
13+
{
14+
"type": "blockEditorCustomView",
15+
"alias": "my.blockGridCustomView.Example",
16+
"name": "My Block Grid Custom View",
17+
"element": "/App_Plugins/block-custom-view/block-grid-custom-view.js",
18+
"forBlockEditor": "block-grid"
19+
}
20+
]
21+
}

‎tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/BlockCustomView.spec.ts‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
2+
3+
// Content
4+
const contentName = 'TestContent';
5+
const contentGroupName = 'TestContentGroup';
6+
// DocumentType
7+
const documentTypeName = 'TestDocumentTypeForContent';
8+
// DataType
9+
const dataTypeName = 'Textstring';
10+
const textAreaDataTypeName = 'Textarea';
11+
// BlockType
12+
const blockGridName = 'TestBlockGridForContent';
13+
const blockListName = 'TestBlockListForContent';
14+
// ElementType
15+
const elementGroupName = 'TestElementGroupForContent';
16+
const firstElementTypeName = 'TestElementTypeForContent';
17+
const secondElementTypeName = 'Element Type For Custom Block View';
18+
// Setting Model
19+
const settingModelName = 'Test Setting Model';
20+
const groupName = 'Test Group';
21+
// Block Custom View
22+
const blockGridCustomViewLocator = 'block-grid-custom-view';
23+
const blockCustomViewLocator = 'block-custom-view';
24+
// Property Editor
25+
const propertyEditorName = 'Heading';
26+
const propertyEditorSettingName = 'Theme';
27+
28+
test.afterEach(async ({ umbracoApi }) => {
29+
await umbracoApi.document.ensureNameNotExists(contentName);
30+
await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
31+
await umbracoApi.dataType.ensureNameNotExists(blockGridName);
32+
await umbracoApi.dataType.ensureNameNotExists(blockListName);
33+
await umbracoApi.documentType.ensureNameNotExists(firstElementTypeName);
34+
await umbracoApi.documentType.ensureNameNotExists(secondElementTypeName);
35+
await umbracoApi.dataType.ensureNameNotExists(dataTypeName);
36+
});
37+
38+
test('block custom view appears in a specific block type', async ({umbracoApi, umbracoUi}) => {
39+
// Arrange
40+
const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName);
41+
const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id);
42+
const blockGridId = await umbracoApi.dataType.createBlockGridWithABlock(blockGridName, elementTypeId);
43+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockGridName, blockGridId, contentGroupName);
44+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
45+
46+
// Act
47+
await umbracoUi.goToBackOffice();
48+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
49+
await umbracoUi.content.goToContentWithName(contentName);
50+
await umbracoUi.content.clickAddBlockElementButton();
51+
await umbracoUi.content.clickBlockElementWithName(firstElementTypeName);
52+
await umbracoUi.content.clickCreateModalButton();
53+
54+
// Assert
55+
await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator);
56+
await umbracoUi.content.isSingleBlockElementVisible(false);
57+
});
58+
59+
test('block custom view does not appear in block list editor when configured for block grid only', async ({umbracoApi, umbracoUi}) => {
60+
// Arrange
61+
const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName);
62+
const elementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id);
63+
const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithABlock(blockListName, elementTypeId);
64+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName);
65+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
66+
67+
// Act
68+
await umbracoUi.goToBackOffice();
69+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
70+
await umbracoUi.content.goToContentWithName(contentName);
71+
await umbracoUi.content.clickAddBlockElementButton();
72+
await umbracoUi.content.clickBlockElementWithName(firstElementTypeName);
73+
await umbracoUi.content.clickCreateModalButton();
74+
75+
// Assert
76+
await umbracoUi.content.isBlockCustomViewVisible(blockGridCustomViewLocator, false);
77+
await umbracoUi.content.isSingleBlockElementVisible();
78+
});
79+
80+
test('block custom view applies to correct content type', async ({umbracoApi, umbracoUi}) => {
81+
// Arrange
82+
const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName);
83+
const firstElementTypeId = await umbracoApi.documentType.createDefaultElementType(firstElementTypeName, elementGroupName, dataTypeName, textStringDataType.id);
84+
const secondElementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementTypeName, elementGroupName, dataTypeName, textStringDataType.id);
85+
const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithTwoBlocks(blockListName, firstElementTypeId, secondElementTypeId);
86+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName);
87+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
88+
89+
// Act
90+
await umbracoUi.goToBackOffice();
91+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
92+
await umbracoUi.content.goToContentWithName(contentName);
93+
await umbracoUi.content.clickAddBlockElementButton();
94+
await umbracoUi.content.clickBlockCardWithName(secondElementTypeName);
95+
await umbracoUi.content.clickCreateModalButton();
96+
await umbracoUi.content.clickAddBlockElementButton();
97+
await umbracoUi.content.clickBlockCardWithName(firstElementTypeName);
98+
await umbracoUi.content.clickCreateModalButton();
99+
100+
// Assert
101+
await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator);
102+
await umbracoUi.content.isSingleBlockElementVisible();
103+
});
104+
105+
test('block custom view can display values from the content and settings parts', async ({umbracoApi, umbracoUi}) => {
106+
// Arrange
107+
const contentValue = 'This is block test';
108+
const settingValue = 'This is setting test';
109+
const valueText = `Heading and Theme: ${contentValue} - ${settingValue}`;
110+
const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName);
111+
const textAreaDataType = await umbracoApi.dataType.getByName(textAreaDataTypeName);
112+
const elementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementTypeName, elementGroupName, propertyEditorName, textStringDataType.id);
113+
const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(settingModelName, groupName, propertyEditorSettingName, textAreaDataType.id);
114+
const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithContentAndSettingsElementType(blockListName, elementTypeId, settingsElementTypeId);
115+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName);
116+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
117+
118+
// Act
119+
await umbracoUi.goToBackOffice();
120+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
121+
await umbracoUi.content.goToContentWithName(contentName);
122+
await umbracoUi.content.clickAddBlockElementButton();
123+
await umbracoUi.content.clickBlockCardWithName(secondElementTypeName);
124+
await umbracoUi.content.enterTextstring(contentValue);
125+
await umbracoUi.content.clickAddBlockSettingsTabButton();
126+
await umbracoUi.content.enterTextArea(settingValue);
127+
await umbracoUi.content.clickCreateModalButton();
128+
129+
// Assert
130+
await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator);
131+
await umbracoUi.content.doesBlockCustomViewHaveValue(blockCustomViewLocator, valueText);
132+
});
133+
134+
test('block custom view can display values from the content and settings parts after update', async ({umbracoApi, umbracoUi}) => {
135+
// Arrange
136+
const contentValue = 'This is block test';
137+
const settingValue = 'This is setting test';
138+
const updatedContentValue = 'This is updated block test';
139+
const updatedSettingValue = 'This is updated setting test';
140+
const updatedValueText = `Heading and Theme: ${updatedContentValue} - ${updatedSettingValue}`;
141+
const textStringDataType = await umbracoApi.dataType.getByName(dataTypeName);
142+
const textAreaDataType = await umbracoApi.dataType.getByName(textAreaDataTypeName);
143+
const elementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementTypeName, elementGroupName, propertyEditorName, textStringDataType.id);
144+
const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(settingModelName, groupName, propertyEditorSettingName, textAreaDataType.id);
145+
const blockListId = await umbracoApi.dataType.createBlockListDataTypeWithContentAndSettingsElementType(blockListName, elementTypeId, settingsElementTypeId);
146+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, blockListName, blockListId, contentGroupName);
147+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
148+
149+
// Act
150+
await umbracoUi.goToBackOffice();
151+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
152+
await umbracoUi.content.goToContentWithName(contentName);
153+
await umbracoUi.content.clickAddBlockElementButton();
154+
await umbracoUi.content.clickBlockCardWithName(secondElementTypeName);
155+
await umbracoUi.content.enterTextstring(contentValue);
156+
await umbracoUi.content.clickAddBlockSettingsTabButton();
157+
await umbracoUi.content.enterTextArea(settingValue);
158+
await umbracoUi.content.clickCreateModalButton();
159+
await umbracoUi.content.clickEditBlockListBlockButton();
160+
await umbracoUi.content.enterTextstring(updatedContentValue);
161+
await umbracoUi.content.clickAddBlockSettingsTabButton();
162+
await umbracoUi.content.enterTextArea(updatedSettingValue);
163+
await umbracoUi.content.clickUpdateButton();
164+
165+
// Assert
166+
await umbracoUi.content.isBlockCustomViewVisible(blockCustomViewLocator);
167+
await umbracoUi.content.doesBlockCustomViewHaveValue(blockCustomViewLocator, updatedValueText);
168+
});

0 commit comments

Comments
 (0)