better playwright integration

otoroshi/javascript/.gitignore

@@ -6,3 +6,5 @@ stats.json
 /blob-report/
 /playwright/.cache/
 /playwright/.auth/
+package-lock.json
+tests/playwright

otoroshi/javascript/package.json

@@ -60,7 +60,7 @@
     "react-sparklines": "1.7.0",
     "react-table": "6.11.4",
     "react-tooltip": "5.28.0",
-    "recharts": "1.8.5",
+    "recharts": "^2.15.1",
     "set-value": "4.0.1",
     "showdown": "1.9.1",
     "signals-react-safe": "^1.1.2",
@@ -77,7 +77,7 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/preset-env": "7.11.5",
     "@babel/preset-react": "7.10.4",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "1.50.1",
     "@types/node": "^22.10.2",
     "babel-eslint": "10.1.0",
     "babel-loader": "^8.2.5",
@@ -105,7 +105,7 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.3",
     "url-loader": "^4.1.1",
-    "webpack": "5.76.0",
+    "webpack": "^5.98.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.2"

otoroshi/javascript/playwright.config.js

@@ -2,16 +2,16 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
     testDir: './tests',
-    fullyParallel: true,
-    timeout: 4000,
+    fullyParallel: false,
+    timeout: 5000,
     forbidOnly: !!process.env.CI,
-    retries: process.env.CI ? 2 : 0,
+    retries: process.env.CI ? 1 : 0,
     workers: process.env.CI ? 1 : undefined,
     reporter: 'html',
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
         baseURL: 'http://otoroshi.oto.tools:9999',
-        trace: 'on-first-retry',
+        trace: 'on-first-retry'
     },
     projects: [
         {
@@ -22,18 +22,14 @@ export default defineConfig({
             name: 'chromium',
             use: {
                 ...devices['Desktop Chrome'],
-                // Use prepared auth state.
-                storageState: 'playwright/.auth/user.json',
             },
             dependencies: ['setup']
         },
 
         {
             name: 'firefox',
             use: {
-                ...devices['Desktop Firefox'],
-                // Use prepared auth state.
-                storageState: 'playwright/.auth/user.json',
+                ...devices['Desktop Firefox']
             },
             dependencies: ['setup']
         }

otoroshi/javascript/playwright/.auth/user.json

@@ -1,15 +1,4 @@
 {
-  "cookies": [
-    {
-      "name": "otoroshi-session",
-      "value": "eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImJvdXNyIjoiTnRuN3U0ZzVkT0lMQ3V0T0dZN0xiQmVZZnhZMG1MeDQ5dUNMUGFjS3ZKdFRpVmF3OXpEdDU1cUxMU2g0Y255MiJ9LCJleHAiOjE3MzQzNjA2MjAsIm5iZiI6MTczNDEwMTQyMCwiaWF0IjoxNzM0MTAxNDIwfQ.zNLQdWjxCpAconS36kmiOKdJ9pP4E3X8fQawctv5Nog",
-      "domain": ".oto.tools",
-      "path": "/",
-      "expires": 1734360620.163286,
-      "httpOnly": true,
-      "secure": false,
-      "sameSite": "Lax"
-    }
-  ],
+  "cookies": [],
   "origins": []
 }

otoroshi/javascript/tests/playwright/.auth/user.json

@@ -2,14 +2,24 @@
   "cookies": [
     {
       "name": "otoroshi-session",
-      "value": "eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImJvdXNyIjoiaXBQY1duZ0d4eVNtRmZlcUthcURmZ0FrZUt3ZmtrN1pNVDFlczdGZTVXcHJoZW41R05WcFVCVWh5b0NKTzZYbSJ9LCJleHAiOjE3MzQzNjU0MDUsIm5iZiI6MTczNDEwNjIwNSwiaWF0IjoxNzM0MTA2MjA1fQ.tIPsbpW80Mawk19h4OMVRAh8G33p48eJL054AG1zLw0",
+      "value": "eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImJvdXNyIjoiemtSOXBadjR1MExmUXlYeFB6Z0o2VUt5OWY4c1RKa000dzFxUkRzSTJob2ZDQVRqRHdoWDBMSjNwRDVMcXQ4NyJ9LCJleHAiOjE3NDAyMzA5ODUsIm5iZiI6MTczOTk3MTc4NSwiaWF0IjoxNzM5OTcxNzg1fQ.BUoeub620jVPe_6rIxzKB47wQhtSjhu26_XRjbUduY8",
       "domain": ".oto.tools",
       "path": "/",
-      "expires": 1734365406.000746,
+      "expires": 1740230985.170978,
       "httpOnly": true,
       "secure": false,
       "sameSite": "Lax"
     }
   ],
-  "origins": []
+  "origins": [
+    {
+      "origin": "http://otoroshi.oto.tools:9999",
+      "localStorage": [
+        {
+          "name": "Otoroshi-Tenant",
+          "value": "tester"
+        }
+      ]
+    }
+  ]
 }

otoroshi/javascript/tests/setup/auth.setup.js

@@ -1,13 +1,28 @@
 import { test as setup, expect } from '@playwright/test';
 import path from 'path';
 
-const authFile = path.join(__dirname, '../playwright/.auth/user.json');
+const userAuthFile = path.join(__dirname, '../playwright/.auth/user.json');
+const adminAuthFile = path.join(__dirname, '../playwright/.auth/admin.json');
 
 setup('authenticate', async ({ page }) => {
-    // Perform authentication steps. Replace these actions with your own.
     await page.goto('/');
     await page.getByRole('button', { name: 'Login', exact: true }).click();
     await page.locator('input[name="email"]').click();
+    await page.locator('input[name="email"]').fill('[email protected]');
+    await page.locator('input[name="email"]').press('Tab');
+    await page.locator('input[name="password"]').fill('password');
+    await page.getByRole('button', { name: 'Login' }).click();
+
+    await page.waitForURL('/bo/dashboard');
+
+    await expect(page.locator('#content-scroll-container img')).toBeVisible();
+
+    await page.context().storageState({ path: userAuthFile });
+
+    // await page.goto('/backoffice/auth0/logout');
+    await page.goto('/bo/simple/login');
+    await page.getByRole('button', { name: 'Login', exact: true }).click();
+    await page.locator('input[name="email"]').click();
     await page.locator('input[name="email"]').fill('[email protected]');
     await page.locator('input[name="email"]').press('Tab');
     await page.locator('input[name="password"]').fill('password');
@@ -17,5 +32,5 @@ setup('authenticate', async ({ page }) => {
 
     await expect(page.locator('#content-scroll-container img')).toBeVisible();
 
-    await page.context().storageState({ path: authFile });
+    await page.context().storageState({ path: adminAuthFile });
 });

otoroshi/javascript/tests/spec/admin/admintables.spec.js

@@ -0,0 +1,38 @@
+const { test, expect, describe } = require('@playwright/test');
+const { SECTIONS } = require('../../utils');
+
+
+let context;
+
+test.beforeAll(async ({ browser }) => {
+    context = await browser.newContext({ storageState: 'tests/playwright/.auth/admin.json' });
+});
+
+test.afterAll(async () => {
+    await context.close();
+});
+
+async function showTableOfEntity(section, tab, expected) {
+    const page = await context.newPage();
+    await page.goto('/');
+
+    await page.getByText(section).click();
+    await page
+        .locator(`div[title^="${tab}"]`).click();
+
+    await expect(page.locator('#content-scroll-container')).toContainText(expected ? expected : tab);
+}
+
+test('Show Cluster members', async () => showTableOfEntity(SECTIONS.NETWORKING, 'Cluster members', undefined, { admin: true }));
+test('Show Connected tunnels', async () => showTableOfEntity(SECTIONS.NETWORKING, 'Connected tunnels'));
+test('Show Eureka servers', async () => showTableOfEntity(SECTIONS.NETWORKING, 'Eureka servers'));
+
+test('Show Resources loader', async () => showTableOfEntity(SECTIONS.TOOLING, 'Resources loader'));
+
+test('Show Danger zone', async () => showTableOfEntity(SECTIONS.CONFIGURATION, 'Danger zone'));
+
+test('Show Alerts log', async () => showTableOfEntity(SECTIONS.ANALYTICS, 'Alerts log'));
+test('Show Analytics', async () => showTableOfEntity(SECTIONS.ANALYTICS, 'Analytics'));
+test('Show Audit log', async () => showTableOfEntity(SECTIONS.ANALYTICS, 'Audit log'));
+test('Show Events log', async () => showTableOfEntity(SECTIONS.ANALYTICS, 'Events log'));
+test('Show Global Status', async () => showTableOfEntity(SECTIONS.ANALYTICS, 'Global Status', 'Global status'));

otoroshi/javascript/tests/spec/admin/searchbar.spec.js

@@ -0,0 +1,23 @@
+const { test, expect } = require('@playwright/test');
+
+let context;
+
+test.beforeAll(async ({ browser }) => {
+    context = await browser.newContext({ storageState: 'tests/playwright/.auth/admin.json' });
+});
+
+test.afterAll(async () => {
+    await context.close();
+});
+
+test('access to the admin api', async () => {
+    const page = await context.newPage()
+    await page.goto('/');
+
+    await page.locator('#navbar').click();
+
+    await page.locator('#react-select-2-input').fill(' admin');
+    await page.getByText('rout.otoroshi-admin-api').click();
+
+    expect(page).toHaveURL('/bo/dashboard/routes/admin-api-service?tab=flow');
+});

otoroshi/javascript/tests/spec/apikeys.spec.js → otoroshi/javascript/tests/spec/user/apikeys.spec.js

@@ -1,7 +1,10 @@
 const { test, expect } = require('@playwright/test');
-const { SECTIONS } = require('../utils');
+const { SECTIONS } = require('../../utils');
+
+test('create an apikey', async ({ browser }) => {
+    const context = await browser.newContext({ storageState: 'tests/playwright/.auth/user.json' });
+    const page = await context.newPage();
 
-test('create an apikey', async ({ page }) => {
     await page.goto('/');
     await page.getByText(SECTIONS.MANAGE_RESOURCES).click();
     await page
@@ -16,4 +19,6 @@ test('create an apikey', async ({ page }) => {
     await page.getByPlaceholder('A useful description for this').fill('apikey description');
     await page.getByRole('button', { name: 'Create Apikey' }).click();
     await expect(page.getByRole('grid')).toContainText('apikey name');
+
+    await context.close()
 });

otoroshi/javascript/tests/spec/user/searchbar.spec.js

@@ -0,0 +1,16 @@
+const { test, expect } = require('@playwright/test');
+
+test('search bar must return entity', async ({ browser }) => {
+    const context = await browser.newContext({ storageState: 'tests/playwright/.auth/user.json' });
+    const page = await context.newPage();
+
+    await page.goto('/');
+    await page.locator('#navbar').click();
+
+    await page.locator('#react-select-2-input').fill(' routes');
+    await page.locator('#react-select-2-option-0').getByText('Routes').click();
+
+    expect(page).toHaveURL(/bo\/dashboard\/routes/);
+
+    await context.close()
+});

otoroshi/javascript/tests/spec/user/tables.spec.js

@@ -0,0 +1,39 @@
+const { test, expect, describe } = require('@playwright/test');
+const { SECTIONS } = require('../../utils');
+
+
+let context;
+
+test.beforeAll(async ({ browser }) => {
+    context = await browser.newContext({ storageState: 'tests/playwright/.auth/admin.json' });
+});
+
+test.afterAll(async () => {
+    await context.close();
+});
+
+async function showTableOfEntity(section, tab, expected) {
+    const page = await context.newPage()
+    await page.goto('/');
+
+    await page.getByText(section).click();
+    await page
+        .locator(`div[title^="${tab}"]`).click();
+
+    await expect(page.locator('#content-scroll-container')).toContainText(expected ? expected : tab);
+}
+
+test('Show Routes', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Routes'));
+test('Show Services', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Services'));
+test('Show Admins', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Administrator', 'All administrators'));
+test('Show Data Exporters', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Data exporters'));
+test('Show Apikeys', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Apikeys'));
+test('Show Auth. modules', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Auth. modules', 'Authentication modules'));
+test('Show Backends', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Backends'));
+test('Show Drafts', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Drafts'));
+test('Show Error Templates', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Error Templates', 'Error templates'));
+test('Show JWT verifiers', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'JWT verifiers', 'Jwt verifiers'));
+test('Show Service Groups', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Service groups', 'Groups'));
+test('Show TCP Services', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'TCP services', 'Tcp services'));
+test('Show Teams', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Teams'));
+test('Show Wasm Plugins', async () => showTableOfEntity(SECTIONS.MANAGE_RESOURCES, 'Wasm Plugins', 'Wasm plugins'));

otoroshi/javascript/webpack.config.js

@@ -181,7 +181,8 @@ module.exports = (env, argv) => {
     resolve: {
       fallback: {
         crypto: require.resolve("crypto-browserify"),
-        stream: require.resolve("stream-browserify")
+        stream: require.resolve("stream-browserify"),
+        vm: false
       },
     }
   };