feat(format): Potential fix for role preview, enabled ERD test and minor cleanup

scripts/playwright/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "TRACE=true npx playwright test --workers=4",
+    "test:repeat": "TRACE=true npx playwright test --workers=4 --repeat-each=10",
     "quick-test": "TRACE=true PW_QUICK_TEST=1 npx playwright  test --workers=4",
     "test-debug": "./startPlayWrightServer.sh; PW_TEST_REUSE_CONTEXT=1 PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:31000/ PWDEBUG=console npx playwright test -c playwright.config.ts --headed --project=chromium --retries 0 --timeout 0 --workers 1 --max-failures=1",
     "test-debug-quick-sqlite": "./startPlayWrightServer.sh; PW_QUICK_TEST=1 PW_TEST_REUSE_CONTEXT=1 PW_TEST_CONNECT_WS_ENDPOINT=ws://127.0.0.1:31000/ PWDEBUG=console npx playwright test -c playwright.config.ts --headed --project=chromium --retries 0 --timeout 5 --workers 1 --max-failures=1",

scripts/playwright/tests/01-webhook.spec.ts

@@ -1,7 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup from '../setup';
-import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
 import makeServer from '../setup/server';
 import { WebhookFormPage } from '../pages/Dashboard/WebhookForm';
 
@@ -45,7 +44,7 @@ async function verifyHookTrigger(count: number, value: string, request) {
 test.describe.serial('Webhook', () => {
   // start a server locally for webhook tests
 
-  let dashboard: DashboardPage, toolbar: ToolbarPage, webhook: WebhookFormPage;
+  let dashboard: DashboardPage, webhook: WebhookFormPage;
   let context: any;
 
   test.beforeAll(async () => {
@@ -55,7 +54,6 @@ test.describe.serial('Webhook', () => {
   test.beforeEach(async ({ page }) => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
-    toolbar = dashboard.grid.toolbar;
     webhook = dashboard.webhookForm;
   });
 

scripts/playwright/tests/authChangePassword.spec.ts

@@ -1,14 +1,12 @@
 import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup from '../setup';
-import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
 import { LoginPage } from '../pages/LoginPage';
 import { SettingsPage, SettingTab } from '../pages/Dashboard/Settings';
 import { SignupPage } from '../pages/SignupPage';
 
 test.describe('Auth', () => {
   let dashboard: DashboardPage;
-  let toolbar: ToolbarPage;
   let settings: SettingsPage;
   let context: any;
   let signupPage: SignupPage;
@@ -17,7 +15,6 @@ test.describe('Auth', () => {
     context = await setup({ page });
     dashboard = new DashboardPage(page, context.project);
     signupPage = new SignupPage(page);
-    toolbar = dashboard.grid.toolbar;
     settings = dashboard.settings;
   });
 

scripts/playwright/tests/erd.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import {
   mysqlSakilaSqlViews,
   mysqlSakilaTables,
@@ -10,7 +10,6 @@ import { DashboardPage } from '../pages/Dashboard';
 import { SettingsSubTab, SettingTab } from '../pages/Dashboard/Settings';
 import setup from '../setup';
 import { isMysql, isPg, isSqlite } from '../setup/db';
-import { GridPage } from '../pages/Dashboard/Grid';
 import { SettingsErdPage } from '../pages/Dashboard/Settings/Erd';
 
 test.describe('Erd', () => {
@@ -19,8 +18,7 @@ test.describe('Erd', () => {
   let project: any;
   let sakilaTables, sakilaSqlViews;
 
-  // todo: Break the test into smaller tests
-  test.setTimeout(150000);
+  test.slow();
 
   test.beforeEach(async ({ page }) => {
     context = await setup({ page });
@@ -39,22 +37,26 @@ test.describe('Erd', () => {
     }
   });
 
-  // todo: Hack, edges are not getting rendered properly
-  const openSettingsErd = async () => {
-    await dashboard.gotoSettings();
+  const enableMM = async () => {
     await dashboard.settings.selectTab({ tab: SettingTab.ProjectMetadata, subTab: SettingsSubTab.Miscellaneous });
+    await dashboard.settings.miscellaneous.clickShowM2MTables();
     await dashboard.settings.selectSubTab({ subTab: SettingsSubTab.ERD });
   };
 
-  // todo: remove this. Need for edges to be rendered
-  const openErdOfATableWithEdgesRendered = async (tableName: string) => {
+  const openSettingsErd = async () => {
+    await dashboard.gotoSettings();
+    await dashboard.settings.selectTab({ tab: SettingTab.ProjectMetadata, subTab: SettingsSubTab.ERD });
+  };
+
+  const openErdOfATable = async (tableName: string) => {
     await dashboard.treeView.openTable({ title: tableName });
     await dashboard.grid.toolbar.clickActions();
     await dashboard.grid.toolbar.actions.click('ERD View');
   };
 
-  test.skip('Verify default config, all columns disabled, only PK and FK disabled, Sql views and MM table option, junction table names', async () => {
+  test('Verify default config, all columns disabled, only PK and FK disabled, Sql views and MM table option, junction table names', async () => {
     await openSettingsErd();
+    await enableMM();
 
     const erd: SettingsErdPage = dashboard.settings.erd;
 
@@ -175,7 +177,7 @@ test.describe('Erd', () => {
   });
 
   test('Verify ERD Table view, and verify column operations are reflected to the ERD view', async () => {
-    await openErdOfATableWithEdgesRendered('Country');
+    await openErdOfATable('Country');
     const erd = dashboard.grid.toolbar.actions.erd;
 
     // Verify tables with default config

scripts/playwright/tests/expandedFormUrl.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import { GalleryPage } from '../pages/Dashboard/Gallery';
 import { GridPage } from '../pages/Dashboard/Grid';

scripts/playwright/tests/rolesPreview.spec.ts

@@ -7,7 +7,7 @@ import { SettingsPage, SettingsSubTab, SettingTab } from '../pages/Dashboard/Set
 const roles = ['Editor', 'Commenter', 'Viewer'];
 
 test.describe('Preview Mode', () => {
-  test.setTimeout(150000);
+  test.slow();
 
   let dashboard: DashboardPage;
   let toolbar: ToolbarPage;
@@ -57,11 +57,15 @@ test.describe('Preview Mode', () => {
 
     // wait for preview mode to be enabled
     await dashboard.rootPage.locator('.nc-preview-btn-exit-to-app').waitFor();
+    // todo: Otherwise grid will be stuck at loading even tho the data is loaded
+    await dashboard.rootPage.waitForTimeout(2500);
 
     await dashboard.validateProjectMenu({
       role: role.toLowerCase(),
     });
 
+    await dashboard.rootPage.waitForTimeout(1500);
+
     await dashboard.treeView.openTable({ title: 'Country' });
 
     await dashboard.viewSidebar.validateRoleAccess({