From d6f0c33d83600af3cbba310c5b932745184f3842 Mon Sep 17 00:00:00 2001 From: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com> Date: Thu, 23 Nov 2023 15:33:51 +0700 Subject: [PATCH] V14 added acceptance tests for the Stylesheets (#15265) * Added acceptance test for Stylesheets * Updated api test for stylesheet using new helpers and apply AAA pattern * Bumped version of Test Helpers * Updated api and ui tests of Stylesheet after modifying TestHelper * Updated stylesheets ui tests using openActionMenuAtRoot() * Added suggestions from review * Added wait for the flaky tests * Fixed package-lock.json --------- Co-authored-by: Andreas Zerbst --- .../package-lock.json | 8 +- .../Umbraco.Tests.AcceptanceTest/package.json | 2 +- .../ApiTesting/Stylesheet/Stylesheet.spec.ts | 57 +++--- .../Stylesheet/StylesheetFolder.spec.ts | 62 +++--- .../Settings/Stylesheets.spec.ts | 186 ++++++++++++++++++ 5 files changed, 250 insertions(+), 65 deletions(-) create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheets.spec.ts diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json index 8ddef342e5..dc4f5bd1f7 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": "^1.0.6", - "@umbraco/playwright-testhelpers": "^2.0.0-beta.6", + "@umbraco/playwright-testhelpers": "^2.0.0-beta.7", "camelize": "^1.0.0", "dotenv": "^16.3.1", "faker": "^4.1.0", @@ -141,9 +141,9 @@ } }, "node_modules/@umbraco/playwright-testhelpers": { - "version": "2.0.0-beta.6", - "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.6.tgz", - "integrity": "sha512-waRJp0ckplzamtj3qu5JHhKZJWbZevKtjw4Nm0+O0XcuKbCF3FNE/RO9RVbFK5Htogm5oS+2vNcGapMFsQ2S2g==", + "version": "2.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.7.tgz", + "integrity": "sha512-4dn0hJUc/OzWim0s0C8yj9Tviqx3+6aJde2j+jrlw6hocOkezw3qReKIGK1xJG5mS98dQVpOYjL7T7mfgFVXSA==", "dependencies": { "@umbraco/json-models-builders": "^1.0.6", "camelize": "^1.0.0", diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json index a58f55cddb..ddd224345c 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/package.json +++ b/tests/Umbraco.Tests.AcceptanceTest/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@umbraco/json-models-builders": "^1.0.6", - "@umbraco/playwright-testhelpers": "^2.0.0-beta.6", + "@umbraco/playwright-testhelpers": "^2.0.0-beta.7", "camelize": "^1.0.0", "dotenv": "^16.3.1", "faker": "^4.1.0", diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/Stylesheet.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/Stylesheet.spec.ts index cbc4a584f6..4fce95932c 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/Stylesheet.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/Stylesheet.spec.ts @@ -5,30 +5,30 @@ test.describe('Stylesheet tests', () => { let stylesheetPath = ""; const stylesheetName = 'Stylesheet.css'; - test.beforeEach(async ({page, umbracoApi}) => { - await umbracoApi.stylesheet.ensureNameNotExistsAtRoot(stylesheetName); + test.beforeEach(async ({umbracoApi}) => { + await umbracoApi.stylesheet.ensureNameNotExists(stylesheetName); }); - test.afterEach(async ({page, umbracoApi}) => { + test.afterEach(async ({umbracoApi}) => { await umbracoApi.stylesheet.delete(stylesheetPath); }); - test('can create a stylesheet', async ({page, umbracoApi, umbracoUi}) => { + test('can create a stylesheet', async ({umbracoApi}) => { + // Act stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'content'); // Assert - await expect(await umbracoApi.stylesheet.exists(stylesheetPath)).toBeTruthy(); + await expect(await umbracoApi.stylesheet.doesExist(stylesheetPath)).toBeTruthy(); }); - test('can update a stylesheet', async ({page, umbracoApi, umbracoUi}) => { + test('can update a stylesheet', async ({umbracoApi}) => { + // Arrange const newContent = 'BetterContent'; - stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'content'); - const stylesheet = await umbracoApi.stylesheet.get(stylesheetPath); - stylesheet.content = newContent; + // Act await umbracoApi.stylesheet.update(stylesheet); // Assert @@ -37,54 +37,53 @@ test.describe('Stylesheet tests', () => { await expect(updatedStylesheet.content).toEqual(newContent); }); - test('can delete a stylesheet', async ({page, umbracoApi, umbracoUi}) => { + test('can delete a stylesheet', async ({umbracoApi}) => { + // Arrange stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'content'); + await expect(await umbracoApi.stylesheet.doesExist(stylesheetPath)).toBeTruthy(); - await expect(await umbracoApi.stylesheet.exists(stylesheetPath)).toBeTruthy(); - + // Act await umbracoApi.stylesheet.delete(stylesheetPath); // Assert - await expect(await umbracoApi.stylesheet.exists(stylesheetPath)).toBeFalsy(); + await expect(await umbracoApi.stylesheet.doesExist(stylesheetPath)).toBeFalsy(); }); - test('can create a stylesheet in a folder', async ({page, umbracoApi, umbracoUi}) => { + test('can create a stylesheet in a folder', async ({umbracoApi}) => { + // Arrange const folderName = 'StyledFolder'; - - await umbracoApi.stylesheet.ensureNameNotExistsAtRoot(folderName); - + await umbracoApi.stylesheet.ensureNameNotExists(folderName); stylesheetPath = await umbracoApi.stylesheet.createFolder(folderName); + // Act await umbracoApi.stylesheet.create(stylesheetName, 'content', stylesheetPath); // Assert - const child = await umbracoApi.stylesheet.getFolderChildren(stylesheetPath); - await expect(child.items[0].name).toEqual(stylesheetName); + const child = await umbracoApi.stylesheet.getChildren(stylesheetPath); + await expect(child[0].name).toEqual(stylesheetName); // Clean await umbracoApi.stylesheet.deleteFolder(stylesheetPath); }); - test('can delete a stylesheet from a folder', async ({page, umbracoApi, umbracoUi}) => { + test('can delete a stylesheet from a folder', async ({umbracoApi}) => { + // Arrange const folderName = 'StyledFolder'; - - await umbracoApi.stylesheet.ensureNameNotExistsAtRoot(folderName); - + await umbracoApi.stylesheet.ensureNameNotExists(folderName); stylesheetPath = await umbracoApi.stylesheet.createFolder(folderName); - const stylesheetChildPath = await umbracoApi.stylesheet.create(stylesheetName, 'deleteMe', stylesheetPath); // Checks if the stylesheet was created - const child = await umbracoApi.stylesheet.getFolderChildren(stylesheetPath); - + const child = await umbracoApi.stylesheet.getChildren(stylesheetPath); // Checks if the child is in the folder - await expect(child.items[0].name).toEqual(stylesheetName); + await expect(child[0].name).toEqual(stylesheetName); + // Act await umbracoApi.stylesheet.delete(stylesheetChildPath); // Assert - const noChild = await umbracoApi.stylesheet.getFolderChildren(stylesheetPath); - await expect(noChild.items[0]).toEqual(undefined); + const noChild = await umbracoApi.stylesheet.getChildren(stylesheetPath); + await expect(noChild[0]).toEqual(undefined); // Clean await umbracoApi.stylesheet.deleteFolder(stylesheetPath); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/StylesheetFolder.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/StylesheetFolder.spec.ts index 87fed72793..a8204d6724 100644 --- a/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/StylesheetFolder.spec.ts +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/StylesheetFolder.spec.ts @@ -5,45 +5,49 @@ test.describe('Stylesheet Folder tests', () => { let stylesheetFolderPath = ""; const stylesheetFolderName = 'StylesheetFolder'; - test.beforeEach(async ({page, umbracoApi}) => { - await umbracoApi.stylesheet.ensureNameNotExistsAtRoot(stylesheetFolderName); + test.beforeEach(async ({umbracoApi}) => { + await umbracoApi.stylesheet.ensureNameNotExists(stylesheetFolderName); }); - test.afterEach(async ({page, umbracoApi}) => { + test.afterEach(async ({umbracoApi}) => { await umbracoApi.stylesheet.deleteFolder(stylesheetFolderPath); }); - test('can create a stylesheet folder', async ({page, umbracoApi, umbracoUi}) => { + test('can create a stylesheet folder', async ({umbracoApi}) => { + // Arrange stylesheetFolderPath = await umbracoApi.stylesheet.createFolder(stylesheetFolderName); // Assert - await expect(await umbracoApi.stylesheet.folderExists(stylesheetFolderPath)).toBeTruthy(); + await expect(await umbracoApi.stylesheet.doesFolderExist(stylesheetFolderPath)).toBeTruthy(); }); - test('can delete a stylesheet folder', async ({page, umbracoApi, umbracoUi}) => { + test('can delete a stylesheet folder', async ({umbracoApi}) => { + // Arrange stylesheetFolderPath = await umbracoApi.stylesheet.createFolder(stylesheetFolderName); + await expect(await umbracoApi.stylesheet.doesFolderExist(stylesheetFolderPath)).toBeTruthy(); - await expect(await umbracoApi.stylesheet.folderExists(stylesheetFolderPath)).toBeTruthy(); - + // Act await umbracoApi.stylesheet.deleteFolder(stylesheetFolderPath); // Assert - await expect(await umbracoApi.stylesheet.exists(stylesheetFolderPath)).toBeFalsy(); + await expect(await umbracoApi.stylesheet.doesExist(stylesheetFolderPath)).toBeFalsy(); }); - test('can add a stylesheet folder in another folder', async ({page, umbracoApi, umbracoUi}) => { + test('can add a stylesheet folder in another folder', async ({umbracoApi}) => { + // Arrange const childFolderName = 'childFolder'; stylesheetFolderPath = await umbracoApi.stylesheet.createFolder(stylesheetFolderName); + // Act await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderPath); - const children = await umbracoApi.stylesheet.getFolderChildren(stylesheetFolderPath); - // Assert - await expect(children.items[0].name).toEqual(childFolderName); + const children = await umbracoApi.stylesheet.getChildren(stylesheetFolderPath); + await expect(children[0].name).toEqual(childFolderName); }); - test('can add a stylesheet folder in a folder that is in another folder', async ({page, umbracoApi, umbracoUi}) => { + test('can add a stylesheet folder in a folder that is in another folder', async ({umbracoApi}) => { + // Arrange const childFolderName = 'childFolder'; const childOfChildFolderName = 'childOfChildFolder'; @@ -52,39 +56,35 @@ test.describe('Stylesheet Folder tests', () => { // Creates child folder in parent folder const childOfParentPath = await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderPath); + const childOfParent = await umbracoApi.stylesheet.getChildren(stylesheetFolderPath); - const childOfParent = await umbracoApi.stylesheet.getFolderChildren(stylesheetFolderPath); - + // Act // Creates childOfChild folder in child folder await umbracoApi.stylesheet.createFolder(childOfChildFolderName, childOfParentPath); - const childOfChild = await umbracoApi.stylesheet.getFolderChildren(childOfParentPath); - // Assert // Checks if the stylesheet folder are in the correct folders - await expect(childOfParent.items[0].name).toEqual(childFolderName); - await expect(childOfChild.items[0].name).toEqual(childOfChildFolderName); + await expect(childOfParent[0].name).toEqual(childFolderName); + const childOfChild = await umbracoApi.stylesheet.getChildren(childOfParentPath); + await expect(childOfChild[0].name).toEqual(childOfChildFolderName); }); - test('can delete a stylesheet folder from another folder', async ({page, umbracoApi, umbracoUi}) => { + test('can delete a stylesheet folder from another folder', async ({umbracoApi}) => { + // Arrange const childFolderName = 'childFolder'; - stylesheetFolderPath = await umbracoApi.stylesheet.createFolder(stylesheetFolderName); - const childPath = await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderPath); - - const child = await umbracoApi.stylesheet.getFolderChildren(stylesheetFolderPath); + const child = await umbracoApi.stylesheet.getChildren(stylesheetFolderPath); // Checks if a child exists in the parent folder with the name - await expect(child.items[0].name).toEqual(childFolderName); - - await umbracoApi.stylesheet.folderExists(childPath); + await expect(child[0].name).toEqual(childFolderName); + await umbracoApi.stylesheet.doesFolderExist(childPath); + // Act await umbracoApi.stylesheet.deleteFolder(childPath); - const noChild = await umbracoApi.stylesheet.getFolderChildren(stylesheetFolderPath); - // Assert - await expect(noChild.items[0]).toEqual(undefined); + const noChild = await umbracoApi.stylesheet.getChildren(stylesheetFolderPath); + await expect(noChild[0]).toEqual(undefined); }); }); diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheets.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheets.spec.ts new file mode 100644 index 0000000000..4cff86835b --- /dev/null +++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheets.spec.ts @@ -0,0 +1,186 @@ +import {ConstantHelper, test} from '@umbraco/playwright-testhelpers'; +import {expect} from "@playwright/test"; + +test.describe('Stylesheets tests', () => { + + const styleSheetName = 'TestStyleSheetFile'; + const styleSheetFileName = styleSheetName + ".css"; + const ruleName = 'TestRuleName'; + const styleFolderName = 'TestStylesheetFolder'; + + test.beforeEach(async ({umbracoUi}) => { + await umbracoUi.goToBackOffice(); + await umbracoUi.goToSection(ConstantHelper.sections.settings); + }); + + test('can create a stylesheet file', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName); + + //Act + await umbracoUi.stylesheet.openActionsMenuAtRoot(); + await umbracoUi.stylesheet.clickNewStylesheetFileButton(); + await umbracoUi.stylesheet.enterStylesheetName(styleSheetName); + // TODO: Remove this timeout when frontend validation is implemented + await await umbracoUi.waitForTimeout(1000); + await umbracoUi.stylesheet.clickSaveButton(); + + // Assert + expect(await umbracoApi.stylesheet.doesExist(styleSheetFileName)).toBeTruthy(); + // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section + // TODO: when frontend is ready, verify the notification displays + + // Clean + await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName); + }); + + test('can create a new Rich Text Editor style sheet file', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName); + + //Act + await umbracoUi.stylesheet.openActionsMenuAtRoot(); + await umbracoUi.stylesheet.clickNewRTEStylesheetFileButton(); + await umbracoUi.stylesheet.enterStylesheetName(styleSheetName); + await umbracoUi.stylesheet.addNewRule(ruleName, 'h1', 'color:red'); + // TODO: Remove this timeout when frontend validation is implemented + await umbracoUi.waitForTimeout(1000); + await umbracoUi.stylesheet.clickSaveButton(); + + // Assert + expect(await umbracoApi.stylesheet.doesExist(styleSheetFileName)).toBeTruthy(); + expect(await umbracoApi.stylesheet.doesRuleNameExist(styleSheetFileName, ruleName)).toBeTruthy(); + // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section + // TODO: when frontend is ready, verify the notification displays + + // Clean + await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName); + }); + + test('can edit a stylesheet file', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName); + await umbracoApi.stylesheet.create(styleSheetFileName, '', '/'); + + //Act + await umbracoUi.stylesheet.openStylesheetFileByNameAtRoot(styleSheetFileName); + await umbracoUi.stylesheet.addNewRule(ruleName, 'h1', 'color:red'); + await umbracoUi.stylesheet.clickSaveButton(); + + // Assert + expect(await umbracoApi.stylesheet.doesRuleNameExist(styleSheetFileName, ruleName)).toBeTruthy(); + // TODO: when frontend is ready, verify the notification displays + + // Clean + await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName); + }); + + test('can delete a stylesheet file', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName); + await umbracoApi.stylesheet.create(styleSheetFileName, '', '/'); + + //Act + await umbracoUi.stylesheet.clickRootFolderCaretButton(); + await umbracoUi.stylesheet.openActionsMenuForName(styleSheetFileName); + await umbracoUi.stylesheet.deleteStylesheetFile(); + + // Assert + expect(await umbracoApi.stylesheet.doesNameExist(styleSheetFileName)).toBeFalsy(); + // TODO: when frontend is ready, verify the new stylesheet is NOT displayed under the Stylesheets section + // TODO: when frontend is ready, verify the notification displays + }); + + test('can create a folder', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName); + + // Act + await umbracoUi.stylesheet.openActionsMenuAtRoot(); + await umbracoUi.stylesheet.createNewFolder(styleFolderName); + + // Assert + expect(await umbracoApi.stylesheet.doesFolderExist(styleFolderName)).toBeTruthy(); + // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section + // TODO: when frontend is ready, verify the notification displays + + // Clean + await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName); + }); + + test('can remove a folder', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName); + await umbracoApi.stylesheet.createFolder(styleFolderName, ''); + + // Act + await umbracoUi.stylesheet.clickRootFolderCaretButton(); + await umbracoUi.stylesheet.openActionsMenuForName(styleFolderName); + await umbracoUi.stylesheet.removeFolder(); + + // Assert + expect(await umbracoApi.stylesheet.doesFolderExist(styleFolderName)).toBeFalsy(); + // TODO: when frontend is ready, verify the removed folder is NOT displayed under the Stylesheets section + // TODO: when frontend is ready, verify the notification displays + }); + + // TODO: remove skip when frontend is ready as currently it will create 2 child folders in UI when creating a folder in a folder + test.skip('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => { + // Arrange + await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName); + await umbracoApi.stylesheet.createFolder(styleFolderName); + const childFolderName = "ChildFolderName"; + + // Act + await umbracoUi.stylesheet.clickRootFolderCaretButton(); + await umbracoUi.stylesheet.openActionsMenuForName(styleFolderName); + await umbracoUi.stylesheet.createNewFolder(childFolderName); + + //Assert + expect(await umbracoApi.stylesheet.doesNameExist(childFolderName)).toBeTruthy(); + const styleChildren = await umbracoApi.stylesheet.getChildren(styleFolderName); + expect(styleChildren[0].path).toBe(styleFolderName + '/' + childFolderName); + // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section + // TODO: when frontend is ready, verify the notification displays + + // Clean + await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName); + }); + + // TODO: remove skip when frontend is ready as currently it will create 2 child folders in UI when creating a folder in a folder + test.skip('can create a folder in a folder in a folder', async ({umbracoApi, umbracoUi}) => { + // Arrange + const childFolderName = 'ChildFolderName'; + const childOfChildFolderName = 'ChildOfChildFolderName'; + await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName); + await umbracoApi.stylesheet.createFolder(styleFolderName); + await umbracoApi.stylesheet.createFolder(childFolderName, styleFolderName); + + // Act + await umbracoUi.stylesheet.clickRootFolderCaretButton(); + await umbracoUi.stylesheet.clickCaretButtonForName(styleFolderName); + await umbracoUi.stylesheet.openActionsMenuForName(childFolderName); + await umbracoUi.stylesheet.createNewFolder(childOfChildFolderName); + + //Assert + expect(await umbracoApi.stylesheet.doesNameExist(childOfChildFolderName)).toBeTruthy(); + const styleChildren = await umbracoApi.stylesheet.getChildren(styleFolderName + '/' + childFolderName); + expect(styleChildren[0].path).toBe(styleFolderName + '/' + childFolderName + '/' + childOfChildFolderName); + // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section + // TODO: when frontend is ready, verify the notification displays + + // Clean + await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName); + }); + + // TODO: implement this later as the frontend is missing now + test.skip('can create a stylesheet in a folder', async ({umbracoApi, umbracoUi}) => { + + }); + + // TODO: implement this later as the frontend is missing now + test.skip('can create a stylesheet in a folder in a folder', async ({umbracoApi, umbracoUi}) => { + + }); + +});