From a02d909ea6294804b5189b4b07622dbfd7b85361 Mon Sep 17 00:00:00 2001
From: Samuel Gomez <samuel.gomez@valtech.com>
Date: Mon, 6 Dec 2021 16:59:45 +0100
Subject: [PATCH] fix(Container): Fix unmapped components silently do nothing

By doing console.warn when a child has a cqType not mapped to a component.

Thus helping developers to analyze scenarios where a component is not rendered.
---
 src/components/Container.tsx       |  5 +++++
 test/components/Container.test.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 0bcecfc3..54dff577 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -63,6 +63,11 @@ export class Container<P extends ContainerProperties, S extends ContainerState>
 
                 if (ItemComponent) {
                     childComponents.push(this.connectComponentWithItem(ItemComponent, itemProps, itemKey));
+                } else {
+                    console.warn(
+`The server responded an item with cqType "${itemProps.cqType}" but there is no component mapped to that cqType.
+Do you have a call to MapTo for that cqType? Is that code reached (eg. imported) by ui.frontend/src/index.tsx?
+More info on "Map SPA components to AEM components" at https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/map-components.html`)
                 }
             }
         });
diff --git a/test/components/Container.test.tsx b/test/components/Container.test.tsx
index 2750006f..7dc55f52 100644
--- a/test/components/Container.test.tsx
+++ b/test/components/Container.test.tsx
@@ -11,6 +11,7 @@
  */
 
 import React, { Component } from 'react';
+import { waitFor } from '@testing-library/dom';
 import ReactDOM from 'react-dom';
 import { ComponentMapping, MappedComponentProperties } from '../../src/ComponentMapping';
 import { Container } from '../../src/components/Container';
@@ -55,6 +56,7 @@ describe('Container ->', () => {
 
     beforeEach(() => {
         ComponentMappingSpy = jest.spyOn(ComponentMapping, 'get');
+
         rootNode = document.createElement('div');
         rootNode.className = ROOT_CLASS_NAME;
         document.body.appendChild(rootNode);
@@ -116,6 +118,32 @@ describe('Container ->', () => {
             expect(childItem1).toBeDefined();
             expect(childItem2).toBeDefined();
         });
+
+        it('should log warning when there is no component mapped to the cqType', async () => {
+            // given
+            ComponentMappingSpy.mockReturnValue(undefined);
+
+            const errorMessageC1 =
+`The server responded an item with cqType "components/c1" but there is no component mapped to that cqType.
+Do you have a call to MapTo for that cqType? Is that code reached (eg. imported) by ui.frontend/src/index.tsx?
+More info on "Map SPA components to AEM components" at https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/map-components.html`; // eslint-disable-line max-len
+
+            const errorMessageC2 =
+`The server responded an item with cqType "components/c2" but there is no component mapped to that cqType.
+Do you have a call to MapTo for that cqType? Is that code reached (eg. imported) by ui.frontend/src/index.tsx?
+More info on "Map SPA components to AEM components" at https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/map-components.html`; // eslint-disable-line max-len
+
+            console.warn = jest.fn();
+
+            // when
+            // @ts-ignore
+            ReactDOM.render(<Container componentMapping={ComponentMapping} cqItems={ITEMS} cqItemsOrder={ITEMS_ORDER} cqPath={''} isInEditor={false}/>, rootNode);
+
+            // then
+            await waitFor(() => expect(console.warn).toHaveBeenCalledWith(errorMessageC1));
+            await waitFor(() => expect(console.warn).toHaveBeenCalledWith(errorMessageC2));
+        });
+
     });
 
     describe('Data attributes ->', () => {