Fix(web-react): Warn when icon asset is missing from the map

packages/web-react/src/hooks/__tests__/useIcon.test.tsx

@@ -1,20 +1,49 @@
-import React, { ReactNode } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
-import { useIcon } from '../useIcon';
+import React, { ReactNode } from 'react';
+import warning from '../../common/utilities/warning';
 import { IconsProvider } from '../../context/IconsContext';
+import { useIcon } from '../useIcon';
+
+jest.mock('../../common/utilities/warning', () => jest.fn());
 
 describe('useIcon', () => {
+  const mockedWarning = warning as jest.MockedFunction<typeof warning>;
+  const icons = { warning: '<path d="ERRW ADSFDSFDS"></path>' };
+  const wrapper = ({ children }: { children: ReactNode }) => <IconsProvider value={icons}>{children}</IconsProvider>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should return empty string', () => {
     const { result } = renderHook(() => useIcon(''));
 
     expect(result.current).toBe('');
   });
 
+  it('should raise warning when icon name is missing from the assets', () => {
+    renderHook(() => useIcon('warning'), {
+      wrapper: ({ children }: { children: ReactNode }) => <IconsProvider value={{}}>{children}</IconsProvider>,
+    });
+
+    expect(mockedWarning).toHaveBeenCalled();
+  });
+
   it('should return icon path', () => {
-    const icons = { warning: '<path d="ERRW ADSFDSFDS"></path>' };
-    const wrapper = ({ children }: { children: ReactNode }) => <IconsProvider value={icons}>{children}</IconsProvider>;
     const { result } = renderHook(() => useIcon('warning'), { wrapper });
 
     expect(result.current).toBe('<path d="ERRW ADSFDSFDS"></path>');
   });
+
+  it('should return icon path based on fallback icon', () => {
+    const { result } = renderHook(() => useIcon('danger'), { wrapper });
+
+    expect(result.current).toBe('<path d="ERRW ADSFDSFDS"></path>');
+  });
+
+  it('should raise warning when fallback icon name is used', () => {
+    renderHook(() => useIcon('danger'), { wrapper });
+
+    expect(mockedWarning).toHaveBeenCalled();
+  });
 });

packages/web-react/src/hooks/useIcon.ts

@@ -21,13 +21,20 @@ export const useIcon = (name: string) => {
   }
 
   if (icons != null && icons[name] == null) {
-    warning(
-      name !== 'danger' || iconFallbacks[name] !== 'warning',
-      'The "danger" icon is missing from your assets. It will be required in the next major version. Using "warning" as a fallback.',
-    );
+    if (name === 'danger' && iconFallbacks[name] === 'warning') {
+      warning(
+        false,
+        'The "danger" icon is missing from your assets. It will be required in the next major version. Using "warning" as a fallback.',
+      );
 
-    return icons[iconFallbacks[name]];
+      return icons[iconFallbacks[name]];
+    }
   }
 
+  warning(
+    false,
+    `The ${name} icon is missing from your assets or icon map provided by the IconsProvider. Please make sure you have provided all icons needed by used components.`,
+  );
+
   return '';
 };