V14 QA added Scripts acceptance tests (#15212)

* Updated api script tests for using new helpers and the AAA pattern

* Added acceptance tests for the scripts

* updated naming

* Bumped version of testHelpers

* Added suggestions from review

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.5",
+        "@umbraco/playwright-testhelpers": "^2.0.0-beta.6",
         "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.5",
-      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.5.tgz",
-      "integrity": "sha512-vOMqYhtlret7IGmp3xXoR0r+EzTXY3maVBUgt9LZPZo1VOQwG1o6oTfR9QGF9VY+usRXesQjYEf2S2ZT6dGrSg==",
+      "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==",
       "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.5",
+    "@umbraco/playwright-testhelpers": "^2.0.0-beta.6",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "faker": "^4.1.0",

tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Script/Script.spec.ts

@@ -6,45 +6,48 @@ test.describe('Script tests', () => {
   const scriptName = 'scriptName.js';
 
   test.beforeEach(async ({page, umbracoApi}) => {
-    await umbracoApi.script.ensureNameNotExistsAtRoot(scriptName);
-  });
-
-  test.afterEach(async ({page, umbracoApi}) => {
-    await umbracoApi.script.delete(scriptPath);
+    await umbracoApi.script.ensureNameNotExists(scriptName);
   });
 
   test('can create a script', async ({page, umbracoApi, umbracoUi}) => {
+    // Act
     scriptPath = await umbracoApi.script.create(scriptName, 'test');
 
     // Assert
-    await expect(await umbracoApi.script.exists(scriptPath)).toBeTruthy();
+    expect(await umbracoApi.script.doesExist(scriptPath)).toBeTruthy();
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptName);
   });
 
   test('can update a script', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
     const newContent = 'Howdy';
-
     scriptPath = await umbracoApi.script.create(scriptName, 'test');
-
     const script = await umbracoApi.script.get(scriptPath);
-
     script.content = newContent;
 
+    // Act
     await umbracoApi.script.update(script);
 
     // Assert
     // Checks if the content was updated for the script
     const updatedScript = await umbracoApi.script.get(scriptPath);
-    await expect(updatedScript.content).toEqual(newContent);
+    expect(updatedScript.content).toEqual(newContent);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptName);
   });
 
   test('can delete a script', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
     scriptPath = await umbracoApi.script.create(scriptName, 'test');
+    expect(await umbracoApi.script.doesExist(scriptPath)).toBeTruthy();
 
-    await expect(await umbracoApi.script.exists(scriptPath)).toBeTruthy();
-
+    // Act
     await umbracoApi.script.delete(scriptPath);
 
     // Assert
-    await expect(await umbracoApi.script.exists(scriptPath)).toBeFalsy();
+    expect(await umbracoApi.script.doesExist(scriptPath)).toBeFalsy();
   });
 });

tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Script/ScriptFolder.spec.ts

@@ -2,65 +2,73 @@ import {test} from '@umbraco/playwright-testhelpers';
 import {expect} from "@playwright/test";
 
 test.describe('Script Folder tests', () => {
-  let scriptFolderPath = "";
-  const scriptFolderName = 'scriptFolder';
+  let scriptFolderPath = '';
+  const scriptFolderName = 'ScriptFolder';
 
   test.beforeEach(async ({page, umbracoApi}) => {
-    await umbracoApi.script.ensureNameNotExistsAtRoot(scriptFolderName);
-  });
-
-  test.afterEach(async ({page, umbracoApi}) => {
-    await umbracoApi.script.deleteFolder(scriptFolderPath);
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
   });
 
   test('can create a script folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Act
     scriptFolderPath = await umbracoApi.script.createFolder(scriptFolderName);
 
     // Assert
-    await expect(umbracoApi.script.folderExists(scriptFolderPath)).toBeTruthy();
+    expect(await umbracoApi.script.doesFolderExist(scriptFolderPath)).toBeTruthy();
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
   });
 
   test('can delete a script folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
     scriptFolderPath = await umbracoApi.script.createFolder(scriptFolderName);
+    expect(await umbracoApi.script.doesFolderExist(scriptFolderName)).toBeTruthy();
 
-    await expect(await umbracoApi.script.folderExists(scriptFolderName)).toBeTruthy();
-
+    // Act
     await umbracoApi.script.deleteFolder(scriptFolderPath);
 
     // Assert
-    await expect(await umbracoApi.script.folderExists(scriptFolderPath)).toBeFalsy();
+    expect(await umbracoApi.script.doesFolderExist(scriptFolderPath)).toBeFalsy();
   });
 
   test('can add a script folder in another folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
     const childFolderName = 'childFolder';
     scriptFolderPath = await umbracoApi.script.createFolder(scriptFolderName);
-
     await umbracoApi.script.createFolder(childFolderName, scriptFolderPath);
 
-    const childFolder = await umbracoApi.script.getFolderChildren(scriptFolderPath);
+    // Act
+    const childFolder = await umbracoApi.script.getChildren(scriptFolderPath);
 
     // Assert
-    await expect(childFolder.items[0].name).toEqual(childFolderName);
+    expect(childFolder[0].name).toEqual(childFolderName);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
   });
 
   test('can add a script folder in a folder in another folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
     const childFolderName = 'childFolder';
     const childOfChildFolderName = 'childOfChildFolder';
 
+    // Act
     // Creates parent folder
     scriptFolderPath = await umbracoApi.script.createFolder(scriptFolderName);
-
     // Creates child folder in parent folder
     const childOfParentPath = await umbracoApi.script.createFolder(childFolderName, scriptFolderPath);
-    const childOfParent = await umbracoApi.script.getFolderChildren(scriptFolderPath);
-
+    const childOfParent = await umbracoApi.script.getChildren(scriptFolderPath);
     // Creates childOfChild folder in child folder
     await umbracoApi.script.createFolder(childOfChildFolderName, childOfParentPath);
-    const childOfChild = await umbracoApi.script.getFolderChildren(childOfParentPath);
+    const childOfChild = await umbracoApi.script.getChildren(childOfParentPath);
 
     // Assert
     // Checks if the script folder are in the correct folders
-    await expect(childOfParent.items[0].name).toEqual(childFolderName);
-    await expect(childOfChild.items[0].name).toEqual(childOfChildFolderName);
+    expect(childOfParent[0].name).toEqual(childFolderName);
+    expect(childOfChild[0].name).toEqual(childOfChildFolderName);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
   });
 });

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Scripts.spec.ts

@@ -0,0 +1,237 @@
+import {ConstantHelper, test} from "@umbraco/playwright-testhelpers";
+import {expect} from "@playwright/test";
+
+test.describe('Script tests', () => {
+  const scriptName = 'TestScript';
+  const scriptPath = scriptName + '.js';
+  const scriptFolderName = 'TestScriptFolder';
+
+  test.beforeEach(async ({page, umbracoApi, umbracoUi}) => {
+    await page.goto(umbracoApi.baseUrl + '/umbraco');
+    await umbracoUi.goToSection(ConstantHelper.sections.settings);
+  });
+
+  test('can create a empty script', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.ensureNameNotExists(scriptPath);
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).getByLabel('Open actions menu').click({force: true});
+    await page.getByLabel('New empty script').click();
+    // TODO: Change the label to script name when the label is updated
+    await page.getByLabel('template name').fill(scriptName);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await page.waitForTimeout(1000);
+    await page.getByLabel('Save').click({force: true});
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeTruthy();
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptPath);
+  });
+
+  test('can update a script', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.ensureNameNotExists(scriptPath);
+    await umbracoApi.script.create(scriptPath, 'test');
+    const updatedScriptContent = 'const test = {\r\n    script = \u0022Test\u0022,\r\n    extension = \u0022.js\u0022,\r\n    scriptPath: function() {\r\n        return this.script \u002B this.extension;\r\n    }\r\n};\r\n';
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await page.locator('umb-tree-item').getByLabel(scriptName).click();
+    await page.locator('textarea.inputarea').clear();
+    await page.locator('textarea.inputarea').fill(updatedScriptContent);
+    await page.getByLabel('Save').click();
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    const updatedScript = await umbracoApi.script.get(scriptPath);
+    expect(updatedScript.content).toBe(updatedScriptContent);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptPath);
+  });
+
+  test('can delete a script', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.ensureNameNotExists(scriptPath);
+    await umbracoApi.script.create(scriptPath, '');
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await page.locator('umb-tree-item').locator('[label="' + scriptPath + '"] >> [label="Open actions menu"]').click();
+    await page.getByLabel('Delete').click();
+    await page.locator('#confirm').getByLabel('Delete').click();
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeFalsy();
+  });
+
+  // Folder
+  test('can create a folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).getByLabel('Open actions menu').click({force: true});
+    await page.getByLabel('Create folder').click();
+    await page.locator('[headline="Create Folder"] >> input').fill(scriptFolderName);
+    await page.getByLabel('Create Folder', {exact: true}).click();
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    // TODO: Use the reload function for scripts when it is implemented
+    await page.reload();
+    await umbracoUi.goToSection(ConstantHelper.sections.settings);
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await expect(page.locator('umb-tree-item').locator('[label="' + scriptFolderName + '"] ')).toBeVisible();
+    expect(await umbracoApi.script.doesFolderExist(scriptFolderName)).toBeTruthy();
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptPath);
+  });
+
+  test('can delete a folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.createFolder(scriptFolderName);
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await page.locator('umb-tree-item').locator('[label="' + scriptFolderName + '"] >> [label="Open actions menu"]').click();
+    await page.getByLabel('Remove folder').click();
+    await page.locator('#confirm').getByLabel('Delete').click();
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    // TODO: Use the reload function for scripts when it is implemented
+    await page.reload();
+    await umbracoUi.goToSection(ConstantHelper.sections.settings);
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await expect(page.locator('umb-tree-item').locator('[label="' + scriptFolderName + '"] ')).not.toBeVisible();
+    expect(await umbracoApi.script.doesFolderExist(scriptFolderName)).toBeFalsy();
+  });
+
+  test('can create a script in a folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+    await umbracoApi.script.createFolder(scriptFolderName);
+    const scriptContent = 'const test = {\r\n    script = \u0022Test\u0022,\r\n    extension = \u0022.js\u0022,\r\n    scriptPath: function() {\r\n        return this.script \u002B this.extension;\r\n    }\r\n};\r\n';
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await page.locator('umb-tree-item').locator('[label="' + scriptFolderName + '"] >> [label="Open actions menu"]').click();
+    await page.getByLabel('New empty script').click();
+    // TODO: Change the label to script name when the label is updated
+    await page.getByLabel('template name').fill(scriptName);
+    await page.locator('textarea.inputarea').clear();
+    await page.locator('textarea.inputarea').fill(scriptContent);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await page.waitForTimeout(1000);
+    await page.getByLabel('Save').click({force: true});
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    // TODO: Check if the script was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName);
+    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + scriptPath);
+    const scriptData = await umbracoApi.script.get(scriptChildren[0].path);
+    expect(scriptData.content).toBe(scriptContent);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+  });
+
+  test('can create a folder in a folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+    await umbracoApi.script.createFolder(scriptFolderName);
+    const childFolderName = "childFolderName";
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await page.locator('umb-tree-item').locator('[label="' + scriptFolderName + '"] >> [label="Open actions menu"]').click();
+    await page.getByLabel('Create folder').click();
+    await page.locator('[headline="Create Folder"] >> input').fill(childFolderName);
+    await page.getByLabel('Create Folder', {exact: true}).click();
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    // TODO: Check if the folder was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(childFolderName)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName);
+    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + childFolderName);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+  });
+
+  test('can create a folder in a folder in a folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    const childFolderName = 'ChildFolderName';
+    const childOfChildFolderName = 'ChildOfChildFolderName';
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+    await umbracoApi.script.createFolder(scriptFolderName);
+    await umbracoApi.script.createFolder(childFolderName, scriptFolderName);
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await page.locator('umb-tree-item >> [label="' + scriptFolderName + '"]').locator('#caret-button').click();
+    await page.locator('umb-tree-item').locator('[label="' + childFolderName + '"] >> [label="Open actions menu"]').click();
+    await page.getByLabel('Create folder').click();
+    await page.locator('[headline="Create Folder"] >> input').fill(childOfChildFolderName);
+    await page.getByLabel('Create Folder', {exact: true}).click();
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    // TODO: Check if the folder was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(childOfChildFolderName)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName + '/' + childFolderName);
+    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + childFolderName + '/' + childOfChildFolderName);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+  });
+
+  // TODO: Remove skip from this test when the frontend is able to create a script in a folder in a folder. Currently the script is created in the first folder.
+  test.skip('can create a script in a folder in a folder', async ({page, umbracoApi, umbracoUi}) => {
+    // Arrange
+    const childFolderName = 'ChildFolderName';
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+    await umbracoApi.script.createFolder(scriptFolderName);
+    await umbracoApi.script.createFolder(childFolderName, scriptFolderName);
+
+    // Act
+    await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
+    await page.locator('umb-tree-item >> [label="' + scriptFolderName + '"]').locator('#caret-button').click();
+    await page.locator('umb-tree-item').locator('[label="' + childFolderName + '"] >> [label="Open actions menu"]').click();
+    await page.getByLabel('New empty script').click();
+    // TODO: Change the label to script name when the label is updated
+    await page.getByLabel('template name').fill(scriptName);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await page.waitForTimeout(1000);
+    await page.getByLabel('Save').click({force: true});
+
+    // Assert
+    // TODO: Uncomment when the notification is visible
+    // await umbracoUi.isSuccessNotificationVisible();
+    // TODO: Check if the script was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName + '/' + childFolderName);
+    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + childFolderName + '/' + scriptPath);
+
+    // Clean
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+  });
+});