V15 QA Added acceptance tests for inline editing mode (#18874)

* Added tests for block list with inline editing mode

* Added tests to create a document type witha block with inline editing mode

* Added tests for block grid inline editing mode

* Bumped version

* Changed npm commands

* Reverted npm command
This commit is contained in:
Nhu Dinh
2025-03-31 16:33:17 +07:00
committed by GitHub
parent 13d95f31f2
commit e18cdab185
5 changed files with 152 additions and 32 deletions

View File

@@ -8,7 +8,7 @@
"hasInstallScript": true,
"dependencies": {
"@umbraco/json-models-builders": "^2.0.31",
"@umbraco/playwright-testhelpers": "^15.0.40",
"@umbraco/playwright-testhelpers": "^15.0.41",
"camelize": "^1.0.0",
"dotenv": "^16.3.1",
"node-fetch": "^2.6.7"
@@ -67,9 +67,9 @@
}
},
"node_modules/@umbraco/playwright-testhelpers": {
"version": "15.0.40",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.40.tgz",
"integrity": "sha512-dxXCCYeUH0rlASdHHNu8gQQrhK52gxGcwb/K1BlXFsr7Z7dz1U5eYMPUiVjDVg6LNCbqmQ/tmZqoAZLU5zDzIw==",
"version": "15.0.41",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.41.tgz",
"integrity": "sha512-yZEhC3iSqT+O/2TBz0QGGEZyKleZ+qIW4YHTpm2nxPSdBAUaKqE4lb6UwylcQZtYnZVssXdi62jbzRPbG8XBlw==",
"dependencies": {
"@umbraco/json-models-builders": "2.0.31",
"node-fetch": "^2.6.7"

View File

@@ -21,7 +21,7 @@
},
"dependencies": {
"@umbraco/json-models-builders": "^2.0.31",
"@umbraco/playwright-testhelpers": "^15.0.40",
"@umbraco/playwright-testhelpers": "^15.0.41",
"camelize": "^1.0.0",
"dotenv": "^16.3.1",
"node-fetch": "^2.6.7"

View File

@@ -265,3 +265,50 @@ test.skip('can add settings model for the block in the content', async ({umbraco
test.skip('can move blocks in the content', async ({umbracoApi, umbracoUi}) => {
// TODO: Implement it later
});
test('can create content with a block grid with the inline editing mode enabled', async ({umbracoApi, umbracoUi}) => {
// Arrange
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithABlockWithInlineEditingMode(customDataTypeName, elementTypeId);
await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateButton();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.enterContentName(contentName);
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.created);
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
});
test('can add a block element with inline editing mode enabled', async ({umbracoApi, umbracoUi}) => {
// Arrange
const inputText = 'This is block test';
const customDataTypeId = await umbracoApi.dataType.createBlockGridWithABlockWithInlineEditingMode(customDataTypeName, elementTypeId);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickAddBlockElementButton();
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
await umbracoUi.content.enterTextstring(inputText);
await umbracoUi.content.clickCreateModalButton();
await umbracoUi.content.clickSaveAndPublishButton();
// Assert
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.published);
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
const contentData = await umbracoApi.document.getByName(contentName);
expect(contentData.values[0].value.contentData[0].values[0].value).toEqual(inputText);
const blockListValue = contentData.values.find(item => item.editorAlias === "Umbraco.BlockGrid")?.value;
expect(blockListValue).toBeTruthy();
await umbracoUi.content.doesPropertyContainValue(propertyInBlock, inputText);
});

View File

@@ -81,7 +81,7 @@ test('can add a block element in the content', async ({umbracoApi, umbracoUi}) =
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickAddBlockElementButton();
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
await umbracoUi.content.clickBlockElementWithName(elementTypeName);
await umbracoUi.content.enterTextstring(inputText);
await umbracoUi.content.clickCreateModalButton();
await umbracoUi.content.clickSaveButton();
@@ -132,9 +132,9 @@ test('can delete block element in the content', async ({umbracoApi, umbracoUi})
expect(blockGridValue).toBeFalsy();
});
// Skip this flaky tests as sometimes the modal to choose block item is not displayed
test.skip('cannot add number of block element greater than the maximum amount', async ({umbracoApi, umbracoUi}) => {
test('cannot add number of block element greater than the maximum amount', async ({umbracoApi, umbracoUi}) => {
// Arrange
const inputText = 'This is block test';
const customDataTypeId = await umbracoApi.dataType.createBlockListWithABlockAndMinAndMaxAmount(customDataTypeName, elementTypeId, 0, 1);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
@@ -144,10 +144,12 @@ test.skip('cannot add number of block element greater than the maximum amount',
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickAddBlockElementButton();
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
await umbracoUi.content.clickBlockElementWithName(elementTypeName);
await umbracoUi.content.enterTextstring(inputText);
await umbracoUi.content.clickCreateModalButton();
await umbracoUi.content.clickAddBlockElementButton();
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
await umbracoUi.content.enterTextstring(inputText);
await umbracoUi.content.clickCreateModalButton();
// Assert
@@ -155,8 +157,7 @@ test.skip('cannot add number of block element greater than the maximum amount',
await umbracoUi.content.doesFormValidationMessageContainText('too many');
});
// Skip this flaky tests as sometimes the modal to choose block item is not displayed
test.skip('can set the label of block element in the content', async ({umbracoApi, umbracoUi}) => {
test('can set the label of block element in the content', async ({umbracoApi, umbracoUi}) => {
// Arrange
const blockLabel = 'Test Block Label';
const customDataTypeId = await umbracoApi.dataType.createBlockListDataTypeWithLabel(customDataTypeName, elementTypeId, blockLabel);
@@ -168,7 +169,7 @@ test.skip('can set the label of block element in the content', async ({umbracoAp
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickAddBlockElementButton();
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
await umbracoUi.content.clickBlockElementWithName(elementTypeName);
await umbracoUi.content.clickCreateModalButton();
await umbracoUi.content.clickSaveButton();
@@ -214,3 +215,49 @@ test.skip('can add settings model for the block in the content', async ({umbraco
test.skip('can move blocks in the content', async ({umbracoApi, umbracoUi}) => {
// TODO: Implement it later
});
test('can create content with a block list with the inline editing mode enabled', async ({umbracoApi, umbracoUi}) => {
// Arrange
const customDataTypeId = await umbracoApi.dataType.createBlockListDataTypeWithInlineEditingMode(customDataTypeName, elementTypeId);
await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateButton();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.enterContentName(contentName);
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.created);
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
});
test('can add a block element with inline editing mode enabled', async ({umbracoApi, umbracoUi}) => {
// Arrange
const inputText = 'This is block test';
const customDataTypeId = await umbracoApi.dataType.createBlockListDataTypeWithInlineEditingModeAndABlock(customDataTypeName, elementTypeId);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId);
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickAddBlockElementButton();
await umbracoUi.content.clickTextButtonWithName(elementTypeName);
await umbracoUi.content.clickInlineBlockCaretButtonForName(elementTypeName);
await umbracoUi.content.enterTextstring(inputText);
await umbracoUi.content.clickSaveAndPublishButton();
// Assert
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.published);
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
const contentData = await umbracoApi.document.getByName(contentName);
expect(contentData.values[0].value.contentData[0].values[0].value).toEqual(inputText);
const blockListValue = contentData.values.find(item => item.editorAlias === "Umbraco.BlockList")?.value;
expect(blockListValue).toBeTruthy();
});

View File

@@ -1,4 +1,4 @@
import {ConstantHelper, test} from "@umbraco/playwright-testhelpers";
import {ConstantHelper, NotificationConstantHelper, test} from "@umbraco/playwright-testhelpers";
import {expect} from "@playwright/test";
const documentTypeName = 'TestDocumentType';
@@ -28,7 +28,7 @@ test('can add a property to a document type', {tag: '@smoke'}, async ({umbracoAp
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
@@ -49,7 +49,7 @@ test('can update a property in a document type', {tag: '@smoke'}, async ({umbrac
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
const dataType = await umbracoApi.dataType.getByName(newDataTypeName);
@@ -70,7 +70,7 @@ test('can update group name in a document type', async ({umbracoApi, umbracoUi})
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.containers[0].name).toBe(newGroupName);
@@ -89,7 +89,7 @@ test('can delete a group in a document type', {tag: '@smoke'}, async ({umbracoAp
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.containers.length).toBe(0);
expect(documentTypeData.properties.length).toBe(0);
@@ -108,7 +108,7 @@ test('can delete a tab in a document type', async ({umbracoApi, umbracoUi}) => {
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.containers.length).toBe(0);
@@ -126,7 +126,7 @@ test('can delete a property editor in a document type', {tag: '@smoke'}, async (
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.properties.length).toBe(0);
@@ -147,7 +147,7 @@ test('can create a document type with a property in a tab', {tag: '@smoke'}, asy
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(await umbracoApi.documentType.doesTabContainCorrectPropertyEditorInGroup(documentTypeName, dataTypeName, documentTypeData.properties[0].dataType.id, tabName, groupName)).toBeTruthy();
@@ -170,7 +170,7 @@ test('can create a document type with multiple groups', async ({umbracoApi, umbr
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
expect(await umbracoApi.documentType.doesGroupContainCorrectPropertyEditor(documentTypeName, dataTypeName, dataTypeData.id, groupName)).toBeTruthy();
expect(await umbracoApi.documentType.doesGroupContainCorrectPropertyEditor(documentTypeName, secondDataTypeName, secondDataType.id, secondGroupName)).toBeTruthy();
@@ -196,7 +196,7 @@ test('can create a document type with multiple tabs', async ({umbracoApi, umbrac
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
expect(await umbracoApi.documentType.doesTabContainCorrectPropertyEditorInGroup(documentTypeName, dataTypeName, dataTypeData.id, tabName, groupName)).toBeTruthy();
expect(await umbracoApi.documentType.doesTabContainCorrectPropertyEditorInGroup(documentTypeName, secondDataTypeName, secondDataType.id, secondTabName, secondGroupName)).toBeTruthy();
@@ -220,7 +220,7 @@ test('can create a document type with a composition', {tag: '@smoke'}, async ({u
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(umbracoUi.documentType.doesGroupHaveValue(groupName)).toBeTruthy();
// Checks if the composition in the document type is correct
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
@@ -249,7 +249,7 @@ test('can remove a composition from a document type', async ({umbracoApi, umbrac
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
await umbracoUi.documentType.isGroupVisible(groupName, false);
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.compositions).toEqual([]);
@@ -275,7 +275,7 @@ test('can reorder groups in a document type', async ({umbracoApi, umbracoUi}) =>
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
// Since we swapped sorting order, the firstGroupValue should have sortOrder 1 and the secondGroupValue should have sortOrder 0
expect(await umbracoApi.documentType.doesDocumentTypeGroupNameContainCorrectSortOrder(documentTypeName, secondGroupValue, 0)).toBeTruthy();
expect(await umbracoApi.documentType.doesDocumentTypeGroupNameContainCorrectSortOrder(documentTypeName, firstGroupValue, 1)).toBeTruthy();
@@ -300,7 +300,7 @@ test.skip('can reorder properties in a document type', async ({umbracoApi, umbra
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.properties[0].name).toBe(dataTypeNameTwo);
expect(documentTypeData.properties[1].name).toBe(dataTypeName);
@@ -324,7 +324,7 @@ test.skip('can reorder tabs in a document type', {tag: '@smoke'}, async ({umbrac
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesDocumentTypeTabNameContainCorrectSortOrder(documentTypeName, secondTabName, 0)).toBeTruthy();
expect(await umbracoApi.documentType.doesDocumentTypeTabNameContainCorrectSortOrder(documentTypeName, tabName, 1)).toBeTruthy();
});
@@ -344,7 +344,7 @@ test('can add a description to a property in a document type', async ({umbracoAp
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
await expect(umbracoUi.documentType.enterDescriptionTxt).toBeVisible();
expect(umbracoUi.documentType.doesDescriptionHaveValue(descriptionText)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
@@ -365,7 +365,7 @@ test('can set is mandatory for a property in a document type', {tag: '@smoke'},
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.properties[0].validation.mandatory).toBeTruthy();
});
@@ -388,7 +388,7 @@ test('can enable validation for a property in a document type', async ({umbracoA
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.properties[0].validation.regEx).toBe(regex);
expect(documentTypeData.properties[0].validation.regExMessage).toBe(regexMessage);
@@ -408,7 +408,7 @@ test('can allow vary by culture for a property in a document type', {tag: '@smok
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.properties[0].variesByCulture).toBeTruthy();
});
@@ -427,7 +427,33 @@ test('can set appearance to label on top for a property in a document type', asy
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.isSuccessNotificationVisible();
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
expect(documentTypeData.properties[0].appearance.labelOnTop).toBeTruthy();
});
test('can add a block list property with inline editing mode to a document type', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
// Arrange
const blockListDataTypeName = 'TestBlockList';
await umbracoApi.documentType.createDefaultDocumentType(documentTypeName);
await umbracoApi.dataType.createBlockListDataTypeWithInlineEditingMode(blockListDataTypeName, true);
await umbracoUi.documentType.goToSection(ConstantHelper.sections.settings);
// Act
await umbracoUi.documentType.goToDocumentType(documentTypeName);
await umbracoUi.documentType.clickAddGroupButton();
await umbracoUi.documentType.addPropertyEditor(blockListDataTypeName);
await umbracoUi.documentType.enterGroupName(groupName);
await umbracoUi.documentType.clickSaveButton();
// Assert
await umbracoUi.documentType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved);
expect(await umbracoApi.documentType.doesNameExist(documentTypeName)).toBeTruthy();
const documentTypeData = await umbracoApi.documentType.getByName(documentTypeName);
const blockListDataTypeData = await umbracoApi.dataType.getByName(blockListDataTypeName);
// Checks if the correct property was added to the document type
expect(documentTypeData.properties[0].dataType.id).toBe(blockListDataTypeData.id);
// Clean
await umbracoApi.dataType.ensureNameNotExists(blockListDataTypeName);
});