V14 QA Added acceptance tests for rendering content with Dropdown, Radiobutton and ImageCropper

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -20,8 +20,8 @@
     "typescript": "^4.8.3"
   },
   "dependencies": {
-    "@umbraco/json-models-builders": "^2.0.22",
-    "@umbraco/playwright-testhelpers": "^2.0.0-beta.92",
+    "@umbraco/json-models-builders": "^2.0.23",
+    "@umbraco/playwright-testhelpers": "^2.0.0-beta.95",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/RenderingContent/RenderingContentWithApprovedColor.spec.ts

@@ -45,4 +45,4 @@ test('can render content with an approved color without label', async ({umbracoA
 
   // Assert
   await umbracoUi.contentRender.doesContentRenderValueContainText(colorValue.value);
-});
+});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/RenderingContent/RenderingContentWithCheckboxList.spec.ts

@@ -24,7 +24,7 @@ for (const checkbox of checkboxList) {
     // Arrange
     const checkboxValue = checkbox.value;
     const dataTypeId = await umbracoApi.dataType.createCheckboxListDataType(customDataTypeName, checkboxValue); 
-    const templateId = await umbracoApi.template.createTemplateWithDisplayingCheckboxListValue(templateName, AliasHelper.toAlias(propertyName));
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingMulitpleStringValue(templateName, AliasHelper.toAlias(propertyName));
     await umbracoApi.document.createPublishedDocumentWithValue(contentName, checkboxValue, dataTypeId, templateId, propertyName, documentTypeName);
     const contentData = await umbracoApi.document.getByName(contentName);
     const contentURL = contentData.urls[0].url;
@@ -37,4 +37,4 @@ for (const checkbox of checkboxList) {
       await umbracoUi.contentRender.doesContentRenderValueContainText(value);
     }); 
   });
-}
+}

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/RenderingContent/RenderingContentWithDropdown.spec.ts

@@ -0,0 +1,44 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const customDataTypeName = 'Custom Dropdown';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Dropdown';
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+  await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
+});
+
+const dropdownValues = [
+  {type: 'an empty dropdown list', value: [], isMultiple: false},
+  {type: 'a single dropdown value', value: ['Test checkbox'], isMultiple: false},
+  {type: 'multiple dropdown values', value: ['Test option 1', 'Test option 2'], isMultiple: true}
+];
+
+for (const dropdown of dropdownValues) {
+  test(`can render content with ${dropdown.type}`, async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const dataTypeId = await umbracoApi.dataType.createDropdownDataType(customDataTypeName, dropdown.isMultiple, dropdown.value);
+    let templateId = '';
+    if (dropdown.isMultiple) {
+      templateId = await umbracoApi.template.createTemplateWithDisplayingMulitpleStringValue(templateName, AliasHelper.toAlias(propertyName));
+    } else {
+      templateId = await umbracoApi.template.createTemplateWithDisplayingStringValue(templateName, AliasHelper.toAlias(propertyName));
+    }  
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, dropdown.value, dataTypeId, templateId, propertyName, documentTypeName);
+    const contentData = await umbracoApi.document.getByName(contentName);
+    const contentURL = contentData.urls[0].url;
+
+    // Act
+    await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
+
+    // Assert
+    dropdown.value.forEach(async value => {
+      await umbracoUi.contentRender.doesContentRenderValueContainText(value);
+    }); 
+  });
+}

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/RenderingContent/RenderingContentWithImageCropper.spec.ts

@@ -0,0 +1,36 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const customDataTypeName = 'Custom Image Cropper';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Image Cropper';
+const cropLabel = 'Test Crop';
+const cropValue = {label: cropLabel, alias: AliasHelper.toAlias(cropLabel), width: 500, height: 700};
+let dataTypeId = null;
+
+test.beforeEach(async ({umbracoApi}) => {
+  dataTypeId = await umbracoApi.dataType.createImageCropperDataTypeWithOneCrop(customDataTypeName, cropValue.label, cropValue.width, cropValue.height); 
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+  await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
+});
+
+test('can render content with an image cropper', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingImageCropperValue(templateName, AliasHelper.toAlias(propertyName), AliasHelper.toAlias(cropValue.label));
+  await umbracoApi.document.createPublishedDocumentWithImageCropper(contentName, cropValue, dataTypeId, templateId, propertyName, documentTypeName);
+  const contentData = await umbracoApi.document.getByName(contentName);
+  const contentURL = contentData.urls[0].url;
+  const imageSrc = contentData.values[0].value.src;
+
+  // Act
+  await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
+
+  // Assert
+  await umbracoUi.contentRender.doesContentRenderValueHaveImage(imageSrc, cropValue.width, cropValue.height);
+});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/RenderingContent/RenderingContentWithRadiobox.spec.ts

@@ -0,0 +1,36 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const customDataTypeName = 'Custom Radiobox';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Radiobox';
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+  await umbracoApi.dataType.ensureNameNotExists(customDataTypeName);
+});
+
+const radioboxValues = [
+  {type: 'an empty radiobox', value: ''},
+  {type: 'a radiobox value', value: 'Test radiobox option'}
+];
+
+for (const radiobox of radioboxValues) {
+  test(`can render content with ${radiobox.type}`, async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const dataTypeId = await umbracoApi.dataType.createRadioboxDataType(customDataTypeName, [radiobox.value]);
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingStringValue(templateName, AliasHelper.toAlias(propertyName));
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, radiobox.value, dataTypeId, templateId, propertyName, documentTypeName);
+    const contentData = await umbracoApi.document.getByName(contentName);
+    const contentURL = contentData.urls[0].url;
+
+    // Act
+    await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
+
+    // Assert
+    await umbracoUi.contentRender.doesContentRenderValueContainText(radiobox.value);
+  });
+}

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/RenderingContent/RenderingContentWithTags.spec.ts

@@ -27,7 +27,7 @@ for (const tag of tags) {
   test(`can render content with ${tag.type}`, async ({umbracoApi, umbracoUi}) => {
     // Arrange
     const tagValue = tag.value;
-    const templateId = await umbracoApi.template.createTemplateWithDisplayingTagsValue(templateName, AliasHelper.toAlias(propertyName));
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingMulitpleStringValue(templateName, AliasHelper.toAlias(propertyName));
     await umbracoApi.document.createPublishedDocumentWithValue(contentName, tagValue, dataTypeData.id, templateId, propertyName, documentTypeName);
     const contentData = await umbracoApi.document.getByName(contentName);
     const contentURL = contentData.urls[0].url;