Merge pull request #10056 from umbraco/v8/feature/new-cypress-content-tests

Add new cypress tests

Author: bergmania

src/Umbraco.Tests.AcceptanceTest/cypress/integration/Content/content.ts

@@ -1,5 +1,13 @@
 /// <reference types="Cypress" />
-import { DocumentTypeBuilder, ContentBuilder, AliasHelper } from 'umbraco-cypress-testhelpers';
+import {
+    DocumentTypeBuilder,
+    ContentBuilder,
+    AliasHelper,
+    GridDataTypeBuilder,
+    PartialViewMacroBuilder,
+    MacroBuilder
+} from 'umbraco-cypress-testhelpers';
+
 context('Content', () => {
 
     beforeEach(() => {
@@ -14,6 +22,23 @@ context('Content', () => {
         cy.get('.umb-tree-item__inner').should('exist', {timeout: 10000});
     }
 
+    function createSimpleMacro(name){
+        const insertMacro = new PartialViewMacroBuilder()
+            .withName(name)
+            .withContent(`@inherits Umbraco.Web.Macros.PartialViewMacroPage
+<h1>Acceptance test</h1>`)
+            .build();
+
+        const macroWithPartial = new MacroBuilder()
+            .withName(name)
+            .withPartialViewMacro(insertMacro)
+            .withRenderInEditor()
+            .withUseInEditor()
+            .build();
+
+        cy.saveMacroWithPartial(macroWithPartial);
+    }
+
     it('Copy content', () => {
         const rootDocTypeName = "Test document type";
         const childDocTypeName = "Child test document type";
@@ -596,4 +621,181 @@ context('Content', () => {
         cy.umbracoEnsureTemplateNameNotExists(pickerDocTypeName);
         cy.umbracoEnsureDocumentTypeNameNotExists(pickedDocTypeName);
     });
+
+    it('Content with macro in RTE', () => {
+        const viewMacroName = 'Content with macro in RTE';
+        const partialFileName = viewMacroName + '.cshtml';
+
+        cy.umbracoEnsureMacroNameNotExists(viewMacroName);
+        cy.umbracoEnsurePartialViewMacroFileNameNotExists(partialFileName);
+        cy.umbracoEnsureDocumentTypeNameNotExists(viewMacroName);
+        cy.umbracoEnsureTemplateNameNotExists(viewMacroName);
+        cy.deleteAllContent();
+
+        // First thing first we got to create the macro we will be inserting
+        createSimpleMacro(viewMacroName);
+
+        // Now we need to create a document type with a rich text editor where we can insert the macro
+        // The document type must have a template as well in order to ensure that the content is displayed correctly
+        const alias = AliasHelper.toAlias(viewMacroName);
+        const docType = new DocumentTypeBuilder()
+            .withName(viewMacroName)
+            .withAlias(alias)
+            .withAllowAsRoot(true)
+            .withDefaultTemplate(alias)
+            .addGroup()
+                .addRichTextProperty()
+                    .withAlias('text')
+                .done()
+            .done()
+            .build();
+
+        cy.saveDocumentType(docType).then((generatedDocType) => {
+            // Might as wel initally create the content here, the less GUI work during the test the better
+            const contentNode = new ContentBuilder()
+                .withContentTypeAlias(generatedDocType["alias"])
+                .withAction('saveNew')
+                .addVariant()
+                    .withName(viewMacroName)
+                    .withSave(true)
+                .done()
+                .build();
+
+            cy.saveContent(contentNode);
+        });
+
+        // Edit the macro template in order to have something to verify on when rendered.
+        cy.editTemplate(viewMacroName, `@inherits Umbraco.Web.Mvc.UmbracoViewPage
+@using ContentModels = Umbraco.Web.PublishedModels;
+@{
+  Layout = null;
+}
+@{
+    if (Model.HasValue("text")){
+        @(Model.Value("text"))
+    }
+} `);
+
+        // Enter content
+        refreshContentTree();
+        cy.umbracoTreeItem("content", [viewMacroName]).click();
+
+        // Insert macro
+        cy.get('#mceu_13-button').click();
+        cy.get('.umb-card-grid-item').contains(viewMacroName).click();
+
+        // Save and publish
+        cy.umbracoButtonByLabelKey('buttons_saveAndPublish').click();
+        cy.umbracoSuccessNotification().should('be.visible');
+
+        // Ensure that the view gets rendered correctly
+        const expected = `<h1>Acceptance test</h1><p> </p>`;
+        cy.umbracoVerifyRenderedViewContent('/', expected, true).should('be.true');
+
+        // Cleanup
+        cy.umbracoEnsureMacroNameNotExists(viewMacroName);
+        cy.umbracoEnsurePartialViewMacroFileNameNotExists(partialFileName);
+        cy.umbracoEnsureDocumentTypeNameNotExists(viewMacroName);
+        cy.umbracoEnsureTemplateNameNotExists(viewMacroName);
+    });
+
+    it('Content with macro in grid', () => {
+        const name = 'Content with macro in grid';
+        const macroName = 'Grid macro';
+        const macroFileName = macroName + '.cshtml';
+
+        cy.umbracoEnsureDataTypeNameNotExists(name);
+        cy.umbracoEnsureDocumentTypeNameNotExists(name);
+        cy.umbracoEnsureTemplateNameNotExists(name);
+        cy.umbracoEnsureMacroNameNotExists(macroName);
+        cy.umbracoEnsurePartialViewMacroFileNameNotExists(macroFileName);
+        cy.deleteAllContent();
+
+        createSimpleMacro(macroName);
+
+        const grid = new GridDataTypeBuilder()
+            .withName(name)
+            .withDefaultGrid()
+            .build();
+
+        const alias = AliasHelper.toAlias(name);
+        // Save grid and get the ID
+        cy.saveDataType(grid).then((dataType) => {
+            // Create a document type using the data type
+            const docType = new DocumentTypeBuilder()
+                .withName(name)
+                .withAlias(alias)
+                .withAllowAsRoot(true)
+                .withDefaultTemplate(alias)
+                .addGroup()
+                    .addCustomProperty(dataType['id'])
+                        .withAlias('grid')
+                    .done()
+                .done()
+                .build();
+
+            cy.saveDocumentType(docType).then((generatedDocType) => {
+                const contentNode = new ContentBuilder()
+                    .withContentTypeAlias(generatedDocType["alias"])
+                    .addVariant()
+                        .withName(name)
+                        .withSave(true)
+                    .done()
+                    .build();
+
+                cy.saveContent(contentNode);
+            });
+        });
+
+        // Edit the template to allow us to verify the rendered view
+        cy.editTemplate(name, `@inherits Umbraco.Web.Mvc.UmbracoViewPage
+@using ContentModels = Umbraco.Web.PublishedModels;
+@{
+  Layout = null;
+}
+@Html.GetGridHtml(Model, "grid")`);
+
+        // Act
+        // Enter content
+        refreshContentTree();
+        cy.umbracoTreeItem("content", [name]).click();
+        // Click add
+        cy.get(':nth-child(2) > .preview-row > .preview-col > .preview-cell').click(); // Choose 1 column layout.
+        cy.get('.umb-column > .templates-preview > :nth-child(2) > .ng-binding').click(); // Choose headline
+        cy.get('.umb-cell-placeholder').click();
+        // Click macro
+        cy.get(':nth-child(4) > .umb-card-grid-item > :nth-child(1)').click();
+        // Select the macro
+        cy.get('.umb-card-grid-item').contains(macroName).click();
+
+        // Save and publish
+        cy.umbracoButtonByLabelKey('buttons_saveAndPublish').click();
+        cy.umbracoSuccessNotification().should('be.visible');
+
+        const expected = `
+    <div class="umb-grid">
+      <div class="grid-section">
+        <div>
+          <div class="container">
+            <div class="row clearfix">
+              <div class="col-md-12 column">
+                <div>
+                  <h1>Acceptance test</h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>`
+
+        cy.umbracoVerifyRenderedViewContent('/', expected, true).should('be.true');
+
+        // Clean
+        cy.umbracoEnsureDataTypeNameNotExists(name);
+        cy.umbracoEnsureDocumentTypeNameNotExists(name);
+        cy.umbracoEnsureTemplateNameNotExists(name);
+        cy.umbracoEnsureMacroNameNotExists(macroName);
+        cy.umbracoEnsurePartialViewMacroFileNameNotExists(macroFileName);
+    });
 });

src/Umbraco.Tests.AcceptanceTest/package.json

@@ -10,7 +10,7 @@
     "cypress": "^6.8.0",
     "ncp": "^2.0.0",
     "prompt": "^1.0.0",
-    "umbraco-cypress-testhelpers": "^1.0.0-beta-52"
+    "umbraco-cypress-testhelpers": "^1.0.0-beta-53"
   },
   "dependencies": {
     "typescript": "^3.9.2"