Browse Source

mobile mode: tests - WIP

pull/5114/head
Daniel Spaude 2 years ago
parent
commit
1f6593cd7f
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 6
      tests/playwright/pages/Dashboard/TreeView.ts
  2. 171
      tests/playwright/tests/mobileMode.spec.ts

6
tests/playwright/pages/Dashboard/TreeView.ts

@ -40,11 +40,17 @@ export class TreeViewPage extends BasePage {
title,
mode = 'standard',
networkResponse = true,
mobileMode = false,
}: {
title: string;
mode?: string;
networkResponse?: boolean;
mobileMode?: boolean;
}) {
if (mobileMode) {
await this.rootPage.locator('.h-full > div > .nc-sidebar-left-toggle-icon').click();
}
if ((await this.get().locator('.active.nc-project-tree-tbl').count()) > 0) {
if ((await this.get().locator('.active.nc-project-tree-tbl').innerText()) === title) {
// table already open

171
tests/playwright/tests/mobileMode.spec.ts

@ -1,16 +1,19 @@
import { expect, test } from '@playwright/test';
import { DashboardPage } from '../pages/Dashboard';
import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
import { FormPage } from '../pages/Dashboard/Form';
import setup from '../setup';
test.describe.only('Mobile Mode', () => {
let dashboard: DashboardPage;
let context: any;
let toolbar: ToolbarPage;
let form: FormPage;
test.beforeEach(async ({ page }) => {
context = await setup({ page });
dashboard = new DashboardPage(page, context.project);
form = dashboard.form;
console.log('dashboard(in test.beforeEach)', dashboard);
toolbar = dashboard.grid.toolbar;
});
@ -40,22 +43,32 @@ test.describe.only('Mobile Mode', () => {
// and toolbar items have icons but no text
await toolbar.verifyFieldsButtonIsVisibleWithoutTextButIcon();
// toolbar items still work as expected
// operations (like creating views, toolbar operations, open treeview for opening tables) still work as expected
await dashboard.treeView.openTable({ title: 'Country' });
await dashboard.viewSidebar.createFormView({ title: 'CountryForm' });
await dashboard.viewSidebar.verifyView({ title: 'CountryForm', index: 1 });
// // changing back to non-mobile mode leads to the original appearance
// await dashboard.verifyTeamAndSettingsLinkIsVisible();
// await toolbar.verifyFieldsButtonIsVisibleWithTextAndIcon();
});
// // verify form-view fields order
await form.verifyFormViewFieldsOrder({
fields: ['Country', 'LastUpdate', 'City List'],
});
// test('changes appearance of menu bars when Toggle Mobile Mode is clicked', async () => {
// await homePage.toggleMobileMode();
// expect(await homePage.menuBarHasMobileModeAppearance()).toBeTruthy();
// });
// reorder & verify
await form.reorderFields({
sourceField: 'LastUpdate',
destinationField: 'Country',
});
await form.verifyFormViewFieldsOrder({
fields: ['LastUpdate', 'Country', 'City List'],
});
// test('hides certain menu items and shows only icons in mobile mode', async () => {
// await homePage.toggleMobileMode();
// expect(await homePage.menuBarHasIconOnlyItems()).toBeTruthy();
// });
await dashboard.treeView.openTable({ mobileMode: true, title: 'test-table-for-mobile-mode' });
// changing back to non-mobile mode leads to the original appearance
await dashboard.toggleMobileMode();
await dashboard.verifyTeamAndSettingsLinkIsVisible();
await toolbar.verifyFieldsButtonIsVisibleWithTextAndIcon();
});
// test('performs expected actions when clicking menu items with hidden text in mobile mode', async () => {
// await homePage.toggleMobileMode();
@ -70,136 +83,4 @@ test.describe.only('Mobile Mode', () => {
// 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