mobile mode: tests - WIP

tests/playwright/pages/Dashboard/TreeView.ts

@@ -22,6 +22,10 @@ export class TreeViewPage extends BasePage {
     return await this.get().isVisible();
   }
 
+  // async isInViewport() {
+  //   return await this.get().isIntersectingViewport();
+  // }
+
   async verifyVisibility({ isVisible }: { isVisible: boolean }) {
     if (isVisible) {
       await expect(this.get()).toBeVisible();

tests/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -67,6 +67,10 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.fields.get().waitFor({ state: 'hidden' });
   }
 
+  async clickFindRowByScanButton() {
+    await this.get().locator(`button.nc-btn-find-row-by-scan`).click();
+  }
+
   async clickSort() {
     const menuOpen = await this.sort.get().isVisible();
 

tests/playwright/tests/findRowByScanner.spec.ts

@@ -0,0 +1,31 @@
+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('Find row by scanner', () => {
+  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;
+    toolbar = dashboard.grid.toolbar;
+  });
+
+  test.describe('clicking on the toolbars scanner button', async () => {
+    test.beforeEach(async () => {
+      // close 'Team & Auth' tab
+      await dashboard.closeTab({ title: 'Team & Auth' });
+      await dashboard.treeView.openTable({ title: 'Country' });
+      // await toolbar.clickActions;
+    });
+    test('opens the scanner overlay', async () => {
+      expect(2 + 2).toBe(4);
+    });
+  });
+});

tests/playwright/tests/mobileMode.spec.ts

@@ -1,10 +1,10 @@
-import { expect, test } from '@playwright/test';
+import { 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', () => {
+test.describe('Mobile Mode', () => {
   let dashboard: DashboardPage;
   let context: any;
   let toolbar: ToolbarPage;
@@ -14,16 +14,9 @@ test.describe.only('Mobile Mode', () => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
     form = dashboard.form;
-    console.log('dashboard(in test.beforeEach)', dashboard);
     toolbar = dashboard.grid.toolbar;
   });
 
-  // 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('activating and deactivating Mobile Mode results correct behavior', async () => {
     // in non-mobile mode, all menu items are visible
     await dashboard.verifyTeamAndSettingsLinkIsVisible();
@@ -33,9 +26,7 @@ test.describe.only('Mobile Mode', () => {
     // and all toolbar items have icons AND text
     await toolbar.verifyFieldsButtonIsVisibleWithTextAndIcon();
 
-    // await dashboard.rootPage.pause();
     await dashboard.toggleMobileMode();
-    // await dashboard.rootPage.pause();
 
     // in mobile-mode, some menu items are hidden
     await dashboard.verifyTeamAndSettingsLinkIsNotVisible();
@@ -45,10 +36,12 @@ test.describe.only('Mobile Mode', () => {
 
     // 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 });
 
-    // // verify form-view fields order
+    // verify form-view fields order
     await form.verifyFormViewFieldsOrder({
       fields: ['Country', 'LastUpdate', 'City List'],
     });
@@ -69,18 +62,4 @@ test.describe.only('Mobile Mode', () => {
     await dashboard.verifyTeamAndSettingsLinkIsVisible();
     await toolbar.verifyFieldsButtonIsVisibleWithTextAndIcon();
   });
-
-  // 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();
-  // });
 });