Fix test related to saving variant (#2962)

* Update test after changes in variant name behaviour

* remove comment

* Add data-test-id and update tests

cypress/e2e/products/productsVariants.js

@@ -98,13 +98,13 @@ describe("As an admin I should be able to create variant", () => {
           getProductVariants(createdProduct.id, defaultChannel.slug);
         })
         .then(([variant]) => {
-          expect(variant).to.have.property("name", attributeValues[0]);
+          expect(variant).to.have.property("name", name);
           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", attributeValues[0]);
+          expect(variant).to.have.property("name", name);
           expect(variant).to.have.property("price", price);
           expect(variant).to.have.property("currency", "PLN");
         });
@@ -150,7 +150,7 @@ describe("As an admin I should be able to create variant", () => {
               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", "value2");
+              expect(secondVariant).to.have.property("name", secondVariantSku);
               expect(secondVariant).to.have.property(
                 "price",
                 variants[1].price,

cypress/e2e/products/productsWithoutSku/createProductWithoutSku.js

@@ -126,6 +126,7 @@ describe("Creating variants", () => {
                 price: variants[1].price,
                 channelName: defaultChannel.name,
                 warehouseId: warehouse.id,
+                variantName: name,
               });
             });
         })
@@ -134,7 +135,7 @@ describe("Creating variants", () => {
         })
         .then(([firstVariant, secondVariant]) => {
           expect(firstVariant).to.have.property("price", variants[0].price);
-          expect(secondVariant).to.have.property("name", variants[1].name);
+          expect(secondVariant).to.have.property("name", name);
           expect(secondVariant).to.have.property("price", variants[1].price);
           createWaitingForCaptureOrder({
             channelSlug: defaultChannel.slug,

cypress/e2e/products/productsWithoutSku/updatingProductsWithoutSku.js

@@ -107,7 +107,7 @@ describe("Updating products without sku", () => {
         )
           .get(SHARED_ELEMENTS.skeleton)
           .should("not.exist")
-          .get(VARIANTS_SELECTORS.skuInput)
+          .get(VARIANTS_SELECTORS.skuTextField)
           .type(sku)
           .addAliasToGraphRequest("VariantUpdate")
           .get(BUTTON_SELECTORS.confirm)
@@ -143,7 +143,7 @@ describe("Updating products without sku", () => {
           )
             .get(SHARED_ELEMENTS.skeleton)
             .should("not.exist")
-            .get(VARIANTS_SELECTORS.skuInput)
+            .get(VARIANTS_SELECTORS.skuTextField)
             .type(sku)
             .addAliasToGraphRequest("VariantUpdate")
             .get(BUTTON_SELECTORS.confirm)
@@ -178,9 +178,12 @@ describe("Updating products without sku", () => {
           )
             .get(SHARED_ELEMENTS.skeleton)
             .should("not.exist")
-            .get(VARIANTS_SELECTORS.skuInput)
+            .get(VARIANTS_SELECTORS.skuTextField)
+            .find("input")
             .clear()
             .addAliasToGraphRequest("VariantUpdate")
+            .get(VARIANTS_SELECTORS.variantNameInput)
+            .type(name)
             .get(BUTTON_SELECTORS.confirm)
             .click()
             .waitForRequestAndCheckIfNoErrors("@VariantUpdate");

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

@@ -1,12 +1,12 @@
 export const VARIANTS_SELECTORS = {
-  skuInput: "[ name='sku']",
+  variantNameInput: '[data-test-id="variant-name"]',
+  skuTextField: '[data-test-id="sku"]',
   attributeOption:
     "[data-test-type='option'], [data-test-id='multi-autocomplete-select-option']",
   attributeSelector: "[data-test-id='attribute-value']",
   addWarehouseButton: "[data-test-id='add-warehouse']",
   warehouseOption: "[role='menuitem']",
   saveButton: "[data-test-id='button-bar-confirm']",
-  skuInputInAddVariant: "[name='sku']",
   stockInput: "[data-test-id='stock-input']",
   booleanAttributeCheckbox: "[name*='attribute'][type='checkbox']",
   selectOption: "[data-test-id='multi-autocomplete-select-option']",

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

@@ -20,6 +20,7 @@ export function createVariant({
   price,
   costPrice = price,
   quantity = 10,
+  variantName,
 }) {
   fillUpVariantDetails({
     attributeName,
@@ -29,11 +30,15 @@ export function createVariant({
     quantity,
     costPrice,
     price,
+    variantName,
   });
-  cy.get(VARIANTS_SELECTORS.saveButton)
+  cy.addAliasToGraphRequest("WarehouseList")
+    .get(VARIANTS_SELECTORS.saveButton)
     .click()
-    .get(VARIANTS_SELECTORS.skuInput)
+    .wait("@WarehouseList")
-    .should("be.enabled")
+    .get(VARIANTS_SELECTORS.skuTextField)
+    .find("input")
+    .and("be.enabled")
     .get(BUTTON_SELECTORS.back)
     .click()
     .get(PRODUCT_DETAILS.productNameInput)
@@ -69,6 +74,7 @@ export function fillUpVariantDetails({
   quantity,
   costPrice,
   price,
+  variantName,
 }) {
   selectAttributeWithType({ attributeType, attributeName });
   cy.get(PRICE_LIST.priceInput)
@@ -80,8 +86,11 @@ export function fillUpVariantDetails({
       cy.wrap(input).type(costPrice);
     });
 
+  if (variantName) {
+    cy.get(VARIANTS_SELECTORS.variantNameInput).type(variantName);
+  }
   if (sku) {
-    cy.get(VARIANTS_SELECTORS.skuInputInAddVariant).type(sku);
+    cy.get(VARIANTS_SELECTORS.skuTextField).type(sku);
   }
   if (warehouseName) {
     cy.get(VARIANTS_SELECTORS.addWarehouseButton).click();
@@ -109,7 +118,7 @@ export function fillUpVariantAttributeAndSku({ attributeName, sku }) {
     .contains(attributeName)
     .click();
   if (sku) {
-    cy.get(VARIANTS_SELECTORS.skuInputInAddVariant).type(sku);
+    cy.get(VARIANTS_SELECTORS.skuTextField).type(sku);
   }
 }
 

src/products/components/ProductStocks/ProductStocks.tsx

@@ -155,6 +155,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
             name="sku"
             onChange={handleChange}
             value={data.sku}
+            data-test-id="sku"
           />
         </div>
         <ControlledCheckbox