get rid of tests in favor of story

Author: LFDanLu

packages/@react-aria/overlays/test/ariaHideOutside.test.js

@@ -353,36 +353,6 @@ describe('ariaHideOutside', function () {
     expect(() => getByRole('button')).not.toThrow();
   });
 
-  it('should unhide the element even if it was hidden via inert first, then via hideOutside', function () {
-    let {getByRole} = render(
-      <>
-        <input type="radio" />
-        <button>Button</button>
-      </>
-    );
-
-    let button = getByRole('button');
-    let revert1 = ariaHideOutside([button], {shouldUseInert: true});
-
-    expect(getByRole('radio', {hidden: true}).inert).toBeTruthy();
-    expect(() => getByRole('button')).not.toThrow();
-
-    let revert2 = ariaHideOutside([button]);
-
-    expect(getByRole('radio', {hidden: true}).inert).toBeTruthy();
-    expect(() => getByRole('button')).not.toThrow();
-
-    revert1();
-
-    expect(getByRole('radio', {hidden: true}).inert).toBeTruthy();
-    expect(() => getByRole('button')).not.toThrow();
-
-    revert2();
-
-    expect(getByRole('radio', {hidden: true}).inert).toBeFalsy();
-    expect(() => getByRole('button')).not.toThrow();
-  });
-
   it('should hide everything except the provided element [row]', function () {
     let {getAllByRole, getByTestId} = render(
       <div role="grid">

packages/react-aria-components/stories/Modal.stories.tsx

@@ -10,10 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay} from 'react-aria-components';
+import {Button, ComboBox, Dialog, DialogTrigger, Heading, Input, Label, ListBox, Modal, ModalOverlay, Popover, TextField} from 'react-aria-components';
 import {Meta, StoryFn} from '@storybook/react';
 import React, {useEffect} from 'react';
 import './styles.css';
+import {MyListBoxItem} from './utils';
+import styles from '../example/index.css';
+
 
 export default {
   title: 'React Aria Components/Modal',
@@ -188,3 +191,83 @@ export const ModalInteractionOutsideDefaultOverlayExample: ModalStory = () => {
     </DialogTrigger>
   );
 };
+
+function InertTest() {
+  return (
+    <DialogTrigger>
+      <Button>Open modal</Button>
+      <ModalOverlay
+        isDismissable
+        style={{
+          position: 'fixed',
+          zIndex: 100,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          background: 'rgba(0, 0, 0, 0.5)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+        <Modal
+          style={{
+            background: 'Canvas',
+            color: 'CanvasText',
+            border: '1px solid gray',
+            padding: 30
+          }}>
+          <Dialog>
+            {() => (
+              <>
+                <TextField>
+                  <Label>First name</Label>
+                  <Input />
+                </TextField>
+                <DialogTrigger>
+                  <Button>Combobox Trigger</Button>
+                  <Popover placement="bottom start">
+                    <Dialog>
+                      {() => (
+                        <ComboBox
+                          menuTrigger="focus"
+                          autoFocus
+                          name="combo-box-example"
+                          data-testid="combo-box-example"
+                          allowsEmptyCollection>
+                          <Label style={{display: 'block'}}>Test</Label>
+                          <div style={{display: 'flex'}}>
+                            <Input />
+                            <Button>
+                              <span aria-hidden="true" style={{padding: '0 2px'}}>▼</span>
+                            </Button>
+                          </div>
+                          <ListBox
+                            className={styles.menu}>
+                            <MyListBoxItem>Foo</MyListBoxItem>
+                            <MyListBoxItem>Bar</MyListBoxItem>
+                            <MyListBoxItem>Baz</MyListBoxItem>
+                            <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
+                          </ListBox>
+                        </ComboBox>
+                      )}
+                    </Dialog>
+                  </Popover>
+                </DialogTrigger>
+              </>
+            )}
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  );
+}
+
+export const InertTestStory = {
+  render: () => <InertTest />,
+  parameters: {
+    description: {
+      data: 'You should be able to click "Combobox Trigger" and then click on the textfield, closing the subdialog. A second click should move focus into the textfield'
+    }
+  }
+};

scripts/setupTests.js

@@ -109,13 +109,3 @@ beforeEach(() => {
 afterEach(() => {
   delete window.IntersectionObserver;
 });
-
-Object.defineProperty(HTMLElement.prototype, 'inert', {
-  configurable: true,
-  get() {
-    return this._inert || false;
-  },
-  set(value) {
-    this._inert = value;
-  }
-});