Merge pull request #8595 from umbraco/v8/feature/partial-view-macro-acceptance

V8/feature/Add acceptance tests

src/Umbraco.Tests.AcceptanceTest/cypress/integration/Settings/documentTypes.ts

@@ -10,6 +10,7 @@ context('Document Types', () => {
     const name = "Test document type";
 
     cy.umbracoEnsureDocumentTypeNameNotExists(name);
+    cy.umbracoEnsureTemplateNameNotExists(name);
 
     cy.umbracoSection('settings');
     cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
@@ -44,6 +45,7 @@ context('Document Types', () => {
 
     //Assert
     cy.umbracoSuccessNotification().should('be.visible');
+    cy.umbracoEnsureTemplateNameNotExists(name);
 
     //Clean up
     cy.umbracoEnsureDocumentTypeNameNotExists(name);

src/Umbraco.Tests.AcceptanceTest/cypress/integration/Settings/partialsViewMacroFiles.ts

@@ -1,23 +1,34 @@
 /// <reference types="Cypress" />
+import { PartialViewMacroBuilder } from "umbraco-cypress-testhelpers";
+
 context('Partial View Macro Files', () => {
 
   beforeEach(() => {
     cy.umbracoLogin(Cypress.env('username'), Cypress.env('password'));
   });
 
-  it('Create new partial view macro', () => {
-    const name = "TestPartialViewMacro";
-    const fileName = name + ".cshtml";
-
-   cy.umbracoEnsurePartialViewMacroFileNameNotExists(fileName);
-   cy.umbracoEnsureMacroNameNotExists(name);
-
+  function openPartialViewMacroCreatePanel() {
     cy.umbracoSection('settings');
     cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
 
     cy.umbracoTreeItem("settings", ["Partial View Macro Files"]).rightclick();
-
     cy.umbracoContextMenuAction("action-create").click();
+  }
+
+  function cleanup(name, extension = ".cshtml") {
+    const fileName = name + extension;
+
+    cy.umbracoEnsureMacroNameNotExists(name);
+    cy.umbracoEnsurePartialViewMacroFileNameNotExists(fileName);
+  }
+
+  it('Create new partial view macro', () => {
+    const name = "TestPartialViewMacro";
+
+    cleanup(name);
+
+    openPartialViewMacroCreatePanel();
+
     cy.get('.menu-label').first().click(); // TODO: Fucked we cant use something like cy.umbracoContextMenuAction("action-label").click();
 
     //Type name
@@ -28,10 +39,117 @@ context('Partial View Macro Files', () => {
 
     //Assert
     cy.umbracoSuccessNotification().should('be.visible');
+    cy.umbracoMacroExists(name).then(exists => { expect(exists).to.be.true; });
 
     //Clean up
-    cy.umbracoEnsurePartialViewMacroFileNameNotExists(fileName);
-    cy.umbracoEnsureMacroNameNotExists(name);
-   });
+    cleanup(name);
+  });
+
+  it('Create new partial view macro without macro', () => {
+    const name = "TestPartialMacrolessMacro";
+
+    cleanup(name);
+
+    openPartialViewMacroCreatePanel();
+
+    cy.get('.menu-label').eq(1).click();
+
+    // Type name
+    cy.umbracoEditorHeaderName(name);
+
+    // Save
+    cy.get('.btn-success').click();
+
+    // Assert
+    cy.umbracoSuccessNotification().should('be.visible');
+    cy.umbracoMacroExists(name).then(exists => { expect(exists).to.be.false; });
+
+    // Clean
+    cleanup(name);
+  });
+
+  it('Create new partial view macro from snippet', () => {
+    const name = "TestPartialFromSnippet";
+
+    cleanup(name);
+
+    openPartialViewMacroCreatePanel();
+
+    cy.get('.menu-label').eq(2).click();
+
+    // Select snippet
+    cy.get('.menu-label').eq(1).click();
+
+    // Type name
+    cy.umbracoEditorHeaderName(name);
+
+    // Save
+    cy.get('.btn-success').click();
+
+    // Assert
+    cy.umbracoSuccessNotification().should('be.visible');
+    cy.umbracoMacroExists(name).then(exists => { expect(exists).to.be.true; });
+
+    // Clean
+    cleanup(name);
+  });
+
+  it('Delete partial view macro', () => {
+    const name = "TestDeletePartialViewMacro";
+    const fullName = name + ".cshtml"
+
+    cleanup(name);
+
+    const partialViewMacro = new PartialViewMacroBuilder()
+      .withName(name)
+      .withContent("@inherits Umbraco.Web.Macros.PartialViewMacroPage")
+      .build();
+
+    cy.savePartialViewMacro(partialViewMacro);
+
+    // Navigate to settings
+    cy.umbracoSection('settings');
+    cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
+
+    // Delete partialViewMacro
+    cy.umbracoTreeItem("settings", ["Partial View Macro Files", fullName]).rightclick();
+    cy.umbracoContextMenuAction("action-delete").click();
+    cy.umbracoButtonByLabelKey("general_ok").click();
+
+    // Assert
+    cy.contains(fullName).should('not.exist');
+
+    // Clean
+    cleanup(name);
+  });
+
+  it('Edit partial view macro', () => {
+    const name = "TestPartialViewMacroEditable";
+    const fullName = name + ".cshtml";
+
+    cleanup(name);
+
+    const partialViewMacro = new PartialViewMacroBuilder()
+      .withName(name)
+      .withContent("@inherits Umbraco.Web.Macros.PartialViewMacroPage")
+      .build();
+
+    cy.savePartialViewMacro(partialViewMacro);
+
+    // Navigate to settings
+    cy.umbracoSection('settings');
+    cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
+    cy.umbracoTreeItem("settings", ["Partial View Macro Files", fullName]).click();
+
+    // Type an edit
+    cy.get('.ace_text-input').type(" // test", {force:true} );
+    // Save
+    cy.get('.btn-success').click();
+
+    // Assert
+    cy.umbracoSuccessNotification().should('be.visible');
+
+    cleanup(name);
+  });
 
 });

src/Umbraco.Tests.AcceptanceTest/cypress/integration/Settings/partialsViews.ts

@@ -1,35 +1,145 @@
 /// <reference types="Cypress" />
+import { PartialViewBuilder } from "umbraco-cypress-testhelpers";
+
 context('Partial Views', () => {
 
-  beforeEach(() => {
-    cy.umbracoLogin(Cypress.env('username'), Cypress.env('password'));
-  });
+    beforeEach(() => {
+        cy.umbracoLogin(Cypress.env('username'), Cypress.env('password'));
+    });
 
-  it('Create new empty partial view', () => {
-    const name = "TestPartialView";
-    const fileName = name + ".cshtml";
+    function navigateToSettings() {
+        cy.umbracoSection('settings');
+        cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
+    }
 
-   cy.umbracoEnsurePartialViewNameNotExists(fileName);
+    function openPartialViewsCreatePanel() {
+        navigateToSettings();
+        cy.umbracoTreeItem("settings", ["Partial Views"]).rightclick();
+    }
 
-    cy.umbracoSection('settings');
-    cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
+    it('Create new empty partial view', () => {
+        const name = "TestPartialView";
+        const fileName = name + ".cshtml";
 
-    cy.umbracoTreeItem("settings", ["Partial Views"]).rightclick();
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
 
-    cy.umbracoContextMenuAction("action-create").click();
-    cy.get('.menu-label').first().click(); // TODO: Fucked we cant use something like cy.umbracoContextMenuAction("action-mediaType").click();
+        openPartialViewsCreatePanel();
 
-    //Type name
-    cy.umbracoEditorHeaderName(name);
+        cy.umbracoContextMenuAction("action-create").click();
+        cy.get('.menu-label').first().click(); // TODO: Fucked we cant use something like cy.umbracoContextMenuAction("action-mediaType").click();
 
-    //Save
-    cy.get('.btn-success').click();
+        //Type name
+        cy.umbracoEditorHeaderName(name);
 
-    //Assert
-    cy.umbracoSuccessNotification().should('be.visible');
+        //Save
+        cy.get('.btn-success').click();
+
+        //Assert
+        cy.umbracoSuccessNotification().should('be.visible');
+        cy.umbracoPartialViewExists(fileName).then(exists => { expect(exists).to.be.true; });
+
+        //Clean up
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
+    });
+
+    it('Create partial view from snippet', () => {
+        const name = "TestPartialViewFromSnippet";
+        const fileName = name + ".cshtml";
+
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
+
+        openPartialViewsCreatePanel();
+
+        cy.umbracoContextMenuAction("action-create").click();
+        cy.get('.menu-label').eq(1).click();
+        // Select snippet
+        cy.get('.menu-label').eq(2).click();
+
+        // Type name
+        cy.umbracoEditorHeaderName(name);
+
+        // Save
+        cy.get('.btn-success').click();
+
+        // Assert
+        cy.umbracoSuccessNotification().should('be.visible');
+        cy.umbracoPartialViewExists(fileName).then(exists => { expect(exists).to.be.true; });
+
+        // Clean up
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
+    });
+
+    it('Partial view with no name', () => {
+        openPartialViewsCreatePanel();
+
+        cy.umbracoContextMenuAction("action-create").click();
+        cy.get('.menu-label').first().click();
+
+        // The test would fail intermittently, most likely because the editor didn't have time to load
+        // This should ensure that the editor is loaded and the test should no longer fail unexpectedly.
+        cy.get('.ace_content', {timeout: 5000}).should('exist');
+
+        // Click save
+        cy.get('.btn-success').click();
+
+        // Asserts
+        cy.umbracoErrorNotification().should('be.visible');
+    });
+
+    it('Delete partial view', () => {
+        const name = "TestDeletePartialView";
+        const fileName = name + ".cshtml";
+
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
+
+        // Build and save partial view
+        const partialView = new PartialViewBuilder()
+            .withName(name)
+            .withContent("@inherits Umbraco.Web.Mvc.UmbracoViewPage")
+            .build();
+
+        cy.savePartialView(partialView);
+
+        navigateToSettings();
+
+        // Delete partial view
+        cy.umbracoTreeItem("settings", ["Partial Views", fileName]).rightclick();
+        cy.umbracoContextMenuAction("action-delete").click();
+        cy.umbracoButtonByLabelKey("general_ok").click();
+
+        // Assert
+        cy.contains(fileName).should('not.exist');
+        cy.umbracoPartialViewExists(fileName).then(exists => { expect(exists).to.be.false; });
+
+        // Clean
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
+    });
+
+    it('Edit partial view', () => {
+        const name = 'EditPartialView';
+        const fileName = name + ".cshtml";
+
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
+
+        const partialView = new PartialViewBuilder()
+            .withName(name)
+            .withContent("@inherits Umbraco.Web.Mvc.UmbracoViewPage\n")
+            .build();
+
+        cy.savePartialView(partialView);
+
+        navigateToSettings();
+        // Open partial view
+        cy.umbracoTreeItem("settings", ["Partial Views", fileName]).click();
+        // Edit
+        cy.get('.ace_text-input').type("var num = 5;", {force:true} );
+        cy.get('.btn-success').click();
+
+        // Assert
+        cy.umbracoSuccessNotification().should('be.visible');
+        // Clean
+        cy.umbracoEnsurePartialViewNameNotExists(fileName);
+    });
 
-    //Clean up
-    cy.umbracoEnsurePartialViewNameNotExists(fileName);
-   });
 
 });

src/Umbraco.Tests.AcceptanceTest/cypress/integration/Settings/scripts.ts

@@ -14,7 +14,7 @@ context('Scripts', () => {
     cy.umbracoSection('settings');
     cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
 
-    cy.umbracoTreeItem("settings", ["Stylesheets"]).rightclick();
+    cy.umbracoTreeItem("settings", ["Scripts"]).rightclick();
 
     cy.umbracoContextMenuAction("action-create").click();
     cy.get('.menu-label').first().click(); // TODO: Fucked we cant use something like cy.umbracoContextMenuAction("action-mediaType").click();

src/Umbraco.Tests.AcceptanceTest/cypress/integration/Settings/templates.ts

@@ -1,57 +1,168 @@
 /// <reference types="Cypress" />
-import {DocumentTypeBuilder, TemplateBuilder} from "umbraco-cypress-testhelpers";
+import { TemplateBuilder } from 'umbraco-cypress-testhelpers';
 
 context('Templates', () => {
 
-  beforeEach(() => {
-    cy.umbracoLogin(Cypress.env('username'), Cypress.env('password'));
-  });
-
-  it('Create template', () => {
-        const name = "Test template";
-
-        cy.umbracoEnsureTemplateNameNotExists(name);
+    beforeEach(() => {
+        cy.umbracoLogin(Cypress.env('username'), Cypress.env('password'));
+    });
 
+    function navigateToSettings() {
         cy.umbracoSection('settings');
         cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
+    }
 
+    function createTemplate() {
+        navigateToSettings();
         cy.umbracoTreeItem("settings", ["Templates"]).rightclick();
-
         cy.umbracoContextMenuAction("action-create").click();
+    }
 
+
+
+    it('Create template', () => {
+        const name = "Test template test";
+        cy.umbracoEnsureTemplateNameNotExists(name);
+
+        createTemplate();
         //Type name
         cy.umbracoEditorHeaderName(name);
+        /* Make an edit, if you don't the file will be create twice,
+        only happens in testing though, probably because the test is too fast
+        Certifiably mega wonk regardless */
+        cy.get('.ace_text-input').type("var num = 5;", {force:true} );
 
         //Save
-        cy.get("form[name='contentForm']").submit();
+        cy.get('.btn-success').click();
 
         //Assert
         cy.umbracoSuccessNotification().should('be.visible');
 
         //Clean up
         cy.umbracoEnsureTemplateNameNotExists(name);
-   });
+    });
 
-    it('Delete template', () => {
-        const name = "Test template";
+    it('Unsaved changes stay', () => {
+        const name = "Templates Unsaved Changes Stay test";
+        const edit = "var num = 5;";
         cy.umbracoEnsureTemplateNameNotExists(name);
 
         const template = new TemplateBuilder()
             .withName(name)
+            .withContent('@inherits Umbraco.Web.Mvc.UmbracoViewPage\n')
             .build();
 
         cy.saveTemplate(template);
 
-        cy.umbracoSection('settings');
-        cy.get('li .umb-tree-root:contains("Settings")').should("be.visible");
+        navigateToSettings();
 
-        cy.umbracoTreeItem("settings", ["Templates", name]).rightclick();
-        cy.umbracoContextMenuAction("action-delete").click();
+        // Open partial view
+        cy.umbracoTreeItem("settings", ["Templates", name]).click();
+        // Edit
+        cy.get('.ace_text-input').type(edit, {force:true} );
 
-        cy.umbracoButtonByLabelKey("general_ok").click();
+        // Navigate away
+        cy.umbracoSection('content');
+        // Click stay button
+        cy.get('umb-button[label="Stay"] button:enabled').click();
 
-        cy.contains(name).should('not.exist');
+        // Assert
+        // That the same document is open
+        cy.get('#headerName').should('have.value', name);
+        cy.get('.ace_content').contains(edit);
 
         cy.umbracoEnsureTemplateNameNotExists(name);
     });
+
+    it('Discard unsaved changes', () => {
+        const name = "Discard changes test";
+        const edit = "var num = 5;";
+
+        cy.umbracoEnsureTemplateNameNotExists(name);
+
+        const template = new TemplateBuilder()
+            .withName(name)
+            .withContent('@inherits Umbraco.Web.Mvc.UmbracoViewPage\n')
+            .build();
+
+        cy.saveTemplate(template);
+
+        navigateToSettings();
+
+        // Open partial view
+        cy.umbracoTreeItem("settings", ["Templates", name]).click();
+        // Edit
+        cy.get('.ace_text-input').type(edit, {force:true} );
+
+        // Navigate away
+        cy.umbracoSection('content');
+        // Click discard
+        cy.get('umb-button[label="Discard changes"] button:enabled').click();
+        // Navigate back
+        cy.umbracoSection('settings');
+
+        // Asserts
+        cy.get('.ace_content').should('not.contain', edit);
+        // cy.umbracoPartialViewExists(fileName).then(exists => { expect(exists).to.be.false; }); TODO: Switch to template
+        cy.umbracoEnsureTemplateNameNotExists(name);
+    });
+
+    it('Insert macro', () => {
+        const name = 'InsertMacroTest';
+
+        cy.umbracoEnsureTemplateNameNotExists(name);
+        cy.umbracoEnsureMacroNameNotExists(name);
+
+        const template = new TemplateBuilder()
+            .withName(name)
+            .withContent('')
+            .build();
+
+        cy.saveTemplate(template);
+
+        cy.saveMacro(name);
+
+        navigateToSettings();
+        cy.umbracoTreeItem("settings", ["Templates", name]).click();
+        // Insert macro
+        cy.umbracoButtonByLabelKey('general_insert').click();
+        cy.get('.umb-insert-code-box__title').contains('Macro').click();
+        cy.get('.umb-card-grid-item').contains(name).click();
+
+        // Assert
+        cy.get('.ace_content').contains('@Umbraco.RenderMacro("' + name + '")').should('exist');
+
+        // Clean
+        cy.umbracoEnsureTemplateNameNotExists(name);
+        cy.umbracoEnsureMacroNameNotExists(name);
+    });
+
+    it('Insert value', () => {
+        const name = 'Insert Value Test';
+
+        cy.umbracoEnsureTemplateNameNotExists(name);
+
+        const partialView = new TemplateBuilder()
+            .withName(name)
+            .withContent('')
+            .build();
+
+        cy.saveTemplate(partialView);
+
+        navigateToSettings();
+        cy.umbracoTreeItem("settings", ["Templates", name]).click();
+
+        // Insert value
+        cy.umbracoButtonByLabelKey('general_insert').click();
+        cy.get('.umb-insert-code-box__title').contains('Value').click();
+        cy.get('select').select('umbracoBytes');
+        cy.umbracoButtonByLabelKey('general_submit').click();
+
+        // assert
+        cy.get('.ace_content').contains('@Model.Value("umbracoBytes")').should('exist');
+
+        // Clean
+        cy.umbracoEnsureTemplateNameNotExists(name);
+    });
+
 });

src/Umbraco.Tests.AcceptanceTest/package.json

@@ -5,9 +5,9 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.2",
+    "cypress": "^4.12.1",
     "ncp": "^2.0.0",
-    "cypress": "^4.9.0",
-    "umbraco-cypress-testhelpers": "1.0.0-beta-44"
+    "umbraco-cypress-testhelpers": "^1.0.0-beta-48"
   },
   "dependencies": {
     "typescript": "^3.9.2"