V14 QA Added tests for rendering content with checkboxlist and date picker

tests/Umbraco.Tests.AcceptanceTest/package.json

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

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

@@ -30,7 +30,7 @@ test('can render content with an approved color with label', async ({umbracoApi,
   await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
 
   // Assert
-  await umbracoUi.contentRender.doesContentRenderValueHaveText(colorValue.label);
+  await umbracoUi.contentRender.doesContentRenderValueContainText(colorValue.label);
 });
 
 test('can render content with an approved color without label', async ({umbracoApi, umbracoUi}) => {
@@ -44,5 +44,5 @@ test('can render content with an approved color without label', async ({umbracoA
   await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
 
   // Assert
-  await umbracoUi.contentRender.doesContentRenderValueHaveText(colorValue.value);
-});
+  await umbracoUi.contentRender.doesContentRenderValueContainText(colorValue.value);
+});

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

@@ -0,0 +1,40 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const customDataTypeName = 'Custom Checkbox List';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Checkbox List';
+
+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 checkboxList = [
+  {type: 'an empty list of checkboxes', value: []},
+  {type: 'one checkbox', value: ['Test checkbox']},
+  {type: 'multiple checkboxes', value: ['Test checkbox 1', 'Test checkbox 2', 'Test checkbox 3']},
+];
+
+for (const checkbox of checkboxList) {
+  test(`can render content with ${checkbox.type}`, async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const checkboxValue = checkbox.value;
+    const dataTypeId = await umbracoApi.dataType.createCheckboxListDataType(customDataTypeName, checkboxValue); 
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingCheckboxListValue(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;
+
+    // Act
+    await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
+
+    // Assert
+    checkboxValue.forEach(async value => {
+      await umbracoUi.contentRender.doesContentRenderValueContainText(value);
+    }); 
+  });
+}

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

@@ -0,0 +1,35 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Date Picker';
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+});
+
+const dateTimes = [
+  {type: 'with AM time', value: '2024-10-29 09:09:09', expectedValue: '10/29/2024 9:09:09 AM', dataTypeName: 'Date Picker with time'},
+  {type: 'with PM time', value: '2024-10-29 21:09:09', expectedValue: '10/29/2024 9:09:09 PM', dataTypeName: 'Date Picker with time'},
+  // TODO: Uncomment this when the front-end is ready. Currently the time still be rendered.
+  //{type: 'without time', value: '2024-10-29 00:00:00', expectedValue: '10/29/2024', dataTypeName: 'Date Picker'}
+];
+
+for (const dateTime of dateTimes) {
+  test(`can render content with a date ${dateTime.type}`, async ({umbracoApi, umbracoUi}) => {
+    const dataTypeData = await umbracoApi.dataType.getByName(dateTime.dataTypeName); 
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingStringValue(templateName, AliasHelper.toAlias(propertyName));
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, dateTime.value, dataTypeData.id, 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(dateTime.expectedValue, true);
+  });
+}

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

@@ -35,6 +35,6 @@ for (const numeric of numerics) {
     await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
 
     // Assert
-    await umbracoUi.contentRender.doesContentRenderValueHaveText(numericValue);
+    await umbracoUi.contentRender.doesContentRenderValueContainText(numericValue);
   });
-}
+}

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

@@ -37,7 +37,7 @@ for (const tag of tags) {
 
     // Assert
     tagValue.forEach(async value => {
-      await umbracoUi.contentRender.doesContentRenderValueHaveText(value);
+      await umbracoUi.contentRender.doesContentRenderValueContainText(value);
     }); 
   });
-}
+}

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

@@ -39,6 +39,6 @@ for (const textarea of textareas) {
     await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
 
     // Assert
-    await umbracoUi.contentRender.doesContentRenderValueHaveText(textareaValue);
+    await umbracoUi.contentRender.doesContentRenderValueContainText(textareaValue);
   });
-}
+}

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

@@ -39,6 +39,6 @@ for (const textstring of textstrings) {
     await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
 
     // Assert
-    await umbracoUi.contentRender.doesContentRenderValueHaveText(textstringValue);
+    await umbracoUi.contentRender.doesContentRenderValueContainText(textstringValue);
   });
 }

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

@@ -34,6 +34,6 @@ for (const trueFalse of trueFalseValues) {
     await umbracoUi.contentRender.navigateToRenderedContentPage(contentURL);
 
     // Assert
-    await umbracoUi.contentRender.doesContentRenderValueHaveText(trueFalse.expectedValue);
+    await umbracoUi.contentRender.doesContentRenderValueContainText(trueFalse.expectedValue);
   });
-}
+}