diff --git a/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx b/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx
index f4a094819fe5..d4c71c67d0f4 100644
--- a/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx
+++ b/packages/bot-web-ui/src/components/draggable/__tests__/draggable.spec.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { mockStore, StoreProvider } from '@deriv/stores';
import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import RootStore from 'Stores/index';
import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
import Draggable from '../draggable';
@@ -45,20 +46,52 @@ describe('Draggable', () => {
);
});
+
it('should render Draggable', () => {
render(, { wrapper });
expect(screen.getByTestId('react-rnd-wrapper')).toBeInTheDocument();
});
+
it('should not render Draggable', () => {
render(, { wrapper });
const draggable_element = screen.queryByTestId('react-rnd-wrapper');
expect(draggable_element).not.toBeInTheDocument();
});
+
it('should call onClose function on close button click', () => {
const mock_close = jest.fn();
render(, { wrapper });
+
const close_btn = screen.getByTestId('react-rnd-close-modal');
fireEvent.click(close_btn);
+
+ expect(mock_close).toBeCalled();
+ });
+
+ it('should change styles on the left and top by drag', () => {
+ const mock_close = jest.fn();
+ render(, { wrapper });
+
+ const draggable_element = screen.getByTestId('react-rnd-wrapper');
+ fireEvent.mouseDown(draggable_element);
+ fireEvent.mouseMove(draggable_element, { clientX: 100, clientY: 200 });
+ fireEvent.mouseUp(draggable_element);
+
+ const styles = window.getComputedStyle(draggable_element);
+ expect(styles.left).toBe('100px');
+ expect(styles.top).toBe('200px');
+ });
+
+ it('should onCloseDraggable() be invoked by start drag', () => {
+ const mock_close = jest.fn();
+ const { container } = render(, {
+ wrapper,
+ });
+ // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access,
+ const svg = container.getElementsByTagName('use')[0];
+ // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+ userEvent.click(svg);
+
expect(mock_close).toBeCalled();
});
});