V14 QA Added the acceptance tests for rendering content with different value (#17293)

* Added tests for rendering content with numeric

* Added tests for rendering content with textarea

* Added tests for rendering content with approved color

* Added tests for rendering content with numeric

* Added tests for rendering content with tags

* Added tests for rendering content with textarea

* Updated tests for rendering content with textstring due to test helper changes

* Added tests for rendering content with truefalse

* Bumped version of test helper

* Make all tests for rendering content run in the pipeline

* Fixed comments

* Removed blank lines

* Fixed name

* Make all smoke tests run in the pipeline

tests/Umbraco.Tests.AcceptanceTest/package-lock.json

@@ -8,7 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@umbraco/json-models-builders": "^2.0.21",
-        "@umbraco/playwright-testhelpers": "^2.0.0-beta.90",
+        "@umbraco/playwright-testhelpers": "^2.0.0-beta.91",
         "camelize": "^1.0.0",
         "dotenv": "^16.3.1",
         "node-fetch": "^2.6.7"
@@ -55,19 +55,19 @@
       }
     },
     "node_modules/@umbraco/json-models-builders": {
-      "version": "2.0.21",
-      "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-2.0.21.tgz",
-      "integrity": "sha512-/8jf444B8XjYMJ4mdun6Nc1GD6z4VTOAMi/foRKNwDu6H+UEVx8KcFfwel+M1rQOz1OULyIsf+XJDYc7TMujOA==",
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/@umbraco/json-models-builders/-/json-models-builders-2.0.22.tgz",
+      "integrity": "sha512-5GQT170ViEj9IBov3PvNU7qSJkCkNCTfE/5iXiDBKFsFnMH5XLG6qbgGf5xPYtg/GZ1uKJYgP5Ahq15YUf/DpA==",
       "dependencies": {
         "camelize": "^1.0.1"
       }
     },
     "node_modules/@umbraco/playwright-testhelpers": {
-      "version": "2.0.0-beta.90",
-      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.90.tgz",
-      "integrity": "sha512-H55F9gttpQR8Fah77gxWxX3S/PY539r82tQRDbo6GgPHeilSVmLXcgesZ+2cgLaAQ406D6JGDvJVqIZukmEzuQ==",
+      "version": "2.0.0-beta.91",
+      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.91.tgz",
+      "integrity": "sha512-8oxr8N5rP3JkIVLH9fRNCoQpaRaolwiCZtogS1kn2vHHiTvnZznOI+UYCthA4LzbA9SYA1hSqofLSLfDTO/9lA==",
       "dependencies": {
-        "@umbraco/json-models-builders": "2.0.21",
+        "@umbraco/json-models-builders": "2.0.22",
         "node-fetch": "^2.6.7"
       }
     },

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^2.0.21",
-    "@umbraco/playwright-testhelpers": "^2.0.0-beta.90",
+    "@umbraco/playwright-testhelpers": "^2.0.0-beta.91",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"

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

@@ -0,0 +1,48 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const customDataTypeName = 'Custom Approved Color';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Approved Color';
+const colorValue = {label: "Test Label", value: "038c33"};
+let dataTypeId = null;
+
+test.beforeEach(async ({umbracoApi}) => {
+  dataTypeId = await umbracoApi.dataType.createApprovedColorDataTypeWithOneItem(customDataTypeName, colorValue.label, colorValue.value); 
+});
+
+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 approved color with label', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingApprovedColorValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithValue(contentName, colorValue, 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.doesContentRenderValueHaveText(colorValue.label);
+});
+
+test('can render content with an approved color without label', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingApprovedColorValue(templateName, AliasHelper.toAlias(propertyName), false);
+  await umbracoApi.document.createPublishedDocumentWithValue(contentName, colorValue, 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.doesContentRenderValueHaveText(colorValue.value);
+});

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

@@ -0,0 +1,40 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const dataTypeName = 'Numeric';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Numeric';
+let dataTypeData = null;
+
+test.beforeEach(async ({umbracoApi}) => {
+  dataTypeData = await umbracoApi.dataType.getByName(dataTypeName); 
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+});
+
+const numerics = [
+  {type: 'a positive integer', value: '1234567890'},
+  {type: 'a negative integer', value: '-1234567890'},
+];
+
+for (const numeric of numerics) {
+  test(`can render content with ${numeric.type}`, async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const numericValue = numeric.value;
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingStringValue(templateName, AliasHelper.toAlias(propertyName));
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, numericValue, 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.doesContentRenderValueHaveText(numericValue);
+  });
+}

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

@@ -0,0 +1,43 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const dataTypeName = 'Tags';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Tags';
+let dataTypeData = null;
+
+test.beforeEach(async ({umbracoApi}) => {
+  dataTypeData = await umbracoApi.dataType.getByName(dataTypeName); 
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+});
+
+const tags = [
+  {type: 'an empty tag', value: []},
+  {type: 'a non-empty tag', value: ['test tag']},
+  {type: 'multiple tags', value: ['test tag 1', 'test tag 2']},
+];
+
+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));
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, tagValue, 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
+    tagValue.forEach(async value => {
+      await umbracoUi.contentRender.doesContentRenderValueHaveText(value);
+    }); 
+  });
+}

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

@@ -0,0 +1,44 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const dataTypeName = 'Textarea';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Textarea';
+let dataTypeData = null;
+
+test.beforeEach(async ({umbracoApi}) => {
+  dataTypeData = await umbracoApi.dataType.getByName(dataTypeName); 
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+});
+
+const textareas = [
+  {type: 'an empty textarea', value: ''},
+  {type: 'a non-empty textarea', value: 'Welcome to Umbraco site'},
+  {type: 'a textarea that contains special characters', value: '@#^&*()_+[]{};:"<>,./?'},
+  {type: 'a textarea that contains multiple lines', value: 'First line\n Second line\n Third line'},
+  {type: 'a textarea that contains an SQL injection', value: "' OR '1'='1'; --"},
+  {type: 'a textarea that contains cross-site scripting', value: "<script>alert('XSS')</script>"}
+];
+
+for (const textarea of textareas) {
+  test(`can render content with ${textarea.type}`, async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const textareaValue = textarea.value;
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingStringValue(templateName, AliasHelper.toAlias(propertyName));
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, textareaValue, 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.doesContentRenderValueHaveText(textareaValue);
+  });
+}

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

@@ -1,10 +1,11 @@
-import {test} from '@umbraco/playwright-testhelpers';
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
 
 const contentName = 'Test Rendering Content';
 const documentTypeName = 'TestDocumentTypeForContent';
 const dataTypeName = 'Textstring';
 const templateName = 'TestTemplateForContent';
-let dataTypeData;
+const propertyName = 'Test Textstring';
+let dataTypeData = null;
 
 test.beforeEach(async ({umbracoApi}) => {
   dataTypeData = await umbracoApi.dataType.getByName(dataTypeName); 
@@ -29,7 +30,8 @@ for (const textstring of textstrings) {
   test(`can render content with ${textstring.type}`, async ({umbracoApi, umbracoUi}) => {
     // Arrange
     const textstringValue = textstring.value;
-    await umbracoApi.document.createPublishedDocumentWithValue(contentName, textstringValue, dataTypeData.id, documentTypeName, templateName);
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingStringValue(templateName, AliasHelper.toAlias(propertyName));
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, textstringValue, dataTypeData.id, templateId, propertyName, documentTypeName);
     const contentData = await umbracoApi.document.getByName(contentName);
     const contentURL = contentData.urls[0].url;
 
@@ -39,5 +41,4 @@ for (const textstring of textstrings) {
     // Assert
     await umbracoUi.contentRender.doesContentRenderValueHaveText(textstringValue);
   });
-}
-
+}

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

@@ -0,0 +1,39 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const dataTypeName = 'True/false';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test TrueFalse';
+let dataTypeData = null;
+
+test.beforeEach(async ({umbracoApi}) => {
+  dataTypeData = await umbracoApi.dataType.getByName(dataTypeName); 
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName); 
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+});
+
+const trueFalseValues  = [
+  {type: 'true value ', value: true, expectedValue: 'True'},
+  {type: 'false value', value: false, expectedValue: 'False'},
+];
+
+for (const trueFalse of trueFalseValues) {
+  test(`can render content with ${trueFalse.type}`, async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const templateId = await umbracoApi.template.createTemplateWithDisplayingStringValue(templateName, AliasHelper.toAlias(propertyName));
+    await umbracoApi.document.createPublishedDocumentWithValue(contentName, trueFalse.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.doesContentRenderValueHaveText(trueFalse.expectedValue);
+  });
+}