add tests and update data-test-id

playwright/data/e2eTestData.ts

@@ -537,7 +537,7 @@ export const TRANSLATIONS = {
 
 export const PAGE_TYPES = {
   pageTypeToBeEdited: {
-    id: "UGFnZVR5cGU6Mzc=",
+    id: "UGFnZVR5cGU6MzQ=",
     name: "A page type to be edited",
     info: "Page type used in edit page type test",
   },

playwright/pages/dialogs/deleteDialog.ts

@@ -9,6 +9,7 @@ export class DeleteDialog {
     readonly confirmDeletionCheckbox = page.locator(
       "[name='delete-assigned-items-consent']",
     ),
+    readonly confirmDeleteButton = page.getByTestId("confirm-delete")
   ) {
     this.page = page;
   }
@@ -20,4 +21,9 @@ export class DeleteDialog {
   async clickConfirmDeletionCheckbox() {
     await this.confirmDeletionCheckbox.click();
   }
+
+  async clickConfirmDeleteButton() {
+    await this.confirmDeleteButton.click();
+    await this.confirmDeleteButton.waitFor({ state: "hidden" });
+  }
 }

playwright/pages/pageTypesPage.ts

@@ -1,12 +1,65 @@
 import type { Page } from "@playwright/test";
+import { URL_LIST } from "@data/url";
+import { BasePage } from "@pages/basePage";
+import { DeleteDialog } from "@pages/dialogs/deleteDialog";
 
-export class PageTypesPage {
+export class PageTypesPage extends BasePage {
   readonly page: Page;
+  readonly basePage: BasePage;
+  readonly deletePageTypeDialog: DeleteDialog;
 
   constructor(
     page: Page,
     readonly createPageTypeButton = page.getByTestId("create-page-type"),
+    readonly nameInput = page.locator("[name='name']"),
+    readonly saveButton = page.getByTestId("button-bar-confirm"),
+    readonly bulkDeleteButton = page.getByTestId("bulk-delete-page-types"),
+    readonly pageTypeList = page.getByTestId("page-types-list"),
+    readonly rowCheckbox = page.getByTestId("checkbox"),
   ) {
+    super(page);
     this.page = page;
+    this.basePage = new BasePage(page);
+    this.deletePageTypeDialog = new DeleteDialog(page);
+  }
+
+  async gotoPageTypeListPage() {
+    await this.page.goto(URL_LIST.pageTypes);
+  }
+
+  async clickCreatePageTypeButton() {
+    await this.createPageTypeButton.click();
+  }
+
+  async typePageTypeName(name: string) {
+    await this.nameInput.fill(name);
+  }
+
+  async updatePageTypeName(name: string) {
+    await this.nameInput.clear();
+    await this.nameInput.fill(name);
+  }
+
+  async clickSaveButton() {
+    await this.saveButton.click();
+  }
+
+  async gotoExistingPageTypePage(pageTypeId: string) {
+    const existingPageTypeUrl = URL_LIST.pageTypes + pageTypeId;
+    await console.log(
+      "Navigating to page type details: " + existingPageTypeUrl,
+    );
+    await this.page.goto(existingPageTypeUrl);
+  }
+
+  async clickBulkDeleteButton() {
+    await this.bulkDeleteButton.click();
+  }
+
+  async checkPageTypesOnList(listRows: string[]) {
+    for (const row of listRows) {
+      const rowLocator = this.page.getByTestId(`id-${row}`);
+      await rowLocator.locator("input").click();
+    }
   }
 }

playwright/tests/pageTypes.spec.ts

@@ -0,0 +1,63 @@
+import * as faker from "faker";
+import { PAGE_TYPES } from "@data/e2eTestData";
+import { PageTypesPage } from "@pages/pageTypesPage";
+import { test, expect } from "@playwright/test";
+
+test.use({ storageState: "./playwright/.auth/admin.json" });
+const pageTypeName = `e2e-page-type-${faker.datatype.number()}`;
+
+test("TC: SALEOR_187 As an admin user I can create page type @e2e @page-type", async ({
+    page,
+}) => {
+    const pageTypePage = new PageTypesPage(page);
+
+    await pageTypePage.gotoPageTypeListPage();
+    await pageTypePage.clickCreatePageTypeButton();
+    await pageTypePage.typePageTypeName(pageTypeName);
+    await pageTypePage.clickSaveButton();
+    await pageTypePage.expectSuccessBanner();
+});
+
+
+test("TC: SALEOR_188 As an admin user I can update page type@e2e @page-type", async ({
+    page,
+}) => {
+    const pageTypePage = new PageTypesPage(page);
+    const updatedPageTypeName = `updated-e2e-page-type-${faker.datatype.number()}`;
+    await pageTypePage.gotoExistingPageTypePage(PAGE_TYPES.pageTypeToBeEdited.id);
+    await pageTypePage.updatePageTypeName(updatedPageTypeName);
+    await pageTypePage.clickSaveButton();
+    await pageTypePage.expectSuccessBanner();
+});
+
+test("TC: SALEOR_189 As an admin user I can delete page type with assigned content@e2e @page-type", async ({
+    page,
+}) => {
+    const pageTypePage = new PageTypesPage(page);
+    const pageType = PAGE_TYPES.pageTypeToBeRemoved;
+
+    await pageTypePage.gotoExistingPageTypePage(pageType.id);
+    await pageTypePage.clickDeleteButton();
+    await pageTypePage.deletePageTypeDialog.clickConfirmDeletionCheckbox();
+    await pageTypePage.deletePageTypeDialog.clickConfirmDeleteButton();
+    await pageTypePage.expectSuccessBanner();
+    await pageTypePage.pageTypeList.waitFor({ state: "visible", timeout: 50000 });
+    await expect(pageTypePage.pageTypeList).not.toContainText(pageType.name);
+});
+
+test("TC: SALEOR_190 As an admin user I can delete several page types@e2e @page-type", async ({
+    page,
+}) => {
+    const pageTypePage = new PageTypesPage(page);
+    const rowsToBeDeleted = PAGE_TYPES.pageTypesToBeBulkDeleted.ids;
+    const pageTypeNames = PAGE_TYPES.pageTypesToBeBulkDeleted.names;
+
+    await pageTypePage.gotoPageTypeListPage();
+    await expect(pageTypePage.pageTypeList).toBeVisible();
+    await pageTypePage.checkPageTypesOnList(rowsToBeDeleted);
+    await pageTypePage.clickBulkDeleteButton();
+    await pageTypePage.deletePageTypeDialog.clickConfirmDeleteButton();
+    await pageTypePage.expectSuccessBanner();
+    await expect(pageTypePage.pageTypeList).not.toContainText(pageTypeNames[0]);
+    await expect(pageTypePage.pageTypeList).not.toContainText(pageTypeNames[1]);
+});

src/pageTypes/components/PageTypeList/PageTypeList.tsx

@@ -89,7 +89,7 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
           />
         </TableRowLink>
       </TableFooter>
-      <TableBody>
+      <TableBody data-test-id="page-types-list">
         {renderCollection(
           pageTypes,
           pageType => {

src/pageTypes/views/PageTypeList/PageTypeList.tsx

@@ -186,6 +186,7 @@ export const PageTypeList: React.FC<PageTypeListProps> = ({ params }) => {
           <IconButton
             variant="secondary"
             color="primary"
+            data-test-id="bulk-delete-page-types"
             onClick={() =>
               openModal("remove", {
                 ids: selectedPageTypes,