test: add component tests for all 8 UI components

Add 92 new tests across 8 test files covering DriverStatusCard, SnapshotsPage, PVCDetailSection, StorageClassesPage, VolumesPage, MetricsPage, OverviewPage, and BenchmarkPage. Includes shared test-helpers.tsx with fixtures and a lightweight CommonComponents mock. Total tests: 67 → 159. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 17:08:09 +00:00
parent 54a33d70b0
commit cdff1d1a07
10 changed files with 1659 additions and 0 deletions
@@ -0,0 +1,87 @@
+/**
+ * Lightweight mock implementations of @kinvolk/headlamp-plugin/lib/CommonComponents.
+ * Used via vi.mock('@kinvolk/headlamp-plugin/lib/CommonComponents', () => commonComponentsMock).
+ *
+ * Uses React.createElement instead of JSX since this file is .ts (not .tsx).
+ */
+
+import React from 'react';
+
+type RC = React.ReactNode;
+
+export const Loader = ({ title }: { title?: string }) =>
+  React.createElement('div', { 'data-testid': 'loader' }, title);
+
+export const SectionBox = ({ title, children }: { title?: string; children?: RC }) =>
+  React.createElement('div', { 'data-testid': 'section-box', 'data-title': title },
+    title ? React.createElement('h3', null, title) : null,
+    children
+  );
+
+export const SectionHeader = ({ title }: { title: string }) =>
+  React.createElement('h1', { 'data-testid': 'section-header' }, title);
+
+export const SimpleTable = ({
+  columns,
+  data,
+  emptyMessage,
+}: {
+  columns: Array<{ label: string; getter: (item: unknown) => RC }>;
+  data: unknown[];
+  emptyMessage?: string;
+}) => {
+  if (data.length === 0 && emptyMessage) {
+    return React.createElement('div', { 'data-testid': 'empty-table' }, emptyMessage);
+  }
+  return React.createElement('table', { 'data-testid': 'simple-table' },
+    React.createElement('thead', null,
+      React.createElement('tr', null,
+        columns.map(col => React.createElement('th', { key: col.label }, col.label))
+      )
+    ),
+    React.createElement('tbody', null,
+      data.map((item, i) =>
+        React.createElement('tr', { key: i },
+          columns.map(col => React.createElement('td', { key: col.label }, col.getter(item)))
+        )
+      )
+    )
+  );
+};
+
+export const NameValueTable = ({
+  rows,
+}: {
+  rows: Array<{ name: string; value: RC }>;
+}) =>
+  React.createElement('table', { 'data-testid': 'name-value-table' },
+    React.createElement('tbody', null,
+      rows.map(row =>
+        React.createElement('tr', { key: row.name },
+          React.createElement('td', null, row.name),
+          React.createElement('td', null, row.value)
+        )
+      )
+    )
+  );
+
+export const StatusLabel = ({
+  status,
+  children,
+}: {
+  status: string;
+  children?: RC;
+}) =>
+  React.createElement('span', { 'data-testid': 'status-label', 'data-status': status }, children);
+
+export const PercentageBar = ({
+  data,
+}: {
+  data: Array<{ name: string; value: number }>;
+  total: number;
+}) =>
+  React.createElement('div', { 'data-testid': 'percentage-bar' },
+    data.map(d =>
+      React.createElement('span', { key: d.name }, `${d.name}: ${d.value}`)
+    )
+  );