diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index a7a1c67434..8fd22e6b0c 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json @@ -7,8 +7,8 @@ "name": "acceptancetest", "hasInstallScript": true, "dependencies": { - "@umbraco/json-models-builders": "^1.0.2", - "@umbraco/playwright-testhelpers": "^1.0.20", + "@umbraco/json-models-builders": "^1.0.3", + "@umbraco/playwright-testhelpers": "^1.0.21", "camelize": "^1.0.0", "dotenv": "^16.0.2", "faker": "^4.1.0", @@ -129,18 +129,18 @@ "dev": true }, "node_modules/@umbraco/json-models-builders": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-1.0.2.tgz", - "integrity": "sha512-IxKvdTPHe4O5YB+gCmi9G31ytcUaWyQx5/xWxJOeaD+4/p/xyTOFLBdq1rXme645i2ef3QtWxlCnGK/j15w2dQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-1.0.3.tgz", + "integrity": "sha512-NNBIP9ZXXZvxanmG5OvE+Ppc2ObSLLUyBbwZiPtwerFxdlnYuUYA6qCq6mj7vx3na6MOQTPZMAiNFEaM0V9xFw==", "dependencies": { "camelize": "^1.0.0", "faker": "^4.1.0" } }, "node_modules/@umbraco/playwright-testhelpers": { - "version": "1.0.20", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-1.0.20.tgz", - "integrity": "sha512-V+0ZmaFmvWicHaZFkGako8FjDA6UvwOkKpHwCIy0xLAEuhLLTEb6yCH61WydAn2BqY7Ft0xUPMvbKMURYddkjA==", + "version": "1.0.21", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-1.0.21.tgz", + "integrity": "sha512-JfE1MvKc7LEVayF9AX4Ctmx8c6+M+m6+mV7g7QSOYPO7ky/PSlzVvI9S9S7vcpuwLB2Vp4NE9PcXaXUGEvNCnw==", "dependencies": { "@umbraco/json-models-builders": "^1.0.2", "camelize": "^1.0.0", @@ -1055,18 +1055,18 @@ "dev": true }, "@umbraco/json-models-builders": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-1.0.2.tgz", - "integrity": "sha512-IxKvdTPHe4O5YB+gCmi9G31ytcUaWyQx5/xWxJOeaD+4/p/xyTOFLBdq1rXme645i2ef3QtWxlCnGK/j15w2dQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-1.0.3.tgz", + "integrity": "sha512-NNBIP9ZXXZvxanmG5OvE+Ppc2ObSLLUyBbwZiPtwerFxdlnYuUYA6qCq6mj7vx3na6MOQTPZMAiNFEaM0V9xFw==", "requires": { "camelize": "^1.0.0", "faker": "^4.1.0" } }, "@umbraco/playwright-testhelpers": { - "version": "1.0.20", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-1.0.20.tgz", - "integrity": "sha512-V+0ZmaFmvWicHaZFkGako8FjDA6UvwOkKpHwCIy0xLAEuhLLTEb6yCH61WydAn2BqY7Ft0xUPMvbKMURYddkjA==", + "version": "1.0.21", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-1.0.21.tgz", + "integrity": "sha512-JfE1MvKc7LEVayF9AX4Ctmx8c6+M+m6+mV7g7QSOYPO7ky/PSlzVvI9S9S7vcpuwLB2Vp4NE9PcXaXUGEvNCnw==", "requires": { "@umbraco/json-models-builders": "^1.0.2", "camelize": "^1.0.0", diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json index 6589bea5b9..abc16a6865 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package.json @@ -19,8 +19,8 @@ "wait-on": "^6.0.1" }, "dependencies": { - "@umbraco/json-models-builders": "^1.0.2", - "@umbraco/playwright-testhelpers": "^1.0.20", + "@umbraco/json-models-builders": "^1.0.3", + "@umbraco/playwright-testhelpers": "^1.0.21", "camelize": "^1.0.0", "faker": "^4.1.0", "form-data": "^4.0.0", diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/BlockGridEditor/Document/BlockGridEditorInDocument.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/BlockGridEditor/Document/BlockGridEditorInDocument.spec.ts new file mode 100644 index 0000000000..b5aa9d2119 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/BlockGridEditor/Document/BlockGridEditorInDocument.spec.ts @@ -0,0 +1,272 @@ +import {AliasHelper, ConstantHelper, test} from '@umbraco/playwright-testhelpers'; +import {DocumentTypeBuilder} from "@umbraco/json-models-builders"; +import {BlockGridDataTypeBuilder} from "@umbraco/json-models-builders/dist/lib/builders/dataTypes"; +import {expect} from "@playwright/test"; + +test.describe('BlockGridEditorInDocument', () => { + const documentName = 'DocumentName'; + const elementName = 'TestElement'; + let blockGridName = 'BlockGridTest'; + const documentGroupName = 'blockGridGroup'; + + const blockGridAlias = AliasHelper.toAlias(blockGridName); + const elementAlias = AliasHelper.toAlias(elementName); + + test.beforeEach(async ({page, umbracoApi, umbracoUi}, testInfo) => { + await umbracoApi.report.report(testInfo); + await umbracoApi.login(); + await umbracoApi.documentTypes.ensureNameNotExists(documentName); + await umbracoApi.dataTypes.ensureNameNotExists(blockGridName); + }); + + test.afterEach(async ({page, umbracoApi, umbracoUi}) => { + await umbracoApi.documentTypes.ensureNameNotExists(documentName); + await umbracoApi.dataTypes.ensureNameNotExists(blockGridName); + }); + + async function createDefaultBlockGridEditorWithoutElement(umbracoApi, element, BlockGridName) { + const blockGridOne = new BlockGridDataTypeBuilder() + .withName(BlockGridName) + .addBlock() + .withContentElementTypeKey(element['key']) + .done() + .build(); + return await umbracoApi.dataTypes.save(blockGridOne); + } + + async function createDefaultDocumentTypeWithBlockGridEditor(umbracoApi, BlockGridEditor?) { + + const rootDocType = new DocumentTypeBuilder() + .withName(documentName) + .withAllowAsRoot(true) + .addGroup() + .withName(documentGroupName) + .addCustomProperty(BlockGridEditor['id']) + .withLabel(blockGridName) + .withAlias(blockGridAlias) + .done() + .done() + .build(); + return await umbracoApi.documentTypes.save(rootDocType); + } + + test('can create an empty block grid editor in a document', async ({page, umbracoApi, umbracoUi}) => { + // Creates a empty document + const rootDocType = new DocumentTypeBuilder() + .withName(documentName) + .withAllowAsRoot(true) + .build(); + await umbracoApi.documentTypes.save(rootDocType); + + await umbracoUi.navigateToDocumentType(documentName); + + // Adds a group with a BlockList editor + await umbracoUi.goToAddEditor(documentGroupName, blockGridName); + // Waits until the selector is visible + await expect(page.locator('[data-element="datatype-Block Grid"]')).toBeVisible(); + await umbracoUi.clickDataElementByElementName('datatype-Block Grid'); + + // Creates a new BlockGridEditor + await page.locator('[title="Create a new configuration of Block Grid"]').click(); + await page.locator('[id="dataTypeName"]').fill(blockGridName); + await page.locator('[data-element="editor-data-type-settings"]').locator('[label-key=' + ConstantHelper.buttons.submit + ']').click(); + // Checks to be sure that the clicked button is not visible + await expect(page.locator('[data-element="editor-data-type-settings"]').locator('[label-key=' + ConstantHelper.buttons.submit + ']')).not.toBeVisible(); + // Checks to ensure that the button is visible + await expect(page.locator('[name="propertySettingsForm"]').locator('[label-key=' + ConstantHelper.buttons.submit + ']')).toBeVisible(); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.submit)); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.save)); + + // Assert + await expect(page.locator('.umb-notifications__notifications > .alert-success', {hasText: "Datatype saved"})).toBeVisible(); + await expect(page.locator('.umb-notifications__notifications > .alert-success', {hasText: "Document Type saved"})).toBeVisible(); + // Checks if the BlockGridEditor is in the document + await expect(page.locator('[data-element="group-' + documentGroupName + '"]', {hasText: blockGridName})).toBeVisible(); + }); + + test('can add a block grid editor with two elements to a document', async ({page, umbracoApi, umbracoUi}) => { + const elementNameTwo = 'SecondElement'; + const elementTwoAlias = AliasHelper.toAlias(elementNameTwo); + + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + await umbracoApi.documentTypes.ensureNameNotExists(elementNameTwo); + + const elementOne = await umbracoApi.documentTypes.createDefaultElementType(elementName, elementAlias); + const elementTwo = await umbracoApi.documentTypes.createDefaultElementType(elementNameTwo, elementTwoAlias); + + // Creates a BlockGridEditor with two elements + const blockGridType = new BlockGridDataTypeBuilder() + .withName(blockGridName) + .addBlock() + .withContentElementTypeKey(elementOne['key']) + .done() + .addBlock() + .withContentElementTypeKey(elementTwo['key']) + .done() + .build(); + await umbracoApi.dataTypes.save(blockGridType); + + // Creates empty document + const rootDocType = new DocumentTypeBuilder() + .withName(documentName) + .withAllowAsRoot(true) + .build(); + await umbracoApi.documentTypes.save(rootDocType); + + await umbracoUi.navigateToDocumentType(documentName); + + // Adds a group with a BlockGridEditor + await umbracoUi.goToAddEditor(documentGroupName, blockGridName); + // Waits until the selector is visible + await expect(page.locator('[data-element="datatype-Block Grid"]')).toBeVisible(); + await umbracoUi.clickDataElementByElementName('datatype-Block Grid'); + await page.locator('[title="Select ' + blockGridName + '"]').click(); + // Checks to be sure that the clicked button is not visible + await expect(page.locator('[data-element="editor-data-type-settings"]').locator('[label-key=' + ConstantHelper.buttons.submit + ']')).not.toBeVisible(); + // Checks to ensure that the button is visible + await expect(page.locator('[name="propertySettingsForm"]').locator('[label-key=' + ConstantHelper.buttons.submit + ']')).toBeVisible(); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.submit)); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.save)); + + // Assert + await expect(page.locator('.umb-notifications__notifications > .alert-success', {hasText: "Document Type saved"})).toBeVisible(); + // Checks if the BlockGridEditor is in the document + await expect(page.locator('[data-element="group-' + documentGroupName + '"]', {hasText: blockGridName})).toBeVisible(); + + // Clean + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + await umbracoApi.documentTypes.ensureNameNotExists(elementNameTwo); + }); + + test('can create multiple block list editors in a document', async ({page, umbracoApi, umbracoUi}) => { + const elementNameTwo = 'ElementNameTwo'; + const elementAliasTwo = AliasHelper.toAlias(elementNameTwo); + const blockGridNameTwo = 'BlockGridNameTwo'; + + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + await umbracoApi.documentTypes.ensureNameNotExists(elementNameTwo); + await umbracoApi.dataTypes.ensureNameNotExists(blockGridNameTwo); + + // Creates the first BlockGridEditor with an Element + const element = await umbracoApi.documentTypes.createDefaultElementType(elementName, elementAlias); + const BlockGridEditorOne = await createDefaultBlockGridEditorWithoutElement(umbracoApi, element, blockGridName); + + // Creates the second BlockGridEditor with an Element + // Element + const elementTwo = new DocumentTypeBuilder() + .withName(elementNameTwo) + .withAlias(elementAliasTwo) + .AsElementType() + .addGroup() + .withName('TestString') + .withAlias('testString') + .addTextBoxProperty() + .withLabel('Title') + .withAlias('title') + .done() + .done() + .build(); + await umbracoApi.documentTypes.save(elementTwo); + // BlockGrid + const blockGridTwo = new BlockGridDataTypeBuilder() + .withName(blockGridNameTwo) + .addBlock() + .withContentElementTypeKey(elementTwo['key']) + .withLabel('Howdy') + .done() + .build(); + await umbracoApi.dataTypes.save(blockGridTwo); + + // Creates a Document with the first BlockGridEditor + await createDefaultDocumentTypeWithBlockGridEditor(umbracoApi, BlockGridEditorOne); + + await umbracoUi.navigateToDocumentType(documentName); + + // Adds another BlockGridEditor + await page.locator('[data-element="group-' + documentGroupName + '"]').locator('[data-element="property-add"]').click(); + await page.locator('[data-element="property-name"]').fill('TheBlock'); + await umbracoUi.clickDataElementByElementName('editor-add'); + await expect(page.locator('[data-element="datatype-Block Grid"]')).toBeVisible(); + await umbracoUi.clickDataElementByElementName('datatype-Block Grid'); + await page.locator('[title="Select ' + blockGridNameTwo + '"]').click(); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.submit)); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.save)); + + // Assert + await expect(page.locator('.umb-notifications__notifications > .alert-success', {hasText: "Document Type saved"})).toBeVisible(); + // Checks if the new block list is in the group + await expect(page.locator('[data-element="group-' + documentGroupName + '"]', {hasText: blockGridName})).toBeVisible(); + await expect(page.locator('[data-element="group-' + documentGroupName + '"]', {hasText: blockGridNameTwo})).toBeVisible(); + + // Clean + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + await umbracoApi.documentTypes.ensureNameNotExists(elementNameTwo); + await umbracoApi.dataTypes.ensureNameNotExists(blockGridNameTwo); + }); + + test('can change a block grid editor in a document to another block grid editor', async ({page, umbracoApi, umbracoUi}) => { + const blockGridNameTwo = 'BlockGridNameTwo'; + const elementNameTwo = 'ElementNameTwo'; + const elementAliasTwo = AliasHelper.toAlias(elementNameTwo); + + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + await umbracoApi.documentTypes.ensureNameNotExists(elementNameTwo); + await umbracoApi.dataTypes.ensureNameNotExists(blockGridNameTwo); + + // Creates the first BlockGridEditor + const element = await umbracoApi.documentTypes.createDefaultElementType(elementName, elementAlias); + const BlockGridEditorOne = await createDefaultBlockGridEditorWithoutElement(umbracoApi, element, blockGridName); + // Creates the second BlockGridEditor + const elementTwo = await umbracoApi.documentTypes.createDefaultElementType(elementNameTwo, elementAliasTwo); + await createDefaultBlockGridEditorWithoutElement(umbracoApi, elementTwo, blockGridNameTwo); + // Creates Document with the first BlockGridEditor + await createDefaultDocumentTypeWithBlockGridEditor(umbracoApi, BlockGridEditorOne); + + await umbracoUi.navigateToDocumentType(documentName); + + // Switches from the first BlockGridBuilder to the second + await page.locator('[data-element="group-' + documentGroupName + '"] >> [data-element="property-' + blockGridAlias + '"] >> [title="Edit"]').click(); + await umbracoUi.clickElement(umbracoUi.getButtonByKey('general_change')); + await umbracoUi.clickDataElementByElementName('datatype-Block Grid'); + await umbracoUi.clickDataElementByElementName('datatypeconfig-' + blockGridNameTwo); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.submit)); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.save)); + + // Assert + await expect(page.locator('.umb-notifications__notifications > .alert-success', {hasText: "Document Type saved"})).toBeVisible(); + // Checks if the second BlockGridEditor is visible + await expect(page.locator('[data-element="group-' + documentGroupName + '"] >> [data-element="property-' + blockGridAlias + '"]', {hasText: blockGridNameTwo})).toBeVisible(); + // Checks if the first BlockGridEditor is not visible + await expect(page.locator('[data-element="group-' + documentGroupName + '"] >> [data-element="property-' + blockGridAlias + '"]', {hasText: blockGridName})).not.toBeVisible(); + + // Clean + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + await umbracoApi.documentTypes.ensureNameNotExists(elementNameTwo); + await umbracoApi.dataTypes.ensureNameNotExists(blockGridNameTwo); + }); + + test('can remove a block grid editor from a document', async ({page, umbracoApi, umbracoUi}) => { + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + + // Creates the Element and BlockGridEditor + const element = await umbracoApi.documentTypes.createDefaultElementType(elementName, elementAlias); + const BlockGridEditorOne = await createDefaultBlockGridEditorWithoutElement(umbracoApi, element, blockGridName); + // Creates a Document with the BlockGridEditor + await createDefaultDocumentTypeWithBlockGridEditor(umbracoApi, BlockGridEditorOne); + + await umbracoUi.navigateToDocumentType(documentName); + + // Deletes the BlockGridEditor from the document + await page.locator('[data-element="group-' + documentGroupName + '"] >> [data-element="property-' + blockGridAlias + '"] >> [aria-label="Delete property"]').click(); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey('actions_delete')); + await umbracoUi.clickElement(umbracoUi.getButtonByLabelKey(ConstantHelper.buttons.save)); + + // Assert + await expect(page.locator('.umb-notifications__notifications > .alert-success', {hasText: "Document Type saved"})).toBeVisible(); + // Checks if the BlockGridEditor is still in the group + await expect(page.locator('[data-element="group-' + documentGroupName + '"] >> [data-element="property-' + blockGridAlias + '"]')).not.toBeVisible(); + + // Clean + await umbracoApi.documentTypes.ensureNameNotExists(elementName); + }); +}); \ No newline at end of file