Browse Source

mobile mode: tests - WIP

pull/5114/head
Daniel Spaude 2 years ago
parent
commit
773f5b48ed
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 33
      tests/playwright/pages/Dashboard/index.ts
  2. 290
      tests/playwright/tests/mobileMode.spec.ts

33
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();

290
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');
// // });
// });
});

Loading…
Cancel
Save