github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

mobile mode: tests - WIP

pull/5114/head
Daniel Spaude 2 years ago
parent
8c1a0db07d
commit
773f5b48ed
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
2 changed files with 194 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      tests/playwright/pages/Dashboard/index.ts
  2. 290
      tests/playwright/tests/mobileMode.spec.ts

33
tests/playwright/pages/Dashboard/index.ts
Unescape View File

@ -19,6 +19,7 @@ import { ProjectsPage } from '../ProjectsPage';
export class DashboardPage extends BasePage { export class DashboardPage extends BasePage {
readonly project: any; readonly project: any;
readonly tablesSideBar: Locator; readonly tablesSideBar: Locator;
readonly projectMenuLink: Locator;
readonly tabBar: Locator; readonly tabBar: Locator;
readonly treeView: TreeViewPage; readonly treeView: TreeViewPage;
readonly grid: GridPage; readonly grid: GridPage;
@ -39,6 +40,7 @@ export class DashboardPage extends BasePage {
super(rootPage); super(rootPage);
this.project = project; this.project = project;
this.tablesSideBar = rootPage.locator('.nc-treeview-container'); this.tablesSideBar = rootPage.locator('.nc-treeview-container');
this.projectMenuLink = rootPage.getByTestId('nc-project-menu');
this.tabBar = rootPage.locator('.nc-tab-bar'); this.tabBar = rootPage.locator('.nc-tab-bar');
this.treeView = new TreeViewPage(this, project); this.treeView = new TreeViewPage(this, project);
this.grid = new GridPage(this); this.grid = new GridPage(this);
@ -63,14 +65,32 @@ export class DashboardPage extends BasePage {
await this.rootPage.goto(`/#/nc/${this.project.id}/auth`); await this.rootPage.goto(`/#/nc/${this.project.id}/auth`);
} }
getProjectMenuLink({ title }: { title: string }) {
return this.rootPage.locator(`div.nc-project-menu-item:has-text("${title}")`);
}
async verifyTeamAndSettingsLinkIsVisible() {
await this.projectMenuLink.click();
const teamAndSettingsLink = await this.getProjectMenuLink({ title: ' Team & Settings' });
await expect(teamAndSettingsLink).toBeVisible();
await this.projectMenuLink.click();
}
async verifyTeamAndSettingsLinkIsNotVisible() {
await this.projectMenuLink.click();
const teamAndSettingsLink = await this.getProjectMenuLink({ title: ' Team & Settings' });
await expect(teamAndSettingsLink).not.toBeVisible();
await this.projectMenuLink.click();
}
async gotoSettings() { async gotoSettings() {
await this.rootPage.getByTestId('nc-project-menu').click(); await this.projectMenuLink.click();
await this.rootPage.locator('div.nc-project-menu-item:has-text(" Team & Settings")').click(); await this.getProjectMenuLink({ title: ' Team & Settings' }).click();
} }
async gotoProjectSubMenu({ title }: { title: string }) { async gotoProjectSubMenu({ title }: { title: string }) {
await this.rootPage.getByTestId('nc-project-menu').click(); await this.projectMenuLink.click();
await this.rootPage.locator(`div.nc-project-menu-item:has-text("${title}")`).click(); await this.getProjectMenuLink({ title }).click();
} }
async verifyInTabBar({ title }: { title: string }) { async verifyInTabBar({ title }: { title: string }) {
@ -132,16 +152,17 @@ export class DashboardPage extends BasePage {
} }
async toggleMobileMode() { async toggleMobileMode() {
await this.rootPage.getByTestId('nc-project-menu').click(); await this.projectMenuLink.click();
const projMenu = this.rootPage.locator('.nc-dropdown-project-menu'); const projMenu = this.rootPage.locator('.nc-dropdown-project-menu');
await projMenu.locator('[data-menu-id="mobile-mode"]:visible').click(); await projMenu.locator('[data-menu-id="mobile-mode"]:visible').click();
await this.projectMenuLink.click();
// await this.rootPage.locator('div.nc-project-menu-item:has-text("Sign Out"):visible').click(); // await this.rootPage.locator('div.nc-project-menu-item:has-text("Sign Out"):visible').click();
// await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor(); // await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor();
// await new Promise(resolve => setTimeout(resolve, 150)); // await new Promise(resolve => setTimeout(resolve, 150));
} }
async signOut() { async signOut() {
await this.rootPage.getByTestId('nc-project-menu').click(); await this.projectMenuLink.click();
const projMenu = this.rootPage.locator('.nc-dropdown-project-menu'); const projMenu = this.rootPage.locator('.nc-dropdown-project-menu');
await projMenu.locator('[data-menu-id="account"]:visible').click(); await projMenu.locator('[data-menu-id="account"]:visible').click();
await this.rootPage.locator('div.nc-project-menu-item:has-text("Sign Out"):visible').click(); await this.rootPage.locator('div.nc-project-menu-item:has-text("Sign Out"):visible').click();

290
tests/playwright/tests/mobileMode.spec.ts
Unescape View File

@ -11,131 +11,175 @@ test.describe('Mobile Mode', () => {
test.beforeEach(async ({ page }) => { test.beforeEach(async ({ page }) => {
context = await setup({ page }); context = await setup({ page });
dashboard = new DashboardPage(page, context.project); dashboard = new DashboardPage(page, context.project);
console.log('dashboard(in test.beforeEach)', dashboard);
toolbar = dashboard.grid.toolbar; toolbar = dashboard.grid.toolbar;
}); });
test.describe('Toggle Mobile Mode On', () => { test('activating Mobile Mode results in hiding some menu items and only showing the icons of menu items', async () => {
// test.beforeAll(async () => { await dashboard.verifyTeamAndSettingsLinkIsVisible();
// await dashboard.toggleMobileMode(); await dashboard.toggleMobileMode();
// }); await dashboard.verifyTeamAndSettingsLinkIsNotVisible();
test('Less menu items and no text for menu items', async () => {
await dashboard.treeView.openTable({ title: 'City' });
await dashboard.toggleMobileMode();
await expect(2 + 2).toBe(4);
});
// 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.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.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.changeViewIcon({
// title: 'CityGallery2',
// icon: 'american-football',
// });
// // 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 });
// // await dashboard.viewSidebar.deleteView({ title: "CityForm2" });
// // await dashboard.viewSidebar.verifyViewNotPresent({
// // title: "CityGrid2",
// // index: 2,
// // });
// 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: 1,
// });
// });
// test('Save search query for each table and view', async () => {
// await dashboard.treeView.openTable({ title: 'City' });
// await toolbar.searchData.verify('');
// await toolbar.searchData.get().fill('City-City');
// await toolbar.searchData.verify('City-City');
// await dashboard.viewSidebar.createGridView({ title: 'CityGrid' });
// await toolbar.searchData.verify('');
// await toolbar.searchData.get().fill('City-CityGrid');
// await toolbar.searchData.verify('City-CityGrid');
// await dashboard.viewSidebar.createGridView({ title: 'CityGrid2' });
// await toolbar.searchData.verify('');
// await toolbar.searchData.get().fill('City-CityGrid2');
// await toolbar.searchData.verify('City-CityGrid2');
// await dashboard.viewSidebar.openView({ title: 'CityGrid' });
// await expect(dashboard.get().locator('[data-testid="grid-load-spinner"]')).toBeVisible();
// await dashboard.grid.waitLoading();
// await toolbar.searchData.verify('City-CityGrid');
// await dashboard.viewSidebar.openView({ title: 'City' });
// await expect(dashboard.get().locator('[data-testid="grid-load-spinner"]')).toBeVisible();
// await dashboard.grid.waitLoading();
// await toolbar.searchData.verify('City-City');
// await dashboard.treeView.openTable({ title: 'Actor' });
// await toolbar.searchData.verify('');
// await dashboard.viewSidebar.createGridView({ title: 'ActorGrid' });
// await toolbar.searchData.verify('');
// await toolbar.searchData.get().fill('Actor-ActorGrid');
// await toolbar.searchData.verify('Actor-ActorGrid');
// await dashboard.viewSidebar.openView({ title: 'Actor' });
// await expect(dashboard.get().locator('[data-testid="grid-load-spinner"]')).toBeVisible();
// await dashboard.grid.waitLoading();
// await toolbar.searchData.verify('');
// await dashboard.treeView.openTable({ title: 'City', mode: '' });
// await toolbar.searchData.verify('City-City');
// });
}); });
// test('displays Toggle Mobile Mode menu item in correct location and with correct label', async () => {
// const mobileModeButton = await homePage.getMobileModeButton();
// expect(await mobileModeButton.isVisible()).toBeTruthy();
// expect(await mobileModeButton.innerText()).toEqual('Toggle Mobile Mode');
// });
// test('changes appearance of menu bars when Toggle Mobile Mode is clicked', async () => {
// await homePage.toggleMobileMode();
// expect(await homePage.menuBarHasMobileModeAppearance()).toBeTruthy();
// });
// test('hides certain menu items and shows only icons in mobile mode', async () => {
// await homePage.toggleMobileMode();
// expect(await homePage.menuBarHasIconOnlyItems()).toBeTruthy();
// });
// test('performs expected actions when clicking menu items with hidden text in mobile mode', async () => {
// await homePage.toggleMobileMode();
// await homePage.clickFirstMobileMenuItem();
// expect(await homePage.getCurrentUrl()).toContain('/expected-url');
// });
// test('hides left Tables sidebar menu when clicking outside of the bar in mobile mode', async () => {
// await homePage.toggleMobileMode();
// await homePage.openTablesSidebarMenu();
// expect(await homePage.isTablesSidebarMenuOpen()).toBeTruthy();
// await homePage.clickOutsideTablesSidebarMenu();
// expect(await homePage.isTablesSidebarMenuOpen()).toBeFalsy();
// });
// test('restores original menu appearance and behavior when Toggle Mobile Mode is clicked again', async () => {
// await homePage.toggleMobileMode();
// await homePage.toggleMobileMode();
// expect(await homePage.menuBarHasOriginalAppearance()).toBeTruthy();
// expect(await homePage.menuBarHasFullTextItems()).toBeTruthy();
// });
// test('FOOO', async () => {
// await dashboard.rootPage.pause();
// console.log('dashboard', dashboard);
// });
// test('Less menu items and no text for menu items', async () => {
// await dashboard.treeView.openTable({ title: 'City' });
// await dashboard.toggleMobileMode();
// await expect(2 + 2).toBe(4);
// });
// // 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.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.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.changeViewIcon({
// // title: 'CityGallery2',
// // icon: 'american-football',
// // });
// // // 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 });
// // // await dashboard.viewSidebar.deleteView({ title: "CityForm2" });
// // // await dashboard.viewSidebar.verifyViewNotPresent({
// // // title: "CityGrid2",
// // // index: 2,
// // // });
// // 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: 1,
// // });
// // });
// // test('Save search query for each table and view', async () => {
// // await dashboard.treeView.openTable({ title: 'City' });
// // await toolbar.searchData.verify('');
// // await toolbar.searchData.get().fill('City-City');
// // await toolbar.searchData.verify('City-City');
// // await dashboard.viewSidebar.createGridView({ title: 'CityGrid' });
// // await toolbar.searchData.verify('');
// // await toolbar.searchData.get().fill('City-CityGrid');
// // await toolbar.searchData.verify('City-CityGrid');
// // await dashboard.viewSidebar.createGridView({ title: 'CityGrid2' });
// // await toolbar.searchData.verify('');
// // await toolbar.searchData.get().fill('City-CityGrid2');
// // await toolbar.searchData.verify('City-CityGrid2');
// // await dashboard.viewSidebar.openView({ title: 'CityGrid' });
// // await expect(dashboard.get().locator('[data-testid="grid-load-spinner"]')).toBeVisible();
// // await dashboard.grid.waitLoading();
// // await toolbar.searchData.verify('City-CityGrid');
// // await dashboard.viewSidebar.openView({ title: 'City' });
// // await expect(dashboard.get().locator('[data-testid="grid-load-spinner"]')).toBeVisible();
// // await dashboard.grid.waitLoading();
// // await toolbar.searchData.verify('City-City');
// // await dashboard.treeView.openTable({ title: 'Actor' });
// // await toolbar.searchData.verify('');
// // await dashboard.viewSidebar.createGridView({ title: 'ActorGrid' });
// // await toolbar.searchData.verify('');
// // await toolbar.searchData.get().fill('Actor-ActorGrid');
// // await toolbar.searchData.verify('Actor-ActorGrid');
// // await dashboard.viewSidebar.openView({ title: 'Actor' });
// // await expect(dashboard.get().locator('[data-testid="grid-load-spinner"]')).toBeVisible();
// // await dashboard.grid.waitLoading();
// // await toolbar.searchData.verify('');
// // await dashboard.treeView.openTable({ title: 'City', mode: '' });
// // await toolbar.searchData.verify('City-City');
// // });
// });
}); });

Write Preview
Loading…
Cancel
Save