From 773f5b48eda6ab400ffeb8b0e7632ff2cc11470a Mon Sep 17 00:00:00 2001 From: Daniel Spaude Date: Sat, 25 Feb 2023 00:22:49 +0100 Subject: [PATCH] mobile mode: tests - WIP --- tests/playwright/pages/Dashboard/index.ts | 33 ++- tests/playwright/tests/mobileMode.spec.ts | 290 +++++++++++++--------- 2 files changed, 194 insertions(+), 129 deletions(-) diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts index b8c9928575..be25523c8b 100644 --- a/tests/playwright/pages/Dashboard/index.ts +++ b/tests/playwright/pages/Dashboard/index.ts @@ -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(); diff --git a/tests/playwright/tests/mobileMode.spec.ts b/tests/playwright/tests/mobileMode.spec.ts index a457ae15f0..eb650116a8 100644 --- a/tests/playwright/tests/mobileMode.spec.ts +++ b/tests/playwright/tests/mobileMode.spec.ts @@ -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' }); - 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('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 dashboard.verifyTeamAndSettingsLinkIsNotVisible(); }); + + // 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'); + // // }); + // }); });