Displaying a debug panel for custom widgets (#740)

tesler-platform · Jul 10, 2022 · 175af5a · 175af5a
1 parent 123b605
commit 175af5a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 22 deletions.
diff --git a/src/components/Widget/Widget.test.tsx b/src/components/Widget/Widget.test.tsx
@@ -313,3 +313,55 @@ describe('Choose widget', () => {
         expect(wrapper.find('TextWidget').length).toBe(1)
     })
 })
+
+describe('Custom widget debug panel', () => {
+    let store: Store<CoreStore> = null
+
+    const widgetCustomMeta = {
+        id: '1',
+        name: '1',
+        type: 'MyCustom',
+        title: 'MyCustom title',
+        bcName: exampleBcName,
+        position: 1,
+        gridWidth: 1,
+        fields: [] as WidgetField[]
+    }
+
+    function MyCustom() {
+        return <div>custom widget</div>
+    }
+
+    function MyCard({ children }: { children: any }) {
+        return <div>{children}</div>
+    }
+
+    beforeAll(() => {
+        store = mockStore()
+        store.getState().screen.bo.bc[exampleBcName] = {} as BcMetaState
+        store.getState().data[exampleBcName] = [{ id: '11111', vstamp: 1 }]
+        store.getState().session.debugMode = true
+        store.getState().view.widgets = [widgetCustomMeta]
+    })
+
+    it('should show debug panel for custom widget WITHOUT custom card', function () {
+        const wrapper = mount(
+            <Provider store={store}>
+                <Widget meta={widgetCustomMeta} customWidgets={{ MyCustom: MyCustom }} />
+            </Provider>
+        )
+
+        expect(wrapper.find('Memo(DebugPanel)').length).toBe(1)
+    })
+
+    it('should show debug panel for custom widget WITH custom card', function () {
+        const wrapper = mount(
+            <Provider store={store}>
+                <Widget meta={widgetCustomMeta} customWidgets={{ MyCustom: MyCustom }} card={MyCard} />
+            </Provider>
+        )
+
+        expect(wrapper.find('Memo(DebugPanel)').length).toBe(1)
+        expect(wrapper.find('MyCard').length).toBe(1)
+    })
+})
diff --git a/src/components/Widget/Widget.tsx b/src/components/Widget/Widget.tsx
@@ -54,18 +54,6 @@ export const Widget: FunctionComponent<WidgetProps> = props => {
         return <> {chooseWidgetType(props.meta, props.customWidgets, props.children)} </>
     }
 
-    if (customWidget && !isCustomWidget(customWidget)) {
-        if (customWidget.card === null) {
-            return <> {chooseWidgetType(props.meta, props.customWidgets, props.children)} </>
-        }
-
-        if (customWidget.card) {
-            const CustomCard = customWidget.card
-
-            return <CustomCard meta={props.meta}>{chooseWidgetType(props.meta, props.customWidgets, props.children)}</CustomCard>
-        }
-    }
-
     const showSpinner = !!(props.loading && (props.rowMetaExists || props.dataExists))
     const showSkeleton = props.loading && !showSpinner
 
@@ -78,22 +66,33 @@ export const Widget: FunctionComponent<WidgetProps> = props => {
     )
 
     // TODO 2.0.0 delete spinner and skeleton. Spinner and skeleton should be overridden by props.card component
+    const WidgetParts = (
+        <>
+            {showSkeleton && <Skeleton loading paragraph={skeletonParams} />}
+            {!showSkeleton && spinnerElement}
+            {props.debugMode && <DebugPanel widgetMeta={props.meta} />}
+        </>
+    )
+
+    if (customWidget && !isCustomWidget(customWidget)) {
+        if (customWidget.card === null) {
+            return WidgetParts
+        }
+
+        if (customWidget.card) {
+            const CustomCard = customWidget.card
+            return <CustomCard meta={props.meta}>{WidgetParts}</CustomCard>
+        }
+    }
+
     if (props.card) {
         const Card = props.card
-        return (
-            <Card meta={props.meta}>
-                {showSkeleton && <Skeleton loading paragraph={skeletonParams} />}
-                {!showSkeleton && spinnerElement}
-                {props.debugMode && <DebugPanel widgetMeta={props.meta} />}
-            </Card>
-        )
+        return <Card meta={props.meta}>{WidgetParts}</Card>
     }
     return (
         <div className={styles.container} data-widget-type={props.meta.type}>
             <h2 className={styles.title}>{props.meta.title}</h2>
-            {showSkeleton && <Skeleton loading paragraph={skeletonParams} />}
-            {!showSkeleton && spinnerElement}
-            {props.debugMode && <DebugPanel widgetMeta={props.meta} />}
+            {WidgetParts}
         </div>
     )
 }