From dfc6ead6d5b1463165a9334ee22c7b3839b477b0 Mon Sep 17 00:00:00 2001 From: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> Date: Tue, 29 Apr 2025 14:39:56 +0700 Subject: [PATCH] V15 Added acceptance tests for tiptap statusbar (#19131) * Updated tests for tiptap RTE * Moved tests for titptap toolbar to another class * Added tests for titptap toolbar * Added tests for tiptap statusbar * Bumped version * Make tiptap tests run in the pipeline * Bumped version * Reverted npm command --- .../package-lock.json | 8 +- .../Umbraco.Tests.AcceptanceTest/package.json | 2 +- .../RichTextEditor/ContentWithTiptap.spec.ts | 132 ------------ .../RichTextEditor/TiptapToolbar.spec.ts | 190 ++++++++++++++++++ .../DataType/RichTextEditor.spec.ts | 4 +- .../DefaultConfig/DataType/Tiptap.spec.ts | 38 ++++ 6 files changed, 235 insertions(+), 139 deletions(-) create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/TiptapToolbar.spec.ts diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index 635fb500f2..1353eb665a 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.47", + "@umbraco/playwright-testhelpers": "^15.0.49", "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.47", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.47.tgz", - "integrity": "sha512-rYr3IU1O/mcOw74zHxXyqa7eRkxci2G6yMgWmTDKdYrB1jPFrElWvn5GQVVP6r9znH4z1VkzPT0rWmuPI8rP/w==", + "version": "15.0.49", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.49.tgz", + "integrity": "sha512-1At/e057u6rB3T3iH8tR6SLXnYRZJsCVjmm8jm+6sftJDvgB0Q5kXKaSDyLTU6wVuLALiDNUuNuJ86FgOOdUJw==", "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 beffdfba62..98d612ca81 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.47", + "@umbraco/playwright-testhelpers": "^15.0.49", "camelize": "^1.0.0", "dotenv": "^16.3.1", "node-fetch": "^2.6.7" diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/ContentWithTiptap.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/ContentWithTiptap.spec.ts index cbac5c752e..8652b59137 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/ContentWithTiptap.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/ContentWithTiptap.spec.ts @@ -84,136 +84,4 @@ test('can publish content with RTE Tiptap property editor', async ({umbracoApi, const contentData = await umbracoApi.document.getByName(contentName); expect(contentData.variants[0].state).toBe(expectedState); expect(contentData.values[0].value.markup).toEqual('

' + inputText + '

'); -}); - -test.fixme('can add a media in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { - // Arrange - const iconTitle = 'Media Picker'; - const imageName = 'Test Image For Content'; - await umbracoApi.media.ensureNameNotExists(imageName); - await umbracoApi.media.createDefaultMediaWithImage(imageName); - 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.clickTipTapToolbarIconWithTitle(iconTitle); - // fix this - await umbracoUi.content.selectMediaWithName(imageName); - await umbracoUi.content.clickChooseModalButton(); - await umbracoUi.content.clickMediaCaptionAltTextModalSubmitButton(); - await umbracoUi.content.clickSaveButton(); - - // Assert - await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); - expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy(); - const contentData = await umbracoApi.document.getByName(contentName); - expect(contentData.values[0].value.markup).toContain(' { - // Arrange - const iconTitle = 'Embed'; - const videoURL = 'https://www.youtube.com/watch?v=Yu29dE-0OoI'; - 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.clickTipTapToolbarIconWithTitle(iconTitle); - await umbracoUi.content.enterEmbeddedURL(videoURL); - await umbracoUi.content.clickEmbeddedRetrieveButton(); - await umbracoUi.content.waitForEmbeddedPreviewVisible(); - await umbracoUi.content.clickEmbeddedMediaModalConfirmButton(); - await umbracoUi.content.clickSaveButton(); - - // Assert - await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); - expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy(); - const contentData = await umbracoApi.document.getByName(contentName); - expect(contentData.values[0].value.markup).toContain('data-embed-url'); - expect(contentData.values[0].value.markup).toContain(videoURL); -}); - -test('cannot submit an empty link in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { - // Arrange - const iconTitle = 'Link'; - 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.clickTipTapToolbarIconWithTitle(iconTitle); - await umbracoUi.content.clickManualLinkButton(); - await umbracoUi.content.enterLink(''); - await umbracoUi.content.enterAnchorOrQuerystring(''); - await umbracoUi.content.enterLinkTitle(''); - await umbracoUi.content.clickAddButton(); - - // Assert - await umbracoUi.content.isTextWithMessageVisible(ConstantHelper.validationMessages.emptyLinkPicker); -}); - -// TODO: Remove skip when the front-end ready. Currently it still accept the empty link with an anchor or querystring -// Issue link: https://github.com/umbraco/Umbraco-CMS/issues/17411 -test.skip('cannot submit an empty URL with an anchor or querystring in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { - // Arrange - const iconTitle = 'Link'; - 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.clickTipTapToolbarIconWithTitle(iconTitle); - await umbracoUi.content.clickManualLinkButton(); - await umbracoUi.content.enterLink(''); - await umbracoUi.content.enterAnchorOrQuerystring('#value'); - await umbracoUi.content.clickAddButton(); - - // Assert - await umbracoUi.content.isTextWithMessageVisible(ConstantHelper.validationMessages.emptyLinkPicker); -}); - -// TODO: Remove skip when the front-end ready. Currently it is impossible to link to unpublished document -// Issue link: https://github.com/umbraco/Umbraco-CMS/issues/17974 -test.skip('can insert a link to an unpublished document in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { - // Arrange - const iconTitle = 'Link'; - const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId); - await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); - // Create a document to link - const documentTypeForLinkedDocumentName = 'TestDocumentType'; - const documentTypeForLinkedDocumentId = await umbracoApi.documentType.createDefaultDocumentTypeWithAllowAsRoot(documentTypeForLinkedDocumentName); - const linkedDocumentName = 'LinkedDocument'; - await umbracoApi.document.createDefaultDocument(linkedDocumentName, documentTypeForLinkedDocumentId); - await umbracoUi.goToBackOffice(); - await umbracoUi.content.goToSection(ConstantHelper.sections.content); - - // Act - await umbracoUi.content.goToContentWithName(contentName); - await umbracoUi.content.clickTipTapToolbarIconWithTitle(iconTitle); - await umbracoUi.content.clickDocumentLinkButton(); - await umbracoUi.content.selectLinkByName(linkedDocumentName); - await umbracoUi.content.clickButtonWithName('Choose'); - await umbracoUi.content.clickAddButton(); - await umbracoUi.content.clickSaveButton(); - - // Assert - await umbracoUi.content.isSuccessNotificationVisible(); - - // Clean - await umbracoApi.documentType.ensureNameNotExists(documentTypeForLinkedDocumentName); - await umbracoApi.document.ensureNameNotExists(linkedDocumentName); }); \ No newline at end of file diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/TiptapToolbar.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/TiptapToolbar.spec.ts new file mode 100644 index 0000000000..3f4cf6d572 --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/RichTextEditor/TiptapToolbar.spec.ts @@ -0,0 +1,190 @@ +import {ConstantHelper, NotificationConstantHelper, test} from '@umbraco/playwright-testhelpers'; +import {expect} from "@playwright/test"; + +const contentName = 'TestContent'; +const documentTypeName = 'TestDocumentTypeForContent'; +const customDataTypeName = 'Test RTE Tiptap'; + +test.beforeEach(async ({umbracoApi}) => { + await umbracoApi.documentType.ensureNameNotExists(documentTypeName); + await umbracoApi.document.ensureNameNotExists(contentName); +}); + +test.afterEach(async ({umbracoApi}) => { + await umbracoApi.document.ensureNameNotExists(contentName); + await umbracoApi.documentType.ensureNameNotExists(documentTypeName); + await umbracoApi.dataType.ensureNameNotExists(customDataTypeName); +}); + +test('can add a media in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { + // Arrange + const iconTitle = 'Media Picker'; + const imageName = 'Test Image For Content'; + await umbracoApi.media.ensureNameNotExists(imageName); + await umbracoApi.media.createDefaultMediaWithImage(imageName); + const customDataTypeId = await umbracoApi.dataType.createDefaultTiptapDataType(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); + + // Act + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickTipTapToolbarIconWithTitle(iconTitle); + await umbracoUi.content.selectMediaWithName(imageName); + await umbracoUi.content.clickChooseModalButton(); + await umbracoUi.content.clickMediaCaptionAltTextModalSubmitButton(); + 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.markup).toContain(' { + // Arrange + const iconTitle = 'Embed'; + const videoURL = 'https://www.youtube.com/watch?v=Yu29dE-0OoI'; + const customDataTypeId = await umbracoApi.dataType.createDefaultTiptapDataType(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); + + // Act + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickTipTapToolbarIconWithTitle(iconTitle); + await umbracoUi.content.enterEmbeddedURL(videoURL); + await umbracoUi.content.clickEmbeddedRetrieveButton(); + await umbracoUi.content.waitForEmbeddedPreviewVisible(); + await umbracoUi.content.clickEmbeddedMediaModalConfirmButton(); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy(); + const contentData = await umbracoApi.document.getByName(contentName); + expect(contentData.values[0].value.markup).toContain('data-embed-url'); + expect(contentData.values[0].value.markup).toContain(videoURL); +}); + +test('cannot submit an empty link in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { + // Arrange + const iconTitle = 'Link'; + const customDataTypeId = await umbracoApi.dataType.createDefaultTiptapDataType(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); + + // Act + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickTipTapToolbarIconWithTitle(iconTitle); + await umbracoUi.content.clickManualLinkButton(); + await umbracoUi.content.enterLink(''); + await umbracoUi.content.enterAnchorOrQuerystring(''); + await umbracoUi.content.enterLinkTitle(''); + await umbracoUi.content.clickAddButton(); + + // Assert + await umbracoUi.content.isTextWithMessageVisible(ConstantHelper.validationMessages.emptyLinkPicker); +}); + +// TODO: Remove skip when the front-end ready. Currently it still accept the empty link with an anchor or querystring +// Issue link: https://github.com/umbraco/Umbraco-CMS/issues/17411 +test.skip('cannot submit an empty URL with an anchor or querystring in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { + // Arrange + const iconTitle = 'Link'; + const customDataTypeId = await umbracoApi.dataType.createDefaultTiptapDataType(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); + + // Act + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickTipTapToolbarIconWithTitle(iconTitle); + await umbracoUi.content.clickManualLinkButton(); + await umbracoUi.content.enterLink(''); + await umbracoUi.content.enterAnchorOrQuerystring('#value'); + await umbracoUi.content.clickAddButton(); + + // Assert + await umbracoUi.content.isTextWithMessageVisible(ConstantHelper.validationMessages.emptyLinkPicker); +}); + +// TODO: Remove skip when the front-end ready. Currently it is impossible to link to unpublished document +// Issue link: https://github.com/umbraco/Umbraco-CMS/issues/17974 +test.skip('can insert a link to an unpublished document in RTE Tiptap property editor', async ({umbracoApi, umbracoUi}) => { + // Arrange + const iconTitle = 'Link'; + const customDataTypeId = await umbracoApi.dataType.createDefaultTiptapDataType(customDataTypeName); + const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, customDataTypeId); + await umbracoApi.document.createDefaultDocument(contentName, documentTypeId); + // Create a document to link + const documentTypeForLinkedDocumentName = 'TestDocumentType'; + const documentTypeForLinkedDocumentId = await umbracoApi.documentType.createDefaultDocumentTypeWithAllowAsRoot(documentTypeForLinkedDocumentName); + const linkedDocumentName = 'LinkedDocument'; + await umbracoApi.document.createDefaultDocument(linkedDocumentName, documentTypeForLinkedDocumentId); + await umbracoUi.goToBackOffice(); + await umbracoUi.content.goToSection(ConstantHelper.sections.content); + + // Act + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.clickTipTapToolbarIconWithTitle(iconTitle); + await umbracoUi.content.clickDocumentLinkButton(); + await umbracoUi.content.selectLinkByName(linkedDocumentName); + await umbracoUi.content.clickButtonWithName('Choose'); + await umbracoUi.content.clickAddButton(); + await umbracoUi.content.clickSaveButton(); + + // Assert + await umbracoUi.content.isSuccessNotificationVisible(); + + // Clean + await umbracoApi.documentType.ensureNameNotExists(documentTypeForLinkedDocumentName); + await umbracoApi.document.ensureNameNotExists(linkedDocumentName); +}); + +test('can view word count', async ({umbracoApi, umbracoUi}) => { + // Arrange + const inputText = 'Test Tiptap here!!!'; + const expectedWordCount = 3; + const customDataTypeId = await umbracoApi.dataType.createTiptapDataTypeWithWordCountStatusbar(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); + + // Act + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.enterRTETipTapEditor(inputText); + + // Assert + await umbracoUi.content.doesTiptapHaveWordCount(expectedWordCount); +}); + +test('can view element path', async ({umbracoApi, umbracoUi}) => { + // Arrange + const inputText = 'This is Tiptap test'; + const expectedElementPath = 'p'; + const customDataTypeId = await umbracoApi.dataType.createTiptapDataTypeWithElementPathStatusbar(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); + + // Act + await umbracoUi.content.goToContentWithName(contentName); + await umbracoUi.content.enterRTETipTapEditor(inputText); + + // Assert + await umbracoUi.content.doesElementPathHaveText(expectedElementPath); +}); \ No newline at end of file diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/RichTextEditor.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/RichTextEditor.spec.ts index 62b8dc3928..2660e106d0 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/RichTextEditor.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/RichTextEditor.spec.ts @@ -61,8 +61,8 @@ test('tiptap is the default property editor in rich text editor', async ({umbrac await umbracoUi.dataType.goToDataType(dataTypeName); // Assert - //await umbracoUi.dataType.doesSettingHaveValue(ConstantHelper.tipTapSettings); - //await umbracoUi.dataType.doesSettingItemsHaveCount(ConstantHelper.tipTapSettings); + await umbracoUi.dataType.doesSettingHaveValue(ConstantHelper.tipTapSettings); + await umbracoUi.dataType.doesSettingItemsHaveCount(ConstantHelper.tipTapSettings); await umbracoUi.dataType.doesPropertyEditorHaveName(tipTapPropertyEditorName); await umbracoUi.dataType.doesPropertyEditorHaveAlias(tipTapAlias); await umbracoUi.dataType.doesPropertyEditorHaveUiAlias(tipTapUiAlias); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/Tiptap.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/Tiptap.spec.ts index 650859289e..e52f09b5ec 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/Tiptap.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/Tiptap.spec.ts @@ -121,12 +121,15 @@ test('can add an available block', async ({umbracoApi, umbracoUi}) => { await umbracoUi.dataType.goToDataType(tipTapName); // Act + await umbracoUi.dataType.isExtensionItemChecked('Block', false); await umbracoUi.dataType.addAvailableBlocks(elementTypeName); await umbracoUi.dataType.clickSaveButton(); // Assert await umbracoUi.dataType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); expect(await umbracoApi.dataType.doesRTEContainBlocks(tipTapName, [elementTypeId])).toBeTruthy(); + // Verify that "Block" extension is enable + await umbracoUi.dataType.isExtensionItemChecked('Block'); // Clean await umbracoApi.documentType.ensureNameNotExists(elementTypeName); @@ -226,3 +229,38 @@ test('can disable extensions item', async ({umbracoApi, umbracoUi}) => { expect(extensionsValue.value.length).toBe(extensionsCount - 1); expect(extensionsValue.value).not.toContain(extensionItemName); }); + +test('can add a statusbar', async ({umbracoApi, umbracoUi}) => { + // Arrange + const statusbarName = 'Word Count'; + const statusbarApiValue = 'Umb.Tiptap.Statusbar.WordCount'; + await umbracoApi.dataType.createDefaultTiptapDataType(tipTapName); + await umbracoUi.dataType.goToDataType(tipTapName); + + // Act + await umbracoUi.dataType.clickStatusbarItemInToolboxWithName(statusbarName); + await umbracoUi.dataType.clickSaveButton(); + + // Assert + await umbracoUi.dataType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const tipTapData = await umbracoApi.dataType.getByName(tipTapName); + const statusbarValue = tipTapData.values.find(value => value.alias === 'statusbar'); + expect(statusbarValue.value).toEqual([[statusbarApiValue]]); +}); + +test('can remove a statusbar', async ({umbracoApi, umbracoUi}) => { + // Arrange + const statusbarName = 'Word Count'; + await umbracoApi.dataType.createTiptapDataTypeWithWordCountStatusbar(tipTapName); + await umbracoUi.dataType.goToDataType(tipTapName); + + // Act + await umbracoUi.dataType.clickStatusbarItemWithName(statusbarName); + await umbracoUi.dataType.clickSaveButton(); + + // Assert + await umbracoUi.dataType.doesSuccessNotificationHaveText(NotificationConstantHelper.success.saved); + const tipTapData = await umbracoApi.dataType.getByName(tipTapName); + const statusbarValue = tipTapData.values.find(value => value.alias === 'statusbar'); + expect(statusbarValue).toBeFalsy(); +}); \ No newline at end of file