@principal-ai/subsystems-react 0.56.3 → 0.56.5

package/src/subsystem/SubsystemComponentGraph.sidebar.test.tsx

@@ -0,0 +1,218 @@
+import { describe, expect, test } from 'bun:test';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Window } from 'happy-dom';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentGraph, type SubsystemComponentGraphProps } from './SubsystemComponentGraph';
+
+const components: SubsystemComponentGraphProps['components'] = [
+  { alias: 'entry', name: 'Entry', construct: 'function', file: 'src/entry.ts', purl: 'pkg:github/test/app' },
+  { alias: 'store', name: 'Store', construct: 'function', file: 'src/store.ts', purl: 'pkg:github/test/app' },
+];
+const trails: SubsystemComponentGraphProps['trails'] = [{
+  id: 'request',
+  title: 'Request flow',
+  steps: [{ from: 'entry', to: 'store', mechanism: 'calls', file: 'src/entry.ts', purl: 'pkg:github/test/app', symbol: 'Entry' }],
+}];
+const graphifyRelations: SubsystemComponentGraphProps['graphifyRelations'] = [
+  { id: 'static', from: 'entry', to: 'store', relation: 'references' },
+];
+
+function renderGraph(props: Partial<SubsystemComponentGraphProps> = {}) {
+  const markup = renderToStaticMarkup(
+    createElement(
+      ThemeProvider,
+      { theme: defaultEditorTheme },
+      createElement(SubsystemComponentGraph, {
+        components,
+        trails,
+        title: 'Request subsystem',
+        description: 'Always visible **description**.',
+        ...props,
+      }),
+    ),
+  );
+  const dom = new Window();
+  dom.document.body.innerHTML = markup;
+  return dom.document.body;
+}
+
+describe('subsystem graph sidebar', () => {
+  test('puts the name in a full-width header above the sidebar and graph', () => {
+    const body = renderGraph();
+    const header = body.querySelector('header');
+    expect(header?.querySelector('h2')?.textContent).toBe('Request subsystem');
+    expect(body.querySelectorAll('h2').length).toBe(1);
+    expect(header?.textContent).not.toContain('Always visible');
+    const content = header?.nextElementSibling;
+    expect(content?.querySelector('[aria-label="Resize sidebar"]')).not.toBeNull();
+    expect(content?.textContent).toContain('Always visible description.');
+    expect(content?.textContent).not.toContain('Request subsystem');
+  });
+
+  test('caps the scrollable description at 30% above the trails', () => {
+    const body = renderGraph();
+    const description = body.querySelector('[style*="max-height:30%"]') as HTMLElement;
+    expect(description).not.toBeNull();
+    expect(description.textContent).toContain('Always visible description.');
+    expect(description.style.overflowY).toBe('auto');
+  });
+
+  test('keeps the Files button in the header when no name is provided', () => {
+    const body = renderGraph({ title: undefined });
+    expect(body.querySelector('header h2')).toBeNull();
+    expect(body.querySelector('header button[aria-label^="Files"]')?.textContent).toBe('Files2');
+    expect(body.textContent).toContain('Always visible description.');
+  });
+
+  test('the header Files button starts inactive and leaves trails visible', () => {
+    const body = renderGraph();
+    expect(body.querySelector('header button[aria-label^="Files"]')?.getAttribute('aria-pressed')).toBe('false');
+    expect(body.textContent).toContain('Request flow');
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+  });
+
+  test('groups Trails, Files, and Issues into one switch with Trails selected by default', () => {
+    const body = renderGraph();
+    const group = body.querySelector('header [role="group"][aria-label="Sidebar view"]');
+    expect(group?.querySelectorAll('button').length).toBe(3);
+    expect(group?.querySelectorAll('button[aria-pressed="true"]').length).toBe(1);
+    expect(group?.querySelector('button[aria-label="Trails"]')?.getAttribute('aria-pressed')).toBe('true');
+    expect(group?.querySelector('button[aria-label^="Issues:"]')?.textContent).toBe('Issues');
+    expect((group as HTMLElement).style.borderStyle).toBe('solid');
+  });
+
+  test('omits the Files button when no components have files', () => {
+    const body = renderGraph({
+      components: components.map((component) => ({ ...component, file: '' })),
+    });
+    expect(body.querySelector('button[aria-label^="Files"]')).toBeNull();
+    expect(body.textContent).toContain('Request flow');
+  });
+
+  for (const active of [true, false]) {
+    test(`puts the ${active ? 'active' : 'inactive'} issue toggle in the header, not the sidebar`, () => {
+      const body = renderGraph({
+        diagnostic: { status: 'issues', issueCount: 3 },
+        showIssues: active,
+      });
+      const header = body.querySelector('header');
+      const toggle = header?.querySelector('button[aria-label^="Issues:"]');
+      expect(toggle).not.toBeNull();
+      expect(toggle?.textContent).toBe('Issues3');
+      expect((toggle as HTMLElement).style.borderStyle).toBe('none');
+      const filesButton = header?.querySelector('button[aria-label^="Files"]') as HTMLElement;
+      expect(filesButton.style.borderStyle).toBe('none');
+      expect(filesButton.parentElement?.style.borderStyle).toBe('solid');
+      expect(filesButton.parentElement?.style.display).toBe('grid');
+      expect(filesButton.parentElement?.style.gridAutoColumns).toBe('1fr');
+      expect((toggle as HTMLElement).style.justifyContent).toBe('center');
+      expect(toggle?.getAttribute('aria-pressed')).toBe(String(active));
+      expect(header?.querySelectorAll('button').length).toBe(3);
+      expect(header?.querySelectorAll('button[aria-pressed="true"]').length).toBe(1);
+      expect(header?.querySelector('button[aria-label="Trails"]')?.getAttribute('aria-pressed')).toBe(String(!active));
+      expect(body.querySelectorAll('button[aria-label^="Issues:"]').length).toBe(1);
+      expect(header?.nextElementSibling?.querySelector('button[aria-label^="Issues:"]')).toBeNull();
+      expect(body.textContent).toContain('Always visible description.');
+    });
+  }
+
+  test('counts unique files rather than components in the same file', () => {
+    const body = renderGraph({
+      components: [...components, { ...components[0], alias: 'helper' }],
+    });
+    expect(body.querySelector('header button[aria-label^="Files"]')?.textContent).toBe('Files2');
+  });
+
+  test('counts the same path in separate repositories as separate files', () => {
+    const body = renderGraph({
+      components: [...components, { ...components[0], alias: 'other-entry', purl: 'pkg:github/test/other' }],
+    });
+    expect(body.querySelector('header button[aria-label^="Files"]')?.textContent).toBe('Files3');
+  });
+
+  test('a diagnostic alone creates a header without an empty sidebar', () => {
+    const body = renderGraph({
+      trails: undefined,
+      graphifyRelations,
+      title: undefined,
+      description: undefined,
+      diagnostic: { status: 'ok' },
+    });
+    expect(body.querySelector('header button[aria-pressed="false"]')).not.toBeNull();
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+  });
+
+  test('a name alone creates a header without an empty sidebar', () => {
+    const body = renderGraph({ trails: undefined, graphifyRelations, description: undefined });
+    expect(body.querySelector('header h2')?.textContent).toBe('Request subsystem');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+  });
+
+  test('shows the description immediately without a description toggle', () => {
+    const body = renderGraph();
+    expect(body.textContent).toContain('Always visible description.');
+    expect(body.querySelector('strong')?.textContent).toBe('description');
+    expect(body.querySelector('[aria-label="Show description"]')).toBeNull();
+    expect(body.querySelector('[aria-label="Hide description"]')).toBeNull();
+    expect(body.textContent).toContain('Request flow');
+    expect(body.querySelector('[role="tablist"]')).toBeNull();
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+    expect(body.textContent).not.toContain('src/entry.ts');
+  });
+
+  test('still shows trails when an old Files tab selection was saved', () => {
+    const previousWindow = globalThis.window;
+    const dom = new Window();
+    dom.localStorage.setItem('principal.subsystems.viewState.sidebar-test', JSON.stringify({
+      sidebarView: 'files',
+    }));
+    globalThis.window = dom as unknown as typeof window;
+    try {
+      const body = renderGraph({ persistKey: 'sidebar-test' });
+      expect(body.textContent).toContain('Request flow');
+      expect(body.querySelector('[role="tree"]')).toBeNull();
+      expect(body.querySelector('[role="tablist"]')).toBeNull();
+    } finally {
+      globalThis.window = previousWindow;
+    }
+  });
+
+  test('static graphs keep their description but do not show a file panel', () => {
+    const body = renderGraph({ trails: undefined, graphifyRelations });
+    expect(body.textContent).toContain('Always visible description.');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).not.toBeNull();
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+    expect(body.textContent).not.toContain('src/entry.ts');
+    expect(body.querySelector('header')?.nextElementSibling?.textContent).not.toContain('Files');
+  });
+
+  test('files alone do not create an empty sidebar', () => {
+    const body = renderGraph({
+      trails: undefined,
+      graphifyRelations,
+      title: undefined,
+      description: undefined,
+    });
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+  });
+
+  test('the description stays visible while diagnostics replace the trails', () => {
+    const body = renderGraph({ showIssues: true, issues: [] });
+    expect(body.textContent).toContain('Always visible description.');
+    expect(body.textContent).not.toContain('Request flow');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).not.toBeNull();
+    expect(body.querySelector('[aria-label="Hide description"]')).toBeNull();
+    expect(body.querySelector('[role="tree"]')).toBeNull();
+  });
+
+  test('hideSidebar still hides the title, description, and trails', () => {
+    const body = renderGraph({ hideSidebar: true, diagnostic: { status: 'issues', issueCount: 3 } });
+    expect(body.textContent).not.toContain('Request subsystem');
+    expect(body.textContent).not.toContain('Always visible');
+    expect(body.textContent).not.toContain('Request flow');
+    expect(body.querySelector('[aria-label="Resize sidebar"]')).toBeNull();
+    expect(body.querySelector('header')).toBeNull();
+    expect(body.querySelector('button[aria-label^="Diagnostics:"]')).toBeNull();
+  });
+});