chore(): update cypress test for server dashboard page

Author: piyook

cypress/e2e/server-page-spec.cy.ts

@@ -1,35 +1,35 @@
 describe('Server page contains expected information', () => {
-    it('passes', () => {
-        const expectedEndpoints = [
-            '/api/bikes',
-            '/api/cats',
-            '/api/images',
-            '/api/json',
-            '/api/lambda',
-            '/api/markdown',
-            '/api/posts',
-            '/api/users',
-            '/api/videos',
-            '/api/error',
-        ];
-        cy.visit('/');
-        cy.get('h1').contains('Running');
+	it('passes', () => {
+		const expectedEndpoints = [
+			'/api/bikes',
+			'/api/cats',
+			'/api/images',
+			'/api/json',
+			'/api/lambda',
+			'/api/markdown',
+			'/api/posts',
+			'/api/users',
+			'/api/videos',
+			'/api/error',
+		];
+		cy.visit('/');
+		cy.get('[cy-data="server_status"]').contains('Running');
 
-        cy.get('h3').contains('Server Address');
-        cy.get('h3').contains('Server Port');
-        cy.get('h3').contains('Server URL Prefix');
-        cy.get('h3').contains('API endpoints');
+		cy.get('[cy-data="server_address"]').contains('Server Address');
+		cy.get('[cy-data="server_port"]').contains('Server Port');
+		cy.get('[cy-data="server_prefix"]').contains('Server URL Prefix');
+		cy.get('[cy-data="server_label"]').contains('API endpoints*');
 
-        cy.get('[cy-data="server_address"]').contains('localhost');
-        cy.get('[cy-data="server_port"]').contains('8000');
-        cy.get('[cy-data="url_prefix"]').contains('api');
+		cy.get('[cy-data="server_address"]').contains('localhost');
+		cy.get('[cy-data="server_port"]').contains('8000');
+		cy.get('[cy-data="url_prefix"]').contains('api');
 
-        const endpoints = cy.get('[cy-data="endpoint"]');
+		const endpoints = cy.get('[cy-data="endpoint"]');
 
-        endpoints.should('have.length', expectedEndpoints.length);
+		endpoints.should('have.length', expectedEndpoints.length);
 
-        endpoints.each((endpoint) => {
-            expect(expectedEndpoints).to.include(endpoint.text());
-        });
-    });
+		endpoints.each((endpoint) => {
+			expect(expectedEndpoints).to.include(endpoint.text());
+		});
+	});
 });

src/utilities/server-page.ts

@@ -362,7 +362,7 @@ const homePage = (apiPaths: string[]) => [
         <main>
             <section class="info-sticky">
                 <h1>Mock Server</h1>
-                <div class="status-box">
+                <div class="status-box" cy-data="server_status">
                     <span class="status" id="server-status">
                         <span class="status-tick" id="status-icon" aria-label="running" title="Running">
                             <!-- SVG will be dynamically updated here -->
@@ -372,13 +372,13 @@ const homePage = (apiPaths: string[]) => [
                     </span>
                 </div>
                 <ul class="info-list">
-                    <li><span class="info-label">Server Address:</span><span class="highlight" cy-data="server_address">localhost</span></li>
-                    <li><span class="info-label">Server Port:</span><span class="highlight" cy-data="server_port">${env?.SERVER_PORT?.toUpperCase() ?? 'NONE'}</span></li>
-                    <li><span class="info-label">Server URL Prefix:</span><span class="highlight" cy-data="url_prefix">${env?.USE_API_URL_PREFIX?.toLowerCase() ?? 'NONE'}</span></li>
+                    <li><span class="info-label" cy-data="server_address">Server Address:</span><span class="highlight" cy-data="server_address">localhost</span></li>
+                    <li><span class="info-label" cy-data="server_port">Server Port:</span><span class="highlight" cy-data="server_port">${env?.SERVER_PORT?.toUpperCase() ?? 'NONE'}</span></li>
+                    <li><span class="info-label" cy-data="server_prefix">Server URL Prefix:</span><span class="highlight" cy-data="url_prefix">${env?.USE_API_URL_PREFIX?.toLowerCase() ?? 'NONE'}</span></li>
                 </ul>
             </section>
             <section>
-                <div style="margin-bottom: 8px; font-size: 1.13rem; color: var(--text-muted); font-weight: 600;">API endpoints*</div>
+                <div style="margin-bottom: 8px; font-size: 1.13rem; color: var(--text-muted); font-weight: 600;" cy-data="server_label">API endpoints*</div>
                 <div class="endpoints">
                     ${apiPaths.map((path) => `<a class="endpoint-link" cy-data="endpoint" href="/${prefix}${path}">/${prefix}${path}</a>`).join('')}
                 </div>