nextjs-ide-helper 1.1.3 → 1.3.1

package/src/__tests__/loader.test.js

@@ -0,0 +1,480 @@
+const path = require('path');
+const loader = require('../loader.js');
+
+describe('cursorButtonLoader', function() {
+  let mockContext;
+
+  beforeEach(function() {
+    mockContext = {
+      resourcePath: process.cwd() + '/src/components/Button.tsx',
+      getOptions: jest.fn(() => ({}))
+    };
+    
+    process.env.NODE_ENV = 'development';
+  });
+
+  afterEach(function() {
+    jest.clearAllMocks();
+  });
+
+  describe('when enabled', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should wrap a React component with withIdeButton', function() {
+      const source = `import React from 'react';
+
+const Button = () => {
+  return <button>Click me</button>;
+};
+
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(Button,");
+      expect(result).toMatch(/projectRoot: ['"][^'"]*['"]/); // Accept both single and double quotes and any valid path
+    });
+
+    it('should handle JSX files', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/Button.jsx';
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(Button,");
+    });
+
+    it('should handle components with existing imports', function() {
+      const source = `import React from 'react';
+import { useState } from 'react';
+
+const Counter = () => {
+  const [count, setCount] = useState(0);
+  return <div>{count}</div>;
+};
+
+export default Counter;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(Counter,");
+      
+      const lines = result.split('\n');
+      const importIndex = lines.findIndex(line => line.includes("import { withIdeButton }"));
+      const useStateIndex = lines.findIndex(line => line.includes("import { useState }"));
+      expect(importIndex).toBeGreaterThan(useStateIndex);
+    });
+
+    it('should handle components with no imports', function() {
+      const source = `const SimpleButton = () => {
+  return <button>Simple</button>;
+};
+
+export default SimpleButton;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(SimpleButton,");
+      expect(result.indexOf("import { withIdeButton }")).toBe(0);
+    });
+
+    it('should include relative path in the wrapper', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/ui/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("'src/components/ui/Button.tsx'");
+    });
+
+    it('should use custom import path when specified', function() {
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        importPath: 'custom-ide-helper'
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'custom-ide-helper';");
+    });
+  });
+
+  describe('when disabled', function() {
+    it('should return source unchanged when enabled is false', function() {
+      mockContext.getOptions.mockReturnValue({ enabled: false });
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should return source unchanged when NODE_ENV is production and enabled not explicitly set', function() {
+      process.env.NODE_ENV = 'production';
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+  });
+
+  describe('file filtering', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should not process files outside component directories', function() {
+      mockContext.resourcePath = process.cwd() + '/src/utils/helper.tsx';
+      const source = `const Helper = () => <div>Helper</div>;
+export default Helper;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should process files in custom component directories', function() {
+      mockContext.resourcePath = process.cwd() + '/src/widgets/MyWidget.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/widgets'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const MyWidget = () => <div>Widget</div>;
+export default MyWidget;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+    });
+
+    it('should not process non-JSX/TSX files', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/Button.js';
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+  });
+
+  describe('component detection', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should not process files without default export', function() {
+      const source = `export const Button = () => <button>Click</button>;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should not process files with lowercase default export', function() {
+      const source = `const button = () => <button>Click</button>;
+export default button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should process files with PascalCase default export', function() {
+      const source = `const MyButton = () => <button>Click</button>;
+export default MyButton;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+    });
+
+    it('should process direct export default function declarations', function() {
+      const source = `export default function MyCoolComponent() {
+  return <div>My Cool Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(MyCoolComponent,");
+    });
+
+    it('should process direct export default arrow function expressions', function() {
+      const source = `export default () => {
+  return <div>Anonymous Component</div>;
+};`;
+
+      const result = loader.call(mockContext, source);
+
+      // Should process anonymous components using file path
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(");
+    });
+
+    it('should process anonymous function expressions', function() {
+      const source = `export default function() {
+  return <div>Anonymous Function Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      // Should process anonymous function components
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(");
+    });
+
+    it('should process direct export default class components', function() {
+      const source = `import React from 'react';
+
+export default class MyClassComponent extends React.Component {
+  render() {
+    return <div>Class Component</div>;
+  }
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(MyClassComponent,");
+    });
+
+    it('should not process lowercase direct export default functions', function() {
+      const source = `export default function myLowercaseComponent() {
+  return <div>Lowercase Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect(result).not.toContain('withIdeButton');
+    });
+
+    it('should handle direct export default with complex function names', function() {
+      const source = `export default function MyComplexComponent123WithNumbers() {
+  return <div>Complex Named Component</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(MyComplexComponent123WithNumbers,");
+    });
+
+    it('should handle function components with TypeScript', function() {
+      const source = `interface Props {
+  title: string;
+}
+
+export default function TypeScriptComponent(props: Props) {
+  return <div>{props.title}</div>;
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(TypeScriptComponent,");
+      expect(result).toContain("function TypeScriptComponent(props: Props)");
+    });
+
+    it('should handle class components with TypeScript', function() {
+      const source = `import React, { Component } from 'react';
+
+interface Props {
+  name: string;
+}
+
+export default class TSClassComponent extends Component<Props> {
+  render() {
+    return <div>Hello {this.props.name}</div>;
+  }
+}`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("import { withIdeButton } from 'nextjs-ide-helper';");
+      expect(result).toContain("export default withIdeButton(TSClassComponent,");
+      expect(result).toContain("class TSClassComponent extends Component<Props>");
+    });
+  });
+
+  describe('already wrapped components', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should not wrap components that are already wrapped', function() {
+      const source = `import { withIdeButton } from 'nextjs-ide-helper';
+
+const Button = () => <button>Click</button>;
+
+export default withIdeButton(Button, 'src/components/Button.tsx');`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toBe(source);
+      expect((result.match(/withIdeButton/g) || []).length).toBe(2);
+    });
+  });
+
+  describe('edge cases', function() {
+    beforeEach(function() {
+      mockContext.getOptions.mockReturnValue({ enabled: true });
+    });
+
+    it('should handle export default with semicolon', function() {
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("export default withIdeButton(Button,");
+      expect(result).not.toContain("export default Button;");
+    });
+
+    it('should handle export default without semicolon', function() {
+      const source = `const Button = () => <button>Click</button>
+export default Button`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("export default withIdeButton(Button,");
+      expect(result).not.toContain("export default Button");
+    });
+
+    it('should handle complex component names', function() {
+      const source = `const MyComplexComponent123 = () => <div>Complex</div>;
+export default MyComplexComponent123;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain("export default withIdeButton(MyComplexComponent123,");
+    });
+
+    it('should handle files with multiple component paths', function() {
+      mockContext.resourcePath = process.cwd() + '/lib/components/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components', 'lib/components'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+    });
+
+    it('should support regex patterns in component paths for nested directories', function() {
+      mockContext.resourcePath = process.cwd() + '/src/components/ui/forms/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'src/components/ui/forms/Button.tsx'");
+    });
+
+    it('should support regex patterns matching any nested directory structure', function() {
+      mockContext.resourcePath = process.cwd() + '/app/components/dashboard/widgets/Chart.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['**/components/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Chart = () => <div>Chart</div>;
+export default Chart;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'app/components/dashboard/widgets/Chart.tsx'");
+    });
+
+    it('should support multiple regex patterns for different nested structures', function() {
+      mockContext.resourcePath = process.cwd() + '/modules/feature-a/components/deep/nested/Widget.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        componentPaths: ['src/components/**', 'modules/**/components/**', 'lib/ui/**'],
+        projectRoot: process.cwd()
+      });
+
+      const source = `const Widget = () => <div>Widget</div>;
+export default Widget;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'modules/feature-a/components/deep/nested/Widget.tsx'");
+    });
+  });
+
+  describe('options handling', function() {
+    it('should use default options when none provided', function() {
+      mockContext.getOptions.mockReturnValue(null);
+      process.env.NODE_ENV = 'development';
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toContain('withIdeButton');
+      expect(result).toContain("'nextjs-ide-helper'");
+    });
+
+    it('should handle custom project root', function() {
+      const customRoot = '/custom/project';
+      mockContext.resourcePath = customRoot + '/src/components/Button.tsx';
+      mockContext.getOptions.mockReturnValue({ 
+        enabled: true,
+        projectRoot: customRoot
+      });
+
+      const source = `const Button = () => <button>Click</button>;
+export default Button;`;
+
+      const result = loader.call(mockContext, source);
+
+      expect(result).toMatch(new RegExp("projectRoot:\\s*['\"]" + customRoot.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + "['\"]"));
+      expect(result).toContain("'src/components/Button.tsx'");
+    });
+  });
+});