Saleor 1745 tests for discounts sales (#998)

* test plan for sales - discounts

* create sale

* passing tests for sales

* tests for collections

* remove eslint diable in sales tests

* remove eslint-disable

* move shared selectors

* move shared selectors

* fix indentation in requests

* add formatDate function

* remove moment

* remove moment

cypress/apiRequests/Channels.js

@@ -28,8 +28,7 @@ export function getChannels() {
       slug
       currencyCode
     }
-    }
-    `;
+  }`;
   return cy.sendRequestWithQuery(getChannelsInfoQuery);
 }
 

cypress/apiRequests/Customer.js

@@ -34,8 +34,7 @@ export function createCustomer(email, customerName, address, isActive = false) {
         message
       }
     }
-    }
-    `;
+  }`;
   return cy.sendRequestWithQuery(mutation);
 }
 
@@ -76,7 +75,6 @@ export function getCustomers(startsWith) {
         }
       }
     }
-          }
-          `;
+  }`;
   return cy.sendRequestWithQuery(query);
 }

cypress/apiRequests/Order.js

@@ -24,8 +24,7 @@ export function addProductToOrder(orderId, variantId, quantity = 1) {
 }
 
 export function createDraftOrder(customerId, shippingMethodId, channelId) {
-  const mutation = `
-        mutation{
+  const mutation = `mutation{
     draftOrderCreate(input:{
       user:"${customerId}"
       shippingMethod:"${shippingMethodId}"
@@ -38,8 +37,7 @@ export function createDraftOrder(customerId, shippingMethodId, channelId) {
         id
       }
     }
-          }
-        `;
+  }`;
   return cy.sendRequestWithQuery(mutation);
 }
 export function completeOrder(orderId) {

cypress/apiRequests/Product.js

@@ -17,8 +17,7 @@ export function getFirstProducts(first, search) {
           }
         }
       }
-            }
-          `;
+    }`;
   return cy
     .sendRequestWithQuery(query)
     .then(resp => resp.body.data.products.edges);
@@ -61,7 +60,7 @@ export function updateChannelPriceInVariant(variantId, channelId) {
         message
       }
     }
-} `;
+  } `;
   return cy.sendRequestWithQuery(mutation);
 }
 export function createProduct(attributeId, name, productType, category) {
@@ -76,6 +75,7 @@ export function createProduct(attributeId, name, productType, category) {
     }){
       product{
         id
+        name
       }
       productErrors{
         field
@@ -149,7 +149,7 @@ export function createTypeProduct(name, attributeId, slug = name) {
         id
       }
     }
-} `;
+  } `;
   return cy.sendRequestWithQuery(mutation);
 }
 
@@ -161,7 +161,7 @@ export function deleteProduct(productId) {
         message
       }
     }
-} `;
+  } `;
   return cy.sendRequestWithQuery(mutation);
 }
 

cypress/apiRequests/Sales.js

@@ -0,0 +1,35 @@
+import { getValueWithDefault } from "./utils/Utils";
+
+export function getSales(first, searchQuery) {
+  const filter = getValueWithDefault(
+    searchQuery,
+    `, filter:{
+        search:"${searchQuery}"
+      }`
+  );
+  const query = `query{
+    sales(first:
+    ${first} ${filter}){
+      edges{
+        node{
+          id
+          name
+        }
+      }
+    }
+  }`;
+  return cy
+    .sendRequestWithQuery(query)
+    .then(resp => resp.body.data.sales.edges);
+}
+export function deleteSale(saleId) {
+  const mutation = `mutation{
+    saleDelete(id:"${saleId}"){
+      discountErrors{
+        field
+        message
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(mutation);
+}

cypress/apiRequests/ShippingMethod.js

@@ -1,6 +1,5 @@
 export function createShippingRate(name, shippingZone) {
-  const mutation = `
-          mutation{
+  const mutation = `mutation{
     shippingPriceCreate(input:{
       name: "${name}"
       shippingZone: "${shippingZone}"
@@ -10,14 +9,12 @@ export function createShippingRate(name, shippingZone) {
         id
       }
     }
-          }
-          `;
+  }`;
   return cy.sendRequestWithQuery(mutation);
 }
 
 export function createShippingZone(name, country) {
-  const mutation = `
-          mutation{
+  const mutation = `mutation{
     shippingZoneCreate(input:{
       name: "${name}"
       countries: "${country}"
@@ -26,14 +23,12 @@ export function createShippingZone(name, country) {
         id
       }
     }
-            }
-          `;
+  }`;
   return cy.sendRequestWithQuery(mutation);
 }
 
 export function addChannelToShippingMethod(shippingRateId, channelId, price) {
-  const mutation = `
-          mutation{
+  const mutation = `mutation{
     shippingMethodChannelListingUpdate(id:"${shippingRateId}", input:{
       addChannels: {
         channelId:"${channelId}"
@@ -48,8 +43,7 @@ export function addChannelToShippingMethod(shippingRateId, channelId, price) {
         message
       }
     }
-            }
-          `;
+  }`;
   return cy.sendRequestWithQuery(mutation);
 }
 

cypress/apiRequests/storeFront/Search.js

@@ -2,7 +2,8 @@ export function searchInShop(searchQuery) {
   const query = `query SearchProducts {
     products(channel: "default-channel", filter:{
       search: "${searchQuery}"
-        }, first:10){
+    },
+    first:10){
       totalCount
       edges{
         node{
@@ -12,6 +13,5 @@ export function searchInShop(searchQuery) {
       }
     }
   }`;
-
   return cy.sendRequestWithQuery(query, "token");
 }

cypress/elements/catalog/assign-products.js

@@ -0,0 +1,4 @@
+export const ASSIGN_PRODUCTS_SELECTORS = {
+  searchInput: "[name='query']",
+  tableRow: "[data-test-id='assign-product-table-row']"
+};

cypress/elements/channels/menage-channel-availability.js

@@ -0,0 +1,16 @@
+export const MENAGE_CHANNEL_AVAILABILITY = {
+  availableManageButton:
+    "[data-test-id='channels-availiability-manage-button']",
+  channelsAvailabilityForm:
+    "[data-test-id='manage-products-channels-availiability-list']",
+  channelAvailabilityColumn:
+    "[data-test='availability'][data-test-availability='true']",
+  channelAvailabilityList: "ul[role='menu']",
+  assignedChannels: "[data-test='channel-availability-item']",
+  publishedRadioButtons: "[name*='isPublished']",
+  availableForPurchaseRadioButtons: "[name*='isAvailableForPurchase']",
+  radioButtonsValueTrue: "[value='true']",
+  radioButtonsValueFalse: "[value='false']",
+  visibleInListingsButton: "[name*='visibleInListings']",
+  allChannelsInput: "[name='allChannels']"
+};

cypress/elements/discounts/sales.js

@@ -0,0 +1,11 @@
+export const SALES_SELECTORS = {
+  createSaleButton: "[data-test-id='create-sale']",
+  nameInput: "[name='name']",
+  percentageOption: "[value='PERCENTAGE']",
+  fixedOption: "[value='FIXED']",
+  discountValue: "[name='value']",
+  startDateInput: "[name='startDate']",
+  saveButton: "[data-test='button-bar-confirm']",
+  productsTab: "[data-test-id='products-tab']",
+  assignProducts: "[data-test-id='assign-products']"
+};

cypress/elements/shared/button-selectors.js

@@ -1,4 +1,5 @@
 export const BUTTON_SELECTORS = {
   back: '[data-test="back"]',
-  submit: '[data-test="submit"]'
+  submit: '[data-test="submit"]',
+  checkbox: "[type='checkbox']"
 };

cypress/integration/discounts/sales.js

@@ -0,0 +1,179 @@
+// <reference types="cypress" />
+
+import faker from "faker";
+
+import { updateChannelInProduct } from "../../apiRequests/Product";
+import {
+  assignProducts,
+  createSale,
+  discountOptions
+} from "../../steps/salesSteps";
+import { urlList } from "../../url/urlList";
+import * as channelsUtils from "../../utils/channelsUtils";
+import * as productsUtils from "../../utils/productsUtils";
+import { deleteSalesStartsWith } from "../../utils/salesUtils";
+import {
+  createShipping,
+  deleteShippingStartsWith
+} from "../../utils/shippingUtils";
+import { getProductPrice } from "../../utils/storeFront/storeFrontProductUtils";
+
+describe("Sales discounts", () => {
+  const startsWith = "Cy-";
+
+  let productType;
+  let attribute;
+  let category;
+  let defaultChannel;
+  let warehouse;
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    channelsUtils.deleteChannelsStartsWith(startsWith);
+    deleteSalesStartsWith(startsWith);
+    productsUtils.deleteProductsStartsWith(startsWith);
+    deleteShippingStartsWith(startsWith);
+
+    const name = `${startsWith}${faker.random.number()}`;
+    productsUtils
+      .createTypeAttributeAndCategoryForProduct(name)
+      .then(
+        ({
+          productType: productTypeResp,
+          attribute: attributeResp,
+          category: categoryResp
+        }) => {
+          productType = productTypeResp;
+          attribute = attributeResp;
+          category = categoryResp;
+
+          channelsUtils.getDefaultChannel();
+        }
+      )
+      .then(channel => {
+        defaultChannel = channel;
+        cy.fixture("addresses");
+      })
+      .then(addresses => {
+        createShipping({
+          channelId: defaultChannel.id,
+          name,
+          address: addresses.plAddress,
+          price: 100
+        });
+      })
+      .then(({ warehouse: warehouseResp }) => {
+        warehouse = warehouseResp;
+      });
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it("should create percentage discount", () => {
+    const saleName = `${startsWith}${faker.random.number()}`;
+    const discountValue = 50;
+    const productPrice = 100;
+
+    productsUtils
+      .createProductInChannel({
+        name: saleName,
+        channelId: defaultChannel.id,
+        warehouseId: warehouse.id,
+        productTypeId: productType.id,
+        attributeId: attribute.id,
+        categoryId: category.id,
+        price: productPrice
+      })
+      .then(({ product: productResp }) => {
+        cy.visit(urlList.sales);
+        const product = productResp;
+        createSale({
+          saleName,
+          channelName: defaultChannel.name,
+          discountValue,
+          discountOption: discountOptions.PERCENTAGE
+        });
+        assignProducts(product.name);
+        getProductPrice(product.id, defaultChannel.slug);
+      })
+      .then(price => {
+        const expectedPrice = (productPrice * discountValue) / 100;
+        expect(expectedPrice).to.be.eq(price);
+      });
+  });
+
+  it("should create fixed price discount", () => {
+    const saleName = `${startsWith}${faker.random.number()}`;
+    const discountValue = 50;
+    const productPrice = 100;
+
+    productsUtils
+      .createProductInChannel({
+        name: saleName,
+        channelId: defaultChannel.id,
+        warehouseId: warehouse.id,
+        productTypeId: productType.id,
+        attributeId: attribute.id,
+        categoryId: category.id,
+        price: productPrice
+      })
+      .then(({ product: productResp }) => {
+        cy.visit(urlList.sales);
+        const product = productResp;
+        createSale({
+          saleName,
+          channelName: defaultChannel.name,
+          discountValue,
+          discountOption: discountOptions.FIXED
+        });
+        assignProducts(product.name);
+        getProductPrice(product.id, defaultChannel.slug);
+      })
+      .then(price => {
+        const expectedPrice = productPrice - discountValue;
+        expect(expectedPrice).to.be.eq(price);
+      });
+  });
+
+  it("should not displayed discount not assign to channel", () => {
+    const saleName = `${startsWith}${faker.random.number()}`;
+    let channel;
+    let product;
+    const discountValue = 50;
+    const productPrice = 100;
+
+    channelsUtils
+      .createChannel({ name: saleName })
+      .then(channelResp => (channel = channelResp));
+    productsUtils
+      .createProductInChannel({
+        name: saleName,
+        channelId: defaultChannel.id,
+        warehouseId: warehouse.id,
+        productTypeId: productType.id,
+        attributeId: attribute.id,
+        categoryId: category.id,
+        price: productPrice
+      })
+      .then(({ product: productResp }) => {
+        product = productResp;
+        updateChannelInProduct({
+          productId: product.id,
+          channelId: channel.id
+        });
+      })
+      .then(() => {
+        cy.visit(urlList.sales);
+        createSale({
+          saleName,
+          channelName: channel.name,
+          discountValue
+        });
+        assignProducts(product.name);
+        getProductPrice(product.id, defaultChannel.slug);
+      })
+      .then(price => expect(price).to.equal(productPrice));
+  });
+});

cypress/steps/salesSteps.js

@@ -0,0 +1,57 @@
+import { ASSIGN_PRODUCTS_SELECTORS } from "../elements/catalog/assign-products";
+import { MENAGE_CHANNEL_AVAILABILITY } from "../elements/channels/menage-channel-availability";
+import { SALES_SELECTORS } from "../elements/discounts/sales";
+import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { formatDate } from "../support/formatDate";
+
+export const discountOptions = {
+  PERCENTAGE: SALES_SELECTORS.percentageOption,
+  FIXED: SALES_SELECTORS.fixedOption
+};
+
+export function createSale({
+  saleName,
+  channelName,
+  discountValue = 10,
+  discountOption = discountOptions.PERCENTAGE
+}) {
+  const todaysDate = formatDate(new Date());
+
+  cy.get(SALES_SELECTORS.createSaleButton)
+    .click()
+    .get(SALES_SELECTORS.nameInput)
+    .type(saleName)
+    .get(discountOption)
+    .click()
+    .get(MENAGE_CHANNEL_AVAILABILITY.availableManageButton)
+    .click()
+    .get(MENAGE_CHANNEL_AVAILABILITY.allChannelsInput)
+    .click()
+    .get(MENAGE_CHANNEL_AVAILABILITY.channelsAvailabilityForm)
+    .contains(channelName)
+    .click()
+    .get(BUTTON_SELECTORS.submit)
+    .click()
+    .get(SALES_SELECTORS.discountValue)
+    .type(discountValue)
+    .get(SALES_SELECTORS.startDateInput)
+    .type(todaysDate);
+  cy.addAliasToGraphRequest("SaleCreate");
+  cy.get(SALES_SELECTORS.saveButton).click();
+  cy.wait("@SaleCreate");
+}
+
+export function assignProducts(productName) {
+  cy.get(SALES_SELECTORS.productsTab)
+    .click()
+    .get(SALES_SELECTORS.assignProducts)
+    .click()
+    .get(ASSIGN_PRODUCTS_SELECTORS.searchInput)
+    .type(productName);
+  cy.contains(ASSIGN_PRODUCTS_SELECTORS.tableRow, productName)
+    .find(BUTTON_SELECTORS.checkbox)
+    .click();
+  cy.addAliasToGraphRequest("SaleCataloguesAdd");
+  cy.get(BUTTON_SELECTORS.submit).click();
+  cy.wait("@SaleCataloguesAdd");
+}

cypress/support/formatDate.js

@@ -0,0 +1,12 @@
+export function formatDate(date) {
+  const day = getPeriodValue(date, { day: "2-digit" });
+  const month = getPeriodValue(date, { month: "2-digit" });
+  const year = getPeriodValue(date, { year: "numeric" });
+
+  return new Array(year, month, day).join("-");
+}
+
+function getPeriodValue(date, option) {
+  const formatter = new Intl.DateTimeFormat("en-us", option);
+  return formatter.format(date);
+}

cypress/url/urlList.js

@@ -6,6 +6,7 @@ export const urlList = {
   orders: "orders/",
   products: "products/",
   warehouses: "warehouses/",
+  sales: "discounts/sales/",
   collections: "collections/"
 };
 export const productDetailsUrl = productId => `${urlList.products}${productId}`;

cypress/utils/salesUtils.js

@@ -0,0 +1,5 @@
+import { deleteSale, getSales } from "../apiRequests/Sales";
+
+export function deleteSalesStartsWith(startsWith) {
+  cy.deleteElementsStartsWith(deleteSale, getSales, startsWith, "sales");
+}

cypress/utils/storeFront/storeFrontProductUtils.js

@@ -18,7 +18,7 @@ export const isProductVisibleInSearchResult = (resp, productName) => {
   );
 };
 
-export const getProductVariants = (productId, channelSlug) =>
+export const getProductVariants = (productId, channelSlug) => {
   getProductDetails(productId, channelSlug).then(resp => {
     const variantsList = resp.body.data.product.variants;
     return variantsList.map(element => ({
@@ -26,3 +26,9 @@ export const getProductVariants = (productId, channelSlug) =>
       price: element.pricing.price.gross.amount
     }));
   });
+};
+
+export const getProductPrice = (productId, channelSlug) =>
+  getProductDetails(productId, channelSlug).then(
+    resp => resp.body.data.product.variants[0].pricing.price.gross.amount
+  );

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -165,7 +165,10 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
                     );
 
                     return (
-                      <TableRow key={product.id}>
+                      <TableRow
+                        key={product.id}
+                        data-test-id="assign-product-table-row"
+                      >
                         <TableCellAvatar
                           className={classes.avatar}
                           thumbnail={maybe(() => product.thumbnail.url)}
@@ -202,6 +205,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
           <FormattedMessage {...buttonMessages.back} />
         </Button>
         <ConfirmButton
+          data-test="submit"
           transitionState={confirmButtonState}
           color="primary"
           variant="contained"

src/components/Tab/Tab.tsx

@@ -38,17 +38,19 @@ interface TabProps<T> {
   children?: React.ReactNode;
   isActive: boolean;
   changeTab: (index: T) => void;
+  testId?: string;
 }
 
 export function Tab<T>(value: T) {
   const Component: React.FC<TabProps<T>> = props => {
-    const { children, isActive, changeTab } = props;
+    const { children, isActive, changeTab, testId } = props;
 
     const classes = useStyles(props);
 
     return (
       <Typography
         component="span"
+        data-test-id={testId}
         className={classNames({
           [classes.root]: true,
           [classes.active]: isActive

src/discounts/components/DiscountProducts/DiscountProducts.tsx

@@ -98,7 +98,11 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
           description: "section header"
         })}
         toolbar={
-          <Button color="primary" onClick={onProductAssign}>
+          <Button
+            color="primary"
+            onClick={onProductAssign}
+            data-test-id="assign-products"
+          >
             <FormattedMessage
               defaultMessage="Assign products"
               description="button"

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -208,6 +208,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                     )}
                   </CollectionsTab>
                   <ProductsTab
+                    testId="products-tab"
                     isActive={activeTab === SaleDetailsPageTab.products}
                     changeTab={onTabClick}
                   >

src/discounts/components/SaleListPage/SaleListPage.tsx

@@ -54,7 +54,12 @@ const SaleListPage: React.FC<SaleListPageProps> = ({
   return (
     <Container>
       <PageHeader title={intl.formatMessage(sectionNames.sales)}>
-        <Button onClick={onAdd} variant="contained" color="primary">
+        <Button
+          onClick={onAdd}
+          variant="contained"
+          color="primary"
+          data-test-id="create-sale"
+        >
           <FormattedMessage defaultMessage="Create Sale" description="button" />
         </Button>
       </PageHeader>

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

@@ -73441,6 +73441,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="products-tab"
             >
               Products (4)
             </span>
@@ -74796,6 +74797,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="products-tab"
             >
               Products (4)
             </span>
@@ -76156,6 +76158,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="products-tab"
             >
               Products (4)
             </span>
@@ -77538,6 +77541,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+              data-test-id="products-tab"
             >
               Products (…)
             </span>
@@ -78925,6 +78929,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
             </span>
             <span
               class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
+              data-test-id="products-tab"
             >
               Products (4)
             </span>
@@ -78948,6 +78953,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assign-products"
                   tabindex="0"
                   type="button"
                 >
@@ -79968,6 +79974,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="create-sale"
             tabindex="0"
             type="button"
           >
@@ -80658,6 +80665,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="create-sale"
             tabindex="0"
             type="button"
           >
@@ -81102,6 +81110,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="create-sale"
             tabindex="0"
             type="button"
           >
@@ -81792,6 +81801,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="create-sale"
             tabindex="0"
             type="button"
           >