feat(test): add card-multi-metrics.cy.tsx

README.md

@@ -3,7 +3,6 @@
 [![Build and Test](https://github.com/duyet/clickhouse-monitoring/actions/workflows/ci.yml/badge.svg)](https://github.com/duyet/clickhouse-monitoring/actions/workflows/ci.yml)
 [![All-time uptime](https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fduyet%2Fuptime%2FHEAD%2Fapi%2Fclickhouse-monitoring-vercel-app%2Fuptime.json)](https://duyet.github.io/uptime/history/clickhouse-monitoring-vercel-app)
 
-
 The simple Next.js dashboard that relies on `system.*` tables to help monitor and provide an overview of your ClickHouse cluster.
 
 Features:

components/generic-charts/card-multi-metrics.cy.tsx

@@ -0,0 +1,93 @@
+import { CardMultiMetrics } from './card-multi-metrics'
+
+describe('<CardMultiMetrics />', () => {
+  const mockItems = [
+    {
+      current: 100,
+      target: 200,
+      currentReadable: '100 users',
+      targetReadable: '200 users',
+    },
+    {
+      current: 50,
+      target: 150,
+      currentReadable: '50 sessions',
+      targetReadable: '150 sessions',
+    },
+  ]
+
+  it('renders with default props', () => {
+    cy.mount(<CardMultiMetrics />)
+
+    // Should have aria-description
+    cy.get('[aria-description="card-metrics"]').should('exist')
+
+    // Should not render labels when no items
+    cy.contains('Current').should('not.exist')
+    cy.contains('Total').should('not.exist')
+  })
+
+  it('renders with primary content', () => {
+    cy.mount(<CardMultiMetrics primary="Dashboard Metrics" />)
+
+    cy.get('div.text-xl').contains('Dashboard Metrics').should('be.visible')
+  })
+
+  it('renders with custom labels and items', () => {
+    cy.mount(
+      <CardMultiMetrics
+        currentLabel="Active"
+        targetLabel="Maximum"
+        items={mockItems}
+      />
+    )
+
+    // Labels should be visible when items exist
+    cy.contains('Active').should('be.visible')
+    cy.contains('Maximum').should('be.visible')
+  })
+
+  it('renders with items data', () => {
+    cy.mount(<CardMultiMetrics items={mockItems} />)
+
+    // Check if readable values are displayed
+    cy.contains('100 users').should('be.visible')
+    cy.contains('200 users').should('be.visible')
+    cy.contains('50 sessions').should('be.visible')
+    cy.contains('150 sessions').should('be.visible')
+
+    // Check for dotted separators
+    cy.get('hr.border-dotted').should('have.length', mockItems.length)
+  })
+
+  it('renders with custom className', () => {
+    const customClass = 'custom-test-class'
+    cy.mount(<CardMultiMetrics className={customClass} />)
+
+    cy.get('[aria-description="card-metrics"]').should(
+      'have.class',
+      customClass
+    )
+  })
+
+  it('renders with ReactNode as primary content', () => {
+    cy.mount(
+      <CardMultiMetrics
+        primary={<div className="test-primary">Custom Primary</div>}
+      />
+    )
+
+    cy.get('.test-primary').contains('Custom Primary').should('be.visible')
+  })
+
+  it('handles empty items array', () => {
+    cy.mount(<CardMultiMetrics items={[]} />)
+
+    // Should not render labels when items array is empty
+    cy.contains('Current').should('not.exist')
+    cy.contains('Total').should('not.exist')
+
+    // Should not render any separators
+    cy.get('hr.border-dotted').should('not.exist')
+  })
+})

components/generic-charts/card-multi-metrics.tsx

@@ -21,14 +21,19 @@ export function CardMultiMetrics({
   className,
 }: CardMultiMetricsProps) {
   return (
-    <div className={cn('flex flex-col gap-4', className)}>
+    <div
+      className={cn('flex flex-col gap-4', className)}
+      aria-description="card-metrics"
+    >
       <div className="text-xl md:text-3xl">{primary}</div>
 
       <div className="flex flex-col justify-between text-sm">
-        <div className="mt-2 flex flex-row justify-between font-bold">
-          <span className="truncate">{currentLabel}</span>
-          <span className="truncate">{targetLabel}</span>
-        </div>
+        {items.length ? (
+          <div className="mt-2 flex flex-row justify-between font-bold">
+            <span className="truncate">{currentLabel}</span>
+            <span className="truncate">{targetLabel}</span>
+          </div>
+        ) : null}
 
         {items.map((item, i) => {
           const _percent = (item.current / item.target) * 100