Merge pull request #441 from kylemh/master

Resolve issue with first displayName always being used

Author: pvasek

src/__tests__/data/StatelessDisplayNameMultipleDisplayNames.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="button" />
+);
+
+Button.displayName = 'First';
+
+export const SubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="submit" />
+);
+
+SubmitButton.displayName = 'Second';
+
+export const ResetButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="reset" />
+);
+
+ResetButton.displayName = 'Third';

src/__tests__/data/StatelessDisplayNameMultipleFnsOneDisplayName.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="button" />
+);
+
+Button.displayName = 'First';
+
+export const someSeparateFunction = () => {};

src/__tests__/parser.ts

@@ -989,6 +989,32 @@ describe('parser', () => {
       const [parsed] = parse(fixturePath('StatefulDisplayNameFolder/index'));
       assert.equal(parsed.displayName, 'StatefulDisplayNameFolder');
     });
+
+    it('should get all displayNames from single file when multiple functions have the property defined', () => {
+      const [parsed1, parsed2, parsed3] = parse(
+        fixturePath('StatelessDisplayNameMultipleDisplayNames')
+      );
+
+      // parsed1.displayName === 'Button'?
+      // parsed1.displayName === 'SubmitButton'?
+      // parsed1.displayName === 'ResetButton'?
+
+      assert.equal(parsed1.displayName, 'First');
+      assert.equal(parsed2.displayName, 'Second');
+      assert.equal(parsed3.displayName, 'Third');
+    });
+
+    it('should get all displayNames from single file when multiple functions have the property defined', () => {
+      const [parsed1, parsed2] = parse(
+        fixturePath('StatelessDisplayNameMultipleFnsOneDisplayName')
+      );
+
+      // parsed1.displayName === 'Button'?
+      // parsed2 is `undefined`?
+
+      assert.equal(parsed1.displayName, 'First');
+      assert.equal(parsed2.displayName, 'someSeparateFunction');
+    });
   });
 
   describe('Parser options', () => {

src/parser.ts

@@ -1200,11 +1200,26 @@ function getTextValueOfFunctionProperty(
     .filter(statement => {
       const expr = (statement as ts.ExpressionStatement)
         .expression as ts.BinaryExpression;
+
+      /**
+       * Ensure the .displayName is for the currently processing function.
+       *
+       * This avoids the following situations:
+       *
+       *  - A file has multiple functions, one has `.displayName`, and all
+       *    functions ends up with that same `.displayName` value.
+       *
+       *  - A file has multiple functions, each with a different
+       *    `.displayName`, but the first is applied to all of them.
+       */
+      const flowNodeNameEscapedText = (statement as any)?.flowNode?.node?.name
+        ?.escapedText as false | ts.__String | undefined;
+
       return (
         expr.left &&
         (expr.left as ts.PropertyAccessExpression).name &&
         (expr.left as ts.PropertyAccessExpression).name.escapedText ===
-          propertyName
+          (propertyName && flowNodeNameEscapedText === exp.escapedName)
       );
     })
     .filter(statement => {