Merge branch 'main' into rm-zee

Author: mstange

package.json

@@ -76,7 +76,7 @@
     "classnames": "^2.5.1",
     "common-tags": "^1.8.2",
     "copy-to-clipboard": "^3.3.3",
-    "core-js": "^3.45.0",
+    "core-js": "^3.45.1",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^8.0.3",
@@ -115,15 +115,14 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.34.0",
-    "@fetch-mock/jest": "^0.2.16",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@types/clamp": "^1.0.3",
     "@types/common-tags": "^1.8.4",
     "@types/jest": "^30.0.0",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^22.17.2",
+    "@types/node": "^22.18.0",
     "@types/query-string": "^6.3.0",
     "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.1",
@@ -145,7 +144,7 @@
     "copy-webpack-plugin": "^13.0.1",
     "cross-env": "^10.0.0",
     "css-loader": "^7.1.2",
-    "cssnano": "^7.1.0",
+    "cssnano": "^7.1.1",
     "devtools-license-check": "^0.9.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
@@ -158,6 +157,7 @@
     "eslint-plugin-testing-library": "^7.6.6",
     "espree": "^10.4.0",
     "fake-indexeddb": "^6.1.0",
+    "fetch-mock": "^12.5.3",
     "file-loader": "^6.2.0",
     "glob": "^11.0.3",
     "globals": "^16.3.0",
@@ -207,7 +207,7 @@
       "tsx"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(query-string|decode-uri-component|iongraph-web|split-on-first|filter-obj|@fetch-mock/jest|fetch-mock)/)"
+      "/node_modules/(?!(query-string|decode-uri-component|iongraph-web|split-on-first|filter-obj|fetch-mock)/)"
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ftl)$": "<rootDir>/src/test/fixtures/mocks/file-mock.ts",

src/components/shared/ContextMenu.tsx

@@ -4,52 +4,25 @@
 
 import { PureComponent } from 'react';
 import type { ComponentProps } from 'react';
-import ReactDOM from 'react-dom';
 import { ContextMenu as ReactContextMenu } from '@firefox-devtools/react-contextmenu';
 
 import './ContextMenu.css';
 
 type Props = ComponentProps<typeof ReactContextMenu>;
 
 export class ContextMenu extends PureComponent<Props> {
-  _contextMenu: any = null;
-  _takeContextMenuRef = (contextMenu: any) => {
-    this._contextMenu = contextMenu;
-  };
-
-  _mouseDownHandler(event: Event): void {
+  _mouseDownHandler = (event: React.MouseEvent<HTMLDivElement>): void => {
     // This prevents from stealing the focus from where it was.
     event.preventDefault();
-  }
-
-  override componentDidMount() {
-    if (this._contextMenu) {
-      // The context menu component does not expose a reference to its internal
-      // DOM node so using findDOMNode is currently unavoidable.
-      // eslint-disable-next-line react/no-find-dom-node
-      const contextMenuNode = ReactDOM.findDOMNode(this._contextMenu);
-      if (contextMenuNode) {
-        // There's no need to remove this event listener since the component is
-        // never unmounted. Duplicate event listeners will also be discarded
-        // automatically so we don't need to handle that.
-        contextMenuNode.addEventListener('mousedown', this._mouseDownHandler);
-      }
-    }
-  }
-
-  override componentWillUnmount() {
-    // eslint-disable-next-line react/no-find-dom-node
-    const contextMenuNode = ReactDOM.findDOMNode(this._contextMenu);
-    if (contextMenuNode) {
-      contextMenuNode.removeEventListener('mousedown', this._mouseDownHandler);
-    }
-  }
+  };
 
   override render() {
     return (
-      <ReactContextMenu ref={this._takeContextMenuRef} {...this.props}>
-        {this.props.children ? this.props.children : <div />}
-      </ReactContextMenu>
+      <div onMouseDown={this._mouseDownHandler}>
+        <ReactContextMenu {...this.props}>
+          {this.props.children ? this.props.children : <div />}
+        </ReactContextMenu>
+      </div>
     );
   }
 }

src/test/components/AppLocalizationProvider.test.tsx

@@ -161,17 +161,23 @@ describe('AppLocalizationProvider', () => {
 
     expect(await screen.findByText(translatedText('de'))).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'de');
-    expect(window.fetch).toHaveFetched('/locales/de/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetched('/locales/en-US/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetchedTimes(2);
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/de/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/en-US/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(window.fetchMock.callHistory.callLogs.length).toBe(2);
   });
 
   it('falls back properly on en-US if the primary locale lacks a string', async () => {
@@ -193,16 +199,22 @@ describe('AppLocalizationProvider', () => {
       await screen.findByText(translatedText('en-US'))
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'de');
-    expect(window.fetch).toHaveFetched('/locales/de/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetched('/locales/en-US/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetchedTimes(2);
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/de/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/en-US/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(window.fetchMock.callHistory.callLogs.length).toBe(2);
   });
 });