Add another component to the tests which doesn't need a download button

Author: ptodev

.gitignore

@@ -18,7 +18,7 @@ data-alloy/
 /packaging/windows/LICENSE
 /packaging/windows/agent-windows-amd64.exe
 internal/web/ui/dist
-internal/web/ui/src/test/fixtures/large_disc_output.json
+internal/web/ui/src/test/generated_fixtures/
 
 .DS_Store
 buildx-v*

internal/web/ui/src/test/fixtures/generateLargeDiscOutput.ts

@@ -65,10 +65,9 @@ function generateTarget(index: number) {
 }
 
 /**
- * Generates a large discovery.kubernetes output with the specified number of targets.
- * Default count is chosen to create a large dataset that exceeds typical render limits.
+ * Generates a discovery.kubernetes output with the specified number of targets and label.
  */
-export function generateLargeDiscOutput(targetCount = 20000) {
+export function generateDiscOutput(label: string, targetCount: number) {
   const targets = [];
   for (let i = 0; i < targetCount; i++) {
     targets.push(generateTarget(i));
@@ -77,12 +76,12 @@ export function generateLargeDiscOutput(targetCount = 20000) {
   return {
     name: 'discovery.kubernetes',
     type: 'block',
-    localID: 'discovery.kubernetes.default_kubernetes',
+    localID: `discovery.kubernetes.${label}`,
     moduleID: '',
-    label: 'default_kubernetes',
+    label: label,
     referencesTo: [],
-    referencedBy: ['discovery.relabel.default_kubernetes'],
-    dataFlowEdgesTo: ['discovery.relabel.default_kubernetes'],
+    referencedBy: [`discovery.relabel.${label}`],
+    dataFlowEdgesTo: [`discovery.relabel.${label}`],
     health: {
       state: 'healthy',
       message: 'started component',
@@ -109,5 +108,14 @@ export function generateLargeDiscOutput(targetCount = 20000) {
   };
 }
 
-// Pre-generated fixture for tests - uses 5000 targets to ensure it's large enough
-export const largeDiscOutput = generateLargeDiscOutput(50000);
+// Heavy fixture - 50000 targets, requires download button
+export const heavyDiscOutput = generateDiscOutput('heavy', 50000);
+
+// Light fixture - 3 targets, renders inline without download button
+export const lightDiscOutput = generateDiscOutput('light', 3);
+
+// Backwards compatibility alias
+export const largeDiscOutput = heavyDiscOutput;
+export function generateLargeDiscOutput(targetCount = 20000) {
+  return generateDiscOutput('heavy', targetCount);
+}

internal/web/ui/src/test/fixtures/writeFixture.ts

@@ -1,12 +1,21 @@
-import { writeFileSync } from 'fs';
+import { mkdirSync, writeFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 
-import { largeDiscOutput } from './generateLargeDiscOutput';
+import { heavyDiscOutput, lightDiscOutput } from './generateLargeDiscOutput';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const jsonPath = join(__dirname, 'large_disc_output.json');
+const generatedDir = join(__dirname, '..', 'generated_fixtures');
 
-writeFileSync(jsonPath, JSON.stringify(largeDiscOutput, null, 2));
+// Ensure the generated_fixtures directory exists
+mkdirSync(generatedDir, { recursive: true });
 
-console.log(`Generated fixture at ${jsonPath}`);
+// Write heavy fixture (large - requires download button)
+const heavyPath = join(generatedDir, 'discovery.kubernetes.heavy.json');
+writeFileSync(heavyPath, JSON.stringify(heavyDiscOutput, null, 2));
+console.log(`Generated heavy fixture at ${heavyPath}`);
+
+// Write light fixture (small - renders inline)
+const lightPath = join(generatedDir, 'discovery.kubernetes.light.json');
+writeFileSync(lightPath, JSON.stringify(lightDiscOutput, null, 2));
+console.log(`Generated light fixture at ${lightPath}`);

internal/web/ui/vite.config.ts

@@ -19,6 +19,28 @@ function goTemplatePlugin() {
   } satisfies PluginOption;
 }
 
+/**
+ * Available mock fixtures mapped by their localID.
+ */
+const MOCK_FIXTURES = [
+  'discovery.kubernetes.heavy',
+  'discovery.kubernetes.light',
+];
+
+/**
+ * Helper to load a fixture by component ID.
+ */
+function loadFixture(componentId: string): string | null {
+  try {
+    return readFileSync(
+      join(__dirname, `src/test/generated_fixtures/${componentId}.json`),
+      'utf-8'
+    );
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Plugin to mock the Alloy API during development.
  * Serves fixture data from src/test/fixtures/ for testing without a real Alloy instance.
@@ -38,42 +60,38 @@ function mockApiPlugin(): PluginOption {
         // Mock: GET /api/v0/web/components (list all components)
         if (req.url === '/api/v0/web/components') {
           res.setHeader('Content-Type', 'application/json');
-          try {
-            const fixture = readFileSync(
-              join(__dirname, 'src/test/fixtures/large_disc_output.json'),
-              'utf-8'
-            );
-            const data = JSON.parse(fixture);
-            // Return as a list with one component
-            res.end(JSON.stringify([{
-              moduleID: data.moduleID || '',
-              localID: data.localID,
-              name: data.name,
-              label: data.label,
-              health: data.health,
-              referencedBy: data.referencedBy || [],
-              referencesTo: data.referencesTo || [],
-              dataFlowEdgesTo: data.dataFlowEdgesTo || [],
-              liveDebuggingEnabled: false,
-            }]));
-          } catch {
-            res.end(JSON.stringify([]));
+          const components = [];
+          for (const fixtureId of MOCK_FIXTURES) {
+            const fixture = loadFixture(fixtureId);
+            if (fixture) {
+              const data = JSON.parse(fixture);
+              components.push({
+                moduleID: data.moduleID || '',
+                localID: data.localID,
+                name: data.name,
+                label: data.label,
+                health: data.health,
+                referencedBy: data.referencedBy || [],
+                referencesTo: data.referencesTo || [],
+                dataFlowEdgesTo: data.dataFlowEdgesTo || [],
+                liveDebuggingEnabled: false,
+              });
+            }
           }
+          res.end(JSON.stringify(components));
           return;
         }
 
         // Mock: GET /api/v0/web/components/:id (component detail)
         if (req.url.startsWith('/api/v0/web/components/')) {
+          const componentId = req.url.replace('/api/v0/web/components/', '');
           res.setHeader('Content-Type', 'application/json');
-          try {
-            const fixture = readFileSync(
-              join(__dirname, 'src/test/fixtures/large_disc_output.json'),
-              'utf-8'
-            );
+          const fixture = loadFixture(componentId);
+          if (fixture) {
             res.end(fixture);
-          } catch (err) {
+          } else {
             res.statusCode = 404;
-            res.end(JSON.stringify({ error: 'Fixture not found' }));
+            res.end(JSON.stringify({ error: `Fixture not found: ${componentId}` }));
           }
           return;
         }