Migrate product page to new macaw

.changeset/hot-coins-exercise.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Migrate product page to new macaw components

cypress/elements/catalog/products/product-details.js

@@ -14,7 +14,7 @@ export const PRODUCT_DETAILS = {
   skuInput: "[name='sku']",
   variantRow: "[data-test-id='product-variant-row']",
   variantPrice: '[data-test-id="price"]',
-  collectionRemoveButtons: '[data-test-id="collection-remove"]',
+  collectionRemoveButtons: '[data-test-id*="selected-option"] span:last-child',
   addWarehouseButton: '[data-test-id="add-warehouse"]',
   warehouseOption: "[role='menuitem']",
   stockInput: '[data-test-id="stock-input"]',

cypress/elements/catalog/products/variants-selectors.js

@@ -1,8 +1,7 @@
 export const VARIANTS_SELECTORS = {
   variantNameInput: '[data-test-id="variant-name"]',
   skuTextField: '[data-test-id="sku"]',
-  attributeOption:
-    "[data-test-type='option'], [data-test-id='multi-autocomplete-select-option']",
+  attributeOption: "[data-test-id='select-option']",
   attributeSelector: "[data-test-id='attribute-value']",
   addWarehouseButton: "[data-test-id='add-warehouse']",
   warehouseOption: "[role='menuitem']",

cypress/elements/pages/page-details.js

@@ -6,6 +6,6 @@ export const PAGE_DETAILS_SELECTORS = {
   isNotPublishedCheckbox: '[name="isPublished"][value=false]',
   uploadFileButton: '[data-test-id="button-upload-file"]',
   richTextEditorAttributeValue: '[class*="ce-paragraph"]',
-  booleanAttributeValueCheckbox: '[role="checkbox"]',
+  booleanAttributeValueCheckbox: '[data-macaw-ui-component="Toggle"]',
   numericAttributeValueInput: '[name*="attribute:"]',
 };

cypress/elements/shared/sharedElements.js

@@ -53,6 +53,9 @@ export const SHARED_ELEMENTS = {
   },
   warningDialog: '[data-test-id="warning-dialog"]',
   pageHeader: "[data-test-id='page-header']",
+  multiselect: {
+    selectedOptions: '[data-test-id*="selected-option-"]',
+  },
   multiAutocomplete: {
     selectedOptions: '[id*="selected-option-"]',
   },

cypress/support/customCommands/sharedElementsOperations/selects.js

@@ -41,15 +41,30 @@ Cypress.Commands.add("createNewOption", (selectSelector, newOption) => {
     .click({ force: true });
 });
 
+Cypress.Commands.add("fillNewMultiSelect", (selectSelector, option) => {
+  cy.fillAutocompleteSelect(selectSelector, option, true).then(
+    returnedOption => {
+      cy.get(SHARED_ELEMENTS.header)
+        .first()
+        .click({ force: true })
+        .get(SHARED_ELEMENTS.multiselect.selectedOptions)
+        .should("be.visible");
+      return cy.wrap(returnedOption);
+    },
+  );
+});
+
 Cypress.Commands.add("fillMultiSelect", (selectSelector, option) => {
-  cy.fillAutocompleteSelect(selectSelector, option).then(returnedOption => {
-    cy.get(SHARED_ELEMENTS.header)
-      .first()
-      .click({ force: true })
-      .get(SHARED_ELEMENTS.multiAutocomplete.selectedOptions)
-      .should("be.visible");
-    return cy.wrap(returnedOption);
-  });
+  cy.fillAutocompleteSelect(selectSelector, option, true).then(
+    returnedOption => {
+      cy.get(SHARED_ELEMENTS.header)
+        .first()
+        .click({ force: true })
+        .get(SHARED_ELEMENTS.multiAutocomplete.selectedOptions)
+        .should("be.visible");
+      return cy.wrap(returnedOption);
+    },
+  );
 });
 
 Cypress.Commands.add("fillBaseSelect", (selectSelector, value) => {
@@ -60,46 +75,50 @@ Cypress.Commands.add("fillBaseSelect", (selectSelector, value) => {
     .click();
 });
 
-Cypress.Commands.add("fillAutocompleteSelect", (selectSelector, option) => {
-  let selectedOption = option;
-  cy.get(selectSelector)
-    .click()
-    .get(BUTTON_SELECTORS.selectOption)
-    .should("be.visible");
-  if (option) {
-    cy.get(BUTTON_SELECTORS.selectOption)
-      .first()
-      .then(detachedOption => {
-        cy.get(selectSelector).then(select => {
-          if (select.find("input").length > 0) {
-            cy.get(selectSelector)
-              .find("input")
-              .clear()
-              .type(option, { delay: 10 });
-          } else {
-            cy.get(selectSelector).clear().type(option, { delay: 10 });
-          }
+Cypress.Commands.add(
+  "fillAutocompleteSelect",
+  (selectSelector, option, isForce = false) => {
+    let selectedOption = option;
+    console.log("isForce", isForce);
+    cy.get(selectSelector)
+      .click(isForce ? { force: true } : undefined)
+      .get(BUTTON_SELECTORS.selectOption)
+      .should("be.visible");
+    if (option) {
+      cy.get(BUTTON_SELECTORS.selectOption)
+        .first()
+        .then(detachedOption => {
+          cy.get(selectSelector).then(select => {
+            if (select.find("input").length > 0) {
+              cy.get(selectSelector)
+                .find("input")
+                .clear()
+                .type(option, { delay: 10 });
+            } else {
+              cy.get(selectSelector).clear().type(option, { delay: 10 });
+            }
+          });
+          cy.wrap(detachedOption).should(det => {
+            Cypress.dom.isDetached(det);
+          });
+          cy.contains(BUTTON_SELECTORS.selectOption, option)
+            .should("be.visible")
+            .click({ force: true })
+            .then(() => selectedOption);
         });
-        cy.wrap(detachedOption).should(det => {
-          Cypress.dom.isDetached(det);
+    } else {
+      cy.get(BUTTON_SELECTORS.selectOption)
+        .wait(1000)
+        .first()
+        .invoke("text")
+        .then(text => {
+          selectedOption = text;
         });
-        cy.contains(BUTTON_SELECTORS.selectOption, option)
-          .should("be.visible")
-          .click({ force: true })
-          .then(() => selectedOption);
-      });
-  } else {
-    cy.get(BUTTON_SELECTORS.selectOption)
-      .wait(1000)
-      .first()
-      .invoke("text")
-      .then(text => {
-        selectedOption = text;
-      });
-    return cy
-      .get(BUTTON_SELECTORS.selectOption)
-      .first()
-      .click()
-      .then(() => selectedOption);
-  }
-});
+      return cy
+        .get(BUTTON_SELECTORS.selectOption)
+        .first()
+        .click()
+        .then(() => selectedOption);
+    }
+  },
+);

cypress/support/index.d.ts

@@ -39,10 +39,12 @@ declare namespace Cypress {
     fillAutocompleteSelect(
       selectSelector: string,
       option?: string,
+      isForce?: boolean,
     ): Chainable<any>;
     addAliasToGraphRequest(alias: string): Chainable<any>;
     sendRequestWithQuery(query: string): Chainable<any>;
     fillMultiSelect(selectSelector: string, option: string): Chainable<any>;
+    fillNewMultiSelect(selectSelector: string, option: string): Chainable<any>;
     createNewOption(selectSelector: string, newOption: string): Chainable<any>;
     findElementsAndMakeActionOnTable({
       elementsGraphqlAlias: string,

cypress/support/pages/catalog/products/VariantsPage.js

@@ -74,11 +74,11 @@ export function fillUpVariantDetails({
   selectAttributeWithType({ attributeType, attributeName });
   cy.get(PRICE_LIST.priceInput)
     .each(input => {
-      cy.wrap(input).type(price);
+      cy.wrap(input).type(price, { force: true });
     })
     .get(PRICE_LIST.costPriceInput)
     .each(input => {
-      cy.wrap(input).type(costPrice);
+      cy.wrap(input).type(costPrice, { force: true });
     });
   if (variantName) {
     cy.get(VARIANTS_SELECTORS.variantNameInput).type(variantName);

cypress/support/pages/catalog/products/priceListComponent.js

@@ -2,14 +2,14 @@ import { PRICE_LIST } from "../../../../elements/catalog/products/price-list";
 
 export const priceInputLists = {
   sellingPrice: PRICE_LIST.priceInput,
-  costPrice: PRICE_LIST.costPriceInput
+  costPrice: PRICE_LIST.costPriceInput,
 };
 
 export function fillUpPriceList(
   price = 1,
-  priceTypeInput = priceInputLists.sellingPrice
+  priceTypeInput = priceInputLists.sellingPrice,
 ) {
   cy.get(priceTypeInput).each($priceInput => {
-    cy.wrap($priceInput).type(price);
+    cy.wrap($priceInput).type(price, { force: true });
   });
 }

cypress/support/pages/catalog/products/productDetailsPage.js

@@ -109,7 +109,7 @@ export function fillUpProductOrganization({
 }) {
   const organization = {};
   return cy
-    .fillAutocompleteSelect(PRODUCT_DETAILS.productTypeInput, productType)
+    .fillAutocompleteSelect(PRODUCT_DETAILS.productTypeInput, productType, true)
     .then(selected => {
       organization.productType = selected;
       fillUpCollectionAndCategory({ category, collection });
@@ -124,10 +124,10 @@ export function fillUpProductOrganization({
 export function fillUpCollectionAndCategory({ category, collection }) {
   const organization = {};
   return cy
-    .fillAutocompleteSelect(PRODUCT_DETAILS.categoryInput, category)
+    .fillAutocompleteSelect(PRODUCT_DETAILS.categoryInput, category, true)
     .then(selected => {
       organization.category = selected;
-      cy.fillMultiSelect(PRODUCT_DETAILS.collectionInput, collection);
+      cy.fillNewMultiSelect(PRODUCT_DETAILS.collectionInput, collection);
     })
     .then(selected => {
       organization.collection = selected;

cypress/support/pages/discounts/vouchersPage.js

@@ -49,7 +49,7 @@ export function createVoucher({
     cy.get(VOUCHERS_SELECTORS.requirements.minOrderValueCheckbox)
       .click()
       .get(VOUCHERS_SELECTORS.requirements.minOrderValueInput)
-      .type(minOrderValue);
+      .type(minOrderValue, { force: true });
   }
   if (minAmountOfItems) {
     cy.get(VOUCHERS_SELECTORS.requirements.minAmountOfItemsCheckbox)

cypress/support/pages/ordersTransactionUtils.js

@@ -78,7 +78,9 @@ export function typeRefundReason(refundReasonDescription) {
     .type(`reason_${refundReasonDescription}`);
 }
 export function typeRefundTotalAmount(amount) {
-  return cy.get(ORDER_TRANSACTION_CREATE.transactAmountInput).type(amount);
+  return cy
+    .get(ORDER_TRANSACTION_CREATE.transactAmountInput)
+    .type(amount, { force: true });
 }
 export function typeTransactionReference(reference) {
   return cy.get(ORDERS_SELECTORS.transactionReferenceInput).type(reference);

cypress/support/pages/shippingMethodPage.js

@@ -136,11 +136,11 @@ export function fillUpShippingRate({
   }
   cy.get(SHIPPING_RATE_DETAILS.priceInput).each($priceInput => {
     cy.wrap($priceInput)
-      .clear()
+      .clear({ force: true })
       .get(SHARED_ELEMENTS.pageHeader)
       .click()
       .wrap($priceInput)
-      .clearAndType(price);
+      .clearAndType(price, { force: true });
   });
 }
 
@@ -189,16 +189,16 @@ export function saveRateAfterUpdate() {
 
 export function fillUpLimits({ max, min }) {
   cy.get(SHIPPING_RATE_DETAILS.minValueInput)
-    .type(min)
+    .type(min, { force: true })
     .get(SHIPPING_RATE_DETAILS.maxValueInput)
-    .type(max);
+    .type(max, { force: true });
 }
 
 export function fillUpDeliveryTime({ min, max }) {
   cy.get(SHIPPING_RATE_DETAILS.minDeliveryTimeInput)
-    .clearAndType(min)
+    .clearAndType(min, { force: true })
     .get(SHIPPING_RATE_DETAILS.maxDeliveryTimeInput)
-    .clearAndType(max);
+    .clearAndType(max, { force: true });
 }
 
 export const rateOptions = {