add tests and test coverage

Signed-off-by: Winner95 <Winner95@users.noreply.github.com>

Author: Winner95

__tests__/handler.test.js

@@ -0,0 +1,141 @@
+const { parseFixture } = require('./helpers');
+const customHandler = require('../index'); // index.js (module under test)
+const {
+    makePathWithEmptyTypePath,
+    makePathWithPropTypes,
+    makePathWithExportedType,
+    makePathWithInterfaceType,
+    makePathWithNoTypeAnnotation,
+} = require('../fixtures/ParsedProps');
+
+describe('typescript-react-function-component-props-handler', () => {
+    test('handles React.FC<Props> components', () => {
+        const doc = parseFixture('Button.tsx');
+
+        expect(doc.displayName).toBe('Button');
+        expect(doc.description).toBe('A simple button component');
+
+        expect(doc).toHaveProperty('props');
+        expect(doc.props).toHaveProperty('label');
+
+        expect(doc.props.label.tsType).toMatchObject({ name: 'string' });
+        expect(doc.props.label.required).toBe(true);
+        expect(doc.props.label).toHaveProperty('description');
+        expect(doc.props.label.description).toBe('Text to show inside the button');
+
+        expect(doc.props).toHaveProperty('onClick');
+        expect(doc.props.onClick.tsType).toMatchObject({ name: 'signature' });
+        expect(doc.props.onClick.tsType.type).toBe('function');
+        expect(doc.props.onClick.tsType.raw).toBe('() => void');
+        expect(doc.props.onClick.tsType.signature).toMatchObject({ arguments: [], return: { name: 'void' } });
+        expect(doc.props.onClick.required).toBe(false);
+        expect(doc.props.onClick).toHaveProperty('description');
+        expect(doc.props.onClick.description).toBe('Optional click handler');
+    });
+
+    test('handles React.forwardRef(...) components', () => {
+        const doc = parseFixture('TooltipTarget.tsx');
+
+        expect(doc.displayName).toBe('TooltipTarget');
+    });
+
+    // Currently return error
+    // test('handles React.forwardRef(...) components - part 2', () => {
+    //     const doc = parseFixture('ForwardedButton.tsx');
+    //     console.log(doc)
+    //     expect(doc.displayName).toBe('Button');
+    // });
+
+    // Line 31 in index.js without type - can't be tested directly because of early return
+    test('handles components without type', () => {
+        const doc = parseFixture('ComponentWithoutType.tsx');
+        expect(doc.displayName).toBe('ComponentWithoutType');
+    });
+
+    // Line 51 in index.js early-returns if hasPropTypes is true
+    test('handles components without use of params', () => {
+        const doc = parseFixture('NoParamsComponent.tsx');
+        expect(doc.displayName).toBe('NoParamComponent');
+    });
+
+    // Line 68 in index.js calls checkForProptypes
+    test('handles components with propTypes', () => {
+        const doc = parseFixture('ComponentWithPropTypes.tsx');
+        expect(doc.displayName).toBe('ComponentWithPropTypes');
+    });
+
+    // Line 78 in index.js uses ExportNamedDeclaration
+    test('handles components with exported interface', () => {
+        const doc = parseFixture('ExportedInterfacePropsComponent.tsx');
+        expect(doc.displayName).toBe('ComponentWithExportedType');
+    });
+
+    // Line 86 in index.js uses TSInterfaceDeclaration
+    test('handles components with interface props', () => {
+        const doc = parseFixture('InterfacePropsComponent.tsx');
+        expect(doc.displayName).toBe('ComponentWithInterface');
+
+        expect(doc).toHaveProperty('props');
+        expect(doc.props).toHaveProperty('label');
+        expect(doc.props.label.tsType).toMatchObject({ name: 'string' });
+        expect(doc.props.label.required).toBe(true);
+
+        expect(doc.props).toHaveProperty('disabled');
+        expect(doc.props.disabled.tsType).toMatchObject({ name: 'boolean' });
+        expect(doc.props.disabled.required).toBe(false);
+    });
+
+    // @TODO: add more tests for various edge cases
+    // Add one test per "Src/ui" example you care about:
+    // - React.FC<Props> with generic
+    // - Alias types
+    // - Intersections
+    // - Props from imported types, etc.
+
+    // Extra tests for the inner functions of the handler: mainly parsed values
+    // Line 31 in index.js without type
+    test('handles components without type and falls back to id.name and getTypePath() returns []', () => {
+        const { path, param } = makePathWithEmptyTypePath();
+
+        // Should not throw and should leave params unchanged (no typePath found)
+        expect(() => customHandler(null, path)).not.toThrow();
+        expect(path.parentPath.node.init.params[0]).toBe(param);
+    });
+
+    // Line 68 in index.js calls checkForProptypes
+    test('detects propTypes and returns early', () => {
+        const { path } = makePathWithPropTypes();
+
+        // Should not throw; handler will see hasPropTypes=true and early-return
+        expect(() => customHandler(null, path)).not.toThrow();
+    });
+
+    // Line 51 in index.js early-returns if hasPropTypes is true
+    test('calls checkForProptypes and early-returns when propTypes exist', () => {
+        const { path } = makePathWithNoTypeAnnotation();
+
+        customHandler(null, path);
+
+        expect(path.parentPath.node.init.params[0]).toBe(undefined);
+    });
+
+    // Line 78 in index.js uses ExportNamedDeclaration
+    test('uses ExportNamedDeclaration when finding typePath', () => {
+        const { path, exportedType } = makePathWithExportedType();
+
+        customHandler(null, path);
+
+        const [typedParam] = path.parentPath.node.init.params;
+        expect(typedParam.typeAnnotation).toBe(exportedType.declaration);
+    });
+
+    // Line 86 in index.js uses TSInterfaceDeclaration
+    test('uses TSInterfaceDeclaration when finding typePath', () => {
+        const { path, interfaceType } = makePathWithInterfaceType();
+
+        customHandler(null, path);
+
+        const [typedParam] = path.parentPath.node.init.params;
+        expect(typedParam.typeAnnotation).toBe(interfaceType);
+    });
+});

__tests__/helpers.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+
+const reactDocs = require('react-docgen');
+
+const customHandler = require('../index.js'); // index.js (module under test)
+
+// Small helper to normalize single vs multi-component output
+function getFirstDoc(doc) {
+  return Array.isArray(doc) ? doc[0] : doc;
+}
+
+// Parses a fixture file from __tests__/fixtures and returns the first component doc
+function parseFixture(relativePath) {
+  const filePath = path.join(__dirname, '..', 'fixtures', relativePath);
+  const src = fs.readFileSync(filePath, 'utf8');
+
+  const result = reactDocs.parse(
+    src,
+    null,
+    [customHandler, ...reactDocs.defaultHandlers],
+    // fix for node.js environment
+    {
+      filename: filePath, // 👈 tells react-docgen this is TSX
+    }
+  );
+
+  return getFirstDoc(result);
+}
+
+module.exports = {
+  parseFixture,
+};

fixtures/Button.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+/** Props for the Button component */
+type ButtonProps = {
+  /** Text to show inside the button */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+};
+
+/** A simple button component */
+export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
+  return <button onClick={onClick}>{label}</button>;
+};

fixtures/ComponentWithPropTypes.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+type PropsType = {
+  label: string;
+  disabled?: boolean;
+};
+
+// @ts-ignore: Ignore prop-types validation errors
+PropsType.propTypes = {
+  label: { required: true },
+  disabled: { required: false },
+};
+
+const ComponentWithPropTypes: React.FC<PropsType> = (props) => {
+  return <button disabled={props.disabled}>{props.label}</button>;
+};
+
+ComponentWithPropTypes.propTypes = {
+  label: { required: true },
+  disabled: { required: false },
+};
+
+export default ComponentWithPropTypes;

fixtures/ComponentWithoutType.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ComponentWithoutType = (props) => {
+  return <div>{props.title}</div>;
+};
+
+export default ComponentWithoutType;

fixtures/ExportedInterfacePropsComponent.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export interface ExportedProps {
+  label: string;
+  disabled?: boolean;
+}
+
+const ComponentWithExportedType: React.FC<ExportedProps> = (props) => {
+  return <button disabled={props.disabled}>{props.label}</button>;
+};
+
+export default ComponentWithExportedType;

fixtures/ForwardedButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+/** Props for the Button component */
+type ButtonProps = {
+    /** Text to show inside the button */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+};
+
+// TypeError: Cannot read properties of undefined (reading 'length')
+export const ForwardedButton = React.forwardRef((props: ButtonProps, ref: any) => (
+    <button ref={ref} className="ForwardedButton">
+        {props.children}
+    </button>
+));
+
+/** A simple button component */
+const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
+    // You can now get a ref directly to the DOM button:
+    const ref = React.createRef();
+
+    return <ForwardedButton ref={ref}>{label}</ForwardedButton>;;
+};

fixtures/InterfacePropsComponent.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface InterfaceProps {
+  label: string;
+  disabled?: boolean;
+}
+
+const ComponentWithInterface: React.FC<InterfaceProps> = (props) => {
+  return <button disabled={props.disabled}>{props.label}</button>;
+};
+
+export default ComponentWithInterface;

fixtures/NoParamsComponent.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type NoParamProps = {
+  label: string;
+};
+
+export const NoParamComponent: React.FC<NoParamProps> = () => {
+  return <div>Hi</div>;
+};