chore: added test case for flyout-block

packages/bot-web-ui/src/components/flyout/__tests__/flyout-block.spec.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render, screen } from '@testing-library/react';
+import { mock_ws } from 'Utils/mock';
+import RootStore from 'Stores/root-store';
+import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
+import FlyoutBlock from '../flyout-block';
+
+jest.mock('@deriv/bot-skeleton/src/scratch/blockly', () => jest.fn());
+jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => jest.fn());
+jest.mock('@deriv/bot-skeleton/src/scratch/hooks/block_svg', () => jest.fn());
+jest.mock('@deriv/deriv-charts', () => ({
+    setSmartChartsPublicPath: jest.fn(),
+}));
+
+window.Blockly = {
+    inject: () => ({
+        isFlyout: true,
+    }),
+    Xml: {
+        domToBlock: () => ({
+            getHeightWidth: () => '200px',
+            isInFlyout: true,
+            moveBy: () => ({}),
+            getSvgRoot: () => ({}),
+        }),
+    },
+    bindEventWithChecks_: () => ({}),
+    bindEvent_: () => ({}),
+    svgResize: () => ({}),
+};
+
+describe('<FlyoutBlock />', () => {
+    let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element, mock_DBot_store: RootStore | undefined;
+
+    beforeAll(() => {
+        const mock_store = mockStore({});
+        mock_DBot_store = mockDBotStore(mock_store, mock_ws);
+        mock_DBot_store?.dashboard?.setWebSocketState(false);
+
+        wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock_store}>
+                <DBotStoreProvider ws={mock_ws} mock={mock_DBot_store}>
+                    {children}
+                </DBotStoreProvider>
+            </StoreProvider>
+        );
+    });
+
+    it('should render the FlyoutBlock component', () => {
+        const { container } = render(<FlyoutBlock block_node={undefined} should_hide_display_name={false} />, {
+            wrapper,
+        });
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should show the FlyoutBlock element', () => {
+        render(<FlyoutBlock block_node={undefined} should_hide_display_name={false} />, {
+            wrapper,
+        });
+        const flyout = screen.getByTestId('flyout-block-workspace');
+        expect(flyout).toBeInTheDocument();
+    });
+});

packages/bot-web-ui/src/components/flyout/flyout-block-group.jsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { PropTypes } from 'prop-types';
 import { Button, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
-import FlyoutBlock from './flyout-block.jsx';
+import FlyoutBlock from './flyout-block';
 
 const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_display_name }) => {
     const block_type = block_node.getAttribute('type');
@@ -56,7 +56,7 @@ const FlyoutBlockGroup = ({ onInfoClick, block_node, is_active, should_hide_disp
                     </>
                 )}
                 <div className='flyout__block-workspace__header'>
-                    <FlyoutBlock should_center_block block_node={block_node} should_hide_display_name />
+                    <FlyoutBlock block_node={block_node} should_hide_display_name />
                     {is_variables_get && <AddButton />}
                 </div>
             </div>

packages/bot-web-ui/src/components/flyout/flyout-block.jsx → packages/bot-web-ui/src/components/flyout/flyout-block.tsx

@@ -3,14 +3,19 @@ import classNames from 'classnames';
 import { observer } from '@deriv/stores';
 import { useDBotStore } from 'Stores/useDBotStore';
 
-const FlyoutBlock = observer(({ block_node, should_center_block, should_hide_display_name }) => {
+type FlyoutBlockProps = {
+    block_node: React.ReactNode;
+    should_hide_display_name: boolean;
+};
+
+const FlyoutBlock = observer(({ block_node, should_hide_display_name }: FlyoutBlockProps) => {
     const { flyout } = useDBotStore();
     const { initBlockWorkspace } = flyout;
 
     let el_block_workspace = React.useRef();
 
     React.useEffect(() => {
-        initBlockWorkspace(el_block_workspace, block_node, should_center_block);
+        initBlockWorkspace(el_block_workspace, block_node);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -21,6 +26,7 @@ const FlyoutBlock = observer(({ block_node, should_center_block, should_hide_dis
                 'flyout__block-workspace--center': should_hide_display_name,
                 'flyout__block-workspace--top': !should_hide_display_name,
             })}
+            data-testid='flyout-block-workspace'
         />
     );
 });

packages/bot-web-ui/src/components/flyout/help-contents/flyout-help-base.jsx

@@ -4,7 +4,7 @@ import { observer } from '@deriv/stores';
 import { localize } from '@deriv/translations';
 import { help_content_config, help_content_types } from 'Utils/help-content/help-content.config';
 import { useDBotStore } from 'Stores/useDBotStore';
-import FlyoutBlock from '../flyout-block.jsx';
+import FlyoutBlock from '../flyout-block';
 import FlyoutImage from './flyout-img.jsx';
 import FlyoutText from './flyout-text.jsx';
 import FlyoutVideo from './flyout-video.jsx';
@@ -65,20 +65,13 @@ const HelpBase = observer(() => {
                             case help_content_types.IMAGE:
                                 return <FlyoutImage key={`${block_type}_${index}`} width={width} url={url} />;
                             case help_content_types.BLOCK: {
-                                return (
-                                    <FlyoutBlock
-                                        key={`${block_type}_${index}`}
-                                        should_center_block={true}
-                                        block_node={block_node}
-                                    />
-                                );
+                                return <FlyoutBlock key={`${block_type}_${index}`} block_node={block_node} />;
                             }
                             case help_content_types.EXAMPLE:
                                 if (example_node) {
                                     return (
                                         <FlyoutBlock
                                             key={`${block_type}_${index}`}
-                                            should_center_block={true}
                                             block_node={example_node.childNodes[0]}
                                         />
                                     );