[BOT-1475]/Rupato/fix: test coverage for load modal (binary-com#14327)

* fix: test coverage for load modal

* fix: test coverage

* fix: test coverage

* fix: test coverage

* fix: test coverage code review

* fix: test coverage code review

* fix: oreder of statements in testcases

* fix: order of statements in testcases

* fix: test coverage code review

packages/bot-web-ui/src/components/load-modal/__tests__/load-modal.spec.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { mockStore, StoreProvider } from '@deriv/stores';
-import { render, screen } from '@testing-library/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { fireEvent, render, screen } from '@testing-library/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import userEvent from '@testing-library/user-event';
 import { mock_ws } from 'Utils/mock';
 import RootStore from 'Stores/root-store';
@@ -27,6 +29,8 @@ const recent_strategies = [
     { ...strategy, name: 'oscar_grind', id: '3' },
 ];
 
+const zoom_icons = ['zoom-in', 'zoom-out'];
+
 describe('LoadModal', () => {
     let modal_root_el: HTMLElement,
         wrapper: ({ children }: { children: JSX.Element }) => JSX.Element,
@@ -82,12 +86,63 @@ describe('LoadModal', () => {
         expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument();
     });
 
+    it('should render load modal preview on file upload and on click of close should close the preview', () => {
+        mock_store.ui.is_mobile = false;
+        render(<LoadModal />, { wrapper });
+
+        mock_DBot_store?.load_modal.setActiveTabIndex(1);
+        mock_DBot_store?.load_modal.setLoadedLocalFile(new File([''], 'test-name', { type: 'text/xml' }));
+
+        const close_button = screen.getByTestId('dt_load-strategy__local-preview-close');
+        expect(close_button).toBeInTheDocument();
+
+        userEvent.click(close_button);
+
+        expect(close_button).not.toBeInTheDocument();
+    });
+
+    it('should upload file on the load modal preview when we drop a file on the dropzone', () => {
+        mock_store.ui.is_mobile = false;
+        render(<LoadModal />, { wrapper });
+
+        mock_DBot_store?.load_modal.setActiveTabIndex(1);
+        mock_DBot_store?.load_modal.setLoadedLocalFile(null);
+
+        const dropzoneArea = screen.getByTestId('dt__local-dropzone-area');
+        fireEvent.drop(dropzoneArea, {
+            dataTransfer: { files: [new File(['hello'], 'hello.xml', { type: 'text/xml' })] },
+        });
+
+        zoom_icons.forEach(icon => expect(screen.getByTestId(icon)).toBeInTheDocument());
+    });
+
+    it('should open and upload a file when we select a file from local on load modal preview', () => {
+        mock_store.ui.is_mobile = false;
+        render(<LoadModal />, { wrapper });
+
+        mock_DBot_store?.load_modal.setActiveTabIndex(1);
+        mock_DBot_store?.load_modal.setLoadedLocalFile(null);
+
+        //open file upload
+        const get_file_input = screen.getByTestId('dt_load-strategy__local-upload');
+        userEvent.click(get_file_input);
+
+        //simulate behaviour of file upload
+        const fileInput = screen.getByTestId('dt-load-strategy-file-input');
+        const file = new File(['file content'], 'file.xml', { type: 'application/xml' });
+        userEvent.upload(fileInput, file);
+
+        zoom_icons.forEach(icon => expect(screen.getByTestId(icon)).toBeInTheDocument());
+    });
+
     // [Important] Close Modal should be at the end
     it('should close preview if close is clicked', () => {
         mock_store.ui.is_mobile = true;
         render(<LoadModal />, { wrapper });
+
         const close_button = screen.getByTestId('dt_page_overlay_header_close');
         userEvent.click(close_button);
+
         expect(mock_DBot_store?.dashboard.is_preview_on_popup).toBeFalsy();
     });
 });

packages/bot-web-ui/src/components/load-modal/__tests__/recent.spec.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { mock_ws } from 'Utils/mock';
 import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
 import Recent from '../recent';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('@deriv/bot-skeleton/src/scratch/blockly', () => jest.fn());
 jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => ({}));
@@ -53,4 +54,21 @@ describe('Recent component of load modal', () => {
         expect(strategy_previw).toBeInTheDocument();
         expect(container).toBeInTheDocument();
     });
+
+    it("should close and open the accordion on click of 'Why can't I see my recent bots'", () => {
+        mock_DBot_store?.load_modal.setRecentStrategies([]);
+        render(<Recent />, { wrapper });
+        const accordion = screen.getByTestId('dt-load-strategy__recent__empty-expand');
+        accordion.focus();
+
+        userEvent.keyboard('[Enter]');
+
+        const is_empty_explanation_list_visible = screen.getByTestId('dt-empty-explanation-list--open');
+        expect(is_empty_explanation_list_visible).toBeInTheDocument();
+
+        userEvent.keyboard('[Enter]');
+
+        const is_empty_explanation_list_hidden = screen.getByTestId('dt-empty-explanation-list--close');
+        expect(is_empty_explanation_list_hidden).toBeInTheDocument();
+    });
 });

packages/bot-web-ui/src/components/load-modal/local.tsx

@@ -31,7 +31,11 @@ const LocalComponent = observer(() => {
                     <div className='load-strategy__preview-workspace'>
                         <div id='load-strategy__blockly-container' style={{ height: '100%' }}>
                             <div className='load-strategy__local-preview-close'>
-                                <Icon icon='IcCross' onClick={() => setLoadedLocalFile(null)} />
+                                <Icon
+                                    data_testid='dt_load-strategy__local-preview-close'
+                                    icon='IcCross'
+                                    onClick={() => setLoadedLocalFile(null)}
+                                />
                             </div>
                             <WorkspaceControl />
                         </div>
@@ -55,8 +59,10 @@ const LocalComponent = observer(() => {
                     accept='application/xml, text/xml'
                     style={{ display: 'none' }}
                     onChange={e => setIsFileSupported(handleFileChange(e, false))}
+                    data-testid='dt-load-strategy-file-input'
                 />
                 <div
+                    data-testid='dt__local-dropzone-area'
                     className='load-strategy__local-dropzone-area'
                     onDrop={e => {
                         handleFileChange(e, false);
@@ -81,6 +87,7 @@ const LocalComponent = observer(() => {
                                 ? localize('Select an XML file from your device')
                                 : localize('Please upload an XML file')
                         }
+                        data-testid='dt_load-strategy__local-upload'
                         onClick={() => file_input_ref?.current?.click()}
                         has_effect
                         primary

packages/bot-web-ui/src/components/load-modal/recent.tsx

@@ -33,10 +33,9 @@ const RecentComponent = observer(() => {
             </div>
         );
     }
-
     return (
         <div className='load-strategy__container'>
-            <div className='load-strategy__recent__empty'>
+            <div className='load-strategy__recent__empty' data-testid='dt-load-strategy__recent__empty'>
                 <Icon icon='IcEmptyFolder' className='load-strategy__recent__empty-icon' size={128} />
                 <div className='load-strategy__recent__empty-title'>
                     <Localize i18n_default_text='You do not have any recent bots' />
@@ -47,6 +46,7 @@ const RecentComponent = observer(() => {
                 <div
                     tabIndex={0}
                     className='load-strategy__recent__empty-expand'
+                    data-testid='dt-load-strategy__recent__empty-expand'
                     onClick={toggleExplanationExpand}
                     onKeyDown={(e: React.KeyboardEvent) => {
                         if (e.key === 'Enter') toggleExplanationExpand();
@@ -55,6 +55,9 @@ const RecentComponent = observer(() => {
                     <Localize i18n_default_text="Why can't I see my recent bots?" />
                 </div>
                 <div
+                    data-testid={
+                        is_explanation_expand ? 'dt-empty-explanation-list--open' : 'dt-empty-explanation-list--close'
+                    }
                     className={classnames('load-strategy__recent__empty-explanation', {
                         'load-strategy__recent__empty-explanation--show': is_explanation_expand,
                     })}