[Chip] Added :focus-visible test case

packages/material-ui/src/ButtonBase/ButtonBase.test.js

@@ -9,29 +9,14 @@ import {
   act,
   createClientRender,
   fireEvent,
+  focusVisible,
   screen,
+  simulatePointerDevice,
 } from 'test/utils';
 import * as PropTypes from 'prop-types';
 import TouchRipple from './TouchRipple';
 import ButtonBase from './ButtonBase';
 
-/**
- * @param {HTMLElement} element
- */
-function focusVisible(element) {
-  act(() => {
-    element.blur();
-    fireEvent.keyDown(document.body, { key: 'Tab' });
-    element.focus();
-  });
-}
-
-function simulatePointerDevice() {
-  // first focus on a page triggers focus visible until a pointer event
-  // has been dispatched
-  fireEvent.pointerDown(document.body);
-}
-
 describe('<ButtonBase />', () => {
   const render = createClientRender();
   /**

packages/material-ui/src/Chip/Chip.test.js

@@ -8,6 +8,8 @@ import {
   act,
   createClientRender,
   fireEvent,
+  focusVisible,
+  simulatePointerDevice,
 } from 'test/utils';
 import CheckBox from '../internal/svg-icons/CheckBox';
 import Avatar from '../Avatar';
@@ -398,7 +400,7 @@ describe('<Chip />', () => {
         const input = container.querySelector('input');
         act(() => {
           input.focus();
-        })
+        });
         fireEvent.keyDown(input, { key: 'Backspace' });
 
         // defaultPrevented?
@@ -538,4 +540,19 @@ describe('<Chip />', () => {
       expect(icon).to.have.class(classes.deleteIconSmall);
     });
   });
+
+  describe('event: focus', () => {
+    it('has a focus-visible polyfill', () => {
+      const { container } = render(<Chip label="Test Chip" onClick={() => {}} />);
+      const chip = container.querySelector(`.${classes.root}`);
+      simulatePointerDevice();
+
+      expect(chip).not.to.have.class(classes.focusVisible);
+      chip.focus();
+      expect(chip).not.to.have.class(classes.focusVisible);
+      focusVisible(chip);
+
+      expect(chip).to.have.class(classes.focusVisible);
+    });
+  });
 });

test/utils/focusVisible.js

@@ -0,0 +1,18 @@
+import { act, fireEvent } from './createClientRender';
+
+/**
+ * @param {HTMLElement} element
+ */
+export function focusVisible(element) {
+  act(() => {
+    element.blur();
+    fireEvent.keyDown(document.body, { key: 'Tab' });
+    element.focus();
+  });
+}
+
+export function simulatePointerDevice() {
+  // first focus on a page triggers focus visible until a pointer event
+  // has been dispatched
+  fireEvent.pointerDown(document.body);
+}

test/utils/index.js

@@ -5,5 +5,6 @@ export { default as createMount } from './createMount';
 export { default as createServerRender } from './createServerRender';
 export { default as createShallow } from './createShallow';
 export { default as findOutermostIntrinsic, wrapsIntrinsicElement } from './findOutermostIntrinsic';
+export * from './focusVisible';
 export { default as getClasses } from './getClasses';
 export {} from './initMatchers';