@mui/internal-test-utils 1.0.0-dev.20240529-082515-213b5e33ab

package/src/findOutermostIntrinsic.test.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import createMount from './createMount';
+import findOutermostIntrinsic from './findOutermostIntrinsic';
+
+describe('findOutermostIntrinsic', () => {
+  const mount = createMount({ strict: null });
+  const expectIntrinsic = (node, expected) => {
+    const wrapper = mount(node);
+    const outermostIntrinsic = findOutermostIntrinsic(wrapper);
+
+    if (expected === null) {
+      expect(outermostIntrinsic.exists()).to.equal(false);
+    } else {
+      expect(outermostIntrinsic.type()).to.equal(expected);
+      expect(outermostIntrinsic.type()).to.equal(
+        outermostIntrinsic.getDOMNode().nodeName.toLowerCase(),
+      );
+    }
+  };
+  const Headless = ({ children }) => children;
+
+  it('returns immediate DOM nodes', () => {
+    expectIntrinsic(<div>Hello, World!</div>, 'div');
+  });
+
+  it('only returns the outermost', () => {
+    expectIntrinsic(
+      <span>
+        <div>Hello, World!</div>
+      </span>,
+      'span',
+    );
+  });
+
+  it('ignores components', () => {
+    expectIntrinsic(
+      <Headless>
+        <div>Hello, World!</div>
+      </Headless>,
+      'div',
+    );
+    expectIntrinsic(
+      <Headless>
+        <Headless>
+          <div>Hello, World!</div>
+        </Headless>
+      </Headless>,
+      'div',
+    );
+    expectIntrinsic(
+      <Headless>
+        <Headless>
+          <div>
+            <Headless>
+              <span>Hello, World!</span>
+            </Headless>
+          </div>
+        </Headless>
+      </Headless>,
+      'div',
+    );
+  });
+
+  it('can handle that no DOM node is rendered', () => {
+    expectIntrinsic(<Headless>{false && <Headless />}</Headless>, null);
+  });
+});

package/src/findOutermostIntrinsic.ts

@@ -0,0 +1,19 @@
+import { ReactWrapper } from 'enzyme';
+
+/**
+ * checks if a given react wrapper wraps an intrinsic element i.e. a DOM node
+ * @param {import('enzyme').ReactWrapper} reactWrapper
+ * @returns {boolean} true if the given reactWrapper wraps an intrinsic element
+ */
+export function wrapsIntrinsicElement(reactWrapper: ReactWrapper): boolean {
+  return typeof reactWrapper.type() === 'string';
+}
+
+/**
+ * like ReactWrapper#getDOMNode() but returns a ReactWrapper
+ * @param {import('enzyme').ReactWrapper} reactWrapper
+ * @returns {import('enzyme').ReactWrapper} the wrapper for the outermost DOM node
+ */
+export default function findOutermostIntrinsic(reactWrapper: ReactWrapper): ReactWrapper {
+  return reactWrapper.findWhere((n) => n.exists() && wrapsIntrinsicElement(n)).first();
+}

package/src/fireDiscreteEvent.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { configure, fireEvent, getConfig } from '@testing-library/react';
+
+const noWrapper = (callback: () => void) => callback();
+
+/**
+ * @param {() => void} callback
+ * @returns {void}
+ */
+function withMissingActWarningsIgnored(callback: () => void) {
+  if (React.version.startsWith('18')) {
+    callback();
+    return;
+  }
+
+  const originalConsoleError = console.error;
+  console.error = function silenceMissingActWarnings(message, ...args) {
+    const isMissingActWarning = /not wrapped in act\(...\)/.test(message);
+    if (!isMissingActWarning) {
+      originalConsoleError.call(console, message, ...args);
+    }
+  };
+
+  const originalConfig = getConfig();
+  configure({
+    eventWrapper: noWrapper,
+  });
+
+  try {
+    callback();
+  } finally {
+    configure(originalConfig);
+    console.error = originalConsoleError;
+  }
+}
+
+// -----------------------------------------
+// WARNING ⚠️ WARNING ⚠️ WARNING ⚠️ WARNING
+//
+// Do not add events here because you want to ignore "missing act()" warnings.
+// Only add events if you made sure that React actually considers these as "discrete".
+// Be aware that "discrete events" are an implementation detail of React.
+// To test discrete events we cannot use `fireEvent` from `@testing-library/react` because they are all wrapped in `act`.
+// `act` overrides the "discrete event" semantics with "batching" semantics: https://github.com/facebook/react/blob/3fbd47b86285b6b7bdeab66d29c85951a84d4525/packages/react-reconciler/src/ReactFiberWorkLoop.old.js#L1061-L1064
+// Note that using `fireEvent` from `@testing-library/dom` would not work since /react configures both `fireEvent` to use `act` as a wrapper.
+// -----------------------------------------
+
+export function click(...args: Parameters<(typeof fireEvent)['click']>) {
+  return withMissingActWarningsIgnored(() => {
+    fireEvent.click(...args);
+  });
+}
+
+export function keyDown(...args: Parameters<(typeof fireEvent)['keyDown']>) {
+  return withMissingActWarningsIgnored(() => {
+    fireEvent.keyDown(...args);
+  });
+}
+
+export function keyUp(...args: Parameters<(typeof fireEvent)['keyUp']>) {
+  return withMissingActWarningsIgnored(() => {
+    fireEvent.keyUp(...args);
+  });
+}
+
+export function mouseDown(...args: Parameters<(typeof fireEvent)['mouseDown']>) {
+  return withMissingActWarningsIgnored(() => {
+    fireEvent.mouseDown(...args);
+  });
+}
+
+export function mouseUp(...args: Parameters<(typeof fireEvent)['mouseUp']>) {
+  return withMissingActWarningsIgnored(() => {
+    fireEvent.mouseUp(...args);
+  });
+}

package/src/flushMicrotasks.ts

@@ -0,0 +1,8 @@
+import { act } from './createRenderer';
+
+export default async function flushMicrotasks() {
+  if (/jsdom/.test(window.navigator.userAgent)) {
+    // This is only needed for JSDOM and causes issues in real browsers
+    await act(() => async () => {});
+  }
+}

package/src/focusVisible.ts

@@ -0,0 +1,28 @@
+import { act, fireEvent } from './createRenderer';
+
+export default function focusVisible(element: HTMLElement) {
+  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);
+}
+
+/**
+ * See https://bugs.chromium.org/p/chromium/issues/detail?id=1127875 for more details.
+ */
+export function programmaticFocusTriggersFocusVisible(): boolean {
+  try {
+    // So far this only applies to Chrome 86 beta which is the only tested browser supporting this pseudo class.
+    document.createElement('button').matches(':focus-visible');
+    return true;
+  } catch (error) {
+    return false;
+  }
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export * from './components';
+export { default as describeConformance } from './describeConformance';
+export * from './describeConformance';
+export { default as createDescribe } from './createDescribe';
+export * from './createRenderer';
+export { default as createMount } from './createMount';
+export { default as findOutermostIntrinsic, wrapsIntrinsicElement } from './findOutermostIntrinsic';
+export {
+  default as focusVisible,
+  simulatePointerDevice,
+  programmaticFocusTriggersFocusVisible,
+} from './focusVisible';
+export {} from './initMatchers';
+export * as fireDiscreteEvent from './fireDiscreteEvent';
+export * as userEvent from './userEvent';
+export { default as flushMicrotasks } from './flushMicrotasks';
+
+/**
+ * Set to true if console logs during [lifecycles that are invoked twice in `React.StrictMode`](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) are suppressed.
+ * Useful for asserting on `console.warn` or `console.error` via `toErrorDev()`.
+ */
+export const strictModeDoubleLoggingSuppressed = React.version.startsWith('17');

package/src/init.js

@@ -0,0 +1,15 @@
+import enzyme from 'enzyme';
+import Adapter from '@mnajdova/enzyme-adapter-react-18';
+import * as testingLibrary from '@testing-library/react/pure';
+import './initMatchers';
+
+enzyme.configure({ adapter: new Adapter() });
+
+// checking if an element is hidden is quite expensive
+// this is only done in CI as a fail safe. It can still explicitly be checked
+// in the test files which helps documenting what is part of the DOM but hidden
+// from assistive technology
+const defaultHidden = !process.env.CI;
+// adds verbosity for something that might be confusing
+console.warn(`${defaultHidden ? 'including' : 'excluding'} inaccessible elements by default`);
+testingLibrary.configure({ defaultHidden });

package/src/initMatchers.test.js

@@ -0,0 +1,126 @@
+import { expect } from 'chai';
+import { createSandbox } from 'sinon';
+
+describe('custom matchers', () => {
+  const consoleSandbox = createSandbox();
+
+  beforeEach(() => {
+    // otherwise our global setup throws on unexpected calls in afterEach
+    consoleSandbox.stub(console, 'warn');
+    consoleSandbox.stub(console, 'error');
+  });
+
+  afterEach(() => {
+    consoleSandbox.restore();
+  });
+
+  describe('toErrorDev()', () => {
+    it('passes if the message is exactly the same', () => {
+      expect(() => console.error('expected message')).toErrorDev('expected message');
+    });
+
+    it('passes if the message is a subset', () => {
+      expect(() => console.error('expected message')).toErrorDev('pected messa');
+    });
+
+    it('passes if multiple messages are expected', () => {
+      expect(() => {
+        console.error('expected message');
+        console.error('another message');
+      }).toErrorDev(['expected message', 'another message']);
+    });
+
+    it("fails if an expected console.error call wasn't recorded with a useful stacktrace", () => {
+      let caughtError;
+      try {
+        console.error('expected message');
+        expect(() => {}).toErrorDev('expected message');
+      } catch (error) {
+        caughtError = error;
+      }
+
+      expect(caughtError).to.have.property('stack');
+      expect(caughtError.stack).to.include(
+        'Could not match the following console.error calls. ' +
+          "Make sure previous actions didn't call console.error by wrapping them in expect(() => {}).not.toErrorDev(): \n\n" +
+          '  - "expected message"\n' +
+          '    at Context.', // `Context.it` in node 12.x, `Context.<anonymous>` in later node version
+      );
+      // check that the top stackframe points to this test
+      // if this test is moved to another file the next assertion fails
+      expect(caughtError.stack).to.match(
+        /- "expected message"\s+at Context\.(<anonymous>|it) \(.+\/initMatchers\.test\.js:\d+:\d+\)/,
+      );
+    });
+
+    it('is case sensitive', () => {
+      let caughtError;
+      try {
+        expect(() => console.error('expected Message')).toErrorDev('expected message');
+      } catch (error) {
+        caughtError = error;
+      }
+
+      expect(caughtError).to.have.property('stack');
+      expect(caughtError.stack).to.include(
+        'Recorded unexpected console.error calls: \n\n' +
+          '  - Expected #1 "expected message" to be included in \n' +
+          '"expected Message"\n' +
+          '    at callback',
+      );
+      // check that the top stackframe points to this test
+      // if this test is moved to another file the next assertion fails
+      expect(caughtError.stack).to.match(
+        /"expected Message"\s+at callback \(.+\/initMatchers\.test\.js:\d+:\d+\)/,
+      );
+    });
+
+    it('fails if the order of calls does not match', () => {
+      expect(() => {
+        expect(() => {
+          console.error('another message');
+          console.error('expected message');
+        }).toErrorDev(['expected message', 'another message']);
+      }).to.throw('Recorded unexpected console.error calls');
+    });
+
+    it('fails if there are fewer messages than expected', () => {
+      expect(() => {
+        expect(() => {
+          console.error('expected message');
+        }).toErrorDev(['expected message', 'another message']);
+      }).to.throw('Could not match the following console.error calls');
+    });
+
+    it('passes if no messages were recorded if expected', () => {
+      expect(() => {}).not.toErrorDev();
+      expect(() => {}).not.toErrorDev([]);
+    });
+
+    it('fails if no arguments are used as a way of negating', () => {
+      expect(() => {
+        expect(() => {}).toErrorDev();
+      }).to.throw(
+        "Expected to call console.error but didn't provide messages. " +
+          "If you don't expect any messages prefer `expect().not.toErrorDev();",
+      );
+    });
+
+    it('fails if arguments are passed when negated', () => {
+      expect(() => {
+        expect(() => {}).not.toErrorDev('not unexpected?');
+      }).to.throw(
+        'Expected no call to console.error but provided messages. ' +
+          "If you want to make sure a certain message isn't logged prefer the positive. " +
+          'By expecting certain messages you automatically expect that no other messages are logged',
+      );
+    });
+
+    it('ignores `false` messages', () => {
+      const isReact16 = false;
+      expect(() => {
+        expect(() => {}).toErrorDev([isReact16 && 'some legacy error message']);
+      }).not.to.throw();
+    });
+  });
+});