diff --git a/packages/bot-web-ui/src/components/flyout/__tests__/flyout-block.spec.tsx b/packages/bot-web-ui/src/components/flyout/__tests__/flyout-block.spec.tsx
new file mode 100644
index 000000000000..5bc2bc48deff
--- /dev/null
+++ b/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('', () => {
+ 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 }) => (
+
+
+ {children}
+
+
+ );
+ });
+
+ it('should render the FlyoutBlock component', () => {
+ const { container } = render(, {
+ wrapper,
+ });
+ expect(container).toBeInTheDocument();
+ });
+
+ it('should show the FlyoutBlock element', () => {
+ render(, {
+ wrapper,
+ });
+ const flyout = screen.getByTestId('flyout-block-workspace');
+ expect(flyout).toBeInTheDocument();
+ });
+});
diff --git a/packages/bot-web-ui/src/components/flyout/flyout-block-group.jsx b/packages/bot-web-ui/src/components/flyout/flyout-block-group.jsx
index b4e9693270de..584e394304cb 100644
--- a/packages/bot-web-ui/src/components/flyout/flyout-block-group.jsx
+++ b/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
>
)}
-
+
{is_variables_get &&
}
diff --git a/packages/bot-web-ui/src/components/flyout/flyout-block.jsx b/packages/bot-web-ui/src/components/flyout/flyout-block.tsx
similarity index 70%
rename from packages/bot-web-ui/src/components/flyout/flyout-block.jsx
rename to packages/bot-web-ui/src/components/flyout/flyout-block.tsx
index a94c7dbbd2d7..e17b11987b93 100644
--- a/packages/bot-web-ui/src/components/flyout/flyout-block.jsx
+++ b/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'
/>
);
});
diff --git a/packages/bot-web-ui/src/components/flyout/help-contents/flyout-help-base.jsx b/packages/bot-web-ui/src/components/flyout/help-contents/flyout-help-base.jsx
index b9c766eebef7..d868a7549378 100644
--- a/packages/bot-web-ui/src/components/flyout/help-contents/flyout-help-base.jsx
+++ b/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 ;
case help_content_types.BLOCK: {
- return (
-
- );
+ return ;
}
case help_content_types.EXAMPLE:
if (example_node) {
return (
);