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

package/src/initPlaywrightMatchers.ts

@@ -0,0 +1,96 @@
+import chai, { AssertionError } from 'chai';
+import * as DomTestingLibrary from '@testing-library/dom';
+import type { ElementHandle } from 'playwright';
+
+// https://stackoverflow.com/a/46755166/3406963
+declare global {
+  namespace Chai {
+    interface Assertion {
+      /**
+       * Checks if the element handle is actually focused i.e. the element handle is pointing to `document.activeElement`.
+       */
+      toHaveFocus(): Promise<void>;
+      /**
+       * Checks if the element handle has the given attribute.
+       * @example expect($element).toHaveAttribute('aria-expanded') is like `[aria-expanded]` CSS selector
+       * @example expect($element).toHaveAttribute('aria-expanded', 'true') is like `[aria-expanded="true"]` CSS selector
+       */
+      toHaveAttribute(attributeName: string, attributeValue?: string): Promise<void>;
+    }
+  }
+
+  interface Window {
+    DomTestingLibrary: typeof DomTestingLibrary;
+    /**
+     * @example $element.evaluate(element => window.pageElementToString(element))
+     */
+    elementToString(element: Node | null | undefined): string | false;
+  }
+}
+
+chai.use((chaiAPI, utils) => {
+  chai.Assertion.addMethod('toHaveFocus', async function elementHandleIsFocused() {
+    const $elementOrHandle: ElementHandle | Promise<ElementHandle> = utils.flag(this, 'object');
+    if ($elementOrHandle == null) {
+      throw new AssertionError(`Expected an element handle but got ${String($elementOrHandle)}.`);
+    }
+    const $element =
+      typeof ($elementOrHandle as Promise<any>).then === 'function'
+        ? await ($elementOrHandle as Promise<ElementHandle>)
+        : ($elementOrHandle as ElementHandle);
+
+    const { isFocused, stringifiedActiveElement, stringifiedElement } = await $element.evaluate(
+      (element) => {
+        const activeElement =
+          element.ownerDocument !== null ? element.ownerDocument.activeElement : null;
+        return {
+          isFocused: activeElement === element,
+          stringifiedElement: window.elementToString(element),
+          stringifiedActiveElement: window.elementToString(activeElement),
+        };
+      },
+    );
+
+    this.assert(
+      isFocused,
+      `expected element to have focus`,
+      `expected element to NOT have focus \n${stringifiedElement}`,
+      stringifiedElement,
+      stringifiedActiveElement,
+    );
+  });
+
+  chai.Assertion.addMethod(
+    'toHaveAttribute',
+    async function elementHandleHasAttribute(attributeName: string, attributeValue?: string) {
+      const $elementOrHandle: ElementHandle | Promise<ElementHandle> = utils.flag(this, 'object');
+      if ($elementOrHandle == null) {
+        throw new AssertionError(`Expected an element handle but got ${String($elementOrHandle)}.`);
+      }
+      const $element =
+        typeof ($elementOrHandle as Promise<any>).then === 'function'
+          ? await ($elementOrHandle as Promise<ElementHandle>)
+          : ($elementOrHandle as ElementHandle);
+
+      const actualAttributeValue = await $element.getAttribute(attributeName);
+
+      if (attributeValue === undefined) {
+        this.assert(
+          actualAttributeValue !== null,
+          `expected element to have attribute \`${attributeName}\``,
+          `expected element to NOT have attribute \`${attributeName}\``,
+          null,
+          null,
+        );
+      } else {
+        this.assert(
+          actualAttributeValue === attributeValue,
+          `expected element to have attribute \`${attributeName}="${attributeValue}"\``,
+          `expected element to NOT have attribute \`${attributeName}="${attributeValue}"\``,
+          attributeValue,
+          actualAttributeValue,
+        );
+      }
+    },
+  );
+});

package/src/mochaHooks.js

@@ -0,0 +1,209 @@
+// @ts-check
+const formatUtil = require('format-util');
+
+/**
+ * @typedef {(this: import('mocha').Context) => void} MochaHook
+ *
+ * @typedef {object} MochaHooks
+ * @property {MochaHook[]} beforeAll
+ * @property {MochaHook[]} afterAll
+ * @property {MochaHook[]} beforeEach
+ * @property {MochaHook[]} afterEach
+ *
+ * @typedef {object} Mocha -- custom definition for `const mocha = require('mocha')`
+ * @property {import('mocha').utils} utils
+ */
+
+const isKarma = Boolean(process.env.KARMA);
+
+/**
+ * Polyfills for https://github.com/facebook/react/issues/19416.
+ * @param {[stack: string, message: string][]} consoleCalls
+ * @returns {[stack: string, message: string][]}
+ */
+function dedupeActWarningsByComponent(consoleCalls) {
+  /**
+   * @type {[stack: string, message: string][]}
+   */
+  const dedupedCalls = [];
+
+  /**
+   * @type {string | undefined}
+   */
+  let updatingComponentOutsideAct;
+
+  consoleCalls.forEach(([stack, message]) => {
+    const componentName = message.match(
+      /An update to (.+?) ran an effect, but was not wrapped in act/,
+    )?.[1];
+
+    const duplicateMissingActWarning =
+      componentName !== undefined && componentName === updatingComponentOutsideAct;
+    if (!duplicateMissingActWarning) {
+      dedupedCalls.push([stack, message]);
+    }
+    updatingComponentOutsideAct = componentName;
+  });
+
+  return dedupedCalls;
+}
+
+/**
+ * @param {Mocha} Mocha
+ * @param {'warn' | 'error'} methodName
+ * @param {string} expectedMatcher
+ * @returns MochaHooks
+ */
+function createUnexpectedConsoleMessagesHooks(Mocha, methodName, expectedMatcher) {
+  /**
+   * @type {MochaHooks}
+   */
+  const mochaHooks = {
+    beforeAll: [],
+    afterAll: [],
+    beforeEach: [],
+    afterEach: [],
+  };
+  /**
+   * @type {[stack: string, message: string][]}
+   */
+  const unexpectedCalls = [];
+  const stackTraceFilter = Mocha.utils.stackTraceFilter();
+
+  /**
+   * @param {string} format
+   * @param  {...unknown} args
+   * @returns {void}
+   */
+  function logUnexpectedConsoleCalls(format, ...args) {
+    const message = formatUtil(format, ...args);
+
+    // Safe stack so that test dev can track where the unexpected console message was created.
+    const { stack } = new Error();
+    if (stack === undefined) {
+      throw new TypeError(
+        `Unable to get stack. Logging unexpected console calls is only supported in environments where Error.prototype.stack is implemented.`,
+      );
+    }
+
+    if (process.env.NODE_ENV === 'production') {
+      // TODO: mock scheduler
+      if (message.indexOf('act(...) is not supported in production builds of React') !== -1) {
+        return;
+      }
+    }
+
+    // Ignore legacy root deprecation warnings
+    // TODO: Remove once we no longer use legacy roots.
+    if (
+      message.indexOf('Use createRoot instead.') !== -1 ||
+      message.indexOf('Use hydrateRoot instead.') !== -1
+    ) {
+      return;
+    }
+
+    if (message.indexOf('Warning: useLayoutEffect does nothing on the server') !== -1) {
+      // Controversial warning that is commonly ignored by switching to `useEffect` on the server.
+      // https://github.com/facebook/react/issues/14927
+      // However, this switch doesn't work since it relies on environment sniffing and we test SSR in a browser environment.
+      return;
+    }
+
+    // Unclear why this is an issue for the current occurrences of this warning.
+    // TODO: Revisit once https://github.com/facebook/react/issues/22796 is resolved
+    if (
+      message.indexOf(
+        'Detected multiple renderers concurrently rendering the same context provider.',
+      ) !== -1
+    ) {
+      return;
+    }
+
+    unexpectedCalls.push([
+      // first line includes the (empty) error message
+      // i.e. Remove the `Error:` line
+      // second line is this frame
+      stackTraceFilter(stack.split('\n').slice(2).join('\n')),
+      message,
+    ]);
+  }
+
+  /**
+   * @type {Console['warn' | 'error']}
+   */
+  let originalConsoleMethod;
+  mochaHooks.beforeAll.push(function registerConsoleStub() {
+    // eslint-disable-next-line no-console
+    originalConsoleMethod = console[methodName];
+    // eslint-disable-next-line no-console
+    console[methodName] = logUnexpectedConsoleCalls;
+  });
+
+  mochaHooks.afterAll.push(function registerConsoleStub() {
+    // eslint-disable-next-line no-console
+    console[methodName] = originalConsoleMethod;
+  });
+
+  mochaHooks.afterEach.push(function flushUnexpectedCalls() {
+    const actionableCalls = dedupeActWarningsByComponent(unexpectedCalls);
+    const actionableCallCount = actionableCalls.length;
+    const formattedCalls = actionableCalls.map(
+      ([stack, message], index) =>
+        `console.${methodName} message #${index + 1}:\n  ${message}\n\nStack:\n${stack}`,
+    );
+    unexpectedCalls.length = 0;
+
+    // eslint-disable-next-line no-console
+    if (console[methodName] !== logUnexpectedConsoleCalls) {
+      throw new Error(`Did not tear down spy or stub of console.${methodName} in your test.`);
+    }
+    if (actionableCallCount > 0) {
+      // In karma `file` is `null`.
+      // We still have the stacktrace though
+      // @ts-expect-error -- this.currentTest being undefined would be a bug
+      const location = this.currentTest.file ?? '(unknown file)';
+      const message =
+        `Expected test not to call console.${methodName}() but instead received ${actionableCallCount} calls.\n\n` +
+        'If the warning is expected, test for it explicitly by ' +
+        // Don't add any punctuation after the location.
+        // Otherwise it's not clickable in IDEs
+        `using the ${expectedMatcher}() matcher.\nTest location:\n  ${location} `;
+
+      const error = new Error(`${message}\n\n${formattedCalls.join('\n\n')}`);
+      // The stack of `flushUnexpectedCalls` is irrelevant.
+      // It includes no clue where the test was triggered
+      error.stack = '';
+
+      if (isKarma) {
+        // @ts-expect-error -- this.currentTest being undefined would be a bug
+        const testPath = `"${this.currentTest.fullTitle()}"`;
+
+        error.message += `\n\nin ${testPath}`;
+        throw error;
+      } else {
+        // @ts-expect-error -- this.test being undefined would be a bug
+        this.test.error(error);
+      }
+    }
+  });
+
+  return mochaHooks;
+}
+
+/**
+ * @param {Mocha} Mocha
+ * @returns MochaHooks
+ */
+function createMochaHooks(Mocha) {
+  const warnHooks = createUnexpectedConsoleMessagesHooks(Mocha, 'warn', 'toWarnDev');
+  const errorHooks = createUnexpectedConsoleMessagesHooks(Mocha, 'error', 'toErrorDev');
+
+  return {
+    beforeAll: [...warnHooks.beforeAll, ...errorHooks.beforeAll],
+    afterAll: [...warnHooks.afterAll, ...errorHooks.afterAll],
+    beforeEach: [...warnHooks.beforeEach, ...errorHooks.beforeEach],
+    afterEach: [...warnHooks.afterEach, ...errorHooks.afterEach],
+  };
+}
+
+module.exports = { createMochaHooks };

package/src/mochaHooks.test.js

@@ -0,0 +1,113 @@
+import * as Mocha from 'mocha';
+import { expect } from 'chai';
+import * as React from 'react';
+import { stub } from 'sinon';
+import { createMochaHooks } from './mochaHooks';
+import { createRenderer, act } from './createRenderer';
+
+describe('mochaHooks', () => {
+  // one block per hook.
+  describe('afterEach', () => {
+    describe('on unexpected console.(warn|error) in afterEach', function suite() {
+      const mochaHooks = createMochaHooks(Mocha);
+
+      beforeEach(function beforeEachHook() {
+        mochaHooks.beforeAll.forEach((beforeAllMochaHook) => {
+          beforeAllMochaHook.call(this);
+        });
+        mochaHooks.beforeEach.forEach((beforeEachMochaHook) => {
+          beforeEachMochaHook.call(this);
+        });
+      });
+
+      it('throws an error', () => {
+        console.warn('unexpected warning');
+        console.error('unexpected error');
+      });
+
+      afterEach(function afterEachHook() {
+        const errorStub = stub(this.test, 'error');
+        mochaHooks.afterEach.forEach((afterEachMochaHook) => {
+          afterEachMochaHook.call(this);
+        });
+        mochaHooks.afterAll.forEach((afterAllMochaHook) => {
+          afterAllMochaHook.call(this);
+        });
+
+        expect(errorStub.callCount).to.equal(2);
+        expect(String(errorStub.firstCall.args[0])).to.include(
+          'console.warn message #1:\n  unexpected warning\n\nStack:',
+        );
+        expect(String(errorStub.secondCall.args[0])).to.include(
+          'console.error message #1:\n  unexpected error\n\nStack:',
+        );
+      });
+    });
+
+    // TODO: May not be relevant in React 18
+    describe('when having missing act() warnings by component', () => {
+      const mochaHooks = createMochaHooks(Mocha);
+      // missing act warnings only happen in StrictMode
+      const { render } = createRenderer({ strict: true });
+
+      beforeEach(function beforeEachHook() {
+        mochaHooks.beforeAll.forEach((beforeAllMochaHook) => {
+          beforeAllMochaHook.call(this);
+        });
+        mochaHooks.beforeEach.forEach((beforeEachMochaHook) => {
+          beforeEachMochaHook.call(this);
+        });
+      });
+
+      it('dedupes them', () => {
+        const Child = React.forwardRef(function Child() {
+          React.useEffect(() => {});
+          React.useEffect(() => {});
+          return null;
+        });
+
+        let unsafeSetState;
+        function Parent() {
+          const [state, setState] = React.useState(0);
+          unsafeSetState = setState;
+
+          React.useEffect(() => {});
+          React.useEffect(() => {});
+
+          return <Child rerender={state} />;
+        }
+
+        render(<Parent />);
+
+        // not wrapped in act()
+        unsafeSetState(1);
+        // make sure effects are flushed
+        act(() => {});
+      });
+
+      afterEach(function afterEachHook() {
+        const errorStub = stub(this.test, 'error');
+        mochaHooks.afterEach.forEach((afterEachMochaHook) => {
+          afterEachMochaHook.call(this);
+        });
+        mochaHooks.afterAll.forEach((afterAllMochaHook) => {
+          afterAllMochaHook.call(this);
+        });
+
+        expect(errorStub.callCount).to.equal(1);
+        const error = String(errorStub.firstCall.args[0]);
+        expect(
+          error.match(/An update to Parent inside a test was not wrapped in act/g),
+        ).to.have.lengthOf(1);
+        expect(
+          error.match(/An update to Parent ran an effect, but was not wrapped in act/g) ?? [],
+        ).to.have.lengthOf(React.startTransition !== undefined ? 0 : 1);
+        expect(
+          error.match(
+            /An update to ForwardRef\(Child\) ran an effect, but was not wrapped in act/g,
+          ) ?? [],
+        ).to.have.lengthOf(React.startTransition !== undefined ? 0 : 1);
+      });
+    });
+  });
+});

package/src/setup.js

@@ -0,0 +1,10 @@
+const testingLibrary = require('@testing-library/dom');
+const createDOM = require('./createDOM');
+
+createDOM();
+require('./init');
+
+testingLibrary.configure({
+  // JSDOM logs errors otherwise on `getComputedStyle(element, pseudoElement)` calls.
+  computedStyleSupportsPseudoElements: false,
+});

package/src/setupBabel.js

@@ -0,0 +1,3 @@
+require('@babel/register')({
+  extensions: ['.js', '.ts', '.tsx'],
+});

package/src/setupBabelPlaywright.js

@@ -0,0 +1,10 @@
+// In playwright we sometimes write functions that are executed in the browser environment.
+// Since we can't tell babel which parts of the code are executed in which environment we can only disable it entirely.
+// We're only stripping types and compiling ES6 to CommonJS modules which should be safe.
+
+require('@babel/register')({
+  configFile: false,
+  extensions: ['.js', '.ts', '.tsx'],
+  presets: [require.resolve('@babel/preset-typescript')],
+  plugins: [require.resolve('@babel/plugin-transform-modules-commonjs')],
+});

package/src/setupJSDOM.js

@@ -0,0 +1,20 @@
+const testingLibrary = require('@testing-library/dom');
+const Mocha = require('mocha');
+const createDOM = require('./createDOM');
+const { createMochaHooks } = require('./mochaHooks');
+
+// Enable missing act warnings: https://github.com/reactwg/react-18/discussions/102
+global.jest = null;
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
+createDOM();
+require('./init');
+
+testingLibrary.configure({
+  // JSDOM logs errors otherwise on `getComputedStyle(element, pseudoElement)` calls.
+  computedStyleSupportsPseudoElements: false,
+});
+
+const mochaHooks = createMochaHooks(Mocha);
+
+module.exports = { mochaHooks };

package/src/setupKarma.js

@@ -0,0 +1,65 @@
+/* eslint-env mocha */
+import { createMochaHooks } from './mochaHooks';
+
+const mochaHooks = createMochaHooks(window.Mocha);
+
+/**
+ * Emit events from `DispatchingProfiler` as `browser_info` karma events.
+ */
+function handleReactProfilerResults(event) {
+  // Only own properties are persisted when sending the object.
+  const info = { type: event.type, detail: event.detail };
+  // eslint-disable-next-line no-underscore-dangle -- public: http://karma-runner.github.io/5.2/dev/plugins.html
+  window.__karma__.info(info);
+}
+
+before(function beforeAllHook() {
+  mochaHooks.beforeAll.forEach((mochaHook) => {
+    mochaHook.call(this);
+  });
+
+  window.addEventListener('reactProfilerResults', handleReactProfilerResults);
+});
+
+after(function afterAllHook() {
+  window.removeEventListener('reactProfilerResults', handleReactProfilerResults);
+
+  mochaHooks.afterAll.forEach((mochaHook) => {
+    mochaHook.call(this);
+  });
+});
+
+beforeEach(function beforeEachHook() {
+  mochaHooks.beforeEach.forEach((mochaHook) => {
+    mochaHook.call(this);
+  });
+});
+
+afterEach(function afterEachHook() {
+  mochaHooks.afterEach.forEach((mochaHook) => {
+    mochaHook.call(this);
+  });
+});
+
+// Ensure that uncaught exceptions between tests result in the tests failing.
+// This works around an issue with mocha / karma-mocha, see
+// https://github.com/karma-runner/karma-mocha/issues/227
+let pendingError = null;
+let pendingErrorNotice = null;
+
+window.addEventListener('error', (event) => {
+  pendingError = event.error;
+  pendingErrorNotice = 'An uncaught exception was thrown between tests';
+});
+
+window.addEventListener('unhandledrejection', (event) => {
+  pendingError = event.reason;
+  pendingErrorNotice = 'An uncaught promise rejection occurred between tests';
+});
+
+afterEach(() => {
+  if (pendingError) {
+    console.error(pendingErrorNotice);
+    throw pendingError;
+  }
+});

package/src/until.js

@@ -0,0 +1,28 @@
+function shallowRecursively(wrapper, selector, { context, ...other }) {
+  if (wrapper.isEmptyRender() || typeof wrapper.getElement().type === 'string') {
+    return wrapper;
+  }
+
+  let newContext = context;
+
+  const instance = wrapper.root().instance();
+  // The instance can be null with a stateless functional component and react >= 16.
+  if (instance && instance.getChildContext) {
+    newContext = {
+      ...context,
+      ...instance.getChildContext(),
+    };
+  }
+
+  const nextWrapper = wrapper.shallow({ context: newContext, ...other });
+
+  if (selector && wrapper.is(selector)) {
+    return nextWrapper;
+  }
+
+  return shallowRecursively(nextWrapper, selector, { context: newContext });
+}
+
+export default function until(selector, options = {}) {
+  return this.single('until', () => shallowRecursively(this, selector, options));
+}

package/src/until.test.js

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import PropTypes from 'prop-types';
+import { shallow } from 'enzyme';
+import until from './until';
+
+function Div() {
+  return <div />;
+}
+const hoc = (Component) =>
+  function Wrapper() {
+    return <Component />;
+  };
+
+describe('until', () => {
+  it('shallow renders the current wrapper one level deep', () => {
+    const EnhancedDiv = hoc(Div);
+    const wrapper = until.call(shallow(<EnhancedDiv />), 'Div');
+    expect(wrapper.contains(<div />)).to.equal(true);
+  });
+
+  it('shallow renders the current wrapper several levels deep', () => {
+    const EnhancedDiv = hoc(hoc(hoc(Div)));
+    const wrapper = until.call(shallow(<EnhancedDiv />), 'Div');
+    expect(wrapper.contains(<div />)).to.equal(true);
+  });
+
+  it('stops shallow rendering when the wrapper is empty', () => {
+    const nullHoc = () => () => null;
+    const EnhancedDiv = nullHoc();
+    const wrapper = until.call(shallow(<EnhancedDiv />), 'Div');
+    expect(wrapper.html()).to.equal(null);
+  });
+
+  it('shallow renders as much as possible when no selector is provided', () => {
+    const EnhancedDiv = hoc(hoc(Div));
+    const wrapper = until.call(shallow(<EnhancedDiv />));
+    expect(wrapper.contains(<div />)).to.equal(true);
+  });
+
+  it('shallow renders the current wrapper even if the selector never matches', () => {
+    const EnhancedDiv = hoc(Div);
+    const wrapper = until.call(shallow(<EnhancedDiv />), 'NotDiv');
+    expect(wrapper.contains(<div />)).to.equal(true);
+  });
+
+  it('stops shallow rendering when it encounters a HTML element', () => {
+    const wrapper = until.call(
+      shallow(
+        <div>
+          <Div />
+        </div>,
+      ),
+      'Div',
+    );
+    expect(
+      wrapper.contains(
+        <div>
+          <Div />
+        </div>,
+      ),
+    ).to.equal(true);
+  });
+
+  it('throws when until called on an empty wrapper', () => {
+    expect(() => {
+      until.call(shallow(<Div />).find('Foo'), 'div');
+    }).to.throw(Error);
+  });
+
+  it('shallow renders non-root wrappers', () => {
+    function Container() {
+      return (
+        <div>
+          <Div />
+        </div>
+      );
+    }
+    const wrapper = until.call(shallow(<Container />).find(Div));
+    expect(wrapper.contains(<div />)).to.equal(true);
+  });
+
+  // eslint-disable-next-line react/prefer-stateless-function
+  class Foo extends React.Component {
+    render() {
+      return <Div />;
+    }
+  }
+
+  Foo.contextTypes = {
+    quux: PropTypes.bool.isRequired,
+  };
+
+  it('context propagation passes down context from the root component', () => {
+    const EnhancedFoo = hoc(Foo);
+    const options = { context: { quux: true } };
+    const wrapper = until.call(shallow(<EnhancedFoo />, options), 'Foo', options);
+    expect(wrapper.context('quux')).to.equal(true);
+    expect(wrapper.contains(<Div />)).to.equal(true);
+  });
+
+  class Bar extends React.Component {
+    static childContextTypes = { quux: PropTypes.bool };
+
+    getChildContext() {
+      return { quux: true };
+    }
+
+    render() {
+      return <Foo />;
+    }
+  }
+
+  it('context propagation passes down context from an intermediary component', () => {
+    const EnhancedBar = hoc(Bar);
+    const wrapper = until.call(shallow(<EnhancedBar />), 'Foo');
+    expect(wrapper.context('quux')).to.equal(true);
+    expect(wrapper.contains(<Div />)).to.equal(true);
+  });
+});