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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      tests/playwright/pages/Dashboard/index.ts
  2. 242
      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 {
readonly project: any;
readonly tablesSideBar: Locator;
readonly projectMenuLink: Locator;
readonly tabBar: Locator;
readonly treeView: TreeViewPage;
readonly grid: GridPage;
@ -39,6 +40,7 @@ export class DashboardPage extends BasePage {
super(rootPage);
this.project = project;
this.tablesSideBar = rootPage.locator('.nc-treeview-container');
this.projectMenuLink = rootPage.getByTestId('nc-project-menu');
this.tabBar = rootPage.locator('.nc-tab-bar');
this.treeView = new TreeViewPage(this, project);
this.grid = new GridPage(this);
@ -63,14 +65,32 @@ export class DashboardPage extends BasePage {
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() {
await this.rootPage.getByTestId('nc-project-menu').click();
await this.rootPage.locator('div.nc-project-menu-item:has-text(" Team & Settings")').click();
await this.projectMenuLink.click();
await this.getProjectMenuLink({ title: ' Team & Settings' }).click();
}
async gotoProjectSubMenu({ title }: { title: string }) {
await this.rootPage.getByTestId('nc-project-menu').click();
await this.rootPage.locator(`div.nc-project-menu-item:has-text("${title}")`).click();
await this.projectMenuLink.click();
await this.getProjectMenuLink({ title }).click();
}
async verifyInTabBar({ title }: { title: string }) {
@ -132,16 +152,17 @@ export class DashboardPage extends BasePage {
}
async toggleMobileMode() {
await this.rootPage.getByTestId('nc-project-menu').click();
await this.projectMenuLink.click();
const projMenu = this.rootPage.locator('.nc-dropdown-project-menu');
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('[data-testid="nc-form-signin"]:visible').waitFor();
// await new Promise(resolve => setTimeout(resolve, 150));
}
async signOut() {
await this.rootPage.getByTestId('nc-project-menu').click();
await this.projectMenuLink.click();
const projMenu = this.rootPage.locator('.nc-dropdown-project-menu');
await projMenu.locator('[data-menu-id="account"]:visible').click();
await this.rootPage.locator('div.nc-project-menu-item:has-text("Sign Out"):visible').click();

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

@ -11,131 +11,175 @@ test.describe('Mobile Mode', () => {
test.beforeEach(async ({ page }) => {
context = await setup({ page });
dashboard = new DashboardPage(page, context.project);
console.log('dashboard(in test.beforeEach)', dashboard);
toolbar = dashboard.grid.toolbar;
});
test.describe('Toggle Mobile Mode On', () => {
// test.beforeAll(async () => {
// await dashboard.toggleMobileMode();
// });
test('Less menu items and no text for menu items', async () => {
await dashboard.treeView.openTable({ title: 'City' });
test('activating Mobile Mode results in hiding some menu items and only showing the icons of menu items', async () => {
await dashboard.verifyTeamAndSettingsLinkIsVisible();
await dashboard.toggleMobileMode();
await expect(2 + 2).toBe(4);
await dashboard.verifyTeamAndSettingsLinkIsNotVisible();
});
// 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',
// 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();
// });
// await dashboard.viewSidebar.verifyView({
// title: 'CityGrid2',
// index: 1,
// test('hides certain menu items and shows only icons in mobile mode', async () => {
// await homePage.toggleMobileMode();
// expect(await homePage.menuBarHasIconOnlyItems()).toBeTruthy();
// });
// await dashboard.viewSidebar.createFormView({ title: 'CityForm' });
// await dashboard.viewSidebar.verifyView({ title: 'CityForm', index: 2 });
// await dashboard.viewSidebar.renameView({
// title: 'CityForm',
// newTitle: 'CityForm2',
// 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');
// });
// await dashboard.viewSidebar.verifyView({
// title: 'CityForm2',
// index: 2,
// 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();
// });
// await dashboard.viewSidebar.createGalleryView({ title: 'CityGallery' });
// await dashboard.viewSidebar.verifyView({ title: 'CityGallery', index: 3 });
// await dashboard.viewSidebar.renameView({
// title: 'CityGallery',
// newTitle: 'CityGallery2',
// 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();
// });
// await dashboard.viewSidebar.verifyView({
// title: 'CityGallery2',
// index: 3,
// test('FOOO', async () => {
// await dashboard.rootPage.pause();
// console.log('dashboard', dashboard);
// });
// await dashboard.viewSidebar.changeViewIcon({
// title: 'CityGallery2',
// icon: 'american-football',
// 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);
// });
// // todo: Enable when view bug is fixed
// // await dashboard.viewSidebar.reorderViews({
// // sourceView: "CityGrid",
// // destinationView: "CityForm",
// // 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.verifyView({ title: "CityGrid", index: 2 });
// // await dashboard.viewSidebar.verifyView({ title: "CityForm", index: 1 });
// // await dashboard.viewSidebar.deleteView({ title: "CityForm2" });
// // 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: "CityGrid2",
// // title: 'CityForm2',
// // 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,
// // });
// // });
// // 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' });
// 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 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');
// // 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