feat: display optionalDependencies in deps page (#119)

fengmk2 · claude · web-flow · commit 676dc449e6ea · 2025-12-22T22:19:05.000+08:00
Add optionalDependencies support to the dependencies info page, displaying it alongside dependencies and devDependencies in a three-column layout. 🤖 Generated with [Claude Code](https://claude.com/claude-code) <img width="3418" height="1870" alt="image" src="https://github.com/user-attachments/assets/5c7a4d9e-c1de-4026-803e-5dac143d9dde" />  ## Summary by CodeRabbit * **New Features** * Displays optional dependencies alongside regular and dev dependencies in the dependency view. * **Tests** * Adds tests covering optional dependencies display, counts, links, and behavior when version data is missing. * **Chores** * Adds test tooling and configs, test scripts, and test environment setup; updates project config to exclude test configs from compilation. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>  --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "ci": "npm run lint && npm run build"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "ci": "npm run lint && npm run build && npm test"
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.11.1",
@@ -38,16 +40,21 @@
   },
   "repository": "https://github.com/cnpm/cnpmweb.git",
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@types/lodash": "^4.14.197",
     "@types/node": "^20.4.1",
     "@types/npm-package-arg": "^6.1.3",
     "@types/react": "^18.2.14",
     "@types/semver": "^7.5.0",
     "@vercel/node": "^2.15.5",
+    "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^8.44.0",
     "eslint-config-next": "^13.4.4",
+    "jsdom": "^27.3.0",
     "prettier": "^3.0.3",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vitest": "^4.0.16"
   },
   "overrides": {
     "npm-package-arg": {
diff --git a/src/hooks/useManifest.ts b/src/hooks/useManifest.ts
@@ -26,6 +26,7 @@ export interface NpmPackageVersion {
   _cnpmcore_publish_time: string;
   dependencies: Record<string, string>;
   devDependencies: Record<string, string>;
+  optionalDependencies?: Record<string, string>;
 }
 
 export type PackageManifest = {
diff --git a/src/slugs/deps/index.test.tsx b/src/slugs/deps/index.test.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import Deps from './index';
+import { PackageManifest } from '@/hooks/useManifest';
+
+// Mock next/link
+vi.mock('next/link', () => ({
+  default: ({ children, href }: { children: React.ReactNode; href: string }) => {
+    return <a href={href}>{children}</a>;
+  },
+}));
+
+// Mock SizeContainer
+vi.mock('@/components/SizeContainer', () => ({
+  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}));
+
+const createMockManifest = (
+  versionData: Partial<{
+    dependencies: Record<string, string>;
+    devDependencies: Record<string, string>;
+    optionalDependencies: Record<string, string>;
+  }> = {}
+): PackageManifest => ({
+  name: 'test-package',
+  maintainers: [],
+  description: 'A test package',
+  _source_registry_name: 'npm',
+  'dist-tags': { latest: '1.0.0' },
+  versions: {
+    '1.0.0': {
+      name: 'test-package',
+      version: '1.0.0',
+      publish_time: Date.now(),
+      keywords: [],
+      _npmUser: {},
+      _cnpmcore_publish_time: new Date().toISOString(),
+      dependencies: versionData.dependencies || {},
+      devDependencies: versionData.devDependencies || {},
+      optionalDependencies: versionData.optionalDependencies,
+    },
+  },
+});
+
+describe('Deps Component', () => {
+  describe('optionalDependencies', () => {
+    it('should display optionalDependencies section', () => {
+      const manifest = createMockManifest({
+        optionalDependencies: {
+          'fsevents': '^2.3.0',
+        },
+      });
+
+      render(<Deps manifest={manifest} version="1.0.0" />);
+
+      expect(screen.getByText('OptionalDependencies (1)')).toBeInTheDocument();
+      expect(screen.getByText('fsevents')).toBeInTheDocument();
+      expect(screen.getByText('^2.3.0')).toBeInTheDocument();
+    });
+
+    it('should display empty optionalDependencies section when none exist', () => {
+      const manifest = createMockManifest({
+        dependencies: { 'lodash': '^4.17.21' },
+      });
+
+      render(<Deps manifest={manifest} version="1.0.0" />);
+
+      expect(screen.getByText('OptionalDependencies (0)')).toBeInTheDocument();
+    });
+
+    it('should display multiple optionalDependencies', () => {
+      const manifest = createMockManifest({
+        optionalDependencies: {
+          'fsevents': '^2.3.0',
+          'chokidar': '^3.5.0',
+          'esbuild': '^0.19.0',
+        },
+      });
+
+      render(<Deps manifest={manifest} version="1.0.0" />);
+
+      expect(screen.getByText('OptionalDependencies (3)')).toBeInTheDocument();
+      expect(screen.getByText('fsevents')).toBeInTheDocument();
+      expect(screen.getByText('chokidar')).toBeInTheDocument();
+      expect(screen.getByText('esbuild')).toBeInTheDocument();
+    });
+  });
+
+  describe('all dependency types together', () => {
+    it('should display all three dependency types', () => {
+      const manifest = createMockManifest({
+        dependencies: {
+          'react': '^18.2.0',
+          'next': '^13.4.0',
+        },
+        devDependencies: {
+          'typescript': '^5.0.0',
+          'jest': '^29.0.0',
+          'eslint': '^8.0.0',
+        },
+        optionalDependencies: {
+          'fsevents': '^2.3.0',
+        },
+      });
+
+      render(<Deps manifest={manifest} version="1.0.0" />);
+
+      expect(screen.getByText('Dependencies (2)')).toBeInTheDocument();
+      expect(screen.getByText('DevDependencies (3)')).toBeInTheDocument();
+      expect(screen.getByText('OptionalDependencies (1)')).toBeInTheDocument();
+    });
+
+    it('should handle missing version data gracefully', () => {
+      const manifest = createMockManifest({});
+      // Remove the version data
+      manifest.versions = {};
+
+      render(<Deps manifest={manifest} version="1.0.0" />);
+
+      expect(screen.getByText('Dependencies (0)')).toBeInTheDocument();
+      expect(screen.getByText('DevDependencies (0)')).toBeInTheDocument();
+      expect(screen.getByText('OptionalDependencies (0)')).toBeInTheDocument();
+    });
+  });
+
+  describe('dependency links', () => {
+    it('should create correct links for optionalDependencies', () => {
+      const manifest = createMockManifest({
+        optionalDependencies: {
+          'fsevents': '^2.3.0',
+        },
+      });
+
+      render(<Deps manifest={manifest} version="1.0.0" />);
+
+      const link = screen.getByRole('link', { name: 'fsevents' });
+      expect(link).toHaveAttribute('href', '/package/fsevents?version=%5E2.3.0');
+    });
+  });
+});
diff --git a/src/slugs/deps/index.tsx b/src/slugs/deps/index.tsx
@@ -32,10 +32,11 @@ const columns: TableColumnsType<DepRecord> = [
 export default function Deps({ manifest, version }: PageProps) {
   const depsInfo = React.useMemo(() => {
     const versionData = manifest.versions?.[version!];
-    if (!versionData) return { dependencies: [], devDependencies: [] };
+    if (!versionData) return { dependencies: [], devDependencies: [], optionalDependencies: [] };
 
     const deps = versionData.dependencies || {};
     const devDeps = versionData.devDependencies || {};
+    const optionalDeps = versionData.optionalDependencies || {};
 
     return {
       dependencies: Object.entries(deps).map(([pkg, spec]) => ({
@@ -46,15 +47,19 @@ export default function Deps({ manifest, version }: PageProps) {
         package: pkg,
         spec,
       })),
+      optionalDependencies: Object.entries(optionalDeps).map(([pkg, spec]) => ({
+        package: pkg,
+        spec,
+      })),
     };
   }, [manifest, version]);
 
-  const { dependencies, devDependencies } = depsInfo;
+  const { dependencies, devDependencies, optionalDependencies } = depsInfo;
 
   return (
     <SizeContainer maxWidth="90%">
       <Row gutter={[8, 8]}>
-        <Col span={12}>
+        <Col span={8}>
           <Card title={`Dependencies (${dependencies.length})`}>
             <Table
               dataSource={dependencies}
@@ -64,7 +69,7 @@ export default function Deps({ manifest, version }: PageProps) {
             />
           </Card>
         </Col>
-        <Col span={12}>
+        <Col span={8}>
           <Card title={`DevDependencies (${devDependencies.length})`}>
             <Table
               dataSource={devDependencies}
@@ -74,6 +79,16 @@ export default function Deps({ manifest, version }: PageProps) {
             />
           </Card>
         </Col>
+        <Col span={8}>
+          <Card title={`OptionalDependencies (${optionalDependencies.length})`}>
+            <Table
+              dataSource={optionalDependencies}
+              columns={columns}
+              rowKey={'package'}
+              pagination={{ size: 'small' }}
+            />
+          </Card>
+        </Col>
       </Row>
     </SizeContainer>
   );
diff --git a/tsconfig.json b/tsconfig.json
@@ -25,5 +25,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "vitest.config.ts", "vitest.setup.ts"]
 }
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
diff --git a/vitest.setup.ts b/vitest.setup.ts
@@ -0,0 +1,17 @@
+import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+
+// Mock matchMedia for Ant Design responsive components
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ export interface NpmPackageVersion {`
`26`	`26`	`_cnpmcore_publish_time: string;`
`27`	`27`	`dependencies: Record<string, string>;`
`28`	`28`	`devDependencies: Record<string, string>;`
	`29`	`+ optionalDependencies?: Record<string, string>;`
`29`	`30`	`}`
`30`	`31`
`31`	`32`	`export type PackageManifest = {`
Original file line number	Diff line number	Diff line change
`@@ -25,5 +25,5 @@`
`25`	`25`	`}`
`26`	`26`	`},`
`27`	`27`	`"include": ["next-env.d.ts", "*/.ts", "*/.tsx", ".next/types/*/.ts"],`
`28`		`- "exclude": ["node_modules"]`
	`28`	`+ "exclude": ["node_modules", "vitest.config.ts", "vitest.setup.ts"]`
`29`	`29`	`}`