feat: added services page playwright tests (#3928)

* feat: added services page playwright tests

* feat: added empty page test

frontend/tests/fixtures/api/services/200.json

@@ -0,0 +1,68 @@
+[
+	{
+		"serviceName": "redis",
+		"p99": 35396180,
+		"avgDuration": 15149389.806977473,
+		"numCalls": 22329,
+		"callRate": 12.615254237288136,
+		"numErrors": 4135,
+		"errorRate": 18.51851851851852,
+		"num4XX": 0,
+		"fourXXRate": 0
+	},
+	{
+		"serviceName": "frontend",
+		"p99": 1173509510.0000002,
+		"avgDuration": 747007254.5344619,
+		"numCalls": 1654,
+		"callRate": 0.9344632768361582,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	},
+	{
+		"serviceName": "mysql",
+		"p99": 776834620,
+		"avgDuration": 349280732.76904476,
+		"numCalls": 1654,
+		"callRate": 0.9344632768361582,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	},
+	{
+		"serviceName": "customer",
+		"p99": 776995390,
+		"avgDuration": 349451783.5550181,
+		"numCalls": 1654,
+		"callRate": 0.9344632768361582,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	},
+	{
+		"serviceName": "route",
+		"p99": 79617600.00000001,
+		"avgDuration": 50698870.85852479,
+		"numCalls": 16540,
+		"callRate": 9.344632768361581,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	},
+	{
+		"serviceName": "driver",
+		"p99": 241056990,
+		"avgDuration": 204975300.48367593,
+		"numCalls": 1654,
+		"callRate": 0.9344632768361582,
+		"numErrors": 0,
+		"errorRate": 0,
+		"num4XX": 0,
+		"fourXXRate": 0
+	}
+]

frontend/tests/service/servicesLanding.spec.ts

@@ -0,0 +1,82 @@
+import { expect, Page, test } from '@playwright/test';
+import ROUTES from 'constants/routes';
+
+import servicesSuccessResponse from '../fixtures/api/services/200.json';
+import { loginApi } from '../fixtures/common';
+
+let page: Page;
+
+test.describe('Service Page', () => {
+	test.beforeEach(async ({ baseURL, browser }) => {
+		const context = await browser.newContext({ storageState: 'tests/auth.json' });
+		const newPage = await context.newPage();
+
+		await loginApi(newPage);
+
+		await newPage.goto(`${baseURL}${ROUTES.APPLICATION}`);
+
+		page = newPage;
+	});
+
+	test('Services Empty Page', async ({ baseURL }) => {
+		// visit services page
+		await page.goto(`${baseURL}${ROUTES.APPLICATION}`);
+
+		await page.route(`**/services`, (route) =>
+			route.fulfill({
+				status: 200,
+				json: [],
+			}),
+		);
+
+		// expect noData to be present
+		await expect(page.getByText('No data')).toBeVisible();
+	});
+
+	test('Services Table Rendered with correct data', async ({ baseURL }) => {
+		// visit services page
+		await page.goto(`${baseURL}${ROUTES.APPLICATION}`);
+
+		// assert the URL of the services page
+		await expect(page).toHaveURL(`${baseURL}${ROUTES.APPLICATION}`);
+
+		await page.route(`**/services`, (route) =>
+			route.fulfill({
+				status: 200,
+				json: servicesSuccessResponse,
+			}),
+		);
+
+		// assert the presence of services breadcrumbs
+		const breadcrumbServicesText = await page
+			.locator('.ant-breadcrumb-link a[href="/services"]')
+			.nth(1)
+			.textContent();
+		await expect(breadcrumbServicesText).toEqual('Services');
+
+		// expect the services headers to be loaded correctly
+		const p99Latency = await page
+			.locator(
+				`th[aria-label*="this column's title is P99 latency (in ms)"] .ant-table-column-title`,
+			)
+			.textContent();
+
+		await expect(p99Latency).toEqual('P99 latency (in ms)');
+		const errorRate = await page
+			.locator(
+				`th[aria-label*="this column's title is Error Rate (% of total)"] .ant-table-column-title`,
+			)
+			.textContent();
+
+		await expect(errorRate).toEqual('Error Rate (% of total)');
+		const operationsPerSecond = await page
+			.locator(
+				`th[aria-label="this column's title is Operations Per Second,this column is sortable"] .ant-table-column-title`,
+			)
+			.textContent();
+
+		await expect(operationsPerSecond).toEqual('Operations Per Second');
+		// expect services to be listed in the table
+		await page.locator('a[href="/services/redis"]').isVisible();
+	});
+});