Completed implementation of Traffic Monitor top cards

tests/dashboards/network-analyzer/traffic-monitor.spec.js

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('General - Dashboard - Network Analyzer - Traffic Monitor', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('network-analyzer/traffic-monitor', {
+      waitUntil: 'networkidle'
+    });
+  });
+
+  test('Title', async ({ page }) => {
+    const title = await page.title();
+    expect(title).toBe(
+      'Difuse - Dashboard - Network Analyzer - Traffic Monitor'
+    );
+  });
+
+  test('Traffic Distribution Top Cards', async ({ page }) => {
+    const hosts = await page.getByRole('heading', { name: 'Hosts' });
+    const hostsIcon = await page.locator('.mdi-server-network');
+
+    expect(hosts).toBeTruthy();
+    const hostsValue = await page.textContent('#thc');
+    expect(hostsValue).toMatch(/^\d+$/); // check if it is an integer
+
+    const upload = await page.getByRole('heading', { name: 'Upload' });
+    const uploadIcon = await page.locator('.mdi-upload');
+
+    const uploadValue = await page.textContent('#tuc');
+    expect(uploadValue).toMatch(/^\d+(\.\d+)? MiB$/); // check if it is a float followed by MiB
+
+    const download = await page.getByRole('heading', { name: 'Download' });
+    const downloadIcon = await page.locator('.mdi-download');
+
+    const downloadValue = await page.textContent('#tdc');
+    expect(downloadValue).toMatch(/^\d+(\.\d+)? MiB$/); // check if it is a float followed by MiB
+
+    const connections = await page.getByRole('heading', {
+      name: 'Connections'
+    });
+    const connectionsIcon = await page.locator('.mdi-lan-connect');
+
+    const connectionsValue = await page.textContent('#tcc');
+    expect(connectionsValue).toMatch(/^\d+(\.\d+)?K?$/); // check if it is a float or integer
+
+    expect(hosts && upload && download && connections).toBeTruthy();
+    expect(
+      hostsIcon && uploadIcon && downloadIcon && connectionsIcon
+    ).toBeTruthy();
+  });
+});