From 9ed548c8821bf67c7e5de30bd1e01051ba7b3819 Mon Sep 17 00:00:00 2001
From: Alex Motoc <alexmotoc97@gmail.com>
Date: Mon, 31 Aug 2020 14:01:35 +0100
Subject: [PATCH] [Chip] Added :focus-visible test case

---
 .../src/ButtonBase/ButtonBase.test.js         | 19 ++-----------------
 packages/material-ui/src/Chip/Chip.test.js    | 19 ++++++++++++++++++-
 test/utils/focusVisible.js                    | 18 ++++++++++++++++++
 test/utils/index.js                           |  1 +
 4 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 test/utils/focusVisible.js

diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
index 449414ba1b9d90..58eb90087cc7c0 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js
+++ b/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();
   /**
diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
index c209b6b2f2921b..6d42dc4c8ac77d 100644
--- a/packages/material-ui/src/Chip/Chip.test.js
+++ b/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);
+    });
+  });
 });
diff --git a/test/utils/focusVisible.js b/test/utils/focusVisible.js
new file mode 100644
index 00000000000000..078f86408a7545
--- /dev/null
+++ b/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);
+}
diff --git a/test/utils/index.js b/test/utils/index.js
index dff0989361b111..d45d371107aa99 100644
--- a/test/utils/index.js
+++ b/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';