diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index 1353eb665a..f975ad0cbd 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json @@ -8,7 +8,7 @@ "hasInstallScript": true, "dependencies": { "@umbraco/json-models-builders": "^2.0.33", - "@umbraco/playwright-testhelpers": "^15.0.49", + "@umbraco/playwright-testhelpers": "^15.0.50", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" @@ -66,9 +66,9 @@ } }, "node_modules/@umbraco/playwright-testhelpers": { - "version": "15.0.49", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.49.tgz", - "integrity": "sha512-1At/e057u6rB3T3iH8tR6SLXnYRZJsCVjmm8jm+6sftJDvgB0Q5kXKaSDyLTU6wVuLALiDNUuNuJ86FgOOdUJw==", + "version": "15.0.50", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.50.tgz", + "integrity": "sha512-gi5bb4DShw3lmEdmQhKpPdkS6Uzg4CdNkrJDSkkUTE8CKY7T5goyE4QBTU8kj+LMHR2DnB7qyRUXrYWyS1ECiQ==", "dependencies": { "@umbraco/json-models-builders": "2.0.33", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json index 98d612ca81..0396992d5c 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@umbraco/json-models-builders": "^2.0.33", - "@umbraco/playwright-testhelpers": "^15.0.49", + "@umbraco/playwright-testhelpers": "^15.0.50", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/TiptapStyleSelect.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/TiptapStyleSelect.spec.ts new file mode 100644 index 0000000000..faab11fe5f --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/TiptapStyleSelect.spec.ts @@ -0,0 +1,114 @@ +import {ConstantHelper, NotificationConstantHelper, test} from '@umbraco/playwright-testhelpers'; +import {expect} from "@playwright/test"; + +const contentName = 'TestContent'; +const documentTypeName = 'TestDocumentTypeForContent'; +const customDataTypeName = 'Test RTE Tiptap Style Select'; +const inputText = 'This is Tiptap test'; + +test.beforeEach(async ({umbracoApi, umbracoUi}) => { + const customDataTypeId = await umbracoApi.dataType.createTiptapDataTypeWithStyleSelect(customDataTypeName); + 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); + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.enterRTETipTapEditor(inputText); + await umbracoUi.content.selectAllRTETipTapEditorText(); +}) + +test.afterEach(async ({umbracoApi}) => { + await umbracoApi.document.ensureNameNotExists(contentName); + await umbracoApi.documentType.ensureNameNotExists(documentTypeName); + await umbracoApi.dataType.ensureNameNotExists(customDataTypeName); +}); + +test('can apply page header format', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoUi.content.clickStyleSelectButton(); + + // Act + await umbracoUi.content.hoverCascadingMenuItemWithName('Headers'); + await umbracoUi.content.clickCascadingMenuItemWithName('Page header'); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const contentData = await umbracoApi.document.getByName(contentName); + expect(contentData.values[0].value.markup).toEqual('

' + inputText + '

'); +}); + +test('can apply section header format', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoUi.content.clickStyleSelectButton(); + + // Act + await umbracoUi.content.hoverCascadingMenuItemWithName('Headers'); + await umbracoUi.content.clickCascadingMenuItemWithName('Section header'); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const contentData = await umbracoApi.document.getByName(contentName); + expect(contentData.values[0].value.markup).toEqual('

' + inputText + '

'); +}); + +test('can apply paragraph header format', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoUi.content.clickStyleSelectButton(); + + // Act + await umbracoUi.content.hoverCascadingMenuItemWithName('Headers'); + await umbracoUi.content.clickCascadingMenuItemWithName('Paragraph header'); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const contentData = await umbracoApi.document.getByName(contentName); + expect(contentData.values[0].value.markup).toEqual('

' + inputText + '

'); +}); + +test('can apply paragraph blocks format', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoUi.content.clickStyleSelectButton(); + + // Act + await umbracoUi.content.hoverCascadingMenuItemWithName('Blocks'); + await umbracoUi.content.clickCascadingMenuItemWithName('Paragraph'); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const contentData = await umbracoApi.document.getByName(contentName); + expect(contentData.values[0].value.markup).toEqual('

' + inputText + '

'); +}); + +test('can apply block quote format', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoUi.content.clickStyleSelectButton(); + + // Act + await umbracoUi.content.hoverCascadingMenuItemWithName('Containers'); + await umbracoUi.content.clickCascadingMenuItemWithName('Block quote'); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const contentData = await umbracoApi.document.getByName(contentName); + expect(contentData.values[0].value.markup).toEqual('

' + inputText + '

'); +}); + +test('can apply code block format', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoUi.content.clickStyleSelectButton(); + + // Act + await umbracoUi.content.hoverCascadingMenuItemWithName('Containers'); + await umbracoUi.content.clickCascadingMenuItemWithName('Code block'); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const contentData = await umbracoApi.document.getByName(contentName); + expect(contentData.values[0].value.markup).toEqual('
' + inputText + '

'); +}); \ No newline at end of file