test: Adds tests to the UndoRedoKeyListeners component (#13919)

superset-frontend/spec/javascripts/dashboard/components/Header_spec.jsx

@@ -24,7 +24,7 @@ import FaveStar from 'src/components/FaveStar';
 import PublishedStatus from 'src/dashboard/components/PublishedStatus';
 import HeaderActionsDropdown from 'src/dashboard/components/HeaderActionsDropdown';
 import Button from 'src/components/Button';
-import UndoRedoKeylisteners from 'src/dashboard/components/UndoRedoKeylisteners';
+import UndoRedoKeyListeners from 'src/dashboard/components/UndoRedoKeyListeners';
 
 describe('Header', () => {
   const props = {
@@ -120,7 +120,7 @@ describe('Header', () => {
 
     it('should not set up undo/redo', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(UndoRedoKeylisteners)).not.toExist();
+      expect(wrapper.find(UndoRedoKeyListeners)).not.toExist();
     });
   });
 
@@ -158,7 +158,7 @@ describe('Header', () => {
 
     it('should not set up undo/redo', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(UndoRedoKeylisteners)).not.toExist();
+      expect(wrapper.find(UndoRedoKeyListeners)).not.toExist();
     });
   });
 
@@ -201,7 +201,7 @@ describe('Header', () => {
 
     it('should set up undo/redo', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(UndoRedoKeylisteners)).toExist();
+      expect(wrapper.find(UndoRedoKeyListeners)).toExist();
     });
   });
 
@@ -238,7 +238,7 @@ describe('Header', () => {
 
     it('should not set up undo/redo', () => {
       const wrapper = setup(overrideProps);
-      expect(wrapper.find(UndoRedoKeylisteners)).not.toExist();
+      expect(wrapper.find(UndoRedoKeyListeners)).not.toExist();
     });
   });
 });

superset-frontend/src/dashboard/components/Header.jsx

@@ -34,13 +34,12 @@ import Button from 'src/components/Button';
 import EditableTitle from 'src/components/EditableTitle';
 import FaveStar from 'src/components/FaveStar';
 import { safeStringify } from 'src/utils/safeStringify';
-
+import { chartPropShape } from 'src/dashboard/util/propShapes';
 import HeaderActionsDropdown from './HeaderActionsDropdown';
 import PublishedStatus from './PublishedStatus';
-import UndoRedoKeylisteners from './UndoRedoKeylisteners';
+import UndoRedoKeyListeners from './UndoRedoKeyListeners';
 import PropertiesModal from './PropertiesModal';
 
-import { chartPropShape } from '../util/propShapes';
 import {
   UNDO_LIMIT,
   SAVE_TYPE_OVERWRITE,
@@ -473,7 +472,7 @@ class Header extends React.PureComponent {
             </div>
           )}
           {editMode && (
-            <UndoRedoKeylisteners
+            <UndoRedoKeyListeners
               onUndo={this.handleCtrlZ}
               onRedo={this.handleCtrlY}
             />

superset-frontend/src/dashboard/components/UndoRedoKeyListeners/UndoRedoKeyListeners.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, fireEvent } from 'spec/helpers/testing-library';
+import UndoRedoKeyListeners from '.';
+
+const defaultProps = {
+  onUndo: jest.fn(),
+  onRedo: jest.fn(),
+};
+
+test('renders nothing', () => {
+  const { container } = render(<UndoRedoKeyListeners {...defaultProps} />);
+  expect(container.children).toHaveLength(0);
+});
+
+test('triggers onUndo', () => {
+  const onUndo = jest.fn();
+  render(<UndoRedoKeyListeners {...defaultProps} onUndo={onUndo} />);
+  fireEvent.keyDown(document.body, { key: 'z', keyCode: 90, ctrlKey: true });
+  expect(onUndo).toHaveBeenCalledTimes(1);
+});
+
+test('triggers onRedo', () => {
+  const onRedo = jest.fn();
+  render(<UndoRedoKeyListeners {...defaultProps} onRedo={onRedo} />);
+  fireEvent.keyDown(document.body, { key: 'y', keyCode: 89, ctrlKey: true });
+  expect(onRedo).toHaveBeenCalledTimes(1);
+});
+
+test('does not trigger when it is another key', () => {
+  const onUndo = jest.fn();
+  const onRedo = jest.fn();
+  render(<UndoRedoKeyListeners onUndo={onUndo} onRedo={onRedo} />);
+  fireEvent.keyDown(document.body, { key: 'x', keyCode: 88, ctrlKey: true });
+  expect(onUndo).not.toHaveBeenCalled();
+  expect(onRedo).not.toHaveBeenCalled();
+});
+
+test('removes the event listener when unmounts', () => {
+  document.removeEventListener = jest.fn();
+  const { unmount } = render(<UndoRedoKeyListeners {...defaultProps} />);
+  unmount();
+  expect(document.removeEventListener).toHaveBeenCalledWith(
+    'keydown',
+    expect.anything(),
+  );
+});

superset-frontend/src/dashboard/components/UndoRedoKeyListeners/index.jsx

@@ -24,7 +24,7 @@ const propTypes = {
   onRedo: PropTypes.func.isRequired,
 };
 
-class UndoRedoKeylisteners extends React.PureComponent {
+class UndoRedoKeyListeners extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleKeydown = this.handleKeydown.bind(this);
@@ -59,6 +59,6 @@ class UndoRedoKeylisteners extends React.PureComponent {
   }
 }
 
-UndoRedoKeylisteners.propTypes = propTypes;
+UndoRedoKeyListeners.propTypes = propTypes;
 
-export default UndoRedoKeylisteners;
+export default UndoRedoKeyListeners;