Skip to content

Commit 1663bc4

Browse files
nhudinh0309nhudinh0309
authored
V15 QA Added acceptance tests for the content with block list and block grid (#18026)
* Added tests for content with block grid * Fixed the test for block grid as api helper changes * Added tests for content with block lists * Updated tests for content with block grid * Updated tests for content with block list * Updated code due to the test helper changes * Bumped version * Make all Content tests run in the pipeline * Reverted * Make all Content tests run in the pipeline * Reverted * Added step to choose element type * Added more waits * Fixed failing tests due to UI changes * Fixed typo * Fixed typo * Fixed the failing test * Bumped version * Added the tests for move blocks * Reverted
1 parent 3724a45 commit 1663bc4

File tree

2 files changed

+480
-0
lines changed

2 files changed

+480
-0
lines changed

‎tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithBlockGrid.spec.ts

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
import {ConstantHelper, NotificationConstantHelper, test} from '@umbraco/playwright-testhelpers';
2+
import {expect} from "@playwright/test";
3+
4+
const contentName = 'TestContent';
5+
const documentTypeName = 'TestDocumentTypeForContent';
6+
const customDataTypeName = 'Custom Block Grid';
7+
const elementTypeName = 'BlockGridElement';
8+
const propertyInBlock = 'Textstring';
9+
const groupName = 'testGroup';
10+
let elementTypeId = '';
11+
12+
test.beforeEach(async ({umbracoApi}) => {
13+
await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
14+
await umbracoApi.document.ensureNameNotExists(contentName);
15+
const textStringData = await umbracoApi.dataType.getByName(propertyInBlock);
16+
elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, propertyInBlock, textStringData.id);
17+
});
18+
19+
test.afterEach(async ({umbracoApi}) => {
20+
await umbracoApi.document.ensureNameNotExists(contentName);
21+
await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
22+
await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
23+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
24+
});
25+
26+
test('can create content with an empty block grid', async ({umbracoApi, umbracoUi}) => {
27+
// Arrange
28+
const expectedState = 'Draft';
29+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithPermissions(customDataTypeName, elementTypeId, true, true);
30+
await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
31+
await umbracoUi.goToBackOffice();
32+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
33+
34+
// Act
35+
await umbracoUi.content.clickActionsMenuAtRoot();
36+
await umbracoUi.content.clickCreateButton();
37+
await umbracoUi.content.chooseDocumentType(documentTypeName);
38+
await umbracoUi.content.enterContentName(contentName);
39+
await umbracoUi.content.clickSaveButton();
40+
41+
// Assert
42+
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.created);
43+
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
44+
const contentData = await umbracoApi.document.getByName(contentName);
45+
expect(contentData.variants[0].state).toBe(expectedState);
46+
expect(contentData.values).toEqual([]);
47+
});
48+
49+
test('can publish content with an empty block grid', async ({umbracoApi, umbracoUi}) => {
50+
// Arrange
51+
const expectedState = 'Published';
52+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithPermissions(customDataTypeName, elementTypeId, true, true);
53+
await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
54+
await umbracoUi.goToBackOffice();
55+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
56+
57+
// Act
58+
await umbracoUi.content.clickActionsMenuAtRoot();
59+
await umbracoUi.content.clickCreateButton();
60+
await umbracoUi.content.chooseDocumentType(documentTypeName);
61+
await umbracoUi.content.enterContentName(contentName);
62+
await umbracoUi.content.clickSaveAndPublishButton();
63+
64+
// Assert
65+
await umbracoUi.content.doesSuccessNotificationsHaveCount(2);
66+
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
67+
const contentData = await umbracoApi.document.getByName(contentName);
68+
expect(contentData.variants[0].state).toBe(expectedState);
69+
expect(contentData.values).toEqual([]);
70+
});
71+
72+
test('can add a block element in the content', async ({umbracoApi, umbracoUi}) => {
73+
// Arrange
74+
const inputText = 'This is block test';
75+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithPermissions(customDataTypeName, elementTypeId, true, true);
76+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
77+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
78+
await umbracoUi.goToBackOffice();
79+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
80+
81+
// Act
82+
await umbracoUi.content.goToContentWithName(contentName);
83+
await umbracoUi.content.clickAddBlockElementButton();
84+
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
85+
await umbracoUi.content.enterTextstring(inputText);
86+
await umbracoUi.content.clickCreateModalButton();
87+
await umbracoUi.content.clickSaveButton();
88+
89+
// Assert
90+
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
91+
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
92+
const contentData = await umbracoApi.document.getByName(contentName);
93+
expect(contentData.values[0].value.contentData[0].values[0].value).toEqual(inputText);
94+
const blockGridValue = contentData.values.find(item => item.editorAlias === "Umbraco.BlockGrid")?.value;
95+
expect(blockGridValue).toBeTruthy();
96+
});
97+
98+
test('can edit block element in the content', async ({umbracoApi, umbracoUi}) => {
99+
const updatedText = 'This updated block test';
100+
await umbracoApi.document.createDefaultDocumentWithABlockGridEditor(contentName, elementTypeId, documentTypeName, customDataTypeName);
101+
await umbracoUi.goToBackOffice();
102+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
103+
104+
// Act
105+
await umbracoUi.content.goToContentWithName(contentName);
106+
await umbracoUi.content.clickEditBlockGridBlockButton();
107+
await umbracoUi.content.enterTextstring(updatedText);
108+
await umbracoUi.content.clickUpdateButton();
109+
await umbracoUi.content.clickSaveButton();
110+
111+
// Assert
112+
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
113+
const contentData = await umbracoApi.document.getByName(contentName);
114+
expect(contentData.values[0].value.contentData[0].values[0].value).toEqual(updatedText);
115+
});
116+
117+
test('can delete block element in the content', async ({umbracoApi, umbracoUi}) => {
118+
await umbracoApi.document.createDefaultDocumentWithABlockGridEditor(contentName, elementTypeId, documentTypeName, customDataTypeName);
119+
await umbracoUi.goToBackOffice();
120+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
121+
122+
// Act
123+
await umbracoUi.content.goToContentWithName(contentName);
124+
await umbracoUi.content.clickDeleteBlockGridBlockButton();
125+
await umbracoUi.content.clickConfirmToDeleteButton();
126+
await umbracoUi.content.clickSaveButton();
127+
128+
// Assert
129+
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
130+
const contentData = await umbracoApi.document.getByName(contentName);
131+
const blockGridValue = contentData.values.find(item => item.value);
132+
expect(blockGridValue).toBeFalsy();
133+
});
134+
135+
test('cannot add block element if allow in root is disabled', async ({umbracoApi, umbracoUi}) => {
136+
// Arrange
137+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithPermissions(customDataTypeName, elementTypeId, false, false);
138+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
139+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
140+
await umbracoUi.goToBackOffice();
141+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
142+
143+
// Act
144+
await umbracoUi.content.goToContentWithName(contentName);
145+
146+
// Assert
147+
await umbracoUi.content.isAddBlockElementButtonVisible(false);
148+
});
149+
150+
test('cannot add number of block element greater than the maximum amount', async ({umbracoApi, umbracoUi}) => {
151+
// Arrange
152+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithABlockAndMinAndMaxAmount(customDataTypeName, elementTypeId, 0, 0);
153+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
154+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
155+
await umbracoUi.goToBackOffice();
156+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
157+
158+
// Act
159+
await umbracoUi.content.goToContentWithName(contentName);
160+
await umbracoUi.content.clickAddBlockElementButton();
161+
await umbracoUi.waitForTimeout(500);
162+
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
163+
await umbracoUi.content.clickCreateModalButton();
164+
165+
// Assert
166+
await umbracoUi.content.doesFormValidationMessageContainText('Maximum');
167+
await umbracoUi.content.doesFormValidationMessageContainText('too many');
168+
});
169+
170+
test('can set the label of create button in root', async ({umbracoApi, umbracoUi}) => {
171+
// Arrange
172+
const createButtonLabel = 'Test Create Button Label';
173+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithABlockAndCreateButtonLabel(customDataTypeName, elementTypeId, createButtonLabel);
174+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
175+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
176+
await umbracoUi.goToBackOffice();
177+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
178+
179+
// Act
180+
await umbracoUi.content.goToContentWithName(contentName);
181+
182+
// Assert
183+
await umbracoUi.content.isAddBlockElementButtonWithLabelVisible(createButtonLabel);
184+
});
185+
186+
test('can set the label of block element in the content', async ({umbracoApi, umbracoUi}) => {
187+
// Arrange
188+
const blockLabel = 'Test Block Label';
189+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithLabel(customDataTypeName, elementTypeId, blockLabel);
190+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
191+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
192+
await umbracoUi.goToBackOffice();
193+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
194+
195+
// Act
196+
await umbracoUi.content.goToContentWithName(contentName);
197+
await umbracoUi.content.clickAddBlockElementButton();
198+
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
199+
await umbracoUi.content.clickCreateModalButton();
200+
await umbracoUi.content.clickSaveButton();
201+
202+
// Assert
203+
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
204+
await umbracoUi.content.doesBlockElementHaveName(blockLabel);
205+
});
206+
207+
test('can set the number of columns for the layout in the content', async ({umbracoApi, umbracoUi}) => {
208+
// Arrange
209+
const gridColumns = 6;
210+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithABlockAndGridColumns(customDataTypeName, elementTypeId, gridColumns);
211+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
212+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
213+
await umbracoUi.goToBackOffice();
214+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
215+
216+
// Act
217+
await umbracoUi.content.goToContentWithName(contentName);
218+
await umbracoUi.content.clickAddBlockElementButton();
219+
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
220+
await umbracoUi.content.clickCreateModalButton();
221+
await umbracoUi.content.clickSaveButton();
222+
223+
// Assert
224+
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
225+
const contentData = await umbracoApi.document.getByName(contentName);
226+
const layoutValue = contentData.values[0]?.value.layout["Umbraco.BlockGrid"];
227+
expect(layoutValue[0].columnSpan).toBe(gridColumns);
228+
});
229+
230+
// TODO: Remove skip when front-end is ready. Currently, it is impossible to create content with blockgrid that has a setting model
231+
test.skip('can add settings model for the block in the content', async ({umbracoApi, umbracoUi}) => {
232+
// Arrange
233+
const contentBlockInputText = 'This is textstring';
234+
const settingBlockInputText = 'This is textarea';
235+
const settingModelName = 'Test Setting Model';
236+
const textAreaDataTypeName = 'Textarea';
237+
const textAreaData = await umbracoApi.dataType.getByName(textAreaDataTypeName);
238+
const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(settingModelName, groupName, textAreaDataTypeName, textAreaData.id);
239+
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithContentAndSettingsElementType(customDataTypeName, elementTypeId, settingsElementTypeId, true);
240+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
241+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
242+
await umbracoUi.goToBackOffice();
243+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
244+
245+
// Act
246+
await umbracoUi.content.goToContentWithName(contentName);
247+
await umbracoUi.content.clickAddBlockElementButton();
248+
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
249+
await umbracoUi.content.enterTextstring(contentBlockInputText);
250+
await umbracoUi.content.clickAddBlockSettingsTabButton();
251+
await umbracoUi.content.enterTextArea(settingBlockInputText);
252+
await umbracoUi.content.clickCreateModalButton();
253+
await umbracoUi.content.clickSaveButton();
254+
255+
// Assert
256+
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
257+
const contentData = await umbracoApi.document.getByName(contentName);
258+
expect(contentData.values[0].value.contentData[0].values[0].value).toEqual(contentBlockInputText);
259+
expect(contentData.values[0].value.settingsData[0].values[0].value).toEqual(settingBlockInputText);
260+
261+
// Clean
262+
await umbracoApi.documentType.ensureNameNotExists(settingModelName);
263+
});
264+
265+
test.skip('can move blocks in the content', async ({umbracoApi, umbracoUi}) => {
266+
// TODO: Implement it later
267+
});

0 commit comments

Comments
 (0)