Migrate categories tests to playwright (#4595)

* Migrated warehouses tests: Edit warehouse; Delete warehouse

* Migrated categories tests: Create basic category; Edit category;Bulk delete categories

* Migrated warehouses tests: Edit warehouse; Delete warehouse (#4593)

* Migrated warehouses tests: Edit warehouse; Delete warehouse

* Update nervous-flowers-hear.md

* Update nervous-flowers-hear.md

* Use composites in pr automation workflow (#4597)

* Use composites

* Use composites

* Use composites

* Use composites

* Use composites

* changed shipping metod id in shippings tests

---------

Co-authored-by: Patryk Andrzejewski <vox3r69@gmail.com>

.changeset/green-oranges-deny.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Migrated categories tests: Create basic category; Edit category;Bulk delete categories

playwright/data/e2eTestData.ts

@@ -46,6 +46,18 @@ export const CUSTOMER_ADDRESS = {
     country: "Poland",
   },
 };
+export const CATEGORIES = {
+  categoryToBeUpdated: {
+    id: "Q2F0ZWdvcnk6NTA3",
+    name: "a category to be updated",
+  },
+  categoriesToBeBulkDeleted: {
+    names: [
+      "a cateogry to be bulk deleted 1/2",
+      "a cateogry to be bulk deleted 2/2",
+    ],
+  },
+};
 export const CHANNELS = {
   channelToBeEditedSettings: {
     id: "Q2hhbm5lbDoyMzkx",
@@ -160,7 +172,7 @@ export const ORDERS = {
 
 export const SHIPPING_METHODS = {
   shippingMethodWithoutRates: {
-    id: "U2hpcHBpbmdab25lOjIzNzg%3D",
+    id: "U2hpcHBpbmdab25lOjIzOTA%3D",
     info: "Shipping method that is used to add rates",
   },
 };

playwright/pages/basePage.ts

@@ -107,6 +107,8 @@ export class BasePage {
     await this.gridCanvas
       .locator("table")
       .nth(gridIndex)
+      .locator("tbody tr")
+      .first()
       .waitFor({ state: "attached", timeout: 10000 });
   }
 

playwright/pages/categoriesPage.ts

@@ -1,11 +1,66 @@
-import type { Locator, Page } from "@playwright/test";
+import { URL_LIST } from "@data/url";
+import { DeleteCategoriesDialog } from "@dialogs/deleteCategoriesDialog";
+import { MetadataSeoPage } from "@pageElements/metadataSeoPage";
+import { BasePage } from "@pages/basePage";
+import type { Page } from "@playwright/test";
 
-export class CategoriesPage {
+export class CategoriesPage extends BasePage {
   readonly page: Page;
-  readonly createCategoryButton: Locator;
+  readonly metadataSeoPage: MetadataSeoPage;
+  readonly deleteCategoriesDialog: DeleteCategoriesDialog;
 
-  constructor(page: Page) {
+  constructor(
+    page: Page,
+    readonly bulkDeleteButton = page.getByTestId("bulk-delete-button"),
+    readonly createCategoryButton = page.getByTestId("create-category"),
+    readonly productsTabButton = page.getByTestId("products-tab"),
+    readonly saveButton = page.getByTestId("button-bar-confirm"),
+    readonly productsGridList = page.getByTestId("list"),
+    readonly categoryDescriptionEditor = page.getByTestId(
+      "rich-text-editor-description",
+    ),
+
+    readonly categoryDescriptionLoader = page.locator(".codex-editor__loader"),
+    readonly categoryNameInput = page
+      .getByTestId("category-name-input")
+      .locator("input"),
+  ) {
+    super(page);
     this.page = page;
-    this.createCategoryButton = page.getByTestId("create-category");
+    this.metadataSeoPage = new MetadataSeoPage(page);
+    this.deleteCategoriesDialog = new DeleteCategoriesDialog(page);
+  }
+
+  async gotoCategoryListView() {
+    await this.page.goto(URL_LIST.categories);
+  }
+  async gotoExistingCategoriesPage(categoryId: string) {
+    const categoryUrl = URL_LIST.categories + categoryId;
+    await console.log("Navigating to category details: " + categoryUrl);
+    await this.page.goto(categoryUrl);
+  }
+
+  async clickCreateNewCategoryButton() {
+    await this.createCategoryButton.click();
+  }
+  async clickSaveButton() {
+    await this.saveButton.click();
+  }
+
+  async typeCategoryName(categoryName: string) {
+    await this.categoryNameInput.fill(categoryName);
+  }
+  async typeCategoryDescription(categoryDescription: string) {
+    await this.categoryDescriptionLoader.waitFor({ state: "hidden" });
+    await this.categoryDescriptionEditor
+      .locator('[contenteditable="true"]')
+      .fill(categoryDescription);
+  }
+
+  async clickBulkDeleteButton() {
+    await this.bulkDeleteButton.click();
+  }
+  async clickProductsTabButton() {
+    await this.productsTabButton.click();
   }
 }

playwright/pages/dialogs/deleteCategoriesDialog.ts

@@ -0,0 +1,14 @@
+import type { Page } from "@playwright/test";
+
+export class DeleteCategoriesDialog {
+  readonly page: Page;
+
+  constructor(page: Page, readonly deleteButton = page.getByTestId("submit")) {
+    this.page = page;
+  }
+
+  async clickDeleteButton() {
+    await this.deleteButton.first().click();
+    await this.deleteButton.waitFor({ state: "hidden" });
+  }
+}

playwright/tests/categories.spec.ts

@@ -0,0 +1,51 @@
+import { CATEGORIES } from "@data/e2eTestData";
+import { CategoriesPage } from "@pages/categoriesPage";
+import { expect, test } from "@playwright/test";
+
+test.use({ storageState: "playwright/.auth/admin.json" });
+let categoriesPage: CategoriesPage;
+test.beforeEach(({ page }) => {
+  categoriesPage = new CategoriesPage(page);
+});
+
+test("TC: SALEOR_102 Create basic category @e2e @category", async () => {
+  await categoriesPage.gotoCategoryListView();
+  await categoriesPage.clickCreateNewCategoryButton();
+  await categoriesPage.typeCategoryName("Utils");
+  await categoriesPage.typeCategoryDescription("Utils description");
+  await categoriesPage.metadataSeoPage.fillSeoSection();
+  await categoriesPage.metadataSeoPage.expandAndAddAllMetadata();
+  await categoriesPage.clickSaveButton();
+  await categoriesPage.expectSuccessBanner();
+});
+test("TC: SALEOR_103 Edit category @e2e @category", async () => {
+  await categoriesPage.gotoExistingCategoriesPage(
+    CATEGORIES.categoryToBeUpdated.id,
+  );
+  await categoriesPage.typeCategoryName("Updated category");
+  await categoriesPage.typeCategoryDescription("Utils description updated");
+  await categoriesPage.clickProductsTabButton();
+  await categoriesPage.clickSaveButton();
+  await categoriesPage.expectSuccessBanner();
+  await expect(categoriesPage.productsGridList).toContainText(
+    "beer to be updated",
+  );
+});
+
+test("TC: SALEOR_104 Bulk delete categories @e2e @category", async () => {
+  await categoriesPage.gotoCategoryListView();
+  await categoriesPage.checkListRowsBasedOnContainingText(
+    CATEGORIES.categoriesToBeBulkDeleted.names,
+  );
+
+  await categoriesPage.clickBulkDeleteButton();
+  await categoriesPage.deleteCategoriesDialog.clickDeleteButton();
+  await categoriesPage.waitForGrid();
+
+  expect(
+    await categoriesPage.findRowIndexBasedOnText(
+      CATEGORIES.categoriesToBeBulkDeleted.names,
+    ),
+    `Given categories: ${CATEGORIES.categoriesToBeBulkDeleted.names} should be deleted from the list`,
+  ).toEqual([]);
+});

src/categories/components/CategoryDetailsForm/CategoryDetailsForm.tsx

@@ -41,6 +41,7 @@ export const CategoryDetailsForm: React.FC<CategoryDetailsFormProps> = ({
       <CardContent>
         <div>
           <TextField
+            data-test-id="category-name-input"
             label={intl.formatMessage({
               id: "vEYtiq",
               defaultMessage: "Category Name",
@@ -57,6 +58,7 @@ export const CategoryDetailsForm: React.FC<CategoryDetailsFormProps> = ({
         <FormSpacer />
         {isReadyForMount ? (
           <RichTextEditor
+            data-test-id="category-description-editor"
             defaultValue={defaultValue}
             editorRef={editorRef}
             onChange={handleChange}

src/components/Datagrid/Datagrid.tsx

@@ -489,7 +489,10 @@ export const Datagrid: React.FC<DatagridProps> = ({
             )}
           </Header>
         )}
-        <CardContent classes={{ root: classes.cardContentRoot }}>
+        <CardContent
+          classes={{ root: classes.cardContentRoot }}
+          data-test-id="list"
+        >
           {rowsTotal > 0 || showEmptyDatagrid ? (
             <>
               {selection?.rows &&