Update product tests (#4515)

* test bulk delete on product list

* update single product test

* test title fix

* moved assertions to the end of tests

* better selector for grid text

* exclude rows eval from loop

* print navigation url

.changeset/eighty-hats-switch.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Update product test As an admin, I should be able to update a single product by uploading media, assigning channels, assigning tax, and adding a new variant

playwright/data/e2eTestData.ts

@@ -3,6 +3,10 @@ export const PRODUCTS = {
     id: "UHJvZHVjdFR5cGU6Njcy",
     info: "Single product type",
   },
+  singleProductTypeToBeUpdated: {
+    id: "UHJvZHVjdDo3NjE%3D",
+    info: "Single product type to be updated",
+  },
   productToAddVariants: {
     id: "UHJvZHVjdDo3Mjk%3D",
     info: "Product that does not contain any variant yet",

playwright/pages/basePage.ts

@@ -25,6 +25,9 @@ export class BasePage {
     await expect(this.pageHeader).toBeVisible({ timeout: 10000 });
   }
   async gotoExistingProductPage(productId: string) {
+    await console.log(
+      `Navigating to existing product: ${URL_LIST.products}${productId}`,
+    );
     await this.page.goto(`${URL_LIST.products}${productId}`);
     await expect(this.pageHeader).toBeVisible({ timeout: 10000 });
   }

playwright/pages/productPage.ts

@@ -1,4 +1,5 @@
 import * as faker from "faker";
+import path from "path";
 
 import { URL_LIST } from "@data/url";
 import { ChannelSelectDialog } from "@pages/dialogs/channelSelectDialog";
@@ -24,6 +25,9 @@ export class ProductPage {
   constructor(
     page: Page,
     readonly productsNames = page.getByTestId("name"),
+    readonly productAvailableInChannelsText = page.getByTestId(
+      "product-available-in-channels-text",
+    ),
     readonly createProductButton = page.getByTestId("add-product"),
     readonly bulkDeleteButton = page.getByTestId("bulk-delete-button"),
     readonly deleteProductButton = page.getByTestId("button-bar-delete"),
@@ -83,6 +87,12 @@ export class ProductPage {
   async clickDeleteProductButton() {
     await this.deleteProductButton.click();
   }
+  async clickUploadImagesButtonButton() {
+    await this.uploadSavedImagesButton.click();
+  }
+  async clickUploadMediaButton() {
+    await this.uploadImageButton.click();
+  }
   async clickBulkDeleteButton() {
     await this.bulkDeleteButton.click();
   }
@@ -138,21 +148,36 @@ export class ProductPage {
   async expectSuccessBanner() {
     await this.basePage.expectSuccessBanner();
   }
-  async selectOneChannelAsAvailable() {
+  async selectOneChannelAsAvailableWhenMoreSelected() {
     await this.manageChannelsButton.click();
     await this.channelSelectDialog.clickAllChannelsCheckbox();
     await this.channelSelectDialog.selectFirstChannel();
     await this.channelSelectDialog.clickConfirmButton();
   }
+  async selectOneChannelAsAvailableWhenNoneSelected() {
+    await this.manageChannelsButton.click();
+    await this.channelSelectDialog.selectFirstChannel();
+    await this.channelSelectDialog.clickConfirmButton();
+  }
 
   async clickCreateProductButton() {
     await this.createProductButton.click();
   }
   async clickFirstEditVariantButton() {
     await this.editVariantButton.first().click();
   }
+  async clickAddVariantButton() {
+    await this.addVariantButton.click();
+  }
 
   async gotoProductListPage() {
     await this.page.goto(URL_LIST.products);
   }
+
+  async uploadProductImage(fileName: string) {
+    const fileChooserPromise = this.page.waitForEvent("filechooser");
+    await this.clickUploadImagesButtonButton();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join("playwright/data/images/", fileName));
+  }
 }

playwright/tests/product.spec.ts

@@ -26,14 +26,14 @@ test("TC: SALEOR_3 Create basic product with variants @e2e @product", async ({
   await productPage.clickSaveButton();
   await productPage.expectSuccessBanner();
 });
-test("TC: SALEOR_5 Create basic product without variants @e2e @product", async ({
+test("TC: SALEOR_5 Create basic - single product type - product without variants @e2e @product", async ({
   page,
 }) => {
   const basePage = new BasePage(page);
   const productPage = new ProductPage(page);
 
   await basePage.gotoCreateProductPage(PRODUCTS.singleProductType.id);
-  await productPage.selectOneChannelAsAvailable();
+  await productPage.selectOneChannelAsAvailableWhenMoreSelected();
   await productPage.typeNameDescAndRating();
   await productPage.addSeo();
   await productPage.addAllMetaData();
@@ -106,7 +106,7 @@ test("TC: SALEOR_27 Create full info variant - via edit variant page @e2e @produ
   await variantsPage.expectSuccessBanner();
 });
 
-test("TC: SALEOR_44 As an admin I should be able to delete a several products with variants @basic-regression @product @e2e", async ({
+test("TC: SALEOR_44 As an admin I should be able to delete a several products @basic-regression @product @e2e", async ({
   page,
 }) => {
   const basePage = new BasePage(page);
@@ -127,7 +127,7 @@ test("TC: SALEOR_44 As an admin I should be able to delete a several products wi
   ).toEqual([]);
 });
 
-test("TC: SALEOR_45 As an admin I should be able to delete a single product with variants @basic-regression @product @e2e", async ({
+test("TC: SALEOR_45 As an admin I should be able to delete a single products @basic-regression @product @e2e", async ({
   page,
 }) => {
   const basePage = new BasePage(page);
@@ -143,3 +143,42 @@ test("TC: SALEOR_45 As an admin I should be able to delete a single product with
     PRODUCTS.productWithOneVariantToBeDeletedFromDetails.name,
   );
 });
+test("TC: SALEOR_46 As an admin, I should be able to update a single product by uploading media, assigning channels, assigning tax, and adding a new variant   @basic-regression @product @e2e", async ({
+  page,
+}) => {
+  const newVariantName = "variant 2";
+  const basePage = new BasePage(page);
+  const productPage = new ProductPage(page);
+
+  await basePage.gotoExistingProductPage(
+    PRODUCTS.singleProductTypeToBeUpdated.id,
+  );
+  await productPage.clickUploadMediaButton();
+  await productPage.uploadProductImage("beer.avif");
+  await productPage.productImage.waitFor({ state: "visible" });
+  await productPage.selectOneChannelAsAvailableWhenNoneSelected();
+
+  await productPage.selectFirstTaxOption();
+  const preSaveTax = await productPage.rightSideDetailsPage.taxInput
+    .locator("input")
+    .inputValue();
+  await productPage.basePage.waitForGrid();
+  await productPage.clickAddVariantButton();
+  await productPage.editVariantButton.nth(1).scrollIntoViewIfNeeded();
+  // click and fill variant name cell
+  await productPage.basePage.clickGridCell(1, 1);
+  await productPage.basePage.fillGridCell(1, 1, newVariantName);
+  await productPage.clickSaveButton();
+  await productPage.basePage.expectSuccessBanner();
+  const postSaveTax = await productPage.rightSideDetailsPage.taxInput
+    .locator("input")
+    .inputValue();
+  await expect(preSaveTax).toEqual(postSaveTax);
+  await productPage.basePage.gridCanvas
+    .getByText(newVariantName)
+    .waitFor({ state: "attached" });
+  await expect(productPage.productAvailableInChannelsText).toContainText(
+    "In 1 out of 7 channels",
+  );
+  expect(await productPage.productImage.count()).toEqual(1);
+});

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx

@@ -51,7 +51,11 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
               })}
             </div>
             {!!channelsAvailabilityText && (
-              <Text variant="caption" color="textNeutralSubdued">
+              <Text
+                variant="caption"
+                color="textNeutralSubdued"
+                data-test-id="product-available-in-channels-text"
+              >
                 {channelsAvailabilityText}
               </Text>
             )}