test: view rename, delete

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

scripts/playwright/pages/Base.ts

@@ -11,20 +11,29 @@ export default abstract class BasePage {
     this.rootPage = rootPage;
   }
 
-  async toastWait ({message}: {message: string}){
-    // todo: text of toastr shows old one in the test assertion
-    await this.rootPage.locator('.ant-message .ant-message-notice-content', {hasText: message}).last().textContent()
+  async toastWait({ message }: { message: string }) {
+    // todo: text of toaster shows old one in the test assertion
+    await this.rootPage
+      .locator(".ant-message .ant-message-notice-content", { hasText: message })
+      .last()
+      .textContent()
       .then((text) => expect(text).toContain(message));
 
-    // await this.rootPage.locator('.ant-message .ant-message-notice-content', {hasText: message}).last().waitFor({state: 'detached'});
-
+    // await this.rootPage
+    //   .locator(".ant-message .ant-message-notice-content", { hasText: message })
+    //   .last()
+    //   .waitFor({ state: "detached" });
   }
 
-  async waitForResponseJson({responseSelector}:{ responseSelector: ResponseSelector }) {
+  async waitForResponseJson({
+    responseSelector,
+  }: {
+    responseSelector: ResponseSelector;
+  }) {
     await this.rootPage.waitForResponse(async (res) => {
       try {
         return responseSelector(await res.json());
-      } catch(e) {
+      } catch (e) {
         return false;
       }
     });

scripts/playwright/pages/Dashboard/ViewSidebar/index.ts

@@ -13,21 +13,32 @@ export class ViewSidebarPage extends BasePage {
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
-    this.createGalleryButton = this.get().locator('.nc-create-gallery-view');
-    this.createGridButton = this.get().locator('.nc-create-grid-view');
-    this.createFormButton = this.get().locator('.nc-create-form-view');
-    this.createKanbanButton = this.get().locator('.nc-create-kanban-view');
+    this.createGalleryButton = this.get().locator(".nc-create-gallery-view");
+    this.createGridButton = this.get().locator(".nc-create-grid-view");
+    this.createFormButton = this.get().locator(".nc-create-form-view");
+    this.createKanbanButton = this.get().locator(".nc-create-kanban-view");
   }
 
   get() {
-    return this.dashboard.get().locator('.nc-view-sidebar');
+    return this.dashboard.get().locator(".nc-view-sidebar");
   }
 
-  private async createView({ title, locator }: { title: string, locator: Locator }) {
+  private async createView({
+    title,
+    locator,
+  }: {
+    title: string;
+    locator: Locator;
+  }) {
     await locator.click();
-    await this.rootPage.locator('input[id="form_item_title"]').fill(title);
-    await this.rootPage.locator('.ant-modal-content').locator('button:has-text("Submit")').click();
-    await this.toastWait({ message: 'View created successfully'});
+    await this.rootPage
+      .locator('input[id="form_item_title"]:visible')
+      .fill(title);
+    await this.rootPage
+      .locator(".ant-modal-content")
+      .locator('button:has-text("Submit"):visible')
+      .click();
+    await this.toastWait({ message: "View created successfully" });
   }
 
   async createGalleryView({ title }: { title: string }) {
@@ -46,30 +57,52 @@ export class ViewSidebarPage extends BasePage {
     await this.createView({ title, locator: this.createKanbanButton });
   }
 
-  async verifyView({ title, index }: { title: string, index: number }) {
-    return await expect.poll(async() => {
-      await this.get().locator(`.nc-views-menu`).locator('.ant-menu-title-content').nth(index).textContent();
-    }).toBe(title);
+  async verifyView({ title, index }: { title: string; index: number }) {
+    expect(
+      await this.get()
+        .locator(".ant-menu-title-content")
+        .nth(index)
+        .textContent()
+    ).toBe(`${title}${title}`);
   }
 
-  async verifyViewNotPresent({ title, index }: { title: string, index: number }) {
-    const viewList = this.get().locator(`.nc-views-menu`).locator('.ant-menu-title-content');
-    if(await viewList.count() <= index) {
-      return true
+  async verifyViewNotPresent({
+    title,
+    index,
+  }: {
+    title: string;
+    index: number;
+  }) {
+    const viewList = this.get()
+      .locator(`.nc-views-menu`)
+      .locator(".ant-menu-title-content");
+    if ((await viewList.count()) <= index) {
+      return true;
     }
 
-    return await expect.poll(async() => {
-      await this.get().locator(`.nc-views-menu`).locator('.ant-menu-title-content').nth(index).textContent();
-    }).not.toBe(title);
+    return await expect
+      .poll(async () => {
+        await this.get()
+          .locator(`.nc-views-menu`)
+          .locator(".ant-menu-title-content")
+          .nth(index)
+          .textContent();
+      })
+      .not.toBe(title);
   }
 
-  async reorderViews({sourceView, destinationView}: {
-    sourceView: string,
-    destinationView: string,
+  async reorderViews({
+    sourceView,
+    destinationView,
+  }: {
+    sourceView: string;
+    destinationView: string;
   }) {
-
-    await this.dashboard.get().locator(`[pw-data="view-sidebar-drag-handle-${sourceView}"]`).dragTo(
-      this.get().locator(`[pw-data="view-sidebar-view-${destinationView}"]`),
+    await this.dashboard
+      .get()
+      .locator(`[pw-data="view-sidebar-drag-handle-${sourceView}"]`)
+      .dragTo(
+        this.get().locator(`[pw-data="view-sidebar-view-${destinationView}"]`)
       );
   }
 
@@ -77,11 +110,31 @@ export class ViewSidebarPage extends BasePage {
     await this.get().locator(`[pw-data="view-sidebar-view-${title}"]`).hover();
     await this.get()
       .locator(`[pw-data="view-sidebar-view-actions-${title}"]`)
-      .locator('.nc-view-delete-icon')
+      .locator(".nc-view-delete-icon")
       .click();
 
-    await this.rootPage.locator('.nc-modal-view-delete').locator('button:has-text("Submit")').click();
-    await this.rootPage.locator('.nc-modal-view-delete').locator('button:has-text("Submit")').waitFor({ state: 'detached' });
-    await this.toastWait({ message: 'View deleted successfully'});
+    await this.rootPage
+      .locator(".nc-modal-view-delete")
+      .locator('button:has-text("Submit"):visible')
+      .click();
+
+    // waiting for button to get detached, we will miss toast
+    // await this.rootPage
+    //   .locator(".nc-modal-view-delete")
+    //   .locator('button:has-text("Submit")')
+    //   .waitFor({ state: "detached" });
+    await this.toastWait({ message: "View deleted successfully" });
+  }
+
+  async renameView({ title, newTitle }: { title: string; newTitle: string }) {
+    await this.get()
+      .locator(`[pw-data="view-sidebar-view-${title}"]`)
+      .dblclick();
+    await this.get()
+      .locator(`[pw-data="view-sidebar-view-${title}"]`)
+      .locator("input")
+      .fill(newTitle);
+    await this.get().press("Enter");
+    await this.toastWait({ message: "View renamed successfully" });
   }
 }

scripts/playwright/tests/views.spec.ts

@@ -1,46 +1,76 @@
-import { test } from '@playwright/test';
-import { DashboardPage } from '../pages/Dashboard';
-import setup from '../setup';
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
 
-
-// todo: Enable when view bug is fixed
-test.describe.skip('Views', () => {
+test.describe("Views CRUD Operations", () => {
   let dashboard: DashboardPage;
   let context: any;
 
-  test.beforeEach(async ({page}) => {
+  test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
-  })
-
-  test('Create views, reorder and delete', async () => {
-    await dashboard.treeView.openTable({title: "City"});
-
-    await dashboard.viewSidebar.createGridView({title: "CityGrid"});
-    await dashboard.viewSidebar.verifyView({title: "CityGrid", index: 1});
+  });
 
-    await dashboard.viewSidebar.createFormView({title: "CityForm"});
-    await dashboard.viewSidebar.verifyView({title: "CityForm", index: 2});
+  test("Create views, reorder and delete", async () => {
+    await dashboard.treeView.openTable({ title: "City" });
+    await dashboard.viewSidebar.createGridView({ title: "CityGrid" });
+    await dashboard.viewSidebar.verifyView({ title: "CityGrid", index: 1 });
+    await dashboard.viewSidebar.renameView({
+      title: "CityGrid",
+      newTitle: "CityGrid2",
+    });
+    await dashboard.viewSidebar.verifyView({
+      title: "CityGrid2",
+      index: 1,
+    });
 
-    await dashboard.viewSidebar.createGalleryView({title: "CityGallery"});
-    await dashboard.viewSidebar.verifyView({title: "CityGallery", index: 3});
+    await dashboard.viewSidebar.createFormView({ title: "CityForm" });
+    await dashboard.viewSidebar.verifyView({ title: "CityForm", index: 2 });
+    await dashboard.viewSidebar.renameView({
+      title: "CityForm",
+      newTitle: "CityForm2",
+    });
+    await dashboard.viewSidebar.verifyView({
+      title: "CityForm2",
+      index: 2,
+    });
 
-    await dashboard.viewSidebar.reorderViews({
-      sourceView: "CityGrid",
-      destinationView: "CityForm"
+    await dashboard.viewSidebar.createGalleryView({ title: "CityGallery" });
+    await dashboard.viewSidebar.verifyView({ title: "CityGallery", index: 3 });
+    await dashboard.viewSidebar.renameView({
+      title: "CityGallery",
+      newTitle: "CityGallery2",
+    });
+    await dashboard.viewSidebar.verifyView({
+      title: "CityGallery2",
+      index: 3,
     });
-    await dashboard.viewSidebar.verifyView({title: "CityGrid", index: 2});
-    await dashboard.viewSidebar.verifyView({title: "CityForm", index: 1});
 
-    await dashboard.viewSidebar.deleteView({title: "CityForm"});
-    await dashboard.viewSidebar.verifyViewNotPresent({title: "CityForm", index: 1});
+    // todo: Enable when view bug is fixed
+    // await dashboard.viewSidebar.reorderViews({
+    //   sourceView: "CityGrid",
+    //   destinationView: "CityForm",
+    // });
+    // await dashboard.viewSidebar.verifyView({ title: "CityGrid", index: 2 });
+    // await dashboard.viewSidebar.verifyView({ title: "CityForm", index: 1 });
 
-    // todo: Delete form view is deleting grid view. Probably a bug.
-    // await dashboard.viewSidebar.deleteView({title: "CityGrid"});
-    // await dashboard.viewSidebar.verifyViewNotPresent({title: "CityGrid", index: 1});
+    // await dashboard.viewSidebar.deleteView({ title: "CityForm2" });
+    // await dashboard.viewSidebar.verifyViewNotPresent({
+    //   title: "CityGrid2",
+    //   index: 2,
+    // });
 
-    await dashboard.viewSidebar.deleteView({title: "CityGallery"});
-    await dashboard.viewSidebar.verifyViewNotPresent({title: "CityGallery", index: 1});
+    await dashboard.viewSidebar.deleteView({ title: "CityForm2" });
+    await dashboard.viewSidebar.verifyViewNotPresent({
+      title: "CityForm2",
+      index: 2,
     });
 
+    // fix index after enabling reorder test
+    await dashboard.viewSidebar.deleteView({ title: "CityGallery2" });
+    await dashboard.viewSidebar.verifyViewNotPresent({
+      title: "CityGallery2",
+      index: 2,
+    });
+  });
 });