mobile mode: tests - WIP

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

@@ -14,6 +14,12 @@ export class ToolbarFieldsPage extends BasePage {
     return this.rootPage.locator(`[data-testid="nc-fields-menu"]`);
   }
 
+  // async verifyVisibleWithIconAndText() {
+  //   await expect(this.get()).toBeVisible();
+  //   await expect(this.get().locator(`button`)).toBeVisible();
+  //   await expect(this.get().locator(`button`).locator(`svg`)).toBeVisible();
+  // }
+
   // todo: Click and toggle are similar method. Remove one of them
   async toggle({ title, isLocallySaved }: { title: string; isLocallySaved?: boolean }) {
     await this.toolbar.clickFields();

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

@@ -76,6 +76,18 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.sort.get().waitFor({ state: 'hidden' });
   }
 
+  async verifyFieldsButtonIsVisibleWithTextAndIcon() {
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).toBeVisible();
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).toHaveText('Fields');
+    expect(await this.get().locator(`button.nc-fields-menu-btn`).locator(`svg`).count()).toBe(2);
+  }
+
+  async verifyFieldsButtonIsVisibleWithoutTextButIcon() {
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).toBeVisible();
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).not.toHaveText('Fields');
+    expect(await this.get().locator(`button.nc-fields-menu-btn`).locator(`svg`).count()).toBe(2);
+  }
+
   async clickFilter({
     // `networkValidation` is used to verify that api calls are made when the button is clicked
     // which happens when the filter is opened for the first time

tests/playwright/tests/mobileMode.spec.ts

@@ -3,7 +3,7 @@ import { DashboardPage } from '../pages/Dashboard';
 import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
 import setup from '../setup';
 
-test.describe('Mobile Mode', () => {
+test.describe.only('Mobile Mode', () => {
   let dashboard: DashboardPage;
   let context: any;
   let toolbar: ToolbarPage;
@@ -15,18 +15,27 @@ test.describe('Mobile Mode', () => {
     toolbar = dashboard.grid.toolbar;
   });
 
-  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('activating Mobile Mode results in hiding some menu items and only showing the icons of menu items', async () => {
+    await dashboard.verifyTeamAndSettingsLinkIsVisible();
+
+    await dashboard.treeView.createTable({ title: 'test-table-for-mobile-mode' });
+    // await dashboard.rootPage.pause();
+    // await toolbar.fields.verifyVisibleWithIconAndText();
+    await toolbar.verifyFieldsButtonIsVisibleWithTextAndIcon();
+
+    await dashboard.toggleMobileMode();
+
+    await dashboard.verifyTeamAndSettingsLinkIsNotVisible();
+    await toolbar.verifyFieldsButtonIsVisibleWithoutTextButIcon();
+    // await dashboard
+  });
+
   // test('changes appearance of menu bars when Toggle Mobile Mode is clicked', async () => {
   //   await homePage.toggleMobileMode();
   //   expect(await homePage.menuBarHasMobileModeAppearance()).toBeTruthy();