Fix test issues revealed by React 17 work

microsoft · Feb 18, 2021 · 5e28f09 · 5e28f09
1 parent 3b7379f
commit 5e28f09
Show file tree

Hide file tree

Showing 26 changed files with 538 additions and 374 deletions.
diff --git a/change/@fluentui-react-2d1d37f7-882c-4e93-ab03-c04379e0906a.json b/change/@fluentui-react-2d1d37f7-882c-4e93-ab03-c04379e0906a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/react",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-experiments-492353e1-aff4-427f-99e5-4235d7aaf9c6.json b/change/@fluentui-react-experiments-492353e1-aff4-427f-99e5-4235d7aaf9c6.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/react-experiments",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-hooks-22a3a5d1-57e5-45ce-97fe-404b58d95486.json b/change/@fluentui-react-hooks-22a3a5d1-57e5-45ce-97fe-404b58d95486.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/react-hooks",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-tabs-4d75feb2-f40d-4218-94d5-f8d00441de88.json b/change/@fluentui-react-tabs-4d75feb2-f40d-4218-94d5-f8d00441de88.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/react-tabs",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-test-utilities-2286958d-6e91-45e3-898a-d4cd287d01db.json b/change/@fluentui-test-utilities-2286958d-6e91-45e3-898a-d4cd287d01db.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add new safeRender API (wrapping ReactDOM.render) and add attach option to safeMount.",
+  "packageName": "@fluentui/test-utilities",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-utilities-48a09f16-6fc1-419f-b032-d212d4913ec0.json b/change/@fluentui-utilities-48a09f16-6fc1-419f-b032-d212d4913ec0.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix test issues",
+  "packageName": "@fluentui/utilities",
+  "email": "elcraig@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/...riments/src/components/FloatingSuggestionsComposite/FloatingSuggestionsComposite.test.tsx b/...riments/src/components/FloatingSuggestionsComposite/FloatingSuggestionsComposite.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create, act } from 'react-test-renderer';
+import { create } from 'react-test-renderer';
 import { BaseFloatingSuggestions } from './FloatingSuggestions';
 import * as ReactDOM from 'react-dom';
 import { IFloatingSuggestionItem } from './FloatingSuggestionsItem/FloatingSuggestionsItem.types';
@@ -95,7 +95,7 @@ describe('FloatingSuggestions', () => {
     // since callout mount a new react root with ReactDOM.
     //
     // see https://github.com/facebook/react/pull/12895
-    act(() => {
+    ReactTestUtils.act(() => {
       (ReactDOM.render(
         <BaseFloatingSuggestions
           suggestions={_suggestions}
@@ -130,7 +130,7 @@ describe('FloatingSuggestions', () => {
   });
 
   it('renders FloatingSuggestions and updates when suggestions are removed', () => {
-    act(() => {
+    ReactTestUtils.act(() => {
       (ReactDOM.render(
         <BaseFloatingSuggestions
           suggestions={_suggestions}
@@ -165,7 +165,7 @@ describe('FloatingSuggestions', () => {
 
   it('shows no suggestions when no suggestions are provided', () => {
     _suggestions = [];
-    act(() => {
+    ReactTestUtils.act(() => {
       (ReactDOM.render(
         <BaseFloatingSuggestions
           suggestions={_suggestions}

diff --git a/packages/react-hooks/src/useUnmount.test.tsx b/packages/react-hooks/src/useUnmount.test.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactTestUtils from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import { useUnmount } from './useUnmount';
 
@@ -17,7 +18,9 @@ describe('useUnmount', () => {
     expect(onUnmount).toBeCalledTimes(0);
     const wrapper = mount(<TestComponent />);
     expect(onUnmount).toBeCalledTimes(0);
-    wrapper.unmount();
+    ReactTestUtils.act(() => {
+      wrapper.unmount();
+    });
     expect(onUnmount).toBeCalledTimes(1);
   });
 });
diff --git a/packages/react-tabs/package.json b/packages/react-tabs/package.json
@@ -29,6 +29,7 @@
     "@fluentui/common-styles": "^1.0.0-beta.17",
     "@fluentui/eslint-plugin": "^1.0.0-beta.2",
     "@fluentui/react-conformance": "^1.0.0",
+    "@fluentui/test-utilities": "^8.0.0-beta.8",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/react": "16.9.42",

diff --git a/packages/react-tabs/src/components/Tabs/Tabs.test.tsx b/packages/react-tabs/src/components/Tabs/Tabs.test.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
-import { mount } from 'enzyme';
 import { resetIds } from '@fluentui/utilities';
+import { safeMount, safeCreate } from '@fluentui/test-utilities';
 import { Tabs, TabItem, TabsImperativeHandle } from './index';
 import { isConformant } from '../../common/isConformant';
 
@@ -10,15 +9,18 @@ describe('Tabs', () => {
     // Resetting ids to create predictability in generated ids.
     resetIds();
   });
+
   it('renders tabs as links correctly', () => {
-    const component = create(
+    safeCreate(
       <Tabs>
         <TabItem headerText="Test Link 1" />
         <TabItem headerText="" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
 
   isConformant({
@@ -29,31 +31,33 @@ describe('Tabs', () => {
   it('can be focused', () => {
     const tabsRef = React.createRef<TabsImperativeHandle>();
 
-    mount(
-      <Tabs componentRef={tabsRef}>
-        <TabItem headerText="Link 1" />
-        <TabItem headerText="Link 2" />
-      </Tabs>,
-    );
-
     // Instruct FocusZone to treat all elements as visible.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (HTMLElement.prototype as any).isVisible = true;
 
-    try {
-      expect(tabsRef.current).toBeTruthy();
+    safeMount(
+      <Tabs componentRef={tabsRef}>
+        <TabItem headerText="Link 1" />
+        <TabItem headerText="Link 2" />
+      </Tabs>,
+      () => {
+        try {
+          expect(tabsRef.current).toBeTruthy();
 
-      tabsRef.current!.focus();
-      expect(document.activeElement).toBeTruthy();
-      expect(document.activeElement!.textContent?.trim()).toEqual('Link 1');
-    } finally {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      delete (HTMLElement.prototype as any).isVisible;
-    }
+          tabsRef.current!.focus();
+          expect(document.activeElement).toBeTruthy();
+          expect(document.activeElement!.textContent?.trim()).toEqual('Link 1');
+        } finally {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          delete (HTMLElement.prototype as any).isVisible;
+        }
+      },
+      true /* attached, for focus tests */,
+    );
   });
 
   it('supports JSX expressions', () => {
-    const component = create(
+    safeCreate(
       <Tabs defaultSelectedKey="1">
         <TabItem headerText="Test Link 1">
           <div>This is item 1</div>
@@ -63,79 +67,102 @@ describe('Tabs', () => {
           <div>This is Item 3</div>
         </TabItem>
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
+
   it('renders large tabs correctly', () => {
-    const component = create(
+    safeCreate(
       <Tabs tabSize="large">
         <TabItem headerText="Test Link 1" />
         <TabItem headerText="" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
+
   it('renders tab format correctly', () => {
-    const component = create(
+    safeCreate(
       <Tabs tabFormat="tabs">
         <TabItem headerText="Test Link 1" />
         <TabItem headerText="" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
+
   it('renders large tab format correctly', () => {
-    const component = create(
+    safeCreate(
       <Tabs tabFormat="tabs" tabSize="large">
         <TabItem headerText="Test Link 1" />
         <TabItem headerText="" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
+
   it('renders Tabs correctly with custom className', () => {
-    const component = create(
+    safeCreate(
       <Tabs className="specialClassName">
         <TabItem headerText="Test Link 1" className="specialClassName" />
         <TabItem headerText="Test Link 2" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
+
   it('renders Tabs correctly with icon, text and count', () => {
-    const component = create(
+    safeCreate(
       <Tabs>
         <TabItem itemCount={12} />
         <TabItem headerText="Test Link" itemCount={12} />
         <TabItem headerText="Text with icon" itemIcon="Recent" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
+
   it('renders Tabs correctly when itemCount is a string', () => {
-    const component = create(
+    safeCreate(
       <Tabs>
         <TabItem headerText="test" />
         <TabItem headerText="Test Link" itemCount="20+" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
+
   it('renders Tabs with overflow', () => {
-    const component = create(
+    safeCreate(
       <Tabs overflowBehavior="menu">
         <TabItem headerText="Test 1" />
         <TabItem headerText="Test 2" />
       </Tabs>,
+      component => {
+        const tree = component.toJSON();
+        expect(tree).toMatchSnapshot();
+      },
     );
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
   });
 });
diff --git a/packages/react/__mocks__/@fluentui/utilities.ts b/packages/react/__mocks__/@fluentui/utilities.ts
@@ -36,7 +36,9 @@ class MockAsync extends Async {
   }
 
   public dispose() {
-    clearTimeout(this._timeoutId);
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+    }
     this._timeoutId = null;
 
     super.dispose();

diff --git a/packages/react/src/components/ComboBox/ComboBox.test.tsx b/packages/react/src/components/ComboBox/ComboBox.test.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
 import { KeyCodes, resetIds } from '../../Utilities';
 import { ComboBox } from './ComboBox';
@@ -196,7 +195,7 @@ describe('ComboBox', () => {
 
       // open combobox
       const buttonElement = container.root.findByType('button');
-      ReactTestUtils.act(() => {
+      renderer.act(() => {
         buttonElement?.props?.onClick();
       });
 
@@ -222,7 +221,7 @@ describe('ComboBox', () => {
 
       // open combobox
       const buttonElement = container.root.findByType('button');
-      ReactTestUtils.act(() => {
+      renderer.act(() => {
         buttonElement?.props?.onClick();
       });
 
@@ -708,7 +707,7 @@ describe('ComboBox', () => {
           node => node.type === 'button' && node.props?.className?.includes?.('ms-ComboBox'),
         );
 
-        ReactTestUtils.act(() => {
+        renderer.act(() => {
           buttonElement?.props?.onClick?.();
         });
 
@@ -904,7 +903,7 @@ describe('ComboBox', () => {
     const onItemClickMock = jest.fn();
     safeCreate(<ComboBox options={DEFAULT_OPTIONS} onItemClick={onItemClickMock} />, container => {
       const caretElement = findNodeWithClass(container, 'ms-ComboBox-CaretDown-button');
-      ReactTestUtils.act(() => {
+      renderer.act(() => {
         caretElement?.props?.onClick?.();
       });
       const button = findNodeWithClass(container, 'ms-ComboBox-option', true);
@@ -963,13 +962,13 @@ describe('ComboBox', () => {
 
         // Open combobox
         const buttonElement = comboBoxRoot.findByType('button');
-        ReactTestUtils.act(() => {
+        renderer.act(() => {
           buttonElement?.props?.onClick();
         });
         expect(onMenuOpenMock.mock.calls.length).toBe(1);
 
         // Close combobox
-        ReactTestUtils.act(() => {
+        renderer.act(() => {
           buttonElement?.props?.onClick();
         });
         expect(onMenuDismissedMock.mock.calls.length).toBe(1);