Filter products by channel availability test (#4540)

.changeset/fair-bananas-thank.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Filter products by channel availability test

playwright/data/e2eTestData.ts

@@ -7,6 +7,16 @@ export const PRODUCTS = {
     id: "UHJvZHVjdDo3NjE%3D",
     info: "Single product type to be updated",
   },
+  productAvailableOnlyInPlnChannel: {
+    id: "UHJvZHVjdDo3NjM%3D",
+    name: "a beer available only in pln channel",
+    info: "Product available only in PLN channel",
+  },
+  productAvailableOnlyInUsdChannel: {
+    id: "UHJvZHVjdDo3NjQ%3D",
+    name: "a beer available only in USD channel",
+    info: "Product available only in USD channel",
+  },
   productToAddVariants: {
     id: "UHJvZHVjdDo3Mjk%3D",
     name: "beer with variants",

playwright/pages/basePage.ts

@@ -13,6 +13,7 @@ export class BasePage {
       .locator('[class="clip-region"]')
       .locator("textarea"),
     readonly successBanner = page.locator(LOCATORS.successBanner),
+    readonly filterButton = page.getByTestId("filters-button"),
     readonly errorBanner = page.locator(LOCATORS.errorBanner),
     readonly infoBanner = page.locator(LOCATORS.infoBanner),
     readonly previousPagePaginationButton = page.getByTestId(
@@ -38,6 +39,10 @@ export class BasePage {
     return cellText;
   }
 
+  async clickFilterButton() {
+    await this.filterButton.click();
+  }
+
   async typeInSearchOnListView(searchItem: string) {
     await this.searchInputListView.fill(searchItem);
   }

playwright/pages/pageElements/filtersPage.ts

@@ -0,0 +1,37 @@
+import type { Page } from "@playwright/test";
+
+export class FiltersPage {
+  readonly page: Page;
+  constructor(
+    page: Page,
+    readonly saveFiltersButton = page.getByTestId("save-filters-button"),
+    readonly rightInput = page.getByTestId("right-0"),
+    readonly dropDownOptions = page.getByTestId("select-option"),
+    readonly leftInput = page.getByTestId("left-0"),
+    readonly showFiltersButton = page.getByTestId("filters-button"),
+    readonly addFilterButton = page.getByTestId("add-filter-button"),
+  ) {
+    this.page = page;
+  }
+
+  async clickAddFilterButton() {
+    await this.addFilterButton.click();
+  }
+  async clickLeftInput() {
+    await this.leftInput.click();
+  }
+  async clickRightInput() {
+    await this.rightInput.click();
+  }
+  async clickSaveFiltersButton() {
+    await this.saveFiltersButton.click();
+  }
+
+  async pickFilter(filterKind: string, channelName: string) {
+    await this.clickAddFilterButton();
+    await this.clickLeftInput();
+    await this.dropDownOptions.filter({ hasText: filterKind }).click();
+    await this.clickRightInput();
+    await this.dropDownOptions.filter({ hasText: channelName }).click();
+  }
+}

playwright/pages/productPage.ts

@@ -10,6 +10,7 @@ import { expect, Page } from "@playwright/test";
 
 import { BasePage } from "./basePage";
 import { DeleteProductDialog } from "./dialogs/deleteProductDialog";
+import { FiltersPage } from "./pageElements/filtersPage";
 
 const productName = `e2e-productName-${faker.datatype.number()}`;
 const productDescription = `e2e-productDescription-${faker.datatype.number()}`;
@@ -23,6 +24,7 @@ export class ProductPage {
   readonly basePage: BasePage;
   readonly channelSelectDialog: ChannelSelectDialog;
   readonly deleteProductDialog: DeleteProductDialog;
+  readonly filtersPage: FiltersPage;
 
   constructor(
     page: Page,
@@ -84,6 +86,7 @@ export class ProductPage {
     this.channelSelectDialog = new ChannelSelectDialog(page);
     this.metadataSeoPage = new MetadataSeoPage(page);
     this.rightSideDetailsPage = new RightSideDetailsPage(page);
+    this.filtersPage = new FiltersPage(page);
   }
 
   async gotoCreateProductPage(productTypeId: string) {

playwright/tests/product.spec.ts

@@ -232,6 +232,7 @@ test("TC: SALEOR_58 As an admin I should be able use pagination on product list
     1,
     1,
   );
+
   await expect(
     firstPageProductName,
     `Second side first product name: ${secondPageProductName} should be visible and be different than: ${firstPageProductName}`,
@@ -249,3 +250,30 @@ test("TC: SALEOR_58 As an admin I should be able use pagination on product list
     `Product from first page: ${firstPageProductName} should be visible again`,
   ).toContainText(firstPageProductName);
 });
+
+test("TC: SALEOR_59 As an admin I should be able to filter products by channel on product list view @basic-regression @product @e2e", async ({
+  page,
+}) => {
+  const productPage = new ProductPage(page);
+  await productPage.gotoProductListPage();
+  await productPage.basePage.waitForGrid();
+
+  await expect(
+    productPage.basePage.gridCanvas,
+    `Product: ${PRODUCTS.productAvailableOnlyInUsdChannel.name} should be visible on grid table`,
+  ).toContainText(PRODUCTS.productAvailableOnlyInUsdChannel.name);
+
+  await productPage.basePage.clickFilterButton();
+  await productPage.filtersPage.pickFilter("Channel", "Channel-PLN");
+  await productPage.filtersPage.clickSaveFiltersButton();
+  await productPage.basePage.waitForGrid();
+
+  await expect(
+    productPage.basePage.gridCanvas,
+    `Product: ${PRODUCTS.productAvailableOnlyInUsdChannel.name} should not be visible on grid table`,
+  ).not.toContainText(PRODUCTS.productAvailableOnlyInUsdChannel.name);
+  await expect(
+    productPage.basePage.gridCanvas,
+    `Product: ${PRODUCTS.productAvailableOnlyInPlnChannel.name} should be visible on grid table`,
+  ).toContainText(PRODUCTS.productAvailableOnlyInPlnChannel.name);
+});