test: row height

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

tests/playwright/pages/Dashboard/Grid/Row.ts

@@ -0,0 +1,26 @@
+import BasePage from '../../Base';
+import { GridPage } from './index';
+
+export class RowPageObject extends BasePage {
+  readonly grid: GridPage;
+
+  constructor(grid: GridPage) {
+    super(grid.rootPage);
+    this.grid = grid;
+  }
+
+  get() {
+    return this.rootPage.locator('tr.nc-grid-row');
+  }
+
+  async getRecord(index: number) {
+    return this.get().nth(index);
+  }
+
+  // style="height: 3rem;"
+  async getRecordHeight(index: number) {
+    const record = await this.getRecord(index);
+    const style = await record.getAttribute('style');
+    return style.split(':')[1].split(';')[0].trim();
+  }
+}

tests/playwright/pages/Dashboard/Grid/index.ts

@@ -7,6 +7,7 @@ import { ToolbarPage } from '../common/Toolbar';
 import { ProjectMenuObject } from '../common/ProjectMenu';
 import { QrCodeOverlay } from '../QrCodeOverlay';
 import { BarcodeOverlay } from '../BarcodeOverlay';
+import { RowPageObject } from './Row';
 
 export class GridPage extends BasePage {
   readonly dashboard: DashboardPage;
@@ -18,6 +19,7 @@ export class GridPage extends BasePage {
   readonly cell: CellPageObject;
   readonly toolbar: ToolbarPage;
   readonly projectMenu: ProjectMenuObject;
+  readonly rowPage: RowPageObject;
 
   constructor(dashboardPage: DashboardPage) {
     super(dashboardPage.rootPage);
@@ -29,6 +31,7 @@ export class GridPage extends BasePage {
     this.cell = new CellPageObject(this);
     this.toolbar = new ToolbarPage(this);
     this.projectMenu = new ProjectMenuObject(this);
+    this.rowPage = new RowPageObject(this);
   }
 
   get() {

tests/playwright/pages/Dashboard/common/Toolbar/RowHeight.ts

@@ -0,0 +1,19 @@
+import BasePage from '../../../Base';
+import { ToolbarPage } from './index';
+
+export class RowHeight extends BasePage {
+  readonly toolbar: ToolbarPage;
+
+  constructor(toolbar: ToolbarPage) {
+    super(toolbar.rootPage);
+    this.toolbar = toolbar;
+  }
+
+  get() {
+    return this.rootPage.locator(`[data-testid="nc-height-menu"]`);
+  }
+
+  click({ title }: { title: string }) {
+    return this.get().locator(`.nc-row-height-option:has-text("${title}")`).click();
+  }
+}

tests/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -14,6 +14,7 @@ import { FormPage } from '../../Form';
 import { ToolbarStackbyPage } from './StackBy';
 import { ToolbarAddEditStackPage } from './AddEditKanbanStack';
 import { ToolbarSearchDataPage } from './SearchData';
+import { RowHeight } from './RowHeight';
 
 export class ToolbarPage extends BasePage {
   readonly parent: GridPage | GalleryPage | FormPage | KanbanPage;
@@ -26,6 +27,7 @@ export class ToolbarPage extends BasePage {
   readonly stackBy: ToolbarStackbyPage;
   readonly addEditStack: ToolbarAddEditStackPage;
   readonly searchData: ToolbarSearchDataPage;
+  readonly rowHeight: RowHeight;
 
   constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage) {
     super(parent.rootPage);
@@ -39,6 +41,7 @@ export class ToolbarPage extends BasePage {
     this.stackBy = new ToolbarStackbyPage(this);
     this.addEditStack = new ToolbarAddEditStackPage(this);
     this.searchData = new ToolbarSearchDataPage(this);
+    this.rowHeight = new RowHeight(this);
   }
 
   get() {
@@ -136,6 +139,11 @@ export class ToolbarPage extends BasePage {
     await expect(file).toEqual(expectedData);
   }
 
+  async clickRowHeight() {
+    // ant-btn nc-height-menu-btn nc-toolbar-btn
+    await this.get().locator(`.nc-toolbar-btn.nc-height-menu-btn`).click();
+  }
+
   async verifyStackByButton({ title }: { title: string }) {
     await this.get().locator(`.nc-toolbar-btn.nc-kanban-stacked-by-menu-btn`).waitFor({ state: 'visible' });
     await expect(

tests/playwright/tests/toolbarOperations.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
 import setup from '../setup';
@@ -73,4 +73,27 @@ test.describe('Toolbar operations (GRID)', () => {
 
     await dashboard.closeTab({ title: 'Country' });
   });
+
+  test('row height', async () => {
+    // define an array of row heights
+    const rowHeight = [
+      { title: 'Short', height: '1.5rem' },
+      { title: 'Medium', height: '3rem' },
+      { title: 'Tall', height: '6rem' },
+      { title: 'Extra', height: '9rem' },
+    ];
+
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: 'Team & Auth' });
+    await dashboard.treeView.openTable({ title: 'Country' });
+
+    // set row height & verify
+    for (let i = 0; i < rowHeight.length; i++) {
+      await toolbar.clickRowHeight();
+      await toolbar.rowHeight.click({ title: rowHeight[i].title });
+      await dashboard.grid.rowPage.getRecordHeight(0).then(height => {
+        expect(height).toBe(rowHeight[i].height);
+      });
+    }
+  });
 });