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(); }); });