V15 QA Added tests for rendering content with member picker, multi url picker and media picker (#17717)

* Added test for rendering content with member picker value

* Added tests for rendering content with multiple media picker

* Added tests for rendering content with multi url picker

* Bumped version

* Updated tests for member picker

* Make all rendering content tests run in the pipeline

* Bumped version

* Fixed indentation

* Added clean for media

* Reverted

---------

Co-authored-by: Andreas Zerbst <73799582+andr317c@users.noreply.github.com>
Co-authored-by: Andreas Zerbst <andr317c@live.dk>

build/azure-pipelines.yml

@@ -493,7 +493,7 @@ stages:
           matrix:
             LinuxPart1Of3:
               vmImage: "ubuntu-latest"
-              testCommand: 'npx playwright test DefaultConfig --grep "@smoke"--shard=1/3'
+              testCommand: 'npx playwright test DefaultConfig --grep "@smoke" --shard=1/3'
             LinuxPart2Of3:
               vmImage: "ubuntu-latest"
               testCommand: 'npx playwright test DefaultConfig --grep "@smoke" --shard=2/3'

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

@@ -8,7 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@umbraco/json-models-builders": "^2.0.26",
-        "@umbraco/playwright-testhelpers": "^15.0.5",
+        "@umbraco/playwright-testhelpers": "^15.0.6",
         "camelize": "^1.0.0",
         "dotenv": "^16.3.1",
         "node-fetch": "^2.6.7"
@@ -67,10 +67,9 @@
       }
     },
     "node_modules/@umbraco/playwright-testhelpers": {
-      "version": "15.0.5",
-      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.5.tgz",
-      "integrity": "sha512-ae8J76Rmvn/RnzZ9BdlCItEkWUUePQQCCeyqikC/ljQancXKtHH4K396p9IkRAz4E+d1DG8j9uQvpl0tzLZ5Mw==",
-      "license": "MIT",
+      "version": "15.0.6",
+      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-15.0.6.tgz",
+      "integrity": "sha512-Nyv1gsciKCjDMReIm8kQbvd5Cqhc297y0ZkpT+YYVwjgKCSTIZNLoBccHc5q/H/1wYEPmt0OrqOUIZ0Egc768Q==",
       "dependencies": {
         "@umbraco/json-models-builders": "2.0.26",
         "node-fetch": "^2.6.7"

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^2.0.26",
-    "@umbraco/playwright-testhelpers": "^15.0.5",
+    "@umbraco/playwright-testhelpers": "^15.0.6",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "node-fetch": "^2.6.7"

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

@@ -0,0 +1,41 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const dataTypeName = 'Member Picker';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Member Picker';
+let dataTypeData = null;
+const memberName = 'Test Member';
+const memberTypeName = 'Test Member Type';
+const username = 'testmember';
+const email = 'testmember@acceptance.test';
+const password = '0123456789';
+
+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);
+});
+
+test('can render content with member picker value', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  // Create member
+  await umbracoApi.memberType.ensureNameNotExists(memberTypeName);
+  const memberTypeId = await umbracoApi.memberType.createDefaultMemberType(memberTypeName);
+  const memberId = await umbracoApi.member.createDefaultMember(memberName, memberTypeId, email, username, password);
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingMemberPickerValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithValue(contentName, memberId, 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(memberName);
+});

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

@@ -0,0 +1,107 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const dataTypeName = 'Multi URL Picker';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Member Picker';
+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);
+});
+
+test('can render content with document link value', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  // Create a document to link
+  const documentTypeForLinkedDocumentName = 'TestDocumentType';
+  const documentTypeForLinkedDocumentId = await umbracoApi.documentType.createDefaultDocumentTypeWithAllowAsRoot(documentTypeForLinkedDocumentName);
+  const linkedDocumentName = 'LinkedDocument';
+  const linkedDocumentId = await umbracoApi.document.createDefaultDocument(linkedDocumentName, documentTypeForLinkedDocumentId);
+  await umbracoApi.document.publish(linkedDocumentId);
+  // Create a published document with document link value
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingMultiURLPickerValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithDocumentLinkURLPicker(contentName, linkedDocumentName, linkedDocumentId, 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(linkedDocumentName);
+
+  // Clean
+  await umbracoApi.document.ensureNameNotExists(linkedDocumentName);
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeForLinkedDocumentName);
+});
+
+test('can render content with media link value', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  // Create a media to pick
+  const mediaFileName = 'TestMediaFileForContent';
+  await umbracoApi.media.ensureNameNotExists(mediaFileName);
+  const mediaFileId = await umbracoApi.media.createDefaultMediaWithImage(mediaFileName);
+  // Create a published document with media link value
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingMultiURLPickerValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithImageLinkURLPicker(contentName, mediaFileName, mediaFileId, 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(mediaFileName);
+
+  // Clean
+  await umbracoApi.media.ensureNameNotExists(mediaFileName);
+});
+
+test('can render content with external link value', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const linkUrl = 'https://docs.umbraco.com';
+  const linkTitle = 'Umbraco Documentation';
+  // Create a published document with external link value
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingMultiURLPickerValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithExternalLinkURLPicker(contentName, linkTitle, linkUrl, 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(linkTitle);
+});
+
+test('can render content with multiple url value', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const linkUrl = 'https://docs.umbraco.com';
+  const linkTitle = 'Umbraco Documentation';
+  // Create a media to pick
+  const mediaFileName = 'TestMediaFileForContent';
+  await umbracoApi.media.ensureNameNotExists(mediaFileName);
+  const mediaFileId = await umbracoApi.media.createDefaultMediaWithImage(mediaFileName);
+  // Create a published document with external link value and image url value
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingMultiURLPickerValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithImageLinkAndExternalLink(contentName, mediaFileName, mediaFileId, linkTitle, linkUrl, 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(linkTitle);
+  await umbracoUi.contentRender.doesContentRenderValueContainText(mediaFileName);
+
+  // Clean
+  await umbracoApi.media.ensureNameNotExists(mediaFileName);
+});

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

@@ -0,0 +1,63 @@
+import {AliasHelper, test} from '@umbraco/playwright-testhelpers';
+
+const contentName = 'Test Rendering Content';
+const documentTypeName = 'TestDocumentTypeForContent';
+const templateName = 'TestTemplateForContent';
+const propertyName = 'Test Multiple Media Picker';
+const firstMediaFileName = 'TestFirstMedia';
+const secondMediaFileName = 'TestSecondMedia';
+
+test.beforeEach(async ({umbracoApi}) => {
+  await umbracoApi.media.ensureNameNotExists(firstMediaFileName);
+  await umbracoApi.media.ensureNameNotExists(secondMediaFileName);
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.document.ensureNameNotExists(contentName);
+  await umbracoApi.documentType.ensureNameNotExists(documentTypeName);
+  await umbracoApi.template.ensureNameNotExists(templateName);
+  await umbracoApi.media.ensureNameNotExists(firstMediaFileName);
+  await umbracoApi.media.ensureNameNotExists(secondMediaFileName);
+});
+
+test('can render content with multiple media picker value', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const dataTypeName = 'Multiple Media Picker';
+  const dataTypeData = await umbracoApi.dataType.getByName(dataTypeName);
+  // Create multiple images
+  const firstMediaFileId = await umbracoApi.media.createDefaultMediaFile(firstMediaFileName);
+  const secondMediaFileId = await umbracoApi.media.createDefaultMediaWithArticle(secondMediaFileName);
+  // Create a published document with multiple media picker value
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingMultipleMediaPickerValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithTwoMediaPicker(contentName, firstMediaFileId, secondMediaFileId, 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(firstMediaFileName);
+  await umbracoUi.contentRender.doesContentRenderValueContainText(secondMediaFileName);
+});
+
+test('can render content with multiple image media picker value', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const dataTypeName = 'Multiple Image Media Picker';
+  const dataTypeData = await umbracoApi.dataType.getByName(dataTypeName);
+  // Create multiple images
+  const firstMediaFileId = await umbracoApi.media.createDefaultMediaWithImage(firstMediaFileName);
+  const secondMediaFileId = await umbracoApi.media.createDefaultMediaWithImage(secondMediaFileName);
+  // Create a published document with multiple image media picker value
+  const templateId = await umbracoApi.template.createTemplateWithDisplayingMultipleMediaPickerValue(templateName, AliasHelper.toAlias(propertyName));
+  await umbracoApi.document.createPublishedDocumentWithTwoMediaPicker(contentName, firstMediaFileId, secondMediaFileId, 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(firstMediaFileName);
+  await umbracoUi.contentRender.doesContentRenderValueContainText(secondMediaFileName);
+});