V14 QA Refactor code of Partial View acceptance tests (#15325)

* Refactor acceptance tests for Partial View

* Refactor api tests for Partial View

* Bumped version of Test Helper

* Added suggestion from review

* Bumped version to testhelpers 2.0.8

---------

Co-authored-by: Andreas Zerbst <andr317c@live.dk>
This commit is contained in:
Nhu Dinh
2023-12-01 17:20:57 +07:00
committed by GitHub
parent f9ecd9514e
commit 48befe730b
5 changed files with 96 additions and 125 deletions

View File

@@ -8,7 +8,7 @@
"hasInstallScript": true,
"dependencies": {
"@umbraco/json-models-builders": "^1.0.6",
"@umbraco/playwright-testhelpers": "^2.0.0-beta.7",
"@umbraco/playwright-testhelpers": "^2.0.0-beta.8",
"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.7",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.7.tgz",
"integrity": "sha512-4dn0hJUc/OzWim0s0C8yj9Tviqx3+6aJde2j+jrlw6hocOkezw3qReKIGK1xJG5mS98dQVpOYjL7T7mfgFVXSA==",
"version": "2.0.0-beta.8",
"resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.8.tgz",
"integrity": "sha512-YgGfkIwSAJ1PKmciuUlkNyEss4Djzp3XSOOc5rQXxjSa4E1PkBIgI4ZEf/pON/9v84U9gzpKCvs91uBZN+drqg==",
"dependencies": {
"@umbraco/json-models-builders": "^1.0.6",
"camelize": "^1.0.0",

View File

@@ -21,7 +21,7 @@
},
"dependencies": {
"@umbraco/json-models-builders": "^1.0.6",
"@umbraco/playwright-testhelpers": "^2.0.0-beta.7",
"@umbraco/playwright-testhelpers": "^2.0.0-beta.8",
"camelize": "^1.0.0",
"dotenv": "^16.3.1",
"faker": "^4.1.0",

View File

@@ -5,22 +5,22 @@ test.describe('Partial View tests', () => {
let partialViewPath = "";
const partialViewName = 'partialViewName.cshtml';
test.beforeEach(async ({page, umbracoApi}) => {
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewName);
test.beforeEach(async ({umbracoApi}) => {
await umbracoApi.partialView.ensureNameNotExists(partialViewName);
});
test.afterEach(async ({page, umbracoApi}) => {
test.afterEach(async ({umbracoApi}) => {
await umbracoApi.partialView.delete(partialViewPath);
});
test('can create a partial view', async ({page, umbracoApi, umbracoUi}) => {
test('can create a partial view', async ({umbracoApi}) => {
partialViewPath = await umbracoApi.partialView.create(partialViewName, 'test');
// Assert
await expect(await umbracoApi.partialView.exists(partialViewPath)).toBeTruthy();
await expect(await umbracoApi.partialView.doesExist(partialViewPath)).toBeTruthy();
});
test('can update a partial view', async ({page, umbracoApi, umbracoUi}) => {
test('can update a partial view', async ({umbracoApi}) => {
const newContent = 'Howdy';
partialViewPath = await umbracoApi.partialView.create(partialViewName, 'test');
@@ -36,14 +36,14 @@ test.describe('Partial View tests', () => {
await expect(updatedPartialView.content).toEqual(newContent);
});
test('can delete a partial view', async ({page, umbracoApi, umbracoUi}) => {
test('can delete a partial view', async ({umbracoApi}) => {
partialViewPath = await umbracoApi.partialView.create(partialViewName, 'test');
await expect(await umbracoApi.partialView.exists(partialViewPath)).toBeTruthy();
await expect(await umbracoApi.partialView.doesExist(partialViewPath)).toBeTruthy();
await umbracoApi.partialView.delete(partialViewPath);
// Assert
await expect(await umbracoApi.partialView.exists(partialViewPath)).toBeFalsy();
await expect(await umbracoApi.partialView.doesExist(partialViewPath)).toBeFalsy();
});
});

View File

@@ -5,33 +5,33 @@ test.describe('Partial View Folder tests', () => {
let partialViewFolderPath = "";
const partialViewFolderName = 'partialViewFolder';
test.beforeEach(async ({page, umbracoApi}) => {
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFolderName);
test.beforeEach(async ({umbracoApi}) => {
await umbracoApi.partialView.ensureNameNotExists(partialViewFolderName);
});
test.afterEach(async ({page, umbracoApi}) => {
test.afterEach(async ({umbracoApi}) => {
await umbracoApi.partialView.deleteFolder(partialViewFolderPath);
});
test('can create a partial view folder', async ({page, umbracoApi, umbracoUi}) => {
test('can create a partial view folder', async ({umbracoApi}) => {
partialViewFolderPath = await umbracoApi.partialView.createFolder(partialViewFolderName);
// Assert
await expect(await umbracoApi.partialView.folderExists(partialViewFolderPath)).toBeTruthy();
await expect(await umbracoApi.partialView.doesFolderExist(partialViewFolderPath)).toBeTruthy();
});
test('can delete a partial view folder', async ({page, umbracoApi, umbracoUi}) => {
test('can delete a partial view folder', async ({umbracoApi}) => {
partialViewFolderPath = await umbracoApi.partialView.createFolder(partialViewFolderName);
await expect(await umbracoApi.partialView.folderExists(partialViewFolderPath)).toBeTruthy();
await expect(await umbracoApi.partialView.doesFolderExist(partialViewFolderPath)).toBeTruthy();
await umbracoApi.partialView.deleteFolder(partialViewFolderPath);
// Assert
await expect(await umbracoApi.partialView.folderExists(partialViewFolderPath)).toBeFalsy();
await expect(await umbracoApi.partialView.doesFolderExist(partialViewFolderPath)).toBeFalsy();
});
test('can add a partial view folder in another', async ({page, umbracoApi, umbracoUi}) => {
test('can add a partial view folder in another', async ({umbracoApi}) => {
const childFolderName = 'childFolder';
partialViewFolderPath = await umbracoApi.partialView.createFolder(partialViewFolderName);
@@ -45,7 +45,7 @@ test.describe('Partial View Folder tests', () => {
await expect(children.items[0].name).toEqual(childFolderName);
});
test('can add a partial view folder in a folder in another folder', async ({page, umbracoApi, umbracoUi}) => {
test('can add a partial view folder in a folder in another folder', async ({umbracoApi}) => {
const childFolderName = 'childFolder';
const childOfChildFolderName = 'childOfChildFolder';

View File

@@ -5,94 +5,84 @@ test.describe('Partial Views tests', () => {
const partialViewName = 'TestPartialView';
const partialViewFileName = partialViewName + ".cshtml";
test.beforeEach(async ({page, umbracoApi, umbracoUi}) => {
await page.goto(umbracoApi.baseUrl + '/umbraco');
test.beforeEach(async ({umbracoUi}) => {
await umbracoUi.goToBackOffice();
await umbracoUi.goToSection(ConstantHelper.sections.settings);
});
async function gotoPartialViewDetail(page, partialViewFileName) {
await page.locator('umb-tree-item').filter({ hasText: 'Partial Views' }).locator('#caret-button').click();
await page.locator('umb-tree-item').getByLabel(partialViewFileName).click();
}
test('can create an empty partial view', async ({page, umbracoApi}) => {
test('can create an empty partial view', async ({umbracoApi, umbracoUi}) => {
//Arrange
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewName);
await umbracoApi.partialView.ensureNameNotExists(partialViewName);
// Act
await page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel('Open actions menu').click({force: true});
await page.getByLabel('New empty partial view').click();
await page.getByLabel('template name').fill(partialViewName);
await umbracoUi.partialView.openActionsMenuAtRoot();
await umbracoUi.partialView.clickNewEmptyPartialViewButton();
await umbracoUi.partialView.enterPartialViewName(partialViewName);
// TODO: Remove this timeout when frontend validation is implemented
await page.waitForTimeout(1000);
await page.getByLabel('Save').click();
await umbracoUi.waitForTimeout(1000);
await umbracoUi.partialView.clickSaveButton();
// Assert
expect(await umbracoApi.partialView.nameExistsAtRoot(partialViewFileName)).toBeTruthy();
// TODO: when frontend is ready, uncomment this to verify the new partial view is displayed under the Partial Views section
//await expect(page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel(partialViewFileName)).toBeVisible();
expect(await umbracoApi.partialView.doesExist(partialViewFileName)).toBeTruthy();
// TODO: when frontend is ready, verify the new partial view is displayed under the Partial Views section
// TODO: when frontend is ready, verify the notification displays
// Clean
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
});
test('can create a partial view from snippet', async ({page, umbracoApi}) => {
test('can create a partial view from snippet', async ({umbracoApi, umbracoUi}) => {
// Arrange
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
const expectedTemplateContent = '@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n@using Umbraco.Cms.Core.Routing\r\n@using Umbraco.Extensions\r\n\n@inject IPublishedUrlProvider PublishedUrlProvider\r\n@*\r\n This snippet makes a breadcrumb of parents using an unordered HTML list.\r\n\r\n How it works:\r\n - It uses the Ancestors() method to get all parents and then generates links so the visitor can go back\r\n - Finally it outputs the name of the current page (without a link)\r\n*@\r\n\r\n@{ var selection = Model.Ancestors().ToArray(); }\r\n\r\n@if (selection?.Length > 0)\r\n{\r\n <ul class=\"breadcrumb\">\r\n @* For each page in the ancestors collection which have been ordered by Level (so we start with the highest top node first) *@\r\n @foreach (var item in selection.OrderBy(x => x.Level))\r\n {\r\n <li><a href=\"@item.Url(PublishedUrlProvider)\">@item.Name</a> <span class=\"divider\">/</span></li>\r\n }\r\n\r\n @* Display the current page as the last item in the list *@\r\n <li class=\"active\">@Model.Name</li>\r\n </ul>\r\n}';
// Act
await page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel('Open actions menu').click({force: true});
await page.getByLabel('New partial view from snippet...').click();
await page.getByLabel('Breadcrumb').click();
await page.getByLabel('template name').fill(partialViewName);
await umbracoUi.partialView.openActionsMenuAtRoot();
await umbracoUi.partialView.clickNewPartialViewFromSnippetButton();
await umbracoUi.partialView.clickBreadcrumbButton();
await umbracoUi.partialView.enterPartialViewName(partialViewName);
// TODO: Remove this timeout when frontend validation is implemented
await page.waitForTimeout(1000);
await page.getByLabel('Save').click();
await umbracoUi.waitForTimeout(1000);
await umbracoUi.partialView.clickSaveButton();
// Assert
expect(await umbracoApi.partialView.nameExistsAtRoot(partialViewFileName)).toBeTruthy();
const partialViewData = await umbracoApi.partialView.getByNameAtRoot(partialViewFileName);
expect(await umbracoApi.partialView.doesExist(partialViewFileName)).toBeTruthy();
const partialViewData = await umbracoApi.partialView.getByName(partialViewFileName);
await expect(partialViewData.content).toBe(expectedTemplateContent);
// TODO: when frontend is ready, uncomment this to verify the new partial view is displayed under the Partial Views section
//await expect(page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel(partialViewFileName)).toBeVisible();
// TODO: when frontend is ready, verify the new partial view is displayed under the Partial Views section
// TODO: when frontend is ready, verify the notification displays
// Clean
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
});
test('can update a partial view name', async ({page, umbracoApi}) => {
test('can update a partial view name', async ({umbracoApi, umbracoUi}) => {
// Arrange
const updatedPartialViewName = 'TestPartialViewUpdated';
const updatedPartialViewFileName = updatedPartialViewName + ".cshtml";
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
await umbracoApi.partialView.create(partialViewFileName, "@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n", "/");
//Act
await gotoPartialViewDetail(page, partialViewFileName);
await page.getByLabel('template name').fill(updatedPartialViewName);
await umbracoUi.partialView.openPartialViewFileAtRoot(partialViewFileName);
await umbracoUi.partialView.enterPartialViewName(updatedPartialViewName);
// TODO: Remove this timeout when frontend validation is implemented
await page.waitForTimeout(1000);
await page.getByLabel('Save').click();
await umbracoUi.waitForTimeout(1000);
await umbracoUi.partialView.clickSaveButton();
// Assert
expect(await umbracoApi.partialView.nameExistsAtRoot(updatedPartialViewFileName)).toBeTruthy();
// TODO: when frontend is ready, uncomment this to verify the updated partial view name is displayed under the Partial Views section
//await expect(page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel(updatedPartialViewFileName)).toBeVisible();
expect(await umbracoApi.partialView.nameExistsAtRoot(partialViewFileName)).toBeFalsy();
// TODO: when frontend is ready, uncomment this to verify the old partial view name is NOT displayed under the Partial Views section
//await expect(page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel(partialViewFileName)).toHaveCount(0);
expect(await umbracoApi.partialView.doesExist(updatedPartialViewFileName)).toBeTruthy();
// TODO: when frontend is ready, verify the updated partial view name is displayed under the Partial Views section
expect(await umbracoApi.partialView.doesExist(partialViewFileName)).toBeFalsy();
// TODO: when frontend is ready, verify the old partial view name is NOT displayed under the Partial Views section
// Clean
await umbracoApi.partialView.ensureNameNotExistsAtRoot(updatedPartialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(updatedPartialViewFileName);
});
test('can update a partial view content', async ({page, umbracoApi}) => {
test('can update a partial view content', async ({umbracoApi, umbracoUi}) => {
// Arrange
const updatedPartialViewContent = '@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n' +
'@{\r\n' +
@@ -100,26 +90,25 @@ test('can update a partial view name', async ({page, umbracoApi}) => {
'}\r\n' +
'<p>AcceptanceTests</p>';
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
await umbracoApi.partialView.create(partialViewFileName, "@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n", "/");
//Act
await gotoPartialViewDetail(page, partialViewFileName);
await page.locator('textarea.inputarea').clear();
await page.locator('textarea.inputarea').fill(updatedPartialViewContent);
await umbracoUi.partialView.openPartialViewFileAtRoot(partialViewFileName);
await umbracoUi.partialView.enterPartialViewContent(updatedPartialViewContent);
// TODO: Remove this timeout when frontend validation is implemented
await page.waitForTimeout(1000);
await page.getByLabel('Save').click();
await umbracoUi.waitForTimeout(1000);
await umbracoUi.partialView.clickSaveButton();
// Assert
const updatedPartialView = await umbracoApi.partialView.getByNameAtRoot(partialViewFileName);
const updatedPartialView = await umbracoApi.partialView.getByName(partialViewFileName);
await expect(updatedPartialView.content).toBe(updatedPartialViewContent);
// Clean
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
});
test('can use query builder for a partial view', async ({page, umbracoApi, umbracoUi}) => {
test('can use query builder for a partial view', async ({umbracoApi, umbracoUi}) => {
//Arrange
const expectedTemplateContent = '\r\n' +
'@{\r\n' +
@@ -138,23 +127,16 @@ test('can update a partial view name', async ({page, umbracoApi}) => {
'\r\n' +
'@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n';
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
await umbracoApi.partialView.create(partialViewFileName, "@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n", "/");
// Act
await gotoPartialViewDetail(page, partialViewFileName);
await page.locator('#query-builder-button').getByLabel('Query builder').click({force:true});
// TODO: Remove this timeout when frontend validation is implemented
await page.waitForTimeout(1000);
await expect(page.locator('uui-modal-container[backdrop]')).toBeTruthy();
await page.locator('#property-alias-dropdown').getByLabel('Property alias').click({force:true});
await expect(page.locator('uui-popover[open]')).toBeTruthy();
await page.locator('#property-alias-dropdown').getByText('CreateDate').click();
await page.getByLabel('Submit').click();
await page.getByLabel('Save').click();
await umbracoUi.partialView.openPartialViewFileAtRoot(partialViewFileName);
await umbracoUi.partialView.addQueryBuilderIntoPartialView();
await umbracoUi.partialView.clickSaveButton();
// Assert
const updatedPartialView = await umbracoApi.partialView.getByNameAtRoot(partialViewFileName);
const updatedPartialView = await umbracoApi.partialView.getByName(partialViewFileName);
expect(updatedPartialView.content).toBe(expectedTemplateContent);
// Clean
@@ -162,31 +144,25 @@ test('can update a partial view name', async ({page, umbracoApi}) => {
});
// Skip this test now as the function delete dictionary is missing
test.skip('can insert dictionaryItem into a partial view', async ({page, umbracoApi}) => {
test.skip('can insert dictionaryItem into a partial view', async ({umbracoApi, umbracoUi}) => {
// Arrange
const dictionaryName = 'TestDictionary';
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
await umbracoApi.partialView.create(partialViewFileName, "@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n", "/");
await umbracoApi.dictionary.ensureNameNotExists(dictionaryName);
await umbracoApi.dictionary.create(dictionaryName);
const partialViewContent = '@Umbraco.GetDictionaryValue("TestDictionary")@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n';
const partialViewContent = '@Umbraco.GetDictionaryValue("' + dictionaryName +'")@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n';
// Act
await gotoPartialViewDetail(page, partialViewFileName);
await page.getByLabel('Choose value to insert').click();
await page.getByLabel('Insert Dictionary item').click({force: true});
// TODO: Remove this timeout when frontend validation is implemented
await page.waitForTimeout(1000);
await page.locator('umb-tree-picker-modal').locator('#caret-button').click({force: true});
await page.getByLabel(dictionaryName).click();
await page.getByLabel('Submit').click();
await page.getByLabel('Save').click();
await umbracoUi.partialView.openPartialViewFileAtRoot(partialViewFileName);
await umbracoUi.partialView.insertDictionaryItem(dictionaryName);
await umbracoUi.partialView.clickSaveButton();
// Assert
const partialViewData = await umbracoApi.partialView.getByNameAtRoot(partialViewFileName);
const partialViewData = await umbracoApi.partialView.getByName(partialViewFileName);
expect(partialViewData.content).toBe(partialViewContent);
// Clean
@@ -194,44 +170,39 @@ test('can update a partial view name', async ({page, umbracoApi}) => {
await umbracoApi.template.ensureNameNotExists(partialViewFileName);
});
test('can delete a partial view', async ({page, umbracoApi, umbracoUi}) => {
test('can delete a partial view', async ({umbracoApi, umbracoUi}) => {
//Arrange
await umbracoApi.partialView.ensureNameNotExistsAtRoot(partialViewFileName);
await umbracoApi.partialView.ensureNameNotExists(partialViewFileName);
await umbracoApi.partialView.create(partialViewFileName, "@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n", "/");
//Act
await page.locator('umb-tree-item').filter({ hasText: 'Partial Views' }).locator('#caret-button').click();
await page.locator('umb-tree-item').locator('[label="' + partialViewFileName + '"] >> [label="Open actions menu"]').click();
await page.getByLabel('Delete').click();
await page.locator('#confirm').getByLabel('Delete').click();
await umbracoUi.partialView.clickRootFolderCaretButton();
await umbracoUi.partialView.openActionsMenuForName(partialViewFileName);
await umbracoUi.partialView.deletePartialViewFile();
// Assert
expect(await umbracoApi.partialView.nameExistsAtRoot(partialViewFileName)).toBeFalsy();
// TODO: when frontend is ready, uncomment this to verify the partial view is NOT displayed under the Partial Views section
//expect(page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel(partialViewFileName)).toHaveCount(0);
expect(await umbracoApi.partialView.doesExist(partialViewFileName)).toBeFalsy();
// TODO: when frontend is ready, verify the partial view is NOT displayed under the Partial Views section
// TODO: when frontend is ready, verify the notification displays
});
test('can create a folder', async ({page, umbracoApi}) => {
test('can create a folder', async ({umbracoApi, umbracoUi}) => {
//Arrange
const folderName = 'TestFolder';
await umbracoApi.partialView.ensureNameNotExistsAtRoot(folderName);
await umbracoApi.partialView.ensureNameNotExists(folderName);
// Act
await page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel('Open actions menu').click({force: true});
await page.getByLabel('Create folder').click();
await page.getByRole('textbox', { name: 'Enter folder name...' }).fill(folderName);
await page.getByLabel('Create Folder', { exact: true }).click();
await umbracoUi.partialView.openActionsMenuAtRoot();
await umbracoUi.partialView.createNewFolder(folderName);
// Assert
expect(await umbracoApi.partialView.nameExistsAtRoot(folderName)).toBeTruthy();
// TODO: when frontend is ready, uncomment this to verify the new folder is displayed under the Partial Views section
//await expect(page.locator('umb-tree-item', {hasText: 'Partial Views'}).getByLabel(folderName)).toBeVisible();
expect(await umbracoApi.partialView.doesFolderExist(folderName)).toBeTruthy();
// TODO: when frontend is ready, verify the new folder is displayed under the Partial Views section
// TODO: when frontend is ready, verify the notification displays
//Clean
await umbracoApi.partialView.ensureNameNotExistsAtRoot(folderName);
await umbracoApi.partialView.ensureNameNotExists(folderName);
});
test.skip('can place a partial view into folder', async ({page, umbracoApi}) => {