add test cover for dynamic index types

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

Author: Winner95

__tests__/handler.test.js

@@ -154,6 +154,23 @@ describe('typescript-react-function-component-props-handler', () => {
         expect(doc.props).not.toHaveProperty('placeholder');
     });
 
+    // @TODO add support for index signature in type
+    test('handles React.FC<Props> components with dynamic type props', () => {
+        const doc = parseFixture('TextInput.tsx');
+
+        expect(doc).toHaveProperty('props');
+        expect(doc.props).toHaveProperty('onChange');
+        expect(doc.props.onChange).toHaveProperty('tsType');
+        expect(doc.props.onChange.tsType.raw).toBe('(event: React.ChangeEvent<HTMLInputElement>) => void');
+        expect(doc.props.onChange.tsType.signature).toHaveProperty('arguments');
+        expect(doc.props.onChange.tsType.signature.arguments).toHaveLength(1);
+        expect(doc.props.onChange.tsType.signature.arguments[0]).toMatchObject({ name: 'event' } );
+        expect(doc.props.onChange.tsType.signature.arguments[0].type).toHaveProperty('elements')
+        // data-testid comes from DataAttributes index signature
+        // which is not yet supported
+        expect(doc.props).not.toHaveProperty('data-testid');
+    });
+
     // 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');

fixtures/TextInput.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+type DataAttributes = {
+  [key: `data-${string}`]: string | number | undefined;
+};
+
+type TextInputProps = {
+  id?: string;
+  name?: string;
+  value: string;
+  label?: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  placeholder?: string;
+} & DataAttributes &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
+
+export const TextInput: React.FC<TextInputProps> = ({ id, label, 'data-testid': dataTestid }) => {
+  return <span id={id} data-testid={dataTestid}>{label}</span>;
+};