@vtex/faststore-plugin-buyer-portal 1.1.93 → 1.1.94

package/cypress/integration/users.test.ts

@@ -1,4 +1,5 @@
 import { TEST_CONFIG, TEST_DATA } from "../constants";
+import { generateRandomString, useInternalSearch } from "../shared";
 
 const navigateToUsers = () => {
   cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
@@ -15,7 +16,6 @@ const verifyUserState = (
 ) => {
   const verifyAndRetry = (currentRetry = 0) => {
     cy.get("[data-fs-users-section]").should("exist");
-    cy.get("[data-fs-bp-base-tabs-layout-content]").scrollTo("bottom");
 
     cy.get("body").then(($body) => {
       const exists = $body.text().includes(userName);
@@ -117,7 +117,14 @@ const confirmDeletion = (userName: string) => {
   tryDelete();
 };
 
-describe("Users", () => {
+let USER_NAME: string;
+let USER_EMAIL: string;
+
+describe("Users", { retries: 2 }, () => {
+  before(() => {
+    USER_NAME = `${TEST_DATA.USERS.NEW_USER.NAME} ${generateRandomString()}`;
+    USER_EMAIL = `${generateRandomString()}${TEST_DATA.USERS.NEW_USER.EMAIL}`;
+  });
   beforeEach(() => {
     cy.login();
   });
@@ -130,6 +137,8 @@ describe("Users", () => {
     cy.contains("Role").should("be.visible");
 
     // Check that the expected users are present in the table
+    useInternalSearch(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.NAME);
+
     cy.contains(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.NAME)
       .scrollIntoView()
       .should("be.visible")
@@ -155,6 +164,8 @@ describe("Users", () => {
     navigateToUsers();
 
     // Click on User Test 1 to go to details page
+    useInternalSearch(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.NAME);
+
     cy.contains(TEST_DATA.USERS.USER_ORG_UNIT_ADMIN.NAME)
       .scrollIntoView()
       .should("be.visible")
@@ -193,7 +204,11 @@ describe("Users", () => {
     cy.get("[data-fs-header-inside-button]").should("be.visible").click();
 
     // Fill user form
-    fillUserForm(TEST_DATA.USERS.NEW_USER);
+    fillUserForm({
+      ...TEST_DATA.USERS.NEW_USER,
+      EMAIL: USER_EMAIL,
+      NAME: USER_NAME,
+    });
 
     // Submit form
     cy.contains("button", "Add").click();
@@ -201,8 +216,9 @@ describe("Users", () => {
     // Verify success message
     cy.contains("User successfully added").should("be.visible");
 
+    useInternalSearch(USER_NAME);
     // Reload and verify user was created
-    verifyUserState(TEST_DATA.USERS.NEW_USER.NAME, true);
+    verifyUserState(USER_NAME, true);
   });
 
   it("Should view and edit the newly created user", () => {
@@ -212,7 +228,9 @@ describe("Users", () => {
     cy.log("=== Viewing user details ===");
     cy.get("[data-fs-bp-base-tabs-layout-content]").scrollTo("bottom");
 
-    cy.contains(TEST_DATA.USERS.NEW_USER.NAME)
+    useInternalSearch(USER_NAME);
+
+    cy.contains(USER_NAME)
       .should("be.visible")
       .parents("[data-fs-bp-table-row]")
       .click();
@@ -230,7 +248,8 @@ describe("Users", () => {
     // === EDIT USER ===
     cy.log("=== Editing user ===");
 
-    openUserDropdown(TEST_DATA.USERS.NEW_USER.NAME);
+    useInternalSearch(USER_NAME);
+    openUserDropdown(USER_NAME);
     cy.contains("Edit details").click();
 
     // Verify edit drawer is open
@@ -240,8 +259,8 @@ describe("Users", () => {
 
     // Update user information
     const updatedUserData = {
-      NAME: `${TEST_DATA.USERS.NEW_USER.NAME} Updated`,
-      EMAIL: TEST_DATA.USERS.NEW_USER.EMAIL,
+      NAME: `${USER_NAME} Updated`,
+      EMAIL: USER_EMAIL,
       ROLE: TEST_DATA.USERS.NEW_USER.ROLE,
     };
 
@@ -250,6 +269,9 @@ describe("Users", () => {
     // Save changes
     cy.contains("button", "Save").click();
 
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    useInternalSearch(updatedUserData.NAME);
     // Verify update
     verifyUserState(updatedUserData.NAME, true);
   });
@@ -259,14 +281,15 @@ describe("Users", () => {
 
     // === DELETE USER ===
     cy.log("=== Deleting user ===");
-    cy.get("[data-fs-bp-base-tabs-layout-content]").scrollTo("bottom");
 
     const updatedUserData = {
-      NAME: `${TEST_DATA.USERS.NEW_USER.NAME} Updated`,
-      EMAIL: TEST_DATA.USERS.NEW_USER.EMAIL,
+      NAME: `${USER_NAME} Updated`,
+      EMAIL: USER_EMAIL,
       ROLE: TEST_DATA.USERS.NEW_USER.ROLE,
     };
 
+    useInternalSearch(updatedUserData.NAME);
+
     openUserDropdown(updatedUserData.NAME);
     cy.contains("Delete").click();
 
@@ -276,8 +299,8 @@ describe("Users", () => {
         confirmDeletion(userNameText);
       });
 
-    // Verify if the user was deleted
-    verifyUserState(updatedUserData.NAME, false);
+    useInternalSearch(updatedUserData.NAME);
+    cy.contains(updatedUserData.NAME).should("not.exist");
   });
 
   it("Should not allow adding a user already in another org unit", () => {
@@ -306,40 +329,21 @@ describe("Users", () => {
   });
 
   it("Should create a new user add, edit and remove roles", () => {
-    // Visit the buyer portal home page
-    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
-
-    // Click on the "Users" link in the sidebar menu
-    cy.get("a[data-fs-vertical-nav-menu-link]").contains("Users").click();
-
-    // Check that the Users page is rendered
-    cy.get('h1[data-fs-bp-header-inside-title="true"]').should(
-      "contain",
-      "Users"
-    );
+    const ROLE_USER_NAME = `${
+      TEST_DATA.USERS.USER_NAME_FOR_ROLES
+    } ${generateRandomString()}`;
+    const ROLE_EMAIL = `${generateRandomString()}userfortestroles@vtex.com`;
 
-    // Check that at least one user row exists
-    cy.get('a[data-fs-bp-table-row-link="true"]').should("exist");
+    navigateToUsers();
 
     // Click the add user button at the top
     cy.get('button[data-fs-header-inside-button="true"]').click();
 
-    // Check that the user creation modal is open
-    cy.get(
-      'div[data-fs-modal-content="true"][data-fs-bp-create-user-drawer="true"]'
-    ).should("be.visible");
-    cy.get('h2[data-fs-bp-basic-drawer-heading-title="true"]').should(
-      "contain",
-      "Add User"
-    );
-
     // Fill out the user creation form
     cy.get('input[data-fs-bp-input-text-input="true"]')
       .first()
-      .type(TEST_DATA.USERS.USER_NAME_FOR_ROLES); // Full Name
-    cy.get('input[data-fs-bp-input-text-input="true"]')
-      .eq(1)
-      .type("userfortestroles@vtex.com"); // Email
+      .type(ROLE_USER_NAME); // Full Name
+    cy.get('input[data-fs-bp-input-text-input="true"]').eq(1).type(ROLE_EMAIL); // Email
     cy.get('input[type="checkbox"][value="Buyer"]').check(); // Assign Buyer role
 
     // Click the "Add" button to submit the form
@@ -349,44 +353,22 @@ describe("Users", () => {
       .should("not.be.disabled")
       .click();
 
-    cy.wait(3000);
-
-    // Retry logic to check if user appears in the list
-    const checkUserExists = (attempt = 1) => {
-      cy.reload();
-      cy.get("body").then(($body) => {
-        if ($body.text().includes(TEST_DATA.USERS.USER_NAME_FOR_ROLES)) {
-          // User found, verify it exists
-          cy.contains("td", TEST_DATA.USERS.USER_NAME_FOR_ROLES).should(
-            "exist"
-          );
-        } else if (attempt < 3) {
-          cy.log(`User not found, retry attempt ${attempt + 1} of 3`);
-          cy.wait(2000);
-          checkUserExists(attempt + 1);
-        } else {
-          throw new Error(
-            `User ${TEST_DATA.USERS.USER_NAME_FOR_ROLES} not found after 3 attempts`
-          );
-        }
-      });
-    };
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
 
-    checkUserExists();
+    // Verify success message
+    cy.contains("User successfully added").should("be.visible");
 
-    // Check that the 'Buyer' badge is present in the same row
-    cy.contains(
-      'tr[data-fs-bp-table-row="true"]',
-      TEST_DATA.USERS.USER_NAME_FOR_ROLES
-    )
+    useInternalSearch(ROLE_USER_NAME);
+    // Reload and verify user was created
+    verifyUserState(ROLE_USER_NAME, true);
+
+    // Check that it has roles badges
+    cy.contains('tr[data-fs-bp-table-row="true"]', ROLE_USER_NAME)
       .find('span[data-fs-tag="true"]')
-      .should("contain.text", "Buyer");
+      .should("exist");
 
     // --- Edit user roles: add Organizational Unit Admin ---
-    cy.contains(
-      'tr[data-fs-bp-table-row="true"]',
-      TEST_DATA.USERS.USER_NAME_FOR_ROLES
-    )
+    cy.contains('tr[data-fs-bp-table-row="true"]', ROLE_USER_NAME)
       .find('button[data-fs-bp-basic-dropdown-menu-trigger="true"]')
       .click();
     cy.get(
@@ -397,10 +379,7 @@ describe("Users", () => {
     cy.get(
       'div[data-fs-modal-content="true"][data-fs-bp-update-user-drawer="true"]'
     ).should("be.visible");
-    cy.get('h2[data-fs-bp-basic-drawer-heading-title="true"]').should(
-      "contain",
-      "Edit user details"
-    );
+
     cy.get("input#role-organizational-unit\\ admin").check({ force: true });
     cy.get(
       'button[data-fs-bp-basic-drawer-button="true"][data-fs-bp-basic-drawer-button-variant="confirm"]'
@@ -410,18 +389,11 @@ describe("Users", () => {
 
     cy.wait(1000);
     cy.reload();
-    cy.contains(
-      'tr[data-fs-bp-table-row="true"]',
-      TEST_DATA.USERS.USER_NAME_FOR_ROLES
-    )
-      .find('span[data-fs-tag="true"]')
-      .should("contain.text", "Organizational Unit Admin");
+
+    useInternalSearch(ROLE_USER_NAME);
 
     // --- Edit user roles: remove Organizational Unit Admin ---
-    cy.contains(
-      'tr[data-fs-bp-table-row="true"]',
-      TEST_DATA.USERS.USER_NAME_FOR_ROLES
-    )
+    cy.contains('tr[data-fs-bp-table-row="true"]', ROLE_USER_NAME)
       .find('button[data-fs-bp-basic-dropdown-menu-trigger="true"]')
       .click();
     cy.get(
@@ -439,91 +411,65 @@ describe("Users", () => {
       .should("not.be.disabled")
       .click();
 
-    cy.wait(1000);
-    cy.reload();
-    cy.contains(
-      'tr[data-fs-bp-table-row="true"]',
-      TEST_DATA.USERS.USER_NAME_FOR_ROLES
-    )
-      .find('span[data-fs-tag="true"]')
-      .should("not.contain.text", "Organizational Unit Admin");
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
 
-    // Open the dropdown menu (three dots) for the created user
-    cy.contains(
-      'tr[data-fs-bp-table-row="true"]',
-      TEST_DATA.USERS.USER_NAME_FOR_ROLES
-    )
-      .find('button[data-fs-bp-basic-dropdown-menu-trigger="true"]')
-      .click();
+    openUserDropdown(ROLE_USER_NAME);
 
-    // Click the "Delete" option in the dropdown menu
-    cy.get(
-      'div[data-fs-dropdown-menu="true"] button[data-fs-dropdown-item="true"]'
-    )
-      .contains("Delete")
-      .click();
-
-    // Check that the delete user modal is open
-    cy.get(
-      'div[data-fs-modal-content="true"][data-fs-bp-delete-user-drawer="true"]'
-    ).should("be.visible");
-    cy.get('h2[data-fs-bp-basic-drawer-heading-title="true"]').should(
-      "contain",
-      "Delete user"
-    );
+    cy.contains("Delete").click();
 
     // Type the user name to confirm deletion
-    cy.get('input[data-fs-bp-input-text-input="true"]').type(
-      TEST_DATA.USERS.USER_NAME_FOR_ROLES
-    );
-
-    cy.wait(1000);
+    cy.get('input[data-fs-bp-input-text-input="true"]').type(ROLE_USER_NAME);
 
     // Click the "Delete" button to confirm
     cy.get(
       'button[data-fs-bp-basic-drawer-button="true"][data-fs-bp-basic-drawer-button-variant="danger"]'
-    )
-      .should("not.be.disabled")
-      .click();
+    ).click();
 
-    cy.wait(1000);
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
     // Reload the users page
     cy.reload();
 
     // Check that the user no longer exists in the list
-    cy.contains("td", TEST_DATA.USERS.USER_NAME_FOR_ROLES).should("not.exist");
+    cy.contains("td", ROLE_USER_NAME).should("not.exist");
   });
 
   it("Should allow changing the organizational unit from the list dropdown menu", () => {
     navigateToUsers();
 
+    USER_NAME = `${TEST_DATA.USERS.NEW_USER.NAME} ${generateRandomString()}`;
+    USER_EMAIL = `${generateRandomString()}${TEST_DATA.USERS.NEW_USER.EMAIL}`;
+
     // Open dropdown for the test user
     cy.get("[data-fs-header-inside-button]").should("be.visible").click();
-    fillUserForm(TEST_DATA.USERS.NEW_USER);
+    fillUserForm({
+      ...TEST_DATA.USERS.NEW_USER,
+      EMAIL: USER_EMAIL,
+      NAME: USER_NAME,
+    });
 
     cy.contains("button", "Add").click();
     cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
 
-    verifyUserState(TEST_DATA.USERS.NEW_USER.NAME, true);
+    useInternalSearch(USER_NAME);
 
-    openUserDropdown(TEST_DATA.USERS.NEW_USER.NAME);
+    verifyUserState(USER_NAME, true);
+
+    openUserDropdown(USER_NAME);
     cy.contains("Change organizational unit").click();
 
     // Verify change org unit modal/drawer is open
     cy.contains("Change user organizational unit").should("be.visible");
     cy.contains(
-      `Users can belong to only one Organizational Unit. Search and select a new unit for ${TEST_DATA.USERS.NEW_USER.NAME}`
+      `Users can belong to only one Organizational Unit. Search and select a new unit for ${USER_NAME}`
     ).should("be.visible");
 
     cy.get('[data-fs-bp-input-text="true"]')
       .should("be.visible")
-      .type(TEST_DATA.ORG_UNITS.ROOT, { delay: 1000 });
-
-    cy.wait(0);
+      .type(TEST_DATA.ORG_UNITS.ROOT, { delay: 500 });
 
     // Wait for and click on the option in the dropdown
-    cy.get('[data-fs-bp-autocomplete-dropdown-menu="true"]')
-      .contains(TEST_DATA.ORG_UNITS.CHILD_2, { timeout: 10000 })
+    cy.get("[data-fs-bp-autocomplete-dropdown-menu]")
+      .contains(TEST_DATA.ORG_UNITS.CHILD_2, { timeout: 500 })
       .should("exist")
       .click();
 
@@ -534,7 +480,8 @@ describe("Users", () => {
     cy.reload();
 
     // Check if the user is not on the same org unit
-    verifyUserState(TEST_DATA.USERS.NEW_USER.NAME, false);
+    useInternalSearch(USER_NAME);
+    cy.contains(USER_NAME).should("not.exist");
   });
 
   it.skip("Should not allow deleting the last admin user", () => {

package/cypress/shared.ts

@@ -1,3 +1,33 @@
-export function clickConfirmButton() {
-  cy.get('[data-fs-bp-basic-drawer-button-variant="confirm"]').click();
+import { TEST_CONFIG } from "./constants";
+
+export function clickConfirmButton(alias?: string) {
+  const selector = '[data-fs-bp-basic-drawer-button-variant="confirm"]';
+
+  if (alias) {
+    cy.get(`@${alias}`).find(selector).click();
+  } else {
+    cy.get(selector).click();
+  }
+}
+
+export function generateRandomString(length = 8) {
+  let result = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+// By using the internal search we can avoid complications with pagination
+export function useInternalSearch(searchTerm: string) {
+  cy.get("[data-fs-buyer-portal-internal-search-input]")
+    .clear()
+    .lazyType(searchTerm);
+
+  cy.get("[data-fs-bp-table-row-loading]", {
+    timeout: TEST_CONFIG.TIMEOUTS.LONG_DELAY,
+  }).should("not.exist");
 }

package/cypress/support/addressHelper.tsx

@@ -1,3 +1,5 @@
+import { useInternalSearch } from "../shared";
+
 export function clickAddressTab(tabName: string) {
   cy.get("[data-fs-bp-tab-option]").contains(tabName).click();
 }
@@ -6,11 +8,8 @@ export function goToAddressPage(contractName: string) {
   // Navigate to Addresses page
   cy.contains("Addresses").click();
 
-  // Address Page is loading slowly, custom wait untill we get the request optimized
-  cy.wait(10000);
-
   // Check to see if the address section loaded
-  cy.get("[data-fs-addresses-section]", { timeout: 100000 }).should("exist");
+  cy.get("[data-fs-addresses-section]", { timeout: 8000 }).should("exist");
 
   // Check to see if contract details loaded correctly
   cy.get("[data-fs-bp-header-inside]").should("exist");
@@ -18,11 +17,20 @@ export function goToAddressPage(contractName: string) {
 }
 
 export function navigateToAddressByName(addressName: string) {
+  useInternalSearch(addressName);
+
   cy.get("[data-fs-addresses-table]").within(() => {
-    cy.contains(addressName).should("be.visible").parent().parent().click();
+    cy.contains(addressName)
+      .should("be.visible")
+      .parent()
+      .parent()
+      .parent()
+      .click();
   });
 
-  cy.wait(8000);
+  cy.get("[data-fs-address-details-section]", { timeout: 10000 }).should(
+    "exist"
+  );
 }
 
 export function openCreateAddressDrawer() {
@@ -34,10 +42,13 @@ export function openCreateAddressDrawer() {
 }
 
 export function openAddressActionsDropdown(addressName: string) {
+  useInternalSearch(addressName);
+
   cy.get("[data-fs-addresses-table]")
     .contains(addressName)
     .parent()
     .parent()
+    .parent()
     .find("[data-fs-bp-basic-dropdown-menu-trigger]")
     .click();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vtex/faststore-plugin-buyer-portal",
-	"version": "1.1.93",
+	"version": "1.1.94",
 	"description": "A plugin for faststore with buyer portal",
 	"main": "index.js",
 	"scripts": {

package/src/features/addresses/components/DeleteRecipientAddressDrawer/DeleteRecipientAddressDrawer.tsx

@@ -73,7 +73,7 @@ export const DeleteRecipientAddressDrawer = ({
     <BasicDrawer data-fs-bp-remove-address-drawer close={close} {...props}>
       <BasicDrawer.Heading title="Delete recipient" onClose={close} />
       <BasicDrawer.Body>
-        <div>
+        <div data-fs-bp-remove-recipient-form>
           <p>
             Permanently delete{" "}
             <span data-fs-bp-drawer-label>{recipientAddressName}</span>?

package/src/features/shared/utils/constants.ts

@@ -4,7 +4,7 @@ export const API_URL = (checkoutUrl: string, operation?: string) =>
   `${checkoutUrl}/_v/store-front/${operation}`;
 // DEV URL - CHANGE BEFORE MERGE
 // export const API_URL = (checkoutUrl?: string, operation?: string) =>
-// `https://evertonroles--b2bfaststoredev.myvtex.com/_v/store-front/${operation}`;
+//   `https://everton--b2bfaststoredev.myvtex.com/_v/store-front/${operation}`;
 
 export const DEBOUNCE_TIMEOUT = 500;