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 1 year ago
parent
42b92263a5
commit
1f6593cd7f
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
2 changed files with 32 additions and 145 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. 6
      tests/playwright/pages/Dashboard/TreeView.ts
  2. 171
      tests/playwright/tests/mobileMode.spec.ts

6
tests/playwright/pages/Dashboard/TreeView.ts
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save