Saleor 1740 tests for draft orders (#1002)

* first test for draft orders

* tests for channels in draft orders

* tests for channels in draft orders

* tests for channels in draft orders

* test for moving draft order to orders

* test for orders

* test for orders

* tests for draft orders

* tests for draft orders

* tests for draft orders

* tests for draft orders

* test for moving draft order

cypress/apiRequests/Customer.js

@@ -38,7 +38,7 @@ export function createCustomer(email, customerName, address, isActive = false) {
   return cy.sendRequestWithQuery(mutation);
 }
 
-export function deleteCustomers(startsWith) {
+export function deleteCustomersStartsWith(startsWith) {
   getCustomers(startsWith).then(resp => {
     if (resp.body.data.customers) {
       const customers = resp.body.data.customers.edges;

cypress/elements/orders/draft-order-selectors.js

@@ -1,3 +1,10 @@
 export const DRAFT_ORDER_SELECTORS = {
-  addProducts: "[data-test-id='add-products-button']"
+  addProducts: "[data-test-id='add-products-button']",
+  salesChannel: "[data-test-id='sales-channel']",
+  editCustomerButton: "[data-test-id='edit-customer']",
+  selectCustomer: "[data-test-id='select-customer']",
+  selectCustomerOption: "[data-test-type='option']",
+  addShippingCarrierLink: "[data-test-id='add-shipping-carrier']",
+  finalizeButton: "[data-test='button-bar-confirm']",
+  pageHeader: "[data-test-id='page-header']"
 };

cypress/elements/orders/draft-orders-list-selectors.js

@@ -0,0 +1,3 @@
+export const DRAFT_ORDERS_LIST_SELECTORS = {
+  draftOrderRow: "[data-test-id='draft-order-table-row']"
+};

cypress/elements/orders/orders-selectors.js

@@ -1,4 +1,5 @@
 export const ORDERS_SELECTORS = {
   orders: "[data-test='submenu-item-label'][data-test-id='orders']",
-  createOrder: "[data-test-id='create-order-button']"
+  createOrder: "[data-test-id='create-order-button']",
+  orderRow: "[data-test-id='order-table-row']"
 };

cypress/elements/shipping/select-shipping-method-form.js

@@ -0,0 +1,5 @@
+export const SELECT_SHIPPING_METHOD_FORM = {
+  selectShippingMethod: "[id='mui-component-select-shippingMethod']",
+  shippingMethodOption: "[data-test='selectFieldOption']",
+  submitButton: "[type='submit']"
+};

cypress/integration/homePage.js

@@ -1,6 +1,9 @@
 import faker from "faker";
 
-import { createCustomer, deleteCustomers } from "../apiRequests/Customer";
+import {
+  createCustomer,
+  deleteCustomersStartsWith
+} from "../apiRequests/Customer";
 import { HOMEPAGE_SELECTORS } from "../elements/homePage/homePage-selectors";
 import { changeChannel } from "../steps/homePageSteps";
 import { urlList } from "../url/urlList";
@@ -34,7 +37,7 @@ describe("Homepage analytics", () => {
   before(() => {
     cy.clearSessionData().loginUserViaRequest();
     productsUtils.deleteProductsStartsWith(startsWith);
-    deleteCustomers(startsWith);
+    deleteCustomersStartsWith(startsWith);
     shippingUtils.deleteShippingStartsWith(startsWith);
     let addresses;
 

cypress/integration/orders/channelsInDraftOrders.js

@@ -0,0 +1,97 @@
+// <reference types="cypress" />
+import faker from "faker";
+
+import { CHANNEL_FORM_SELECTORS } from "../../elements/channels/channel-form-selectors";
+import { HEADER_SELECTORS } from "../../elements/header/header-selectors";
+import { DRAFT_ORDER_SELECTORS } from "../../elements/orders/draft-order-selectors";
+import { ORDERS_SELECTORS } from "../../elements/orders/orders-selectors";
+import {
+  selectChannelInHeader,
+  selectChannelInPicker
+} from "../../steps/channelsSteps";
+import { urlList } from "../../url/urlList";
+import * as channelsUtils from "../../utils/channelsUtils";
+
+describe("Channels in draft orders", () => {
+  const startsWith = "Cy-";
+  const randomName = startsWith + faker.random.number();
+
+  let defaultChannel;
+  let otherChannel;
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    channelsUtils.deleteChannelsStartsWith(startsWith);
+    channelsUtils
+      .getDefaultChannel()
+      .then(channel => {
+        defaultChannel = channel;
+        channelsUtils.createChannel({ name: randomName });
+      })
+      .then(channelResp => {
+        otherChannel = channelResp;
+      });
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it("Draft order channel should be taken from global channel picker", () => {
+    let channelName;
+    cy.visit(urlList.homePage);
+    cy.getTextFromElement(HEADER_SELECTORS.channelSelect).then(
+      channelInHeader => {
+        channelName = channelInHeader;
+      }
+    );
+    cy.visit(urlList.orders)
+      .get(ORDERS_SELECTORS.createOrder)
+      .click();
+    cy.getTextFromElement(CHANNEL_FORM_SELECTORS.channelSelect).then(
+      selectedChannelName => {
+        expect(channelName).to.contains(selectedChannelName);
+      }
+    );
+    cy.get(CHANNEL_FORM_SELECTORS.confirmButton).click();
+    cy.getTextFromElement(DRAFT_ORDER_SELECTORS.salesChannel).then(
+      channelNameInDraftOrder => {
+        expect(channelName).to.contains(channelNameInDraftOrder);
+      }
+    );
+  });
+  it("Draft order channel should be taken from global channel picker when changed", () => {
+    cy.visit(urlList.homePage);
+    selectChannelInHeader(otherChannel.name);
+    cy.visit(urlList.orders);
+    cy.get(ORDERS_SELECTORS.createOrder).click();
+    cy.getTextFromElement(CHANNEL_FORM_SELECTORS.channelSelect).then(
+      channelInSelect => {
+        expect(channelInSelect).to.be.eq(otherChannel.name);
+      }
+    );
+    cy.get(CHANNEL_FORM_SELECTORS.confirmButton).click();
+    cy.getTextFromElement(DRAFT_ORDER_SELECTORS.salesChannel).then(
+      channelInDraftOrder => {
+        expect(channelInDraftOrder).to.be.eq(otherChannel.name);
+      }
+    );
+  });
+  it("should create draft order with chosen channel", () => {
+    cy.visit(urlList.homePage);
+    selectChannelInHeader(defaultChannel.name);
+    cy.visit(urlList.orders);
+    cy.get(ORDERS_SELECTORS.createOrder).click();
+    cy.getTextFromElement(CHANNEL_FORM_SELECTORS.channelSelect).then(
+      channelInSelect => {
+        expect(channelInSelect).to.be.eq(defaultChannel.name);
+      }
+    );
+    selectChannelInPicker(otherChannel.name);
+    cy.getTextFromElement(DRAFT_ORDER_SELECTORS.salesChannel).then(
+      channelInDraftOrder => {
+        expect(channelInDraftOrder).to.be.eq(otherChannel.name);
+      }
+    );
+  });
+});

cypress/integration/orders/draftOrders.js

@@ -0,0 +1,101 @@
+// <reference types="cypress" />
+import faker from "faker";
+
+import {
+  createCustomer,
+  deleteCustomersStartsWith
+} from "../../apiRequests/Customer";
+import { DRAFT_ORDERS_LIST_SELECTORS } from "../../elements/orders/draft-orders-list-selectors";
+import { ORDERS_SELECTORS } from "../../elements/orders/orders-selectors";
+import { selectChannelInPicker } from "../../steps/channelsSteps";
+import { finalizeDraftOrder } from "../../steps/draftOrderSteps";
+import { urlList } from "../../url/urlList";
+import { getDefaultChannel } from "../../utils/channelsUtils";
+import * as productsUtils from "../../utils/productsUtils";
+import {
+  createShipping,
+  deleteShippingStartsWith
+} from "../../utils/shippingUtils";
+
+describe("Draft orders", () => {
+  const startsWith = "Cy-";
+  const randomName = startsWith + faker.random.number();
+
+  let defaultChannel;
+  let warehouse;
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    deleteCustomersStartsWith(startsWith);
+    deleteShippingStartsWith(startsWith);
+    productsUtils.deleteProductsStartsWith(startsWith);
+
+    getDefaultChannel()
+      .then(channel => {
+        defaultChannel = channel;
+      })
+      .then(() => {
+        cy.fixture("addresses");
+      })
+      .then(addresses => {
+        createCustomer(
+          `${randomName}@example.com`,
+          randomName,
+          addresses.plAddress,
+          true
+        );
+        createShipping({
+          channelId: defaultChannel.id,
+          name: randomName,
+          address: addresses.plAddress
+        });
+      })
+      .then(({ warehouse: warehouseResp }) => {
+        warehouse = warehouseResp;
+        productsUtils.createTypeAttributeAndCategoryForProduct(randomName);
+      })
+      .then(
+        ({
+          productType: productTypeResp,
+          attribute: attributeResp,
+          category: categoryResp
+        }) => {
+          productsUtils.createProductInChannel({
+            name: randomName,
+            channelId: defaultChannel.id,
+            warehouseId: warehouse.id,
+            productTypeId: productTypeResp.id,
+            attributeId: attributeResp.id,
+            categoryId: categoryResp.id
+          });
+        }
+      );
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it("should move draft order to orders", () => {
+    cy.visit(urlList.orders)
+      .get(ORDERS_SELECTORS.createOrder)
+      .click();
+    selectChannelInPicker(defaultChannel.name);
+    finalizeDraftOrder(randomName).then(draftOrderNumber => {
+      cy.visit(urlList.orders);
+      cy.contains(ORDERS_SELECTORS.orderRow, draftOrderNumber).should(
+        $order => {
+          /* eslint-disable no-unused-expressions */
+          expect($order).to.be.visible;
+        }
+      );
+      cy.visit(urlList.draftOrders);
+      cy.contains(
+        DRAFT_ORDERS_LIST_SELECTORS.draftOrderRow,
+        draftOrderNumber
+      ).should($draftOrder => {
+        expect($draftOrder).to.not.exist;
+      });
+    });
+  });
+});

cypress/steps/channelsSteps.js

@@ -1,5 +1,7 @@
 import { ADD_CHANNEL_FORM_SELECTORS } from "../elements/channels/add-channel-form-selectors";
+import { CHANNEL_FORM_SELECTORS } from "../elements/channels/channel-form-selectors";
 import { CHANNELS_SELECTORS } from "../elements/channels/channels-selectors";
+import { HEADER_SELECTORS } from "../elements/header/header-selectors";
 
 export function createChannelByView(name, currency, slug = name) {
   cy.get(CHANNELS_SELECTORS.createChannelButton)
@@ -20,3 +22,17 @@ export function createChannelByView(name, currency, slug = name) {
   });
   cy.get(ADD_CHANNEL_FORM_SELECTORS.saveButton).click();
 }
+export function selectChannelInPicker(channelName) {
+  cy.get(CHANNEL_FORM_SELECTORS.channelSelect).click();
+  cy.contains(CHANNEL_FORM_SELECTORS.channelOption, channelName)
+    .click()
+    .get(CHANNEL_FORM_SELECTORS.confirmButton)
+    .click();
+}
+export function selectChannelInHeader(channelName) {
+  cy.get(HEADER_SELECTORS.channelSelect)
+    .click()
+    .get(HEADER_SELECTORS.channelSelectList)
+    .contains(channelName)
+    .click();
+}

cypress/steps/draftOrderSteps.js

@@ -0,0 +1,39 @@
+import { ASSIGN_PRODUCTS_SELECTORS } from "../elements/catalog/products/assign-products-selectors";
+import { DRAFT_ORDER_SELECTORS } from "../elements/orders/draft-order-selectors";
+import { SELECT_SHIPPING_METHOD_FORM } from "../elements/shipping/select-shipping-method-form";
+
+export function finalizeDraftOrder(name) {
+  cy.get(DRAFT_ORDER_SELECTORS.addProducts)
+    .click()
+    .get(ASSIGN_PRODUCTS_SELECTORS.searchInput)
+    .type(name);
+  cy.contains(ASSIGN_PRODUCTS_SELECTORS.tableRow, name)
+    .find(ASSIGN_PRODUCTS_SELECTORS.checkbox)
+    .click()
+    .get(ASSIGN_PRODUCTS_SELECTORS.submitButton)
+    .click()
+    .get(DRAFT_ORDER_SELECTORS.editCustomerButton)
+    .click()
+    .get(DRAFT_ORDER_SELECTORS.selectCustomer)
+    .type(name);
+  cy.contains(DRAFT_ORDER_SELECTORS.selectCustomerOption, name)
+    .click()
+    .get(DRAFT_ORDER_SELECTORS.addShippingCarrierLink)
+    .click()
+    .get(SELECT_SHIPPING_METHOD_FORM.selectShippingMethod)
+    .click()
+    .get(SELECT_SHIPPING_METHOD_FORM.shippingMethodOption)
+    .first()
+    .click();
+  cy.addAliasToGraphRequest("OrderShippingMethodUpdate")
+    .get(SELECT_SHIPPING_METHOD_FORM.submitButton)
+    .click();
+  cy.wait("@OrderShippingMethodUpdate");
+  cy.getTextFromElement(DRAFT_ORDER_SELECTORS.pageHeader).as(
+    "draftOrderNumber"
+  );
+  cy.addAliasToGraphRequest("OrderDraftFinalize");
+  cy.get(DRAFT_ORDER_SELECTORS.finalizeButton).click();
+  cy.wait("@OrderDraftFinalize");
+  return cy.get("@draftOrderNumber");
+}

cypress/support/elements/index.js

@@ -0,0 +1,3 @@
+Cypress.Commands.add("getTextFromElement", element =>
+  cy.get(element).invoke("text")
+);

cypress/support/index.js

@@ -1,6 +1,7 @@
 import "./user";
 import "./softAssertions";
 import "./deleteElement/index.js";
+import "./elements/index";
 
 import { urlList } from "../url/urlList";
 

cypress/url/urlList.js

@@ -2,6 +2,7 @@ export const urlList = {
   apiUri: Cypress.env("API_URI"),
   channels: "channels/",
   configuration: "configuration/",
+  draftOrders: "orders/drafts/",
   homePage: "/",
   orders: "orders/",
   products: "products/",

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -51,15 +51,17 @@ interface ExtendedPageHeaderProps {
   className?: string;
   inline?: boolean;
   title?: React.ReactNode;
+  testId?: string;
 }
 
 const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
-  const { children, className, inline, title } = props;
+  const { children, className, inline, title, testId } = props;
 
   const classes = useStyles(props);
 
   return (
     <div
+      data-test-id={testId}
       className={classNames(classes.root, className, {
         [classes.block]: !inline
       })}

src/components/PageHeader/PageHeader.tsx

@@ -38,6 +38,7 @@ const PageHeader: React.FC<PageHeaderProps> = props => {
 
   return (
     <ExtendedPageHeader
+      testId="page-header"
       className={className}
       inline={inline}
       title={

src/orders/components/DraftOrderChannelSectionCard/DraftOrderChannelSectionCard.tsx

@@ -21,7 +21,7 @@ export const DraftOrderChannelSectionCard: React.FC<DraftOrderChannelSectionCard
           description: "section header"
         })}
       />
-      <CardContent>
+      <CardContent data-test-id="sales-channel">
         {!channelName ? <Skeleton /> : <Typography>{channelName}</Typography>}
       </CardContent>
     </Card>

src/orders/components/OrderCustomer/OrderCustomer.tsx

@@ -109,6 +109,7 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
               requiredPermissions={[PermissionEnum.MANAGE_USERS]}
             >
               <Button
+                data-test-id="edit-customer"
                 color="primary"
                 variant="text"
                 disabled={!onCustomerEdit}
@@ -146,6 +147,7 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
               );
               return (
                 <SingleAutocompleteSelectField
+                  data-test-id="select-customer"
                   allowCustomValues={true}
                   choices={userChoices}
                   displayValue={userDisplayName}

src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx

@@ -171,7 +171,14 @@ const OrderDraftDetailsSummary: React.FC<OrderDraftDetailsSummaryProps> = props
     const shippingCarrierBase = intl.formatMessage(messages.addShippingCarrier);
 
     if (!!shippingAddress) {
-      return <Link onClick={onShippingMethodEdit}>{shippingCarrierBase}</Link>;
+      return (
+        <Link
+          onClick={onShippingMethodEdit}
+          data-test-id="add-shipping-carrier"
+        >
+          {shippingCarrierBase}
+        </Link>
+      );
     }
 
     const addCustomerInfo = intl.formatMessage(messages.addCustomerInfo);

src/orders/components/OrderDraftList/OrderDraftList.tsx

@@ -170,6 +170,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
 
             return (
               <TableRow
+                data-test-id="draft-order-table-row"
                 hover={!!order}
                 className={!!order ? classes.link : undefined}
                 onClick={order ? onRowClick(order.id) : undefined}

src/orders/components/OrderList/OrderList.tsx

@@ -191,6 +191,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
           orderList,
           order => (
             <TableRow
+              data-test-id="order-table-row"
               hover={!!order}
               className={!!order ? classes.link : undefined}
               onClick={order ? onRowClick(order.id) : undefined}