Cypress Tests - Batch 6

cypress-tests/cypress/e2e/admin/formBuilder/forms/createForm.cy.ts

@@ -1,13 +1,11 @@
-import { customAlphabet } from "nanoid";
-
-const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Forms Creation", () => {
     beforeEach(() => cy.login());
 
     describe("Create Form", () => {
-        const newFormTitle = `Test form 1 ${nanoid(10)}`;
-        const newFormTitle2 = `Test form 2 ${nanoid(10)}`;
+        const newFormTitle = `Test form 1 ${generateAlphaLowerCaseId(10)}`;
+        const newFormTitle2 = `Test form 2 ${generateAlphaLowerCaseId(10)}`;
 
         it("should be able to create form, rename it, publish it, create new revision and delete it", () => {
             cy.visit("/form-builder/forms");

cypress-tests/cypress/e2e/admin/pageBuilder/blocks/pageBlockPreview.cy.ts

@@ -0,0 +1,78 @@
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
+
+context("Page Builder - Block Preview", () => {
+    beforeEach(() => {
+        cy.login();
+        cy.pbDeleteAllBlocks();
+        cy.pbDeleteAllBlockCategories();
+        cy.pbDeleteAllTemplates();
+    });
+    const blockName = ["Block1Name"];
+    const headerTitle = "Header test";
+    const headerTitleUpdate = "Edited Header Text";
+    const templateData = "tester";
+
+    const blockCategoryData = {
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
+        icon: "icon-name",
+        description: generateAlphaLowerCaseId(10)
+    };
+
+    it("Should be able to programatically create and assert a block exists with a proper heading", () => {
+        cy.pbCreateCategoryAndBlocks({
+            blockCategory: blockCategoryData,
+            blockNames: blockName,
+            content: {
+                type: "heading",
+                text: headerTitle
+            }
+        });
+
+        cy.visit("/page-builder/page-blocks");
+
+        // Asserts the programatically created block contains the correct data.
+        cy.findByTestId("default-data-list").within(() => {
+            cy.get("li")
+                .first()
+                .within(() => cy.contains(blockCategoryData.name).should("exist").click());
+        });
+        cy.contains(blockName[0]).should("exist");
+        cy.contains(headerTitle).should("exist");
+
+        // Edits the current header for headerTitleUpdate.
+        cy.findByTestId("pb-blocks-list-block-edit-btn").click();
+        cy.get('pb-block:contains("Header test")').click();
+        cy.get('[contenteditable="true"]').clear().type(headerTitleUpdate).click();
+        cy.contains("Save Changes").click();
+
+        // Asserts the newly edited header/block contains the right information.
+        cy.contains(blockCategoryData.name).click();
+        cy.contains(blockName[0]).should("exist");
+        cy.contains(headerTitleUpdate).should("exist");
+
+        // Navigate to the template page and create a new template.
+        cy.visit("/page-builder/page-templates");
+        cy.findAllByTestId("pb-templates-list-new-template-btn").click();
+        cy.findByRole("textbox", { name: "Title" }).type(templateData);
+        cy.findByRole("textbox", { name: "Slug" }).type(templateData);
+        cy.findByRole("textbox", { name: "Description" }).type(templateData);
+        cy.findByRole("button", { name: "Create" }).click();
+
+        // Assert the block is being properly displayed.
+        cy.findByTestId("pb-content-add-block-button").click();
+        cy.findByTestId("pb-editor-page-blocks-list-item-block-1-name").contains(headerTitleUpdate);
+
+        // Add the block to the template.
+        cy.contains(blockCategoryData.name).click();
+        cy.get('button[label="Click to Add"]').click({ force: true });
+        cy.contains("Save Changes").click();
+
+        // Assert the template is being displayed properly on the left and then the right side of the screen.
+        cy.findByTestId("default-data-list")
+            .find("li.mdc-list-item")
+            .should("contain", templateData);
+        cy.findByTestId("default-data-list").find("li.mdc-list-item").first().click();
+        cy.get('[data-testid="pb-page-templates-form"]').contains(headerTitleUpdate);
+    });
+});

cypress-tests/cypress/e2e/admin/pageBuilder/blocks/pageBlocks.cy.ts

@@ -1,7 +1,6 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Blocks", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
     beforeEach(() => {
         cy.login();
         cy.pbDeleteAllBlocks();
@@ -15,31 +14,31 @@ context("Page Builder - Blocks", () => {
     const blockNames4 = ["!#$%&/()="];
 
     const blockCategoryData1 = {
-        name: nanoid(10).toLowerCase(),
-        slug: nanoid(10).toLowerCase(),
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
         icon: "icon-name",
-        description: nanoid(10).toLowerCase()
+        description: generateAlphaLowerCaseId(10)
     };
 
     const blockCategoryData2 = {
-        name: nanoid(10).toLowerCase(),
-        slug: nanoid(10).toLowerCase(),
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
         icon: "icon-name",
-        description: nanoid(10).toLowerCase()
+        description: generateAlphaLowerCaseId(10)
     };
 
     const blockCategoryData3 = {
-        name: nanoid(10).toLowerCase(),
-        slug: nanoid(10).toLowerCase(),
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
         icon: "icon-name",
-        description: nanoid(10).toLowerCase()
+        description: generateAlphaLowerCaseId(10)
     };
 
     const blockCategoryData4 = {
-        name: nanoid(10).toLowerCase(),
-        slug: nanoid(10).toLowerCase(),
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
         icon: "icon-name",
-        description: nanoid(10).toLowerCase()
+        description: generateAlphaLowerCaseId(10)
     };
 
     it("Should be able to use the search bar as expected", () => {

cypress-tests/cypress/e2e/admin/pageBuilder/blocks/pageBlocksCrud.cy.ts

@@ -1,9 +1,8 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Blocks", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
-    const blockCategoryName = nanoid(10); // Generate a random 10-character lowercase string
-    const blockCategorySlug = nanoid(10); // Generate another random 10-character lowercase string
+    const blockCategoryName = generateAlphaLowerCaseId(10);
+    const blockCategorySlug = generateAlphaLowerCaseId(10);
 
     beforeEach(() => {
         cy.login();

cypress-tests/cypress/e2e/admin/pageBuilder/blocks/pageBlocksExportImport.cy.ts

@@ -1,40 +1,36 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Blocks Export/Import", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
-
     beforeEach(() => {
         cy.login();
         cy.pbDeleteAllBlocks();
         cy.pbDeleteAllBlockCategories();
     });
 
     const blockNames1 = ["Block1Name"];
-
     const blockNames2 = ["Block1Name", "Block2Name"];
-
     const blockNames3 = ["Block1Name", "Block2Name", "Block3Name"];
 
     //Data used for creating multible block categories
     const blockCategoryData1 = {
-        name: nanoid(10).toLowerCase(),
-        slug: nanoid(10).toLowerCase(),
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
         icon: "icon-name",
-        description: nanoid(10).toLowerCase()
+        description: generateAlphaLowerCaseId(10)
     };
 
     const blockCategoryData2 = {
-        name: nanoid(10).toLowerCase(),
-        slug: nanoid(10).toLowerCase(),
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
         icon: "icon-name",
-        description: nanoid(10).toLowerCase()
+        description: generateAlphaLowerCaseId(10)
     };
 
     const blockCategoryData3 = {
-        name: nanoid(10).toLowerCase(),
-        slug: nanoid(10).toLowerCase(),
+        name: generateAlphaLowerCaseId(10),
+        slug: generateAlphaLowerCaseId(10),
         icon: "icon-name",
-        description: nanoid(10).toLowerCase()
+        description: generateAlphaLowerCaseId(10)
     };
 
     it("Test the importation and exportation of all blocks", () => {

cypress-tests/cypress/e2e/admin/pageBuilder/category/pageCategoriesCrud.cy.ts

@@ -1,15 +1,14 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Categories CRUD", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
-    const categoryName = nanoid(6);
-    const categoryNameEdited = nanoid(6);
-    const categorySlug = nanoid(6);
-    const categoryUrl = "/" + nanoid(6) + "/";
-    const categoryUrlEdited = "/" + nanoid(6) + "/";
-    const categoryNameValidate = nanoid(6);
-    const categorySlugValidate = nanoid(6);
-    const categoryUrlValidate = "/" + nanoid(6) + "/";
+    const categoryName = generateAlphaLowerCaseId(6);
+    const categoryNameEdited = generateAlphaLowerCaseId(6);
+    const categorySlug = generateAlphaLowerCaseId(6);
+    const categoryUrl = "/" + generateAlphaLowerCaseId(6) + "/";
+    const categoryUrlEdited = "/" + generateAlphaLowerCaseId(6) + "/";
+    const categoryNameValidate = generateAlphaLowerCaseId(6);
+    const categorySlugValidate = generateAlphaLowerCaseId(6);
+    const categoryUrlValidate = "/" + generateAlphaLowerCaseId(6) + "/";
 
     beforeEach(() => {
         cy.login();

cypress-tests/cypress/e2e/admin/pageBuilder/menus/menuCrud.cy.ts

@@ -1,9 +1,8 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Menu CRUD", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
-    const menuName = nanoid(10);
-    const menuSlug = nanoid(10);
+    const menuName = generateAlphaLowerCaseId(10);
+    const menuSlug = generateAlphaLowerCaseId(10);
 
     const menuNameEdit = "Testing Menu123";
     const menuDescEdit = "This is an edited description.";

cypress-tests/cypress/e2e/admin/pageBuilder/menus/menuItems.cy.ts

@@ -1,19 +1,17 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Menu Items", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
-
-    const pageListName = nanoid(10);
+    const pageListName = generateAlphaLowerCaseId(10);
     const pageListNameEdit = pageListName + "-edit";
 
-    const linkName = nanoid(10);
+    const linkName = generateAlphaLowerCaseId(10);
     const linkURL = `/${linkName}/`;
     const linkNameEdit = linkName + "-edit";
     const linkURLEdit = `/${linkNameEdit}/`;
 
-    const folderName = nanoid(10);
+    const folderName = generateAlphaLowerCaseId(10);
     const folderNameEdit = folderName + "-edit";
-    const pageNameNew = nanoid(10);
+    const pageNameNew = generateAlphaLowerCaseId(10);
     const pageNameNewEdit = pageNameNew + "-edit";
 
     const menuData = {

cypress-tests/cypress/e2e/admin/pageBuilder/menus/pagesListMenuItemType.cy.js

@@ -92,7 +92,7 @@ describe.skip("Menus Module", () => {
     });
 
     it(`Step 2: assert that menu item and pages are shown (descending order)`, () => {
-        cy.visit(Cypress.env("WEBSITE_URL") + `/page-${id}-${0}/`);
+        cy.visitWebsite(`/page-${id}-${0}/`);
 
         cy.reloadUntil(() => {
             // We wait until the document contains the newly added menu.
@@ -130,7 +130,7 @@ describe.skip("Menus Module", () => {
     });
 
     it(`Step 4: assert that menu item and pages are shown (ascending order)`, () => {
-        cy.visit(Cypress.env("WEBSITE_URL") + `/page-${id}-${0}/`);
+        cy.visitWebsite(`/page-${id}-${0}/`);
 
         cy.reloadUntil(() => {
             // We wait until the document contains the newly added menu.
@@ -162,7 +162,7 @@ describe.skip("Menus Module", () => {
     });
 
     it(`Step 6: assert that the pages list menu item does not exist`, () => {
-        cy.visit(Cypress.env("WEBSITE_URL") + `/page-${id}-${0}/`);
+        cy.visitWebsite(`/page-${id}-${0}/`);
 
         cy.reloadUntil(() => {
             // We wait until the document contains the newly added menu.

cypress-tests/cypress/e2e/admin/pageBuilder/menus/pagesListMenuItemType.cy.ts

@@ -84,7 +84,7 @@ describe("Page Builder - List Menu Item Types", () => {
         cy.findByText("Menu saved successfully.");
     });
     it(`Step 2: assert that menu item and pages are shown (descending order)`, () => {
-        cy.visit(Cypress.env("WEBSITE_URL") + `/page-${id}-${0}/`);
+        cy.visitWebsite(`/page-${id}-${0}/`);
 
         cy.reloadUntil(() => {
             // We wait until the document contains the newly added menu.
@@ -122,7 +122,7 @@ describe("Page Builder - List Menu Item Types", () => {
     });
 
     it(`Step 4: assert that menu item and pages are shown (ascending order)`, () => {
-        cy.visit(Cypress.env("WEBSITE_URL") + `/page-${id}-${0}/`);
+        cy.visitWebsite(`/page-${id}-${0}/`);
 
         cy.reloadUntil(() => {
             // We wait until the document contains the newly added menu.
@@ -154,7 +154,7 @@ describe("Page Builder - List Menu Item Types", () => {
     });
 
     it(`Step 6: assert that the pages list menu item does not exist`, () => {
-        cy.visit(Cypress.env("WEBSITE_URL") + `/page-${id}-${0}/`);
+        cy.visitWebsite(`/page-${id}-${0}/`);
 
         cy.reloadUntil(() => {
             // We wait until the document contains the newly added menu.

cypress-tests/cypress/e2e/admin/pageBuilder/templates/pageTemplatesCrud.cy.ts

@@ -1,9 +1,8 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Template CRUD", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
-    const templateName = nanoid(10);
-    const templateNameEdit = nanoid(10);
+    const templateName = generateAlphaLowerCaseId(10);
+    const templateNameEdit = generateAlphaLowerCaseId(10);
     beforeEach(() => {
         cy.login();
         cy.pbDeleteAllTemplates();

cypress-tests/cypress/e2e/admin/pageBuilder/templates/pageTemplatesDialogSearch.cy.ts

@@ -1,40 +1,39 @@
-import { customAlphabet } from "nanoid";
+import { generateAlphaLowerCaseId } from "@webiny/utils/generateId";
 
 context("Page Builder - Page Templates Dialog Search", () => {
-    const nanoid = customAlphabet("abcdefghijklmnopqrstuvwxyz");
-    const titleString1 = nanoid(6);
-    const titleString2 = nanoid(6);
-    const titleString3 = nanoid(6);
+    const titleString1 = generateAlphaLowerCaseId(10);
+    const titleString2 = generateAlphaLowerCaseId(10);
+    const titleString3 = generateAlphaLowerCaseId(10);
     const titleString4 = "!#$%&/()=?*";
 
     const pageTemplateData1 = {
         title: titleString1,
-        slug: nanoid(6),
-        description: nanoid(6),
+        slug: generateAlphaLowerCaseId(10),
+        description: generateAlphaLowerCaseId(10),
         tags: [],
         layout: "static",
         pageCategory: "static"
     };
     const pageTemplateData2 = {
         title: titleString2,
-        slug: nanoid(6),
-        description: nanoid(6),
+        slug: generateAlphaLowerCaseId(10),
+        description: generateAlphaLowerCaseId(10),
         tags: [],
         layout: "static",
         pageCategory: "static"
     };
     const pageTemplateData3 = {
         title: titleString3,
-        slug: nanoid(6),
-        description: nanoid(6),
+        slug: generateAlphaLowerCaseId(10),
+        description: generateAlphaLowerCaseId(10),
         tags: [],
         layout: "static",
         pageCategory: "static"
     };
     const pageTemplateData4 = {
         title: titleString4,
-        slug: nanoid(6),
-        description: nanoid(6),
+        slug: generateAlphaLowerCaseId(10),
+        description: generateAlphaLowerCaseId(10),
         tags: [],
         layout: "static",
         pageCategory: "static"