Saleor 5021 add tests for customers (#1688) (#1733)

* customers

* all tests for customers

* change data-test attribute name

* add empty lines

cypress/elements/customer/customer-details.js

@@ -1,6 +1,15 @@
 export const CUSTOMER_DETAILS = {
-  nameInput: '[name="customerFirstName"]',
+  nameInput: '[name="firstName"]',
-  lastNameInput: '[name="customerLastName"]',
+  customerAddressNameInput: '[name="customerFirstName"]',
+  lastNameInput: '[name="lastName"]',
+  customerAddressLastNameInput: '[name="customerLastName"]',
   emailInput: '[name="email"]',
-  noteInput: '[name="note"]'
+  noteInput: '[name="note"]',
+  activeCheckbox: '[name="isActive"]',
+  menageAddressesButton: '[data-test-id="manageAddresses"]',
+  addAddressButton: '[data-test-id="add-address"]',
+  deleteAddressMenuItem: '[data-test-id="delete-address"]',
+  setAddressAsDefaultShipping: '[data-test-id="set-default-shipping-address"]',
+  setAddressAsDefaultBilling: '[data-test-id="set-default-billing-address"]',
+  editAddressMenuitem: '[data-test-id="edit-address"]'
 };

cypress/elements/shared/button-selectors.js

@@ -1,6 +1,6 @@
 export const BUTTON_SELECTORS = {
   back: '[data-test-id="app-header-back-button"]',
-  submit: '[data-test="submit"]',
+  submit: '[data-test="submit"], [data-test-id="submit"]',
   confirm: '[data-test="button-bar-confirm"]',
   goBackButton: "[data-test-id='app-header-back-button']",
   checkbox: "[type='checkbox']",

cypress/fixtures/addresses.json

@@ -30,13 +30,13 @@
   "secondUsAddress": {
     "firstName": "test",
     "lastName": "test",
-    "companyName": "Test2",
+    "companyName": "Test1",
-    "streetAddress1": "Antonio Ridge",
+    "streetAddress1": "Rock Quarry Rd",
-    "streetAddress2": "34930",
+    "streetAddress2": "345",
-    "city": "North Patrickfort",
+    "city": "Afton",
-    "postalCode": "70958",
+    "postalCode": "37745",
     "country": "US",
-    "countryArea": "LA",
+    "countryArea": "TN",
     "phone": "+12025550169",
     "currency": "USD",
     "countryFullName": "United States of America"

cypress/integration/configuration/customer.js

@@ -7,39 +7,52 @@ import { CUSTOMER_DETAILS } from "../../elements/customer/customer-details";
 import { CUSTOMERS_LIST } from "../../elements/customer/customers-list";
 import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
 import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
-import { urlList } from "../../fixtures/urlList";
+import { customerDetailsUrl, urlList } from "../../fixtures/urlList";
 import { ONE_PERMISSION_USERS } from "../../fixtures/users";
-import { getCustomer } from "../../support/api/requests/Customer";
+import {
+  addressCreate,
+  createCustomer,
+  deleteCustomersStartsWith,
+  getCustomer
+} from "../../support/api/requests/Customer";
 import filterTests from "../../support/filterTests";
 
 filterTests({ definedTags: ["all"] }, () => {
   describe("Tests for customer", () => {
-    const channelStartsWith = `Customers`;
+    const startsWith = `Customers`;
+    let address;
+    let secondAddress;
+
+    before(() => {
+      cy.clearSessionData().loginUserViaRequest();
+      deleteCustomersStartsWith(startsWith);
+      cy.fixture("addresses").then(({ usAddress, secondUsAddress }) => {
+        address = usAddress;
+        secondAddress = secondUsAddress;
+      });
+    });
+
+    beforeEach(() => {
+      cy.clearSessionData().loginUserViaRequest();
+    });
 
     it("should create customer", () => {
-      const randomName = `${channelStartsWith}${faker.datatype.number()}`;
+      const randomName = `${startsWith}${faker.datatype.number()}`;
       const email = `${randomName}@example.com`;
       const note = faker.lorem.paragraph();
-      let address;
 
-      cy.clearSessionData()
+      cy.visit(urlList.customers)
-        .loginUserViaRequest("auth", ONE_PERMISSION_USERS.user)
-        .visit(urlList.customers)
         .get(CUSTOMERS_LIST.createCustomerButton)
         .click()
         .get(SHARED_ELEMENTS.progressBar)
         .should("not.be.visible")
-        .get(CUSTOMER_DETAILS.nameInput)
+        .get(CUSTOMER_DETAILS.customerAddressNameInput)
         .type(randomName)
-        .get(CUSTOMER_DETAILS.lastNameInput)
+        .get(CUSTOMER_DETAILS.customerAddressLastNameInput)
         .type(randomName)
         .get(CUSTOMER_DETAILS.emailInput)
         .type(email)
-        .fixture("addresses")
+        .fillUpAddressForm(address)
-        .then(({ usAddress }) => {
-          address = usAddress;
-          cy.fillUpAddressForm(address);
-        })
         .get(CUSTOMER_DETAILS.noteInput)
         .type(note)
         .addAliasToGraphRequest("CreateCustomer")
@@ -63,5 +76,186 @@ filterTests({ definedTags: ["all"] }, () => {
           cy.expectCorrectFullAddress(customer.addresses[0], address);
         });
     });
+
+    it("should add address to customer", () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const email = `${randomName}@example.com`;
+
+      createCustomer(email, randomName).then(({ user }) => {
+        cy.visit(customerDetailsUrl(user.id))
+          .get(CUSTOMER_DETAILS.menageAddressesButton)
+          .click()
+          .get(CUSTOMER_DETAILS.addAddressButton)
+          .click()
+          .addAliasToGraphRequest("CreateCustomerAddress")
+          .fillUpAddressFormAndSubmit(secondAddress)
+          .waitForRequestAndCheckIfNoErrors("@CreateCustomerAddress");
+        getCustomer(user.id).then(({ addresses }) => {
+          expect(addresses).to.have.length(1);
+          cy.expectCorrectFullAddress(addresses[0], secondAddress);
+        });
+      });
+    });
+
+    it("should remove address from customer", () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const email = `${randomName}@example.com`;
+
+      createCustomer(email, randomName, address).then(({ user }) => {
+        cy.visit(customerDetailsUrl(user.id))
+          .get(CUSTOMER_DETAILS.menageAddressesButton)
+          .click()
+          .waitForProgressBarToNotExist()
+          .get(BUTTON_SELECTORS.showMoreButton)
+          .should("be.enabled")
+          .first()
+          .click()
+          .get(CUSTOMER_DETAILS.deleteAddressMenuItem)
+          .click()
+          .addAliasToGraphRequest("RemoveCustomerAddress")
+          .get(BUTTON_SELECTORS.submit)
+          .click()
+          .waitForRequestAndCheckIfNoErrors("@RemoveCustomerAddress");
+        getCustomer(user.id).then(({ addresses }) => {
+          expect(addresses).to.have.length(1);
+        });
+      });
+    });
+
+    it("should set address as default", () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const email = `${randomName}@example.com`;
+      let user;
+
+      createCustomer(email, randomName)
+        .then(({ user: userResp }) => {
+          user = userResp;
+          addressCreate(user.id, address);
+        })
+        .then(() => {
+          cy.visit(customerDetailsUrl(user.id))
+            .get(CUSTOMER_DETAILS.menageAddressesButton)
+            .click()
+            .waitForProgressBarToNotExist()
+            .get(BUTTON_SELECTORS.showMoreButton)
+            .should("be.enabled")
+            .click()
+            .addAliasToGraphRequest("SetCustomerDefaultAddress")
+            .get(CUSTOMER_DETAILS.setAddressAsDefaultShipping)
+            .click()
+            .wait("@SetCustomerDefaultAddress");
+          getCustomer(user.id);
+        })
+        .then(({ addresses }) => {
+          chai.softExpect(addresses[0].isDefaultShippingAddress).to.eq(true);
+          cy.get(BUTTON_SELECTORS.showMoreButton)
+            .should("be.enabled")
+            .click()
+            .addAliasToGraphRequest("SetCustomerDefaultAddress")
+            .get(CUSTOMER_DETAILS.setAddressAsDefaultBilling)
+            .click()
+            .wait("@SetCustomerDefaultAddress");
+          getCustomer(user.id);
+        })
+        .then(({ addresses }) => {
+          expect(addresses[0].isDefaultBillingAddress).to.be.true;
+        });
+    });
+
+    it("should update address", () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const email = `${randomName}@example.com`;
+
+      createCustomer(email, randomName, address).then(({ user }) => {
+        cy.visit(customerDetailsUrl(user.id))
+          .get(CUSTOMER_DETAILS.menageAddressesButton)
+          .click()
+          .get(BUTTON_SELECTORS.showMoreButton)
+          .should("be.enabled")
+          .first()
+          .click()
+          .get(CUSTOMER_DETAILS.editAddressMenuitem)
+          .click()
+          .addAliasToGraphRequest("UpdateCustomerAddress")
+          .fillUpAddressFormAndSubmit(secondAddress)
+          .waitForRequestAndCheckIfNoErrors("@UpdateCustomerAddress");
+        getCustomer(user.id).then(({ addresses }) => {
+          expect(addresses).to.have.length(2);
+          const addedAddress = addresses.find(
+            element =>
+              element.city.toUpperCase() === secondAddress.city.toUpperCase()
+          );
+          cy.expectCorrectFullAddress(addedAddress, secondAddress);
+        });
+      });
+    });
+
+    it("should delete customer", () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const email = `${randomName}@example.com`;
+
+      createCustomer(email, randomName, address).then(({ user }) => {
+        cy.visit(customerDetailsUrl(user.id))
+          .get(BUTTON_SELECTORS.deleteButton)
+          .click()
+          .addAliasToGraphRequest("RemoveCustomer")
+          .get(BUTTON_SELECTORS.submit)
+          .click()
+          .wait("@RemoveCustomer");
+        getCustomer(user.id).should("be.null");
+      });
+    });
+
+    it("should deactivate customer", () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const email = `${randomName}@example.com`;
+
+      createCustomer(email, randomName, address, true).then(({ user }) => {
+        cy.visit(customerDetailsUrl(user.id))
+          .get(CUSTOMER_DETAILS.activeCheckbox)
+          .click()
+          .addAliasToGraphRequest("UpdateCustomer")
+          .get(BUTTON_SELECTORS.confirm)
+          .click()
+          .wait("@UpdateCustomer");
+        getCustomer(user.id).then(({ isActive }) => {
+          expect(isActive).to.be.false;
+        });
+      });
+    });
+
+    it("should update customer", () => {
+      const randomName = `${startsWith}${faker.datatype.number()}`;
+      const updatedName = `${startsWith}UpdatedName`;
+      const email = `${randomName}@example.com`;
+
+      createCustomer(email, randomName, address, true).then(({ user }) => {
+        cy.visit(customerDetailsUrl(user.id))
+          .get(CUSTOMER_DETAILS.nameInput)
+          .clearAndType(updatedName)
+          .get(CUSTOMER_DETAILS.lastNameInput)
+          .clearAndType(updatedName)
+          .get(CUSTOMER_DETAILS.noteInput)
+          .clearAndType(updatedName)
+          .get(CUSTOMER_DETAILS.emailInput)
+          .clearAndType(`${updatedName}@example.com`)
+          .addAliasToGraphRequest("UpdateCustomer")
+          .get(BUTTON_SELECTORS.confirm)
+          .click()
+          .wait("@UpdateCustomer");
+        getCustomer(user.id).then(user => {
+          chai
+            .softExpect(user.firstName, "Expect correct first name")
+            .to.eq(updatedName);
+          chai
+            .softExpect(user.lastName, "Expect correct last name")
+            .to.eq(updatedName);
+          chai
+            .softExpect(user.email, "Expect correct email")
+            .to.eq(`${updatedName}@example.com`);
+          chai.softExpect(user.note, "Expect correct note").to.eq(updatedName);
+        });
+      });
+    });
   });
 });

cypress/support/api/requests/Customer.js

@@ -1,6 +1,15 @@
-import { getDefaultAddress } from "./utils/Utils";
+import {
+  getDefaultAddress,
+  getDefaultAddressWithoutType,
+  getValueWithDefault
+} from "./utils/Utils";
 
 export function createCustomer(email, customerName, address, isActive = false) {
+  const addressesLines = getValueWithDefault(
+    address,
+    `${getDefaultAddress(address, "defaultBillingAddress")}
+    ${getDefaultAddress(address, "defaultShippingAddress")}`
+  );
   const mutation = `
   mutation{
     customerCreate(input:{
@@ -8,8 +17,7 @@ export function createCustomer(email, customerName, address, isActive = false) {
       lastName: "${customerName}"
       email: "${email}"
       isActive: ${isActive}
-      ${getDefaultAddress(address, "defaultBillingAddress")}
+      ${addressesLines}
-      ${getDefaultAddress(address, "defaultShippingAddress")}
     }){
       user{
         id
@@ -21,7 +29,7 @@ export function createCustomer(email, customerName, address, isActive = false) {
       }
     }
   }`;
-  return cy.sendRequestWithQuery(mutation);
+  return cy.sendRequestWithQuery(mutation).its("body.data.customerCreate");
 }
 
 export function deleteCustomersStartsWith(startsWith) {
@@ -143,8 +151,24 @@ export function getCustomer(customerId) {
         }
         countryArea
         phone
+        isDefaultShippingAddress
+        isDefaultBillingAddress
       }
     }
   }`;
   return cy.sendRequestWithQuery(query).its("body.data.user");
 }
+
+export function addressCreate(userId, address) {
+  const mutation = `mutation{
+    addressCreate(userId:"${userId}" input:{
+      ${getDefaultAddressWithoutType(address)}
+    }){
+      errors{
+        field
+        message
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(mutation);
+}

cypress/support/api/requests/utils/Utils.js

@@ -27,6 +27,22 @@ export function getVariantsLines(variantsList, quantity) {
   );
 }
 
+export function getDefaultAddressWithoutType(address, withName = true) {
+  const defaultAddress = `city: "${address.city}" 
+  country: ${address.country}
+  countryArea: "${address.countryArea}"
+  phone: "${address.phone}"
+  postalCode: "${address.postalCode}"
+  streetAddress1: "${address.streetAddress1}"
+  streetAddress2: "${address.streetAddress2}"`;
+  if (withName) {
+    defaultAddress.concat(`firstName: "Test"
+  lastName: "Test"
+  companyName: "${address.companyName}"`);
+  }
+  return defaultAddress;
+}
+
 export function getVariantsIdsLines(variantsList) {
   return variantsList.map(variant => `${variant.id}`);
 }

cypress/support/customCommands/softAssertions/index.js

@@ -98,8 +98,8 @@ Cypress.Commands.add(
   "expectCorrectBasicAddress",
   (responseAddress, expectedAddress) => {
     chai
-      .softExpect(responseAddress)
+      .softExpect(responseAddress.city.toUpperCase())
-      .to.have.property("city", expectedAddress.city.toUpperCase());
+      .to.eq(expectedAddress.city.toUpperCase());
     chai
       .softExpect(responseAddress)
       .to.have.property("countryArea", expectedAddress.countryArea);

src/customers/components/CustomerAddress/CustomerAddress.tsx

@@ -106,19 +106,23 @@ const CustomerAddress: React.FC<CustomerAddressProps> = props => {
             menuItems={[
               {
                 label: intl.formatMessage(messages.setDefaultShipping),
-                onSelect: () => onSetAsDefault(AddressTypeEnum.SHIPPING)
+                onSelect: () => onSetAsDefault(AddressTypeEnum.SHIPPING),
+                testId: "set-default-shipping-address"
               },
               {
                 label: intl.formatMessage(messages.setDefaultBilling),
-                onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING)
+                onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING),
+                testId: "set-default-billing-address"
               },
               {
                 label: intl.formatMessage(messages.editAddress),
-                onSelect: () => onEdit()
+                onSelect: () => onEdit(),
+                testId: "edit-address"
               },
               {
                 label: intl.formatMessage(messages.deleteAddress),
-                onSelect: () => onRemove()
+                onSelect: () => onRemove(),
+                testId: "delete-address"
               }
             ]}
           />

src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx

@@ -135,6 +135,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
                   color="primary"
                   variant="contained"
                   type="submit"
+                  data-test-id="submit"
                 >
                   <FormattedMessage {...buttonMessages.save} />
                 </ConfirmButton>

src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx

@@ -110,7 +110,12 @@ const CustomerAddressListPage: React.FC<CustomerAddressListPageProps> = props =>
               : intl.formatMessage(messages.noNameToShow)
           }
         >
-          <Button color="primary" variant="contained" onClick={onAdd}>
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={onAdd}
+            data-test-id="add-address"
+          >
             {intl.formatMessage(messages.addAddress)}
           </Button>
         </PageHeader>

src/customers/components/CustomerAddresses/CustomerAddresses.tsx

@@ -41,6 +41,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = props => {
         })}
         toolbar={
           <Button
+            data-test-id="manageAddresses"
             color="primary"
             disabled={disabled}
             variant="text"

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -63615,6 +63615,7 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="add-address"
             tabindex="0"
             type="button"
           >
@@ -63820,6 +63821,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="add-address"
             tabindex="0"
             type="button"
           >
@@ -66645,6 +66647,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >
@@ -67336,6 +67339,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >
@@ -68082,6 +68086,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >
@@ -68728,6 +68733,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  data-test-id="manageAddresses"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -69388,6 +69394,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >
@@ -70073,6 +70080,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >
@@ -70758,6 +70766,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >
@@ -71421,6 +71430,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >
@@ -72112,6 +72122,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="manageAddresses"
                   tabindex="0"
                   type="button"
                 >