yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V14 QA content image media picker tests (#16890)

Browse Source 
* Started some tests for imageMediaPicker

* Added tests

* Added additional test

* Fixed based on updates to helpers

* Bumped versions

* Fixes based on comments

* Updated so we run all content test

* Cleaned
This commit is contained in:
Andreas Zerbst
2024-08-14 21:05:09 +02:00
committed by GitHub
parent de57523b4f
commit 7a700f3029
1 changed files with 257 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithImageMediaPicker.spec.ts Normal file
View File

@@ -0,0 +1,257 @@
import {AliasHelper, ConstantHelper, test} from '@umbraco/playwright-testhelpers';
import {expect} from "@playwright/test";
const contentName = 'TestContent';
const documentTypeName = 'TestDocumentTypeForContent';
const dataTypeName = 'Image Media Picker';
const customDataTypeName = 'Custom Image Media Picker';
const groupName = 'TestGroup';
const mediaName = 'TestImage';
test.beforeEach(async ({umbracoApi}) => {
await umbracoApi.document.ensureNameNotExists(contentName);
await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
});
test.afterEach(async ({umbracoApi}) => {
await umbracoApi.document.ensureNameNotExists(contentName);
await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
});
test('can save content with a image media picker', async ({umbracoApi, umbracoUi}) => {
// Arrange
const expectedState = 'Draft';
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.clickActionsMenuAtRoot();
await umbracoUi.content.clickCreateButton();
await umbracoUi.content.chooseDocumentType(documentTypeName);
await umbracoUi.content.enterContentName(contentName);
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.isSuccessNotificationVisible();
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
const contentData = await umbracoApi.document.getByName(contentName);
expect(contentData.variants[0].state).toBe(expectedState);
});
test('can publish content with a image media picker', async ({umbracoApi, umbracoUi}) => {
// Arrange
const expectedState = 'Published';
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
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.clickSaveAndPublishButton();
// Assert
await umbracoUi.content.doesSuccessNotificationsHaveCount(2);
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
const contentData = await umbracoApi.document.getByName(contentName);
expect(contentData.variants[0].state).toBe(expectedState);
});
test('can add an image to the image media picker', async ({umbracoApi, umbracoUi}) => {
// Arrange
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
await umbracoApi.media.ensureNameNotExists(mediaName);
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
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.selectMediaByName(mediaName);
await umbracoUi.content.clickSubmitButton();
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.isSuccessNotificationVisible();
expect(await umbracoApi.document.doesImageMediaPickerContainImage(contentName, AliasHelper.toAlias(dataTypeName), imageId)).toBeTruthy();
// Clean
await umbracoApi.media.ensureNameNotExists(mediaName);
});
test('can remove an image from the image media picker', async ({umbracoApi, umbracoUi}) => {
// Arrange
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
await umbracoApi.media.ensureNameNotExists(mediaName);
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(dataTypeName), imageId);
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickRemoveButtonForName(mediaName);
await umbracoUi.content.clickConfirmRemoveButton();
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.isSuccessNotificationVisible();
expect(await umbracoApi.document.doesImageMediaPickerContainImage(contentName, AliasHelper.toAlias(dataTypeName), imageId)).toBeFalsy();
// Clean
await umbracoApi.media.ensureNameNotExists(mediaName);
});
// TODO: Remove skip when the front-end is ready as there are currently no displayed error notification.
test.skip('image count can not be less that min amount set in image media picker', async ({umbracoApi, umbracoUi}) => {
// Arrange
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 1);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
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.clickSaveButton();
// Assert
await umbracoUi.content.isErrorNotificationVisible();
// Clean
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
});
// TODO: Remove skip when the front-end is ready as there are currently no displayed error notification.
test.skip('image count can not be more that max amount set in image media picker', async ({umbracoApi, umbracoUi}) => {
// Arrange
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 0, 0);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
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.selectMediaByName(mediaName);
await umbracoUi.content.clickSubmitButton();
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.isErrorNotificationVisible();
// Clean
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
});
test('can add an image from the image media picker with a start node', async ({umbracoApi, umbracoUi}) => {
const mediaFolderName = 'TestFolder';
await umbracoApi.media.ensureNameNotExists(mediaFolderName);
await umbracoApi.media.ensureNameNotExists(mediaName);
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
const imageFolderId = await umbracoApi.media.createDefaultMediaFolder(mediaFolderName);
const imageId = await umbracoApi.media.createDefaultMediaWithImageAndParentId(mediaName, imageFolderId);
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataTypeWithStartNodeId(customDataTypeName, imageFolderId);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
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.selectMediaByName(mediaName);
await umbracoUi.content.clickSubmitButton();
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.isSuccessNotificationVisible();
expect(await umbracoApi.document.doesImageMediaPickerContainImage(contentName, AliasHelper.toAlias(customDataTypeName), imageId)).toBeTruthy();
// Clean
await umbracoApi.media.ensureNameNotExists(mediaFolderName);
await umbracoApi.media.ensureNameNotExists(mediaName);
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
});
test('can add an image from the image media picker with focal point enabled', async ({umbracoApi, umbracoUi}) => {
// Arrange
await umbracoApi.media.ensureNameNotExists(mediaName);
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 0, 1, true);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(customDataTypeName), imageId);
const widthPercentage = 40;
const heightPercentage = 20;
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickExactLinkWithName(mediaName);
await umbracoUi.content.setFocalPoint(widthPercentage, heightPercentage);
await umbracoUi.content.clickSubmitButton();
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.isSuccessNotificationVisible();
expect(await umbracoApi.document.doesImageMediaPickerContainImageWithFocalPoint(contentName, AliasHelper.toAlias(customDataTypeName), imageId, {left: 0.4, top: 0.2})).toBeTruthy();
// Clean
await umbracoApi.media.ensureNameNotExists(mediaName);
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
});
test('can reset focal point in a image from the image media picker', async ({umbracoApi, umbracoUi}) => {
// Arrange
await umbracoApi.media.ensureNameNotExists(mediaName);
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 0, 1, true);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(customDataTypeName), imageId, {left: 0.4, top: 0.2});
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.goToContentWithName(contentName);
await umbracoUi.content.clickExactLinkWithName(mediaName);
await umbracoUi.content.clickResetFocalPointButton();
await umbracoUi.content.clickSubmitButton();
await umbracoUi.content.clickSaveButton();
// Assert
await umbracoUi.content.isSuccessNotificationVisible();
expect(await umbracoApi.document.doesImageMediaPickerContainImageWithFocalPoint(contentName, AliasHelper.toAlias(customDataTypeName), imageId, {left: 0, top: 0})).toBeTruthy();
// Clean
await umbracoApi.media.ensureNameNotExists(mediaName);
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
});
// TODO: Remove skip when the front-end is ready as currently the crop is not being selected.
test.skip('can add an image from the image media picker with a image crop', async ({umbracoApi, umbracoUi}) => {
// Arrange
const cropLabel = 'TestCrop';
const cropWidth = 100;
const cropHeight = 100;
await umbracoApi.media.ensureNameNotExists(mediaName);
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataTypeWithCrop(customDataTypeName, cropLabel, cropWidth, cropHeight);
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(customDataTypeName), imageId);
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Act
await umbracoUi.content.goToContentWithName(contentName);
});