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 <andr317c@live.dk>

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",

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",

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);

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);
   });
 });

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}) => {
+    
+  });
+  
+});