Sku triggers variant name change (#3470)

* Sku triggers variant name change

* fixes product variants failing tests SALEOR_2901 and SALEOR_2902

* fix should be able to create several variants visible for the customers. TC: SALEOR_2902

---------

Co-authored-by: wojteknowacki <wojciech.nowacki@saleor.io>

cypress/e2e/products/productsVariants.js

@@ -82,6 +82,8 @@ describe("As an admin I should be able to create variant", () => {
       const name = `${startsWith}${faker.datatype.number()}`;
       const price = 10;
       let createdProduct;
+      // TODO fix name for proper one when problem with typing in grid will be solved - now only first letter of string is able to be typed in grid cell
+      const variantName = "A";
 
       createProduct({
         attributeId: attribute.id,
@@ -103,25 +105,27 @@ describe("As an admin I should be able to create variant", () => {
           cy.visit(
             `${urlList.products}${createdProduct.id}`,
           ).waitForProgressBarToNotBeVisible();
-          addVariantToDataGrid(name);
+          addVariantToDataGrid(variantName);
           enterVariantEditPage();
           selectChannelsForVariant();
+          cy.addAliasToGraphRequest("VariantUpdate");
           createVariant({
             channelName: [defaultChannel.name, newChannel.name],
             sku: name,
             price,
             attributeName: attributeValues[0],
           });
+          cy.wait("@VariantUpdate");
           getProductVariants(createdProduct.id, defaultChannel.slug);
         })
         .then(([variant]) => {
-          expect(variant).to.have.property("name", name);
+          expect(variant).to.have.property("name", variantName);
           expect(variant).to.have.property("price", price);
           expect(variant).to.have.property("currency", "USD");
           getProductVariants(createdProduct.id, newChannel.slug);
         })
         .then(([variant]) => {
-          expect(variant).to.have.property("name", name);
+          expect(variant).to.have.property("name", variantName);
           expect(variant).to.have.property("price", price);
           expect(variant).to.have.property("currency", "PLN");
         });
@@ -164,6 +168,7 @@ describe("As an admin I should be able to create variant", () => {
     () => {
       const name = `${startsWith}${faker.datatype.number()}`;
       const secondVariantSku = `${startsWith}${faker.datatype.number()}`;
+      const secondVariantName = `${startsWith}${faker.datatype.number()}`;
       const variants = [{ price: 7 }, { name: attributeValues[1], price: 16 }];
       let createdProduct;
 
@@ -182,25 +187,26 @@ describe("As an admin I should be able to create variant", () => {
 
           cy.visit(`${urlList.products}${createdProduct.id}`);
           cy.get(PRODUCT_DETAILS.dataGridTable).scrollIntoView();
-
           enterVariantEditPage();
-
           cy.get(PRODUCT_DETAILS.addVariantButton)
             .click()
             .then(() => {
+              cy.addAliasToGraphRequest("VariantCreate");
               createVariant({
                 sku: secondVariantSku,
                 attributeName: variants[1].name,
                 price: variants[1].price,
                 channelName: defaultChannel.name,
+                variantName: secondVariantName,
               });
+              cy.wait("@VariantCreate");
               getProductVariants(createdProduct.id, defaultChannel.slug);
             })
             .then(([secondVariant, firstVariant]) => {
               expect(firstVariant).to.have.property("price", variants[0].price);
               expect(firstVariant).to.have.property("name", "value");
               expect(firstVariant).to.have.property("currency", "USD");
-              expect(secondVariant).to.have.property("name", secondVariantSku);
+              expect(secondVariant).to.have.property("name", secondVariantName);
               expect(secondVariant).to.have.property(
                 "price",
                 variants[1].price,

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

@@ -80,7 +80,6 @@ export function fillUpVariantDetails({
     .each(input => {
       cy.wrap(input).type(costPrice);
     });
-
   if (variantName) {
     cy.get(VARIANTS_SELECTORS.variantNameInput).type(variantName);
   }

src/products/components/ProductStocks/ProductStocks.tsx

@@ -123,12 +123,6 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onFormDataChange(e);
-    onFormDataChange({
-      target: {
-        name: "variantName",
-        value: e.target.value,
-      },
-    });
   };
 
   return (