test(Modal): fix tests

carbon-design-system · Feb 4, 2020 · b09d3d8 · b09d3d8
1 parent 1bbe349
commit b09d3d8
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 135 deletions.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -237,7 +237,7 @@ export default class ComposedModal extends Component {
           ref={this.startSentinel}
           tabIndex="0"
           role="link"
-          class={`${prefix}--visually-hidden`}>
+          className={`${prefix}--visually-hidden`}>
           Focus sentinel
         </span>
         <div ref={this.innerModal} className={containerClass} tabIndex={-1}>
@@ -248,7 +248,7 @@ export default class ComposedModal extends Component {
           ref={this.endSentinel}
           tabIndex="0"
           role="link"
-          class={`${prefix}--visually-hidden`}>
+          className={`${prefix}--visually-hidden`}>
           Focus sentinel
         </span>
       </div>

diff --git a/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap b/packages/react/src/components/ComposedModal/__snapshots__/ComposedModal-test.js.snap
@@ -14,11 +14,25 @@ exports[`<ComposedModal /> renders 1`] = `
     onTransitionEnd={[Function]}
     open={true}
     role="presentation"
-    tabIndex={-1}
   >
+    <span
+      className="bx--visually-hidden"
+      role="link"
+      tabIndex="0"
+    >
+      Focus sentinel
+    </span>
     <div
       className="bx--modal-container"
+      tabIndex={-1}
     />
+    <span
+      className="bx--visually-hidden"
+      role="link"
+      tabIndex="0"
+    >
+      Focus sentinel
+    </span>
   </div>
 </ComposedModal>
 `;
diff --git a/packages/react/src/components/Modal/Modal-test.js b/packages/react/src/components/Modal/Modal-test.js
@@ -15,7 +15,7 @@ import { settings } from 'carbon-components';
 const { prefix } = settings;
 
 // The modal is the 0th child inside the wrapper on account of focus-trap-react
-const getModal = wrapper => wrapper.childAt(0);
+const getModal = wrapper => wrapper.find('.bx--modal');
 
 describe('Modal', () => {
   describe('Renders as expected', () => {

diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -14,7 +14,9 @@ import toggleClass from '../../tools/toggleClass';
 import Button from '../Button';
 import deprecate from '../../prop-types/deprecate';
 import requiredIfGivenPropExists from '../../prop-types/requiredIfGivenPropExists';
-import wrapFocus from '../../internal/wrapFocus';
+import wrapFocus, {
+  elementOrParentIsFloatingMenu,
+} from '../../internal/wrapFocus';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
@@ -198,7 +200,10 @@ export default class Modal extends Component {
     if (
       this.innerModal.current &&
       !this.innerModal.current.contains(evt.target) &&
-      !this.elementOrParentIsFloatingMenu(evt.target)
+      !elementOrParentIsFloatingMenu(
+        evt.target,
+        this.props.selectorsFloatingMenus
+      )
     ) {
       this.props.onRequestClose(evt);
     }
@@ -426,7 +431,7 @@ export default class Modal extends Component {
           ref={this.startSentinel}
           tabIndex="0"
           role="link"
-          class={`${prefix}--visually-hidden`}>
+          className={`${prefix}--visually-hidden`}>
           Focus sentinel
         </span>
         {modalBody}
@@ -435,7 +440,7 @@ export default class Modal extends Component {
           ref={this.endSentinel}
           tabIndex="0"
           role="link"
-          class={`${prefix}--visually-hidden`}>
+          className={`${prefix}--visually-hidden`}>
           Focus sentinel
         </span>
       </div>