test-utils: move mockBreakpoint to core-componets/testUtils

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/chilly-bikes-kick.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added a new `/testUtils` sub-path that initially exports a `mockBreakpoint` helper.

.changeset/little-suits-collect.md

@@ -0,0 +1,5 @@
+---
+'@backstage/test-utils': patch
+---
+
+Deprecated `mockBreakpoint`, as it is now available from `@backstage/core-components/testUtils` instead.

packages/core-components/package.json

@@ -3,9 +3,7 @@
   "description": "Core components used by Backstage plugins and apps",
   "version": "0.13.9-next.0",
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
   },
   "backstage": {
     "role": "web-library"
@@ -22,6 +20,21 @@
   "license": "Apache-2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./testUtils": "./src/testUtils.ts",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "testUtils": [
+        "src/testUtils.ts"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "build": "backstage-cli package build",

packages/core-components/src/layout/Sidebar/MobileSidebar.test.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { mockBreakpoint, renderInTestApp } from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
+import { mockBreakpoint } from '@backstage/core-components/testUtils';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import HomeIcon from '@material-ui/icons/Home';
 import LayersIcon from '@material-ui/icons/Layers';

packages/core-components/src/layout/Sidebar/SidebarGroup.test.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { mockBreakpoint, renderInTestApp } from '@backstage/test-utils';
+import { mockBreakpoint } from '@backstage/core-components/testUtils';
+import { renderInTestApp } from '@backstage/test-utils';
 import HomeIcon from '@material-ui/icons/Home';
 import LayersIcon from '@material-ui/icons/Layers';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';

packages/core-components/src/testUtils.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ *  This is a mocking method suggested in the Jest docs, as it is not implemented in JSDOM yet.
+ *  It can be used to mock values for the Material UI `useMediaQuery` hook if it is used in a tested component.
+ *
+ *  For issues checkout the documentation:
+ *  https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+ *
+ *  If there are any updates from Material UI React on testing `useMediaQuery` this mock should be replaced
+ *  https://mui.com/material-ui/react-use-media-query/#testing
+ *
+ * @public
+ */
+export function mockBreakpoint(options: { matches: boolean }) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches: options.matches ?? false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+}

packages/core-components/testUtils-api-report.md

@@ -0,0 +1,10 @@
+## API Report File for "@backstage/core-components"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+// @public
+export function mockBreakpoint(options: { matches: boolean }): void;
+
+// (No @packageDocumentation comment for this package)
+```

packages/test-utils/api-report.md

@@ -74,7 +74,7 @@ export class MockAnalyticsApi implements AnalyticsApi {
   getEvents(): AnalyticsEvent[];
 }
 
-// @public
+// @public @deprecated
 export function mockBreakpoint(options: { matches: boolean }): void;
 
 // @public

packages/test-utils/src/testUtils/mockBreakpoint.ts

@@ -25,6 +25,7 @@
  *  https://mui.com/material-ui/react-use-media-query/#testing
  *
  * @public
+ * @deprecated Import from `@backstage/core-components/testUtils` instead.
  */
 export default function mockBreakpoint(options: { matches: boolean }) {
   Object.defineProperty(window, 'matchMedia', {

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.test.tsx

@@ -32,8 +32,8 @@ import {
   MockStarredEntitiesApi,
   starredEntitiesApiRef,
 } from '@backstage/plugin-catalog-react';
+import { mockBreakpoint } from '@backstage/core-components/testUtils';
 import {
-  mockBreakpoint,
   MockStorageApi,
   TestApiProvider,
   renderInTestApp,