Changes in Query Tool, Debugger, and ERD Tool shortcuts to remove the use of Accesskey which will allow them to be customized. #7192

web/regression/javascript/components/KeyboardShortcuts.spec.js

@@ -10,9 +10,9 @@
 import React from 'react';
 
 import { withTheme } from '../fake_theme';
-import { fireEvent, render, screen } from '@testing-library/react';
-
+import { fireEvent, render } from '@testing-library/react';
 
+import * as keyShort from '../../../pgadmin/static/js/keyboard_shortcuts';
 import KeyboardShortcuts from '../../../pgadmin/static/js/components/KeyboardShortcuts';
 
 /* MUI Components need to be wrapped in Theme for theme vars */
@@ -48,8 +48,9 @@ describe('KeyboardShortcuts', () => {
   describe('KeyboardShortcuts', () => {
     let ThemedFormInputKeyboardShortcuts = withTheme(KeyboardShortcuts);
     let onChange = jest.fn();
-    beforeEach(() => {
-      render(
+
+    const ctrlRender = ()=>{
+      return render(
         <ThemedFormInputKeyboardShortcuts
           value={defult_value}
           fields={fields}
@@ -59,34 +60,49 @@ describe('KeyboardShortcuts', () => {
           }}
           onChange={onChange}
         />);
+    };
+
+    beforeAll(()=>{
+      jest.spyOn(keyShort, 'isMac').mockReturnValue(true);
     });
 
     it('init', () => {
-      expect(screen.getByRole('textbox').getAttribute('value')).toBe('a');
+      const ctrl = ctrlRender();
+      expect(ctrl.container.querySelector('input').getAttribute('value')).toBe('a');
     });
 
     it('Key change', () => {
-      fireEvent.keyDown(screen.getByRole('textbox'), {
+      const ctrl = ctrlRender();
+      fireEvent.keyDown(ctrl.container.querySelector('input'), {
         key: 'Space', code: 32, keyCode: 32
       });
       expect(onChange).toHaveBeenCalledWith({ control: true, alt: true, key: { char: 'Space', key_code: 32 }, shift: false });
     });
 
     it('Shift option', () => {
-      const input = screen.getAllByRole('checkbox').at(0);
+      const ctrl = ctrlRender();
+      const input = ctrl.container.querySelectorAll('button')[0];
       fireEvent.click(input);
       expect(onChange).toHaveBeenCalledWith({ control: true, alt: true, key: { char: 'a', key_code: 97 }, shift: true });
     });
 
     it('Control option', () => {
-      const input = screen.getAllByRole('checkbox').at(1);
+      const ctrl = ctrlRender();
+      const input = ctrl.container.querySelectorAll('button')[1];
       fireEvent.click(input);
-      expect(onChange).toHaveBeenCalledWith({ control: false, alt: true, key: { char: 'a', key_code: 97 }, shift: false });
+      expect(onChange).toHaveBeenCalledWith({ control: false, ctrl_is_meta: false, alt: true, key: { char: 'a', key_code: 97 }, shift: false });
     });
 
+    it('Cmd option', () => {
+      const ctrl = ctrlRender();
+      const input = ctrl.container.querySelectorAll('button')[2];
+      fireEvent.click(input);
+      expect(onChange).toHaveBeenCalledWith({ control: true, ctrl_is_meta: true, alt: true, key: { char: 'a', key_code: 97 }, shift: false });
+    });
 
     it('Alt option', () => {
-      const input = screen.getAllByRole('checkbox').at(2);
+      const ctrl = ctrlRender();
+      const input = ctrl.container.querySelectorAll('button')[3];
       fireEvent.click(input);
       expect(onChange).toHaveBeenCalledWith({ control: true, alt: false, key: { char: 'a', key_code: 97 }, shift: false });
     });

web/regression/javascript/debugger/MockDebuggerComponent.jsx

@@ -7,17 +7,20 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import {DebuggerContext, DebuggerEventsContext} from '../../../pgadmin/tools/debugger/static/js/components/DebuggerComponent';
 import { withBrowser } from '../genericFunctions';
 
 function MockDebuggerComponent({value, eventsvalue, children}) {
+  const containerRef = useRef();
   return (
-    <DebuggerContext.Provider value={value}>
+    <DebuggerContext.Provider value={{...value, containerRef: containerRef}}>
       <DebuggerEventsContext.Provider value={eventsvalue}>
-        {children}
+        <div ref={containerRef} style={{width: '100%', height: '100%'}}>
+          {children}
+        </div>
       </DebuggerEventsContext.Provider>
     </DebuggerContext.Provider>
   );

web/regression/javascript/erd/keyboard_shortcut_action_spec.js

@@ -50,11 +50,13 @@ describe('KeyboardShortcutAction', ()=>{
   });
 
   it('callHandler', ()=>{
-    let keyEvent = {altKey: key1.alt, ctrlKey: key1.control, shiftKey: key1.shift, metaKey: false, keyCode:key1.key.key_code};
+    let keyEvent = {altKey: key1.alt, ctrlKey: key1.control, shiftKey: key1.shift, metaKey: false, keyCode:key1.key.key_code,
+      stopPropagation: jest.fn(), preventDefault: jest.fn()};
     keyAction.callHandler(keyEvent);
     expect(handler1).toHaveBeenCalled();
 
-    keyEvent = {altKey: key2.alt, ctrlKey: key2.control, shiftKey: key2.shift, metaKey: false, keyCode:key2.key.key_code};
+    keyEvent = {altKey: key2.alt, ctrlKey: key2.control, shiftKey: key2.shift, metaKey: false, keyCode:key2.key.key_code,
+      stopPropagation: jest.fn(), preventDefault: jest.fn()};
     keyAction.callHandler(keyEvent);
     expect(handler2).toHaveBeenCalled();
   });