Skip to content

Commit 7a700f3

Browse files
andr317candr317c
authored
V14 QA content image media picker tests (#16890)
* 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
1 parent de57523 commit 7a700f3

1 file changed

Lines changed: 257 additions & 0 deletions

File tree

‎tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Content/ContentWithImageMediaPicker.spec.ts‎

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
import {AliasHelper, ConstantHelper, test} from '@umbraco/playwright-testhelpers';
2+
import {expect} from "@playwright/test";
3+
4+
const contentName = 'TestContent';
5+
const documentTypeName = 'TestDocumentTypeForContent';
6+
const dataTypeName = 'Image Media Picker';
7+
const customDataTypeName = 'Custom Image Media Picker';
8+
const groupName = 'TestGroup';
9+
const mediaName = 'TestImage';
10+
11+
test.beforeEach(async ({umbracoApi}) => {
12+
await umbracoApi.document.ensureNameNotExists(contentName);
13+
await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
14+
});
15+
16+
test.afterEach(async ({umbracoApi}) => {
17+
await umbracoApi.document.ensureNameNotExists(contentName);
18+
await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
19+
});
20+
21+
test('can save content with a image media picker', async ({umbracoApi, umbracoUi}) => {
22+
// Arrange
23+
const expectedState = 'Draft';
24+
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
25+
await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
26+
await umbracoUi.goToBackOffice();
27+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
28+
29+
// Act
30+
await umbracoUi.content.clickActionsMenuAtRoot();
31+
await umbracoUi.content.clickCreateButton();
32+
await umbracoUi.content.chooseDocumentType(documentTypeName);
33+
await umbracoUi.content.enterContentName(contentName);
34+
await umbracoUi.content.clickSaveButton();
35+
36+
// Assert
37+
await umbracoUi.content.isSuccessNotificationVisible();
38+
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
39+
const contentData = await umbracoApi.document.getByName(contentName);
40+
expect(contentData.variants[0].state).toBe(expectedState);
41+
});
42+
43+
test('can publish content with a image media picker', async ({umbracoApi, umbracoUi}) => {
44+
// Arrange
45+
const expectedState = 'Published';
46+
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
47+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
48+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
49+
await umbracoUi.goToBackOffice();
50+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
51+
52+
// Act
53+
await umbracoUi.content.goToContentWithName(contentName);
54+
await umbracoUi.content.clickSaveAndPublishButton();
55+
56+
// Assert
57+
await umbracoUi.content.doesSuccessNotificationsHaveCount(2);
58+
expect(await umbracoApi.document.doesNameExist(contentName)).toBeTruthy();
59+
const contentData = await umbracoApi.document.getByName(contentName);
60+
expect(contentData.variants[0].state).toBe(expectedState);
61+
});
62+
63+
test('can add an image to the image media picker', async ({umbracoApi, umbracoUi}) => {
64+
// Arrange
65+
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
66+
await umbracoApi.media.ensureNameNotExists(mediaName);
67+
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
68+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
69+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
70+
await umbracoUi.goToBackOffice();
71+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
72+
73+
// Act
74+
await umbracoUi.content.goToContentWithName(contentName);
75+
await umbracoUi.content.selectMediaByName(mediaName);
76+
await umbracoUi.content.clickSubmitButton();
77+
await umbracoUi.content.clickSaveButton();
78+
79+
// Assert
80+
await umbracoUi.content.isSuccessNotificationVisible();
81+
expect(await umbracoApi.document.doesImageMediaPickerContainImage(contentName, AliasHelper.toAlias(dataTypeName), imageId)).toBeTruthy();
82+
83+
// Clean
84+
await umbracoApi.media.ensureNameNotExists(mediaName);
85+
});
86+
87+
test('can remove an image from the image media picker', async ({umbracoApi, umbracoUi}) => {
88+
// Arrange
89+
const dataType = await umbracoApi.dataType.getByName(dataTypeName);
90+
await umbracoApi.media.ensureNameNotExists(mediaName);
91+
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
92+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, dataTypeName, dataType.id, groupName);
93+
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(dataTypeName), imageId);
94+
await umbracoUi.goToBackOffice();
95+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
96+
97+
// Act
98+
await umbracoUi.content.goToContentWithName(contentName);
99+
await umbracoUi.content.clickRemoveButtonForName(mediaName);
100+
await umbracoUi.content.clickConfirmRemoveButton();
101+
await umbracoUi.content.clickSaveButton();
102+
103+
// Assert
104+
await umbracoUi.content.isSuccessNotificationVisible();
105+
expect(await umbracoApi.document.doesImageMediaPickerContainImage(contentName, AliasHelper.toAlias(dataTypeName), imageId)).toBeFalsy();
106+
107+
// Clean
108+
await umbracoApi.media.ensureNameNotExists(mediaName);
109+
});
110+
111+
// TODO: Remove skip when the front-end is ready as there are currently no displayed error notification.
112+
test.skip('image count can not be less that min amount set in image media picker', async ({umbracoApi, umbracoUi}) => {
113+
// Arrange
114+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
115+
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 1);
116+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
117+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
118+
await umbracoUi.goToBackOffice();
119+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
120+
121+
// Act
122+
await umbracoUi.content.goToContentWithName(contentName);
123+
await umbracoUi.content.clickSaveButton();
124+
125+
// Assert
126+
await umbracoUi.content.isErrorNotificationVisible();
127+
128+
// Clean
129+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
130+
});
131+
132+
// TODO: Remove skip when the front-end is ready as there are currently no displayed error notification.
133+
test.skip('image count can not be more that max amount set in image media picker', async ({umbracoApi, umbracoUi}) => {
134+
// Arrange
135+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
136+
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 0, 0);
137+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
138+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
139+
await umbracoUi.goToBackOffice();
140+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
141+
142+
// Act
143+
await umbracoUi.content.goToContentWithName(contentName);
144+
await umbracoUi.content.selectMediaByName(mediaName);
145+
await umbracoUi.content.clickSubmitButton();
146+
await umbracoUi.content.clickSaveButton();
147+
148+
// Assert
149+
await umbracoUi.content.isErrorNotificationVisible();
150+
151+
// Clean
152+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
153+
});
154+
155+
test('can add an image from the image media picker with a start node', async ({umbracoApi, umbracoUi}) => {
156+
const mediaFolderName = 'TestFolder';
157+
await umbracoApi.media.ensureNameNotExists(mediaFolderName);
158+
await umbracoApi.media.ensureNameNotExists(mediaName);
159+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
160+
const imageFolderId = await umbracoApi.media.createDefaultMediaFolder(mediaFolderName);
161+
const imageId = await umbracoApi.media.createDefaultMediaWithImageAndParentId(mediaName, imageFolderId);
162+
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataTypeWithStartNodeId(customDataTypeName, imageFolderId);
163+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
164+
await umbracoApi.document.createDefaultDocument(contentName, documentTypeId);
165+
await umbracoUi.goToBackOffice();
166+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
167+
168+
// Act
169+
await umbracoUi.content.goToContentWithName(contentName);
170+
await umbracoUi.content.selectMediaByName(mediaName);
171+
await umbracoUi.content.clickSubmitButton();
172+
await umbracoUi.content.clickSaveButton();
173+
174+
// Assert
175+
await umbracoUi.content.isSuccessNotificationVisible();
176+
expect(await umbracoApi.document.doesImageMediaPickerContainImage(contentName, AliasHelper.toAlias(customDataTypeName), imageId)).toBeTruthy();
177+
178+
// Clean
179+
await umbracoApi.media.ensureNameNotExists(mediaFolderName);
180+
await umbracoApi.media.ensureNameNotExists(mediaName);
181+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
182+
});
183+
184+
test('can add an image from the image media picker with focal point enabled', async ({umbracoApi, umbracoUi}) => {
185+
// Arrange
186+
await umbracoApi.media.ensureNameNotExists(mediaName);
187+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
188+
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
189+
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 0, 1, true);
190+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
191+
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(customDataTypeName), imageId);
192+
const widthPercentage = 40;
193+
const heightPercentage = 20;
194+
await umbracoUi.goToBackOffice();
195+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
196+
197+
// Act
198+
await umbracoUi.content.goToContentWithName(contentName);
199+
await umbracoUi.content.clickExactLinkWithName(mediaName);
200+
await umbracoUi.content.setFocalPoint(widthPercentage, heightPercentage);
201+
await umbracoUi.content.clickSubmitButton();
202+
await umbracoUi.content.clickSaveButton();
203+
204+
// Assert
205+
await umbracoUi.content.isSuccessNotificationVisible();
206+
expect(await umbracoApi.document.doesImageMediaPickerContainImageWithFocalPoint(contentName, AliasHelper.toAlias(customDataTypeName), imageId, {left: 0.4, top: 0.2})).toBeTruthy();
207+
208+
// Clean
209+
await umbracoApi.media.ensureNameNotExists(mediaName);
210+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
211+
});
212+
213+
test('can reset focal point in a image from the image media picker', async ({umbracoApi, umbracoUi}) => {
214+
// Arrange
215+
await umbracoApi.media.ensureNameNotExists(mediaName);
216+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
217+
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
218+
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataType(customDataTypeName, 0, 1, true);
219+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
220+
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(customDataTypeName), imageId, {left: 0.4, top: 0.2});
221+
await umbracoUi.goToBackOffice();
222+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
223+
224+
// Act
225+
await umbracoUi.content.goToContentWithName(contentName);
226+
await umbracoUi.content.clickExactLinkWithName(mediaName);
227+
await umbracoUi.content.clickResetFocalPointButton();
228+
await umbracoUi.content.clickSubmitButton();
229+
await umbracoUi.content.clickSaveButton();
230+
231+
// Assert
232+
await umbracoUi.content.isSuccessNotificationVisible();
233+
expect(await umbracoApi.document.doesImageMediaPickerContainImageWithFocalPoint(contentName, AliasHelper.toAlias(customDataTypeName), imageId, {left: 0, top: 0})).toBeTruthy();
234+
235+
// Clean
236+
await umbracoApi.media.ensureNameNotExists(mediaName);
237+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
238+
});
239+
240+
// TODO: Remove skip when the front-end is ready as currently the crop is not being selected.
241+
test.skip('can add an image from the image media picker with a image crop', async ({umbracoApi, umbracoUi}) => {
242+
// Arrange
243+
const cropLabel = 'TestCrop';
244+
const cropWidth = 100;
245+
const cropHeight = 100;
246+
await umbracoApi.media.ensureNameNotExists(mediaName);
247+
await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
248+
const imageId = await umbracoApi.media.createDefaultMediaWithImage(mediaName);
249+
const dataTypeId = await umbracoApi.dataType.createImageMediaPickerDataTypeWithCrop(customDataTypeName, cropLabel, cropWidth, cropHeight);
250+
const documentTypeId = await umbracoApi.documentType.createDocumentTypeWithPropertyEditor(documentTypeName, customDataTypeName, dataTypeId, groupName);
251+
await umbracoApi.document.createDocumentWithImageMediaPicker(contentName, documentTypeId, AliasHelper.toAlias(customDataTypeName), imageId);
252+
await umbracoUi.goToBackOffice();
253+
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
254+
255+
// Act
256+
await umbracoUi.content.goToContentWithName(contentName);
257+
});

0 commit comments

Comments
 (0)