From 15af5a05226bd6764877ff090b30220c0a99a53e Mon Sep 17 00:00:00 2001
From: maryia-matskevich-deriv
 <103181650+maryia-matskevich-deriv@users.noreply.github.com>
Date: Mon, 25 Mar 2024 07:50:53 +0300
Subject: [PATCH] [BOT] Maryia/[Test Coverage] Folder:
 bot-web-ui/src/components/draggable (#14302)

* test: upgrade draggable.tsx file

* test: upgrade draggable.tsx file(2)

* test: upgrade draggable.tsx file(3)
---
 .../draggable/__tests__/draggable.spec.tsx    | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

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', () => {
             </StoreProvider>
         );
     });
+
     it('should render Draggable', () => {
         render(<Draggable is_visible={true} onCloseDraggable={jest.fn()} header_title='dummy' />, { wrapper });
         expect(screen.getByTestId('react-rnd-wrapper')).toBeInTheDocument();
     });
+
     it('should not render Draggable', () => {
         render(<Draggable is_visible={false} onCloseDraggable={jest.fn()} header_title='' />, { 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(<Draggable is_visible={true} onCloseDraggable={mock_close} header_title='' />, { 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(<Draggable is_visible={true} onCloseDraggable={mock_close} header_title='' />, { 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(<Draggable is_visible={true} onCloseDraggable={mock_close} header_title='' />, {
+            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();
     });
 });