mirror of https://github.com/nocodb/nocodb
Raju Udava
2 years ago
committed by
Muhammed Mustafa
8 changed files with 335 additions and 13 deletions
@ -0,0 +1,112 @@
|
||||
// playwright-dev-page.ts
|
||||
import { Locator, expect } from "@playwright/test"; |
||||
import { DashboardPage } from ".."; |
||||
import BasePage from "../../Base"; |
||||
import { ToolbarPage } from "../common/Toolbar"; |
||||
|
||||
export class KanbanPage extends BasePage { |
||||
readonly dashboard: DashboardPage; |
||||
readonly toolbar: ToolbarPage; |
||||
|
||||
constructor(dashboard: DashboardPage) { |
||||
super(dashboard.rootPage); |
||||
this.dashboard = dashboard; |
||||
this.toolbar = new ToolbarPage(this); |
||||
} |
||||
|
||||
get() { |
||||
return this.dashboard.get().locator('[data-pw="nc-kanban-wrapper"]'); |
||||
} |
||||
|
||||
card(index: number) { |
||||
return this.get().locator(`.ant-card`).nth(index); |
||||
} |
||||
|
||||
async openExpandedRow({ index }: { index: number }) { |
||||
await this.card(index).click(); |
||||
await ( |
||||
await this.rootPage.locator(".ant-drawer-body").elementHandle() |
||||
)?.waitForElementState("stable"); |
||||
} |
||||
|
||||
async addOption() {} |
||||
|
||||
async dragDropCard(param: { from: string; to: string }) { |
||||
// const { from, to } = param;
|
||||
// const srcStack = await this.get().locator(`.nc-kanban-stack`).nth(1);
|
||||
// const dstStack = await this.get().locator(`.nc-kanban-stack`).nth(2);
|
||||
// const fromCard = await srcStack.locator(`.nc-kanban-item`).nth(1);
|
||||
// const toCard = await dstStack.locator(`.nc-kanban-item`).nth(1);
|
||||
// const [fromCard, toCard] = await Promise.all([
|
||||
// srcStack.locator(`.nc-kanban-item[data-draggable="true"]`).nth(0),
|
||||
// dstStack.locator(`.nc-kanban-item[data-draggable="true"]`).nth(0),
|
||||
// ]);
|
||||
// const fromCard = await this.get().locator(`.nc-kanban-item`).nth(0);
|
||||
// const toCard = await this.get().locator(`.nc-kanban-item`).nth(25);
|
||||
// await fromCard.dragTo(toCard);
|
||||
} |
||||
|
||||
async dragDropStack(param: { from: number; to: number }) { |
||||
const { from, to } = param; |
||||
const [fromStack, toStack] = await Promise.all([ |
||||
this.rootPage.locator(`.nc-kanban-stack-head`).nth(from), |
||||
this.rootPage.locator(`.nc-kanban-stack-head`).nth(to), |
||||
]); |
||||
await fromStack.dragTo(toStack); |
||||
} |
||||
|
||||
async verifyStackCount(param: { count: number }) { |
||||
const { count } = param; |
||||
expect(await this.get().locator(`.nc-kanban-stack`).count()).toBe(count); |
||||
} |
||||
|
||||
async verifyStackOrder(param: { order: string[] }) { |
||||
const { order } = param; |
||||
const stacks = await this.get().locator(`.nc-kanban-stack`).count(); |
||||
for (let i = 0; i < stacks; i++) { |
||||
const stack = await this.get().locator(`.nc-kanban-stack`).nth(i); |
||||
const stackTitle = await stack |
||||
.locator(`.nc-kanban-stack-head`) |
||||
.innerText(); |
||||
expect(stackTitle).toBe(order[i]); |
||||
} |
||||
} |
||||
|
||||
async verifyStackFooter(param: { count: number[] }) { |
||||
const { count } = param; |
||||
const stacks = await this.get().locator(`.nc-kanban-stack`).count(); |
||||
for (let i = 0; i < stacks; i++) { |
||||
const stack = await this.get().locator(`.nc-kanban-stack`).nth(i); |
||||
const stackFooter = await stack |
||||
.locator(`.nc-kanban-data-count`) |
||||
.innerText(); |
||||
expect(stackFooter).toContain( |
||||
`${count[i]} record${count[i] !== 1 ? "s" : ""}` |
||||
); |
||||
} |
||||
} |
||||
|
||||
async verifyCardCount(param: { count: number[] }) { |
||||
const { count } = param; |
||||
const stacks = await this.get().locator(`.nc-kanban-stack`).count(); |
||||
for (let i = 0; i < stacks; i++) { |
||||
const stack = await this.get().locator(`.nc-kanban-stack`).nth(i); |
||||
const stackCards = await stack.locator(`.nc-kanban-item`).count(); |
||||
expect(stackCards).toBe(count[i]); |
||||
} |
||||
} |
||||
|
||||
async verifyCardOrder(param: { order: string[]; stackIndex: number }) { |
||||
const { order, stackIndex } = param; |
||||
const stack = await this.get().locator(`.nc-kanban-stack`).nth(stackIndex); |
||||
for (let i = 0; i < order.length; i++) { |
||||
const card = await stack.locator(`.nc-kanban-item`).nth(i); |
||||
const cardTitle = await card.locator(`.nc-cell`).innerText(); |
||||
expect(cardTitle).toBe(order[i]); |
||||
} |
||||
} |
||||
|
||||
async waitLoading() { |
||||
await this.rootPage.waitForTimeout(1000); |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
import BasePage from "../../../Base"; |
||||
import { ToolbarPage } from "./index"; |
||||
|
||||
export class ToolbarStackbyPage extends BasePage { |
||||
readonly toolbar: ToolbarPage; |
||||
|
||||
constructor(toolbar: ToolbarPage) { |
||||
super(toolbar.rootPage); |
||||
this.toolbar = toolbar; |
||||
} |
||||
|
||||
get() { |
||||
return this.rootPage.locator(`.nc-dropdown-kanban-stacked-by-menu`); |
||||
} |
||||
|
||||
async click({ title }: { title: string }) { |
||||
await this.get().locator(`.nc-kanban-grouping-field-select`).click(); |
||||
await this.rootPage |
||||
.locator(".ant-select-dropdown:visible") |
||||
.locator(`div[title="${title}"]`) |
||||
.click(); |
||||
} |
||||
|
||||
// click({ title }: { title: string }) {
|
||||
// return this.get().locator(`[pw-data="nc-fields-menu-${title}"]`).click();
|
||||
// }
|
||||
} |
||||
@ -0,0 +1,146 @@
|
||||
import { test } from "@playwright/test"; |
||||
import { DashboardPage } from "../pages/Dashboard"; |
||||
import { ToolbarPage } from "../pages/Dashboard/common/Toolbar"; |
||||
|
||||
import setup from "../setup"; |
||||
|
||||
test.describe("View", () => { |
||||
let dashboard: DashboardPage, toolbar: ToolbarPage; |
||||
let context: any; |
||||
|
||||
test.beforeEach(async ({ page }) => { |
||||
context = await setup({ page }); |
||||
dashboard = new DashboardPage(page, context.project); |
||||
toolbar = toolbar = dashboard.kanban.toolbar; |
||||
}); |
||||
|
||||
test("Kanban", async () => { |
||||
// close 'Team & Auth' tab
|
||||
await dashboard.closeTab({ title: "Team & Auth" }); |
||||
await dashboard.treeView.openTable({ title: "Film" }); |
||||
|
||||
await dashboard.viewSidebar.createKanbanView({ |
||||
title: "Film Kanban", |
||||
}); |
||||
await dashboard.viewSidebar.verifyView({ |
||||
title: "Film Kanban", |
||||
index: 1, |
||||
}); |
||||
|
||||
// configure stack-by field
|
||||
await toolbar.clickStackByField(); |
||||
await toolbar.stackBy.click({ title: "Rating" }); |
||||
// click again to close menu
|
||||
await toolbar.clickStackByField(); |
||||
|
||||
const kanban = dashboard.kanban; |
||||
await kanban.verifyStackCount({ count: 6 }); |
||||
await kanban.verifyStackOrder({ |
||||
order: ["Uncategorized", "G", "PG", "PG-13", "R", "NC-17"], |
||||
}); |
||||
await kanban.verifyStackFooter({ |
||||
count: [0, 178, 194, 223, 195, 210], |
||||
}); |
||||
await kanban.verifyCardCount({ |
||||
count: [0, 25, 25, 25, 25, 25], |
||||
}); |
||||
|
||||
// hide fields
|
||||
await toolbar.fields.hideAll(); |
||||
await toolbar.fields.toggle({ title: "Title" }); |
||||
await kanban.verifyCardCount({ |
||||
count: [0, 25, 25, 25, 25, 25], |
||||
}); |
||||
|
||||
// verify card order
|
||||
const order = [ |
||||
["ACE GOLDFINGER", "AFFAIR PREJUDICE", "AFRICAN EGG"], |
||||
["ACADEMY DINOSAUR", "AGENT TRUMAN", "ALASKA PHANTOM"], |
||||
["AIRPLANE SIERRA", "ALABAMA DEVIL", "ALTER VICTORY"], |
||||
["AIRPORT POLLOCK", "ALONE TRIP", "AMELIE HELLFIGHTERS"], |
||||
["ADAPTATION HOLES", "ALADDIN CALENDAR", "ALICE FANTASIA"], |
||||
]; |
||||
for (let i = 1; i <= order.length; i++) |
||||
await kanban.verifyCardOrder({ |
||||
stackIndex: i, |
||||
order: order[i - 1], |
||||
}); |
||||
|
||||
// // verify inter stack drag-drop
|
||||
// await kanban.dragDropCard({
|
||||
// from: "ACE GOLDFINGER",
|
||||
// to: "ACADEMY DINOSAUR",
|
||||
// });
|
||||
|
||||
// verify drag drop stack
|
||||
await kanban.dragDropStack({ |
||||
from: 1, // G
|
||||
to: 2, // PG
|
||||
}); |
||||
await kanban.verifyStackOrder({ |
||||
order: ["Uncategorized", "PG", "G", "PG-13", "R", "NC-17"], |
||||
}); |
||||
// verify drag drop stack
|
||||
await kanban.dragDropStack({ |
||||
from: 2, // G
|
||||
to: 1, // PG
|
||||
}); |
||||
await kanban.verifyStackOrder({ |
||||
order: ["Uncategorized", "G", "PG", "PG-13", "R", "NC-17"], |
||||
}); |
||||
|
||||
// verify sort
|
||||
await toolbar.sort.addSort({ columnTitle: "Title", isAscending: false }); |
||||
// verify card order
|
||||
const order2 = [ |
||||
["YOUNG LANGUAGE", "WEST LION"], |
||||
["WORST BANGER", "WORDS HUNTER"], |
||||
]; |
||||
for (let i = 1; i <= order2.length; i++) |
||||
await kanban.verifyCardOrder({ |
||||
stackIndex: i, |
||||
order: order2[i - 1], |
||||
}); |
||||
await toolbar.sort.resetSort(); |
||||
// verify card order
|
||||
const order3 = [ |
||||
["ACE GOLDFINGER", "AFFAIR PREJUDICE", "AFRICAN EGG"], |
||||
["ACADEMY DINOSAUR", "AGENT TRUMAN", "ALASKA PHANTOM"], |
||||
]; |
||||
for (let i = 1; i <= order3.length; i++) |
||||
await kanban.verifyCardOrder({ |
||||
stackIndex: i, |
||||
order: order3[i - 1], |
||||
}); |
||||
|
||||
// verify filter
|
||||
await toolbar.filter.addNew({ |
||||
columnTitle: "Title", |
||||
opType: "is like", |
||||
value: "BA", |
||||
isLocallySaved: false, |
||||
}); |
||||
// verify card order
|
||||
const order4 = [ |
||||
["BAKED CLEOPATRA", "BALLROOM MOCKINGBIRD"], |
||||
["ARIZONA BANG", "EGYPT TENENBAUMS"], |
||||
]; |
||||
for (let i = 1; i <= order4.length; i++) |
||||
await kanban.verifyCardOrder({ |
||||
stackIndex: i, |
||||
order: order4[i - 1], |
||||
}); |
||||
await toolbar.filter.resetFilter(); |
||||
const order5 = [ |
||||
["ACE GOLDFINGER", "AFFAIR PREJUDICE", "AFRICAN EGG"], |
||||
["ACADEMY DINOSAUR", "AGENT TRUMAN", "ALASKA PHANTOM"], |
||||
]; |
||||
for (let i = 1; i <= order5.length; i++) |
||||
await kanban.verifyCardOrder({ |
||||
stackIndex: i, |
||||
order: order5[i - 1], |
||||
}); |
||||
|
||||
await dashboard.rootPage.waitForTimeout(1000); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue