mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 lines
9.4 KiB
272 lines
9.4 KiB
import { expect, Locator, Page } from '@playwright/test'; |
|
import BasePage from '../Base'; |
|
import { DashboardPage } from '../Dashboard'; |
|
|
|
export class ProjectsPage extends BasePage { |
|
readonly buttonEditProject: Locator; |
|
readonly buttonDeleteProject: Locator; |
|
readonly buttonMoreActions: Locator; |
|
readonly buttonNewProject: Locator; |
|
readonly buttonColorSelector: Locator; |
|
|
|
constructor(rootPage: Page) { |
|
super(rootPage); |
|
this.buttonEditProject = this.get().locator('.nc-action-btn.nc-edit-project'); |
|
this.buttonDeleteProject = this.get().locator('.nc-action-btn.nc-delete-project'); |
|
this.buttonMoreActions = this.get().locator('.nc-import-menu'); |
|
this.buttonNewProject = this.get().locator('.nc-new-project-menu'); |
|
this.buttonColorSelector = this.get().locator('div.color-selector'); |
|
} |
|
|
|
prefixTitle(title: string) { |
|
const parallelId = process.env.TEST_PARALLEL_INDEX ?? '0'; |
|
return `nc_test_${parallelId}_${title}`; |
|
} |
|
|
|
get() { |
|
return this.rootPage.locator('[data-testid="projects-container"]'); |
|
} |
|
|
|
// create project |
|
async createProject({ name = 'sample', withoutPrefix }: { name?: string; type?: string; withoutPrefix?: boolean }) { |
|
if (!withoutPrefix) name = this.prefixTitle(name); |
|
|
|
// Click "New Project" button |
|
await this.get().locator('.nc-new-project-menu').click(); |
|
|
|
await this.rootPage.locator(`.nc-metadb-project-name`).waitFor(); |
|
await this.rootPage.locator(`input.nc-metadb-project-name`).fill(name); |
|
|
|
const createProjectSubmitAction = () => this.rootPage.locator(`button:has-text("Create")`).click(); |
|
await this.waitForResponse({ |
|
uiAction: createProjectSubmitAction, |
|
httpMethodsToMatch: ['POST'], |
|
requestUrlPathToMatch: '/api/v1/db/meta/projects/', |
|
}); |
|
|
|
// wait for dashboard to render |
|
await this.rootPage.locator('.nc-container').waitFor({ state: 'visible' }); |
|
} |
|
|
|
// duplicate project |
|
async duplicateProject({ |
|
name = 'sample', |
|
withoutPrefix, |
|
includeData = true, |
|
includeViews = true, |
|
}: { |
|
name?: string; |
|
type?: string; |
|
withoutPrefix?: boolean; |
|
includeData: boolean; |
|
includeViews: boolean; |
|
}) { |
|
if (!withoutPrefix) name = this.prefixTitle(name); |
|
// click three-dot |
|
await this.rootPage.getByTestId('p-three-dot-' + name).click(); |
|
// check duplicate visible |
|
await expect(this.rootPage.getByTestId('dupe-project-' + name)).toBeVisible(); |
|
// click duplicate |
|
await this.rootPage.getByTestId('dupe-project-' + name).click(); |
|
|
|
// Find the checkbox element with the label "Include data" |
|
const includeDataCheckbox = await this.rootPage.getByText('Include data', { exact: true }); |
|
// Check the checkbox if it is not already checked |
|
if ((await includeDataCheckbox.isChecked()) && !includeData) { |
|
await includeDataCheckbox.click(); // click the checkbox to check it |
|
} |
|
|
|
// Find the checkbox element with the label "Include data" |
|
const includeViewsCheckbox = await this.rootPage.getByText('Include views', { exact: true }); |
|
// Check the checkbox if it is not already checked |
|
if ((await includeViewsCheckbox.isChecked()) && !includeViews) { |
|
await includeViewsCheckbox.click(); // click the checkbox to check it |
|
} |
|
|
|
// click duplicate confirmation "Do you want to duplicate 'sampleREST0' project?" |
|
const dupeProjectSubmitAction = () => this.rootPage.getByRole('button', { name: 'Confirm' }).click(); |
|
|
|
await this.waitForResponse({ |
|
uiAction: dupeProjectSubmitAction, |
|
httpMethodsToMatch: ['POST'], |
|
requestUrlPathToMatch: 'api/v1/db/meta/duplicate/', |
|
}); |
|
// wait for duplicate create completed and render kebab |
|
await this.get().locator(`[data-testid="p-three-dot-${name} copy"]`).waitFor(); |
|
} |
|
|
|
async checkProjectCreateButton({ exists = true }) { |
|
await expect(this.rootPage.locator('.nc-new-project-menu:visible')).toHaveCount(exists ? 1 : 0); |
|
} |
|
|
|
async reloadProjects() { |
|
const reloadUiAction = () => this.get().locator('[data-testid="projects-reload-button"]').click(); |
|
await this.waitForResponse({ |
|
uiAction: reloadUiAction, |
|
requestUrlPathToMatch: '/api/v1/db/meta/projects', |
|
httpMethodsToMatch: ['GET'], |
|
}); |
|
} |
|
|
|
async waitToBeRendered() { |
|
await this.get().waitFor({ |
|
state: 'visible', |
|
}); |
|
(await this.get().elementHandle())?.waitForElementState('stable'); |
|
|
|
// Wait till the ant table is rendered |
|
await this.get().locator('thead.ant-table-thead >> th').nth(0).waitFor({ state: 'visible' }); |
|
await expect(this.get().locator('thead.ant-table-thead >> th').nth(0)).toHaveText('Title'); |
|
|
|
// todo: remove this, all the above asserts are useless. |
|
// The elements are actually invisible from screenshot but in dom level its visible. Lazy loading issue |
|
await this.rootPage.waitForTimeout(1200); |
|
} |
|
|
|
async openProject({ |
|
title, |
|
withoutPrefix, |
|
waitForAuthTab = true, |
|
}: { |
|
title: string; |
|
withoutPrefix?: boolean; |
|
waitForAuthTab?: boolean; |
|
}) { |
|
if (!withoutPrefix) title = this.prefixTitle(title); |
|
|
|
let project: any; |
|
|
|
const responsePromise = this.rootPage.waitForResponse(async res => { |
|
let json: any = {}; |
|
try { |
|
json = await res.json(); |
|
} catch (e) { |
|
return false; |
|
} |
|
|
|
const isRequiredResponse = |
|
res.request().url().includes('/api/v1/db/meta/projects') && |
|
['GET'].includes(res.request().method()) && |
|
json?.title === title; |
|
|
|
if (isRequiredResponse) { |
|
project = json; |
|
} |
|
|
|
return isRequiredResponse; |
|
}) |
|
|
|
await this.get() |
|
.locator(`.ant-table-cell`, { |
|
hasText: title, |
|
}) |
|
.click(); |
|
|
|
await responsePromise |
|
|
|
const dashboard = new DashboardPage(this.rootPage, project); |
|
|
|
if (waitForAuthTab) await dashboard.waitForTabRender({ title: 'Team & Auth' }); |
|
|
|
return project; |
|
} |
|
|
|
async deleteProject({ title, withoutPrefix }: { title: string; withoutPrefix?: boolean }) { |
|
if (!withoutPrefix) title = this.prefixTitle(title); |
|
|
|
await this.get().locator(`[data-testid="delete-project-${title}"]`).click(); |
|
|
|
const deleteProjectAction = () => this.rootPage.locator(`button:has-text("Yes")`).click(); |
|
await this.waitForResponse({ |
|
uiAction: deleteProjectAction, |
|
httpMethodsToMatch: ['DELETE'], |
|
requestUrlPathToMatch: '/api/v1/db/meta/projects/', |
|
}); |
|
|
|
await this.get().locator('.ant-table-row', { hasText: title }).waitFor({ state: 'hidden' }); |
|
} |
|
|
|
async renameProject({ |
|
title, |
|
newTitle, |
|
withoutPrefix, |
|
}: { |
|
title: string; |
|
newTitle: string; |
|
withoutPrefix?: boolean; |
|
}) { |
|
if (!withoutPrefix) title = this.prefixTitle(title); |
|
if (!withoutPrefix) newTitle = this.prefixTitle(newTitle); |
|
|
|
const project = this.rootPage; |
|
const projRow = await project.locator(`tr`, { |
|
has: project.locator(`td.ant-table-cell:has-text("${title}")`), |
|
}); |
|
await projRow.locator('.nc-action-btn').nth(0).click(); |
|
|
|
// there is a flicker; add delay to avoid flakiness |
|
await this.rootPage.waitForTimeout(1000); |
|
|
|
await project.locator('input.nc-metadb-project-name').fill(newTitle); |
|
// press enter to save |
|
const submitAction = () => project.locator('input.nc-metadb-project-name').press('Enter'); |
|
await this.waitForResponse({ |
|
uiAction: submitAction, |
|
requestUrlPathToMatch: 'api/v1/db/meta/projects/', |
|
httpMethodsToMatch: ['PATCH'], |
|
}); |
|
} |
|
|
|
async openLanguageMenu() { |
|
await this.rootPage.locator('.nc-menu-translate').click(); |
|
} |
|
|
|
async selectLanguage({ index }: { index: number }) { |
|
const modal = await this.rootPage.locator('.nc-dropdown-menu-translate'); |
|
await modal.locator(`.ant-dropdown-menu-item`).nth(index).click(); |
|
} |
|
|
|
async verifyLanguage(param: { json: any }) { |
|
const title = this.rootPage.locator(`.nc-project-page-title`); |
|
const menu = this.rootPage.locator(`.nc-new-project-menu`); |
|
await expect(title).toHaveText(param.json.title.myProject); |
|
await expect(menu).toHaveText(param.json.title.newProj); |
|
await this.rootPage.locator(`[placeholder="${param.json.activity.searchProject}"]`).waitFor(); |
|
} |
|
|
|
async openPasswordChangeModal() { |
|
// open change password portal |
|
await this.rootPage.locator('.nc-menu-accounts').click(); |
|
await this.rootPage |
|
.locator('.nc-dropdown-user-accounts-menu') |
|
.getByTestId('nc-menu-accounts__user-settings') |
|
.click(); |
|
} |
|
|
|
async waitForRender() { |
|
await this.rootPage.locator('.nc-project-page-title:has-text("My Projects")').waitFor(); |
|
} |
|
|
|
async validateRoleAccess(param: { role: string }) { |
|
// new user; by default org level permission is to viewer (can't create project) |
|
await expect(await this.buttonNewProject).toBeVisible({ visible: false }); |
|
|
|
// role specific permissions |
|
switch (param.role) { |
|
case 'creator': |
|
await expect(await this.buttonColorSelector).toBeVisible(); |
|
await expect(await this.buttonEditProject).toBeVisible(); |
|
await expect(await this.buttonDeleteProject).toBeVisible(); |
|
await expect(await this.buttonMoreActions).toBeVisible(); |
|
break; |
|
case 'editor': |
|
case 'commenter': |
|
case 'viewer': |
|
await expect(await this.buttonColorSelector).toBeVisible({ visible: false }); |
|
await expect(await this.buttonEditProject).toBeVisible({ visible: false }); |
|
await expect(await this.buttonDeleteProject).toBeVisible({ visible: false }); |
|
await expect(await this.buttonMoreActions).toBeVisible({ visible: false }); |
|
break; |
|
} |
|
} |
|
}
|
|
|