From c854f4f42ed0294907114e07cf0d6c07f149c975 Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Thu, 2 May 2024 15:34:07 +0200
Subject: [PATCH] fix(utils): correctly check type of element (#1560)

---
 .../utils/__tests__/isOfType.test.tsx         | 76 +++++++++++++++++++
 src/components/utils/isOfType.ts              | 19 +++--
 2 files changed, 88 insertions(+), 7 deletions(-)
 create mode 100644 src/components/utils/__tests__/isOfType.test.tsx

diff --git a/src/components/utils/__tests__/isOfType.test.tsx b/src/components/utils/__tests__/isOfType.test.tsx
new file mode 100644
index 0000000000..7946902e3e
--- /dev/null
+++ b/src/components/utils/__tests__/isOfType.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import {render, screen} from '../../../../test-utils/utils';
+import {isOfType} from '../isOfType';
+
+function Test(props: React.PropsWithChildren<{matcher: (c: unknown) => boolean}>) {
+    const child = React.Children.only(props.children);
+
+    return props.matcher(child) ? 'correct' : 'wrong';
+}
+
+describe('isOfType', () => {
+    test('should match type of component', () => {
+        const Component = () => null;
+
+        render(
+            <Test matcher={isOfType(Component)}>
+                <Component />
+            </Test>,
+        );
+        expect(screen.getByText('correct')).toBeVisible();
+    });
+    test('should match displayName', () => {
+        const Component = () => null;
+        Component.displayName = 'comp1';
+        const Component2 = () => null;
+        Component2.displayName = 'comp1';
+
+        render(
+            <Test matcher={isOfType(Component)}>
+                <Component2 />
+            </Test>,
+        );
+        expect(screen.getByText('correct')).toBeVisible();
+    });
+    test('should not match if type and displayName do not match', () => {
+        const Component = () => null;
+        Component.displayName = 'comp1';
+        const Component2 = () => null;
+        Component2.displayName = 'comp2';
+
+        render(
+            <Test matcher={isOfType(Component)}>
+                <Component2 />
+            </Test>,
+        );
+        expect(screen.getByText('wrong')).toBeVisible();
+    });
+    test('should not match if type do not match and displayName is absent', () => {
+        const Component = () => null;
+        const Component2 = () => null;
+
+        render(
+            <Test matcher={isOfType(Component)}>
+                <Component2 />
+            </Test>,
+        );
+        expect(screen.getByText('wrong')).toBeVisible();
+    });
+    test('should match type of builtin component', () => {
+        render(
+            <Test matcher={isOfType('svg')}>
+                <svg />
+            </Test>,
+        );
+        expect(screen.getByText('correct')).toBeVisible();
+    });
+    test('should not match if type of builtin component is different', () => {
+        render(
+            <Test matcher={isOfType('svg')}>
+                <button />
+            </Test>,
+        );
+        expect(screen.getByText('wrong')).toBeVisible();
+    });
+});
diff --git a/src/components/utils/isOfType.ts b/src/components/utils/isOfType.ts
index a0b2a2509c..6def1d1ff3 100644
--- a/src/components/utils/isOfType.ts
+++ b/src/components/utils/isOfType.ts
@@ -1,18 +1,23 @@
 import React from 'react';
 
-export function isOfType<P = {}>(Component: React.ComponentType<P>) {
+export function isOfType<P = {}>(Component: React.ComponentType<P> | string) {
     return function isMatching(
-        component: React.ReactNode,
-    ): component is React.ReactElement<P, typeof React.Component> {
+        component: unknown,
+    ): component is React.ReactElement<P, typeof Component> {
         if (!React.isValidElement(component)) {
             return false;
         }
 
         const {type} = component;
+        if (type === Component) {
+            return true;
+        }
+
+        if (typeof Component === 'string' || typeof type === 'string') {
+            return false;
+        }
 
-        return (
-            type === React.Component ||
-            (type as React.ComponentType).displayName === Component.displayName
-        );
+        const displayName = (type as React.ComponentType).displayName;
+        return Boolean(displayName && displayName === Component.displayName);
     };
 }