V15 QA Added acceptance tests for tiptap style select (#19234)

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",
+      "version": "15.0.50",
-      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.49.tgz",
+      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.50.tgz",
-      "integrity": "sha512-1At/e057u6rB3T3iH8tR6SLXnYRZJsCVjmm8jm+6sftJDvgB0Q5kXKaSDyLTU6wVuLALiDNUuNuJ86FgOOdUJw==",
+      "integrity": "sha512-gi5bb4DShw3lmEdmQhKpPdkS6Uzg4CdNkrJDSkkUTE8CKY7T5goyE4QBTU8kj+LMHR2DnB7qyRUXrYWyS1ECiQ==",
       "dependencies": {
         "@umbraco/json-models-builders": "2.0.33",
         "node-fetch": "^2.6.7"

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"

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('<h2>' + inputText + '</h2><p></p>');
+});
+
+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('<h3>' + inputText + '</h3><p></p>');
+});
+
+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('<h4>' + inputText + '</h4><p></p>');
+});
+
+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('<p>' + inputText + '</p>');
+});
+
+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('<blockquote><p>' + inputText + '</p></blockquote><p></p>');
+});
+
+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('<pre><code>' + inputText + '</code></pre><p></p>');
+});