Merge 6d03241 into 467e319

saleor · Sep 28, 2020 · a6a6409 · a6a6409
2 parents 467e319 + 6d03241
commit a6a6409
Show file tree

Hide file tree

Showing 54 changed files with 1,142 additions and 876 deletions.
diff --git a/.plop/exampleGenerator.js b/.plop/exampleGenerator.js
diff --git a/.plop/index.js b/.plop/index.js
diff --git a/.plop/reactComponent.js b/.plop/reactComponent.js
diff --git a/.plop/templates/exportAll.ts.hbs b/.plop/templates/exportAll.ts.hbs
diff --git a/.plop/templates/reactComponent.tsx.hbs b/.plop/templates/reactComponent.tsx.hbs
diff --git a/.plop/templates/reactComponentIndex.ts.hbs b/.plop/templates/reactComponentIndex.ts.hbs
diff --git a/.plop/templates/reactComponentStory.tsx.hbs b/.plop/templates/reactComponentStory.tsx.hbs
diff --git a/.plop/templates/reactComponentStyles.ts.hbs b/.plop/templates/reactComponentStyles.ts.hbs
diff --git a/.plop/templates/reactComponentTest.tsx.hbs b/.plop/templates/reactComponentTest.tsx.hbs
diff --git a/.plop/templates/reactComponentTypes.ts.hbs b/.plop/templates/reactComponentTypes.ts.hbs
diff --git a/.plop/utils.js b/.plop/utils.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Require payment recreate when payment price is wrong - #892 by @orzechdev
 - Handle JWT token refreshing and verifying - #883 by @orzechdev
 - Fix cart sidebar style - #897 by @orzechdev
+- Refactor variant picker components and open sidebar after adding product to cart - #809 by @krzysztofwolski
 - Fix checkout address view - #909 by @konstantinoschristomanos
 
 ## 2.10.4

diff --git a/README.md b/README.md
@@ -121,6 +121,16 @@ Cypress UI mode:
 test:e2e:dev
 ```
 
+## Creating new components
+
+All new components should follow Atomic Design Guidelines and be placed in `src/@next/components` directory.
+
+Files structure can be generated using `plop`:
+
+```
+npm run generate
+```
+
 ## Modifying the Storefront
 
 [From Spectrum Post](https://spectrum.chat/saleor/saleor-storefront/modifying-the-storefront~c1955dbf-a421-4fb6-b99e-937dd2642b23)

diff --git a/cypress/elements/cart/cart.js b/cypress/elements/cart/cart.js
@@ -1,4 +1,6 @@
 export const CART_SELECTORS = {
   deleteItemBtn: '[data-test="removeButton"]',
   continueShoppingBtn: '[data-test="cartPageContinueShoppingButton"]',
+  cartSidebar: '[data-test="cartOverlay"]',
+  cartSidebarRow: '[data-test="cartRow"]',
 };
diff --git a/cypress/elements/products/products-selectors.js b/cypress/elements/products/products-selectors.js
@@ -1,10 +1,10 @@
 export const PRODUCTS_SELECTORS = {
   product_list: ".product-list-item",
-  first_selected_product_name: ".product-description >h3",
-  variantPicker: ".product-description__variant-picker",
-  attributOptions: "[data-test='attributeOption']",
+  first_selected_product_name: "[data-test='productName']",
+  variantPicker: "[data-test='variantPicker']",
+  attributeOptions: "[data-test='attributeOption']",
   addToBasketBtn: "[data-test=addProductToCartButton]",
   cartQuantity: ".main-menu__cart__quantity",
   goToBagMyBagBtn: "[data-test='gotoBagViewButton']",
-  procceedToCheckoutBtn: "[data-test=proceedToCheckoutButton]",
+  proceedToCheckoutBtn: "[data-test=proceedToCheckoutButton]",
 };
diff --git a/cypress/integration/products/buy_a_product.js b/cypress/integration/products/buy_a_product.js
@@ -27,7 +27,7 @@ describe("Buy a product", () => {
       .visit("/")
       .clearCart()
       .addItemWithShippingToTheBasket()
-      .get(PRODUCTS_SELECTORS.procceedToCheckoutBtn)
+      .get(PRODUCTS_SELECTORS.proceedToCheckoutBtn)
       .click()
       .get(CHECKOUT_SELECTORS.CHECKOUT_LINKS.address)
       .click()
@@ -76,7 +76,7 @@ describe("Buy a product", () => {
     cy.visit("/")
       .clearCart()
       .addItemWithShippingToTheBasket()
-      .get(PRODUCTS_SELECTORS.procceedToCheckoutBtn)
+      .get(PRODUCTS_SELECTORS.proceedToCheckoutBtn)
       .click()
       .get(CHECKOUT_SELECTORS.continueAsAGuest)
       .click()
@@ -122,7 +122,7 @@ describe("Buy a product", () => {
       .visit("/")
       .clearCart()
       .addItemWithNoShippingToTheBasket()
-      .get(PRODUCTS_SELECTORS.procceedToCheckoutBtn)
+      .get(PRODUCTS_SELECTORS.proceedToCheckoutBtn)
       .click()
       .get(CHECKOUT_SELECTORS.CHECKOUT_LINKS.address)
       .click()
@@ -164,7 +164,7 @@ describe("Buy a product", () => {
     cy.visit("/")
       .clearCart()
       .addItemWithNoShippingToTheBasket()
-      .get(PRODUCTS_SELECTORS.procceedToCheckoutBtn)
+      .get(PRODUCTS_SELECTORS.proceedToCheckoutBtn)
       .click()
       .get(CHECKOUT_SELECTORS.continueAsAGuest)
       .click()

diff --git a/cypress/integration/products/order-history.js b/cypress/integration/products/order-history.js
@@ -30,7 +30,7 @@ describe("Buy a product and check the order history", () => {
       .get("@productName")
       .then(productName => {
         return cy
-          .get(PRODUCTS_SELECTORS.procceedToCheckoutBtn)
+          .get(PRODUCTS_SELECTORS.proceedToCheckoutBtn)
           .click()
           .get(CHECKOUT_SELECTORS.CHECKOUT_LINKS.address)
           .click()

diff --git a/cypress/support/product/index.js b/cypress/support/product/index.js
@@ -1,6 +1,7 @@
 import { PRODUCTS_SELECTORS } from "../../elements/products/products-selectors";
 import { HEADER_SELECTORS } from "../../elements/main-header/header-selectors";
 import { SEARCH_PRODUCTS_SELECTORS_RIGHT_MENU } from "../../elements/products/search-products-selectors";
+import { CART_SELECTORS } from "../../elements/cart/cart";
 
 Cypress.Commands.add("addItemWithShippingToTheBasket", () => {
   return cy
@@ -14,14 +15,15 @@ Cypress.Commands.add("addItemWithShippingToTheBasket", () => {
     .as("productName")
     .get(PRODUCTS_SELECTORS.variantPicker)
     .click()
-    .get(PRODUCTS_SELECTORS.attributOptions)
+    .get(PRODUCTS_SELECTORS.attributeOptions)
     .first()
     .click()
     .get(PRODUCTS_SELECTORS.addToBasketBtn)
     .click()
-    .get(PRODUCTS_SELECTORS.cartQuantity)
+    .get(CART_SELECTORS.cartSidebar)
+    .should("be.visible")
+    .get(CART_SELECTORS.cartSidebarRow)
     .should("be.visible")
-    .click()
     .get(PRODUCTS_SELECTORS.goToBagMyBagBtn)
     .click();
 });
@@ -40,14 +42,15 @@ Cypress.Commands.add("addItemWithNoShippingToTheBasket", () => {
     .click()
     .get(PRODUCTS_SELECTORS.variantPicker)
     .click()
-    .get(PRODUCTS_SELECTORS.attributOptions)
+    .get(PRODUCTS_SELECTORS.attributeOptions)
     .first()
     .click()
     .get(PRODUCTS_SELECTORS.addToBasketBtn)
     .click()
-    .get(PRODUCTS_SELECTORS.cartQuantity)
+    .get(CART_SELECTORS.cartSidebar)
+    .should("be.visible")
+    .get(CART_SELECTORS.cartSidebarRow)
     .should("be.visible")
-    .click()
     .get(PRODUCTS_SELECTORS.goToBagMyBagBtn)
     .click();
 });