Merge pull request #11095 from DevRish/ci/DevRish/#10988

migrated cypress tests to playwright

ui/tests/e2e/indexui.spec.js

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+import { ENV } from './env';
+
+test.describe('Index Page UI Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    // Visit Index Page
+    await page.goto(ENV.MESHERY_SERVER_URL);
+  });
+
+  test('Test if Left Navigation Panel is displayed', async ({ page }) => {
+    await expect(page.locator('[data-test=navigation]')).toBeVisible();
+  });
+
+  test('Test if Settings button is displayed', async ({ page }) => {
+    await expect(page.locator('[data-test=settings-button]')).toBeVisible();
+  });
+
+  test('Test if Notification button is displayed', async ({ page }) => {
+    await expect(page.locator('[data-test=notification-button]')).toBeVisible();
+  });
+
+  test('Test if Profile button is displayed', async ({ page }) => {
+    await expect(page.locator('[data-test=profile-button]')).toBeVisible();
+  });
+});

ui/tests/e2e/service_mesh_lifecycle.spec.js

@@ -0,0 +1,77 @@
+import { expect, test } from '@playwright/test';
+import { ENV } from './env';
+
+test.describe('Service Mesh Lifecycle Tests', () => {
+  const mesheryAdapters = [
+    { adapterName: 'Istio', adapterPort: '10000', deploy: false },
+    { adapterName: 'Consul', adapterPort: '10002', deploy: false },
+  ];
+
+  mesheryAdapters.forEach(({ adapterName, adapterPort, deploy }) => {
+    const ADAPTER_LOCATION = `localhost:${adapterPort}`;
+    test(`Configure Existing ${adapterName} adapter through Mesh Adapter URL from Management page`, async ({
+      page,
+    }) => {
+      // Visit Settings Page
+      await page.goto(`${ENV.MESHERY_SERVER_URL}/settings`);
+
+      // Navigate to 'Adapters' tab
+      await page.getByRole('tab', { name: 'Adapters', exact: true }).click({ force: true });
+
+      // Enter Mesh Adapter URL
+      await page
+        .locator('label')
+        .filter({ hasText: /Mesh Adapter URL/ })
+        .locator('..')
+        .locator('input')
+        .fill('localhost:10000');
+      await page.keyboard.press('Enter');
+
+      // Click 'Connect' Button
+      await page.getByRole('button', { name: 'Connect', exact: true }).click();
+
+      // Verify success notification
+      await expect(page.getByText('Adapter was configured!')).toBeVisible();
+
+      // Visit Lifecycle > Service Mesh Page
+      await page.goto(`${ENV.MESHERY_SERVER_URL}/management/service-mesh`);
+
+      // Open "Select Service Mesh Type" Dropdown
+      const dropdown = page
+        .locator('label')
+        .filter({ hasText: /Select Service Mesh Type/ })
+        .locator('..');
+      await dropdown.click();
+
+      // Select the adapter by URL
+      await page.getByRole('option', { name: ADAPTER_LOCATION }).click();
+
+      // Verify selection of the adapter by URL
+      await expect(dropdown).toContainText(ADAPTER_LOCATION);
+    });
+
+    test(`Ping ${adapterName} Adapter`, async ({ page }) => {
+      // Visit Lifecycle > Service Mesh Page
+      await page.goto(`${ENV.MESHERY_SERVER_URL}/management/service-mesh`);
+
+      // Open "Select Service Mesh Type" Dropdown
+      const dropdown = page
+        .locator('label')
+        .filter({ hasText: /Select Service Mesh Type/ })
+        .locator('..');
+      await dropdown.click();
+
+      // Select the adapter by URL
+      await page.getByRole('option', { name: ADAPTER_LOCATION }).click();
+
+      // Verify selection of the adapter by URL
+      await expect(dropdown).toContainText(ADAPTER_LOCATION);
+
+      // Ping the adapter by clicking the chip containing adapter URL in "Manage Service Mesh" section
+      await page.getByRole('button', { name: ADAPTER_LOCATION, exact: true }).click();
+
+      // Verify that the adapter was pinged
+      await expect(page.getByText('Adapter pinged!')).toBeVisible();
+    });
+  });
+});

ui/tests/e2e/settings.spec.js

@@ -0,0 +1,89 @@
+import { expect, test } from '@playwright/test';
+import { ENV } from './env';
+
+const verifyAdapterResBody = (body) => {
+  expect(body).toBeInstanceOf(Array);
+  body.forEach(({ adapter_location, name, version, git_commit_sha, ops }) => {
+    expect(adapter_location).toMatch(/localhost:\d+/);
+    expect(name).toEqual(expect.any(String));
+    expect(version).toEqual(expect.any(String));
+    expect(git_commit_sha).toEqual(expect.any(String));
+    // ops can be null or array
+    if (ops) {
+      expect(ops).toBeInstanceOf(Array);
+      ops.forEach(({ key, value, category }) => {
+        expect(key).toEqual(expect.any(String));
+        expect(value).toEqual(expect.any(String));
+        // category may or may not be present, if present its an integer
+        if (category) {
+          expect(category).toEqual(expect.any(Number));
+        } else {
+          expect(category).toBeUndefined();
+        }
+      });
+    } else {
+      expect(ops).toBeNull();
+    }
+  });
+};
+
+test.describe('Settings Page Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    const meshAdapterReq = page.waitForRequest(
+      (request) =>
+        request.url() === `${ENV.MESHERY_SERVER_URL}/api/system/adapters` &&
+        request.method() === 'GET',
+    );
+    const meshAdapterRes = page.waitForResponse(
+      (response) =>
+        response.url() === `${ENV.MESHERY_SERVER_URL}/api/system/adapters` &&
+        response.status() === 200,
+    );
+
+    // Visit Settings Page
+    await page.goto(`${ENV.MESHERY_SERVER_URL}/settings`);
+
+    // Verify requests and responses expected on initial page load
+    await meshAdapterReq;
+    const res = await meshAdapterRes;
+    const body = await res.json();
+    verifyAdapterResBody(body);
+  });
+
+  test('Connect to Meshery Istio Adapter and configure it', async ({ page }) => {
+    // Navigate to 'Adapters' tab
+    await page.getByRole('tab', { name: 'Adapters', exact: true }).click({ force: true });
+
+    const meshManageReq = page.waitForRequest(
+      (request) =>
+        request.url() === `${ENV.MESHERY_SERVER_URL}/api/system/adapter/manage` &&
+        request.method() === 'POST',
+    );
+    const meshManageRes = page.waitForResponse(
+      (response) =>
+        response.url() === `${ENV.MESHERY_SERVER_URL}/api/system/adapter/manage` &&
+        response.status() === 200,
+    );
+
+    // Enter Mesh Adapter URL
+    await page
+      .locator('label')
+      .filter({ hasText: /Mesh Adapter URL/ })
+      .locator('..')
+      .locator('input')
+      .fill('localhost:10000');
+    await page.keyboard.press('Enter');
+
+    // Click 'Connect' Button
+    await page.getByRole('button', { name: 'Connect', exact: true }).click();
+
+    // Verify requests and responses
+    await meshManageReq;
+    const res = await meshManageRes;
+    const body = await res.json();
+    verifyAdapterResBody(body);
+
+    // Verify success notification
+    await expect(page.getByText('Adapter was configured!')).toBeVisible();
+  });
+});

ui/tests/e2e/userpreference.spec.js

@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test';
+import { ENV } from './env';
+
+const userPreferenceTests = [
+  {
+    name: 'Toggle "Meshery Catalog Content"',
+    apiURL: `${ENV.MESHERY_SERVER_URL}/api/user/prefs`,
+    switchLabel: 'Meshery Catalog Content',
+    expectedMethod: 'POST',
+    expectedStatus: 200,
+  },
+  {
+    name: 'Toggle "Send Anonymous Usage Statistics"',
+    apiURL: `${ENV.MESHERY_SERVER_URL}/api/user/prefs?contexts=all`,
+    switchLabel: 'Send Anonymous Usage Statistics',
+    expectedMethod: 'POST',
+    expectedStatus: 200,
+  },
+  {
+    name: 'Toggle "Send Anonymous Performance Results"',
+    apiURL: `${ENV.MESHERY_SERVER_URL}/api/user/prefs?contexts=all`,
+    switchLabel: 'Send Anonymous Performance Results',
+    expectedMethod: 'POST',
+    expectedStatus: 200,
+  },
+];
+
+test.describe('User Preferences Page Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    const userPrefReq = page.waitForRequest(
+      (request) =>
+        request.url().startsWith(`${ENV.MESHERY_SERVER_URL}/api/user/prefs`) &&
+        request.method() === 'GET',
+    );
+    const userPrefRes = page.waitForResponse(
+      (response) =>
+        response.url().startsWith(`${ENV.MESHERY_SERVER_URL}/api/user/prefs`) &&
+        response.status() === 200,
+    );
+
+    // Visit User Preferences Page
+    await page.goto(`${ENV.MESHERY_SERVER_URL}/user/preferences`);
+
+    // Verify requests and responses expected on initial page load
+    await userPrefReq;
+    await userPrefRes;
+
+    // Verify visibility of 'Extensions' Section
+    await expect(page.getByRole('group', { name: /Extensions.*/ })).toBeVisible();
+
+    // Verify visibility of 'Analytics and Improvement Program' Section
+    await expect(
+      page.getByRole('group', { name: /Analytics and Improvement Program.*/ }),
+    ).toBeVisible();
+
+    // Verify visibility of 'Theme' Section
+    await expect(page.getByRole('group', { name: /Theme.*/ })).toBeVisible();
+  });
+
+  for (const t of userPreferenceTests) {
+    test(t.name, async ({ page }) => {
+      const userPrefReq = page.waitForRequest(
+        (request) => request.url() === t.apiURL && request.method() === t.expectedMethod,
+      );
+      const userPrefRes = page.waitForResponse(
+        (response) => response.url() === t.apiURL && response.status() === t.expectedStatus,
+      );
+
+      // Check current state of switch (checked or unchecked)
+      const prefSwitch = page.getByLabel(t.switchLabel);
+      const wasChecked = await prefSwitch.isChecked();
+
+      // Toggle the state of switch
+      await prefSwitch.click();
+
+      // Verify requests and responses
+      await userPrefReq;
+      await userPrefRes;
+
+      // Verify that state of switch changed
+      await page.waitForTimeout(2000);
+      if (wasChecked) await expect(prefSwitch).not.toBeChecked();
+      else await expect(prefSwitch).toBeChecked();
+    });
+  }
+});