improve test case

mui · Apr 1, 2020 · 81df449 · 81df449
1 parent f26f501
commit 81df449
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
@@ -260,6 +260,10 @@ export const styles = (theme) => {
   };
 };
 
+function isDeleteKeyboardEvent(keyboardEvent) {
+  return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
+}
+
 /**
  * Chips represent complex entities in small blocks, such as a contact.
  */
@@ -295,10 +299,11 @@ const Chip = React.forwardRef(function Chip(props, ref) {
     }
   };
 
-  const isDeleteKeyboardEvent = (keyboardEvent) =>
-    keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
-
   const handleKeyDown = (event) => {
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+
     // Ignore events from children of `Chip`.
     if (event.currentTarget !== event.target) {
       return;
@@ -309,10 +314,6 @@ const Chip = React.forwardRef(function Chip(props, ref) {
       // might init navigation
       event.preventDefault();
     }
-
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
   };
 
   const handleKeyUp = (event) => {

diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
-import TextField from '@material-ui/core/TextField';
 import CheckBox from '../internal/svg-icons/CheckBox';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '../test-utils/describeConformance';
@@ -70,21 +69,6 @@ describe('<Chip />', () => {
     });
   });
 
-  describe('prop: label as TextField', () => {
-    it('should call handleChange of TextField on backspace', () => {
-      const handleChange = spy();
-      const label = <TextField value={'foo'} onChange={handleChange} />;
-      const { container } = render(<Chip label={label} />);
-      const input = container.querySelector('input');
-      input.click();
-      fireEvent.change(input, { target: { value: 'Backspace' } });
-
-      fireEvent.keyDown(document.activeElement, { key: 'Backspace' });
-
-      expect(handleChange.callCount).to.equal(1);
-    });
-  });
-
   describe('clickable chip', () => {
     it('renders as a button in taborder with the label as the accessible name', () => {
       const { getByRole } = render(<Chip label="My Chip" onClick={() => {}} />);
@@ -378,9 +362,7 @@ describe('<Chip />', () => {
       ['Backspace', 'Delete'].forEach((key) => {
         it(`should call onDelete '${key}' is released`, () => {
           const handleDelete = spy();
-          const handleKeyDown = spy((event) => {
-            return event.defaultPrevented;
-          });
+          const handleKeyDown = spy((event) => event.defaultPrevented);
           const { getAllByRole } = render(
             <Chip onClick={() => {}} onKeyDown={handleKeyDown} onDelete={handleDelete} />,
           );
@@ -398,6 +380,21 @@ describe('<Chip />', () => {
           expect(handleDelete.callCount).to.equal(1);
         });
       });
+
+      it('should not prevent default on input', () => {
+        const handleKeyDown = spy((event) => event.defaultPrevented);
+        const { container } = render(
+          <div onKeyDown={handleKeyDown}>
+            <Chip label={<input />} />
+          </div>,
+        );
+        const input = container.querySelector('input');
+        input.focus();
+        fireEvent.keyDown(document.activeElement, { key: 'Backspace' });
+
+        // defaultPrevented?
+        expect(handleKeyDown.returnValues[0]).to.equal(false);
+      });
     });
 
     describe('with children that generate events', () => {