paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 47 Packages Projects Releases Wiki Activity

Merge pull request #20598 from backstage/rugvip/use-react-18

Browse Source 
Migrate to React 18
This commit is contained in:
Patrik Oldsberg
2023-10-18 10:57:44 +02:00
committed by GitHub
parent 84918d7d81 3e1d63ba3f
commit 4f7244a3e6
235 changed files with 2404 additions and 2305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/healthy-shirts-fold.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/plugin-catalog': patch
'@backstage/plugin-techdocs': patch
---
The `spec.lifecycle' field in entities will now always be rendered as a string.
.changeset/lazy-hotels-wait.md
+109
View File
@@ -0,0 +1,109 @@
---
'@backstage/plugin-analytics-module-newrelic-browser': patch
'@backstage/plugin-api-docs-module-protoc-gen-doc': patch
'@backstage/plugin-techdocs-module-addons-contrib': patch
'@backstage/plugin-cicd-statistics-module-gitlab': patch
'@backstage/plugin-catalog-unprocessed-entities': patch
'@backstage/plugin-github-pull-requests-board': patch
'@backstage/plugin-techdocs-addons-test-utils': patch
'@backstage/frontend-plugin-api': patch
'@backstage/plugin-analytics-module-ga4': patch
'@backstage/plugin-analytics-module-ga': patch
'@backstage/plugin-git-release-manager': patch
'@backstage/integration-react': patch
'@backstage/plugin-github-deployments': patch
'@backstage/plugin-kubernetes-cluster': patch
'@backstage/plugin-microsoft-calendar': patch
'@backstage/plugin-newrelic-dashboard': patch
'@backstage/frontend-app-api': patch
'@backstage/plugin-entity-validation': patch
'@backstage/core-components': patch
'@backstage/core-plugin-api': patch
'@backstage/plugin-kubernetes-react': patch
'@backstage/plugin-permission-react': patch
'@backstage/plugin-scaffolder-react': patch
'@backstage/version-bridge': patch
'@backstage/plugin-apollo-explorer': patch
'@backstage/plugin-catalog-graphql': patch
'@backstage/plugin-cicd-statistics': patch
'@backstage/plugin-entity-feedback': patch
'@backstage/plugin-gitops-profiles': patch
'@backstage/plugin-graphql-voyager': patch
'@backstage/plugin-sonarqube-react': patch
'@backstage/plugin-apache-airflow': patch
'@backstage/plugin-catalog-import': patch
'@backstage/plugin-github-actions': patch
'@backstage/plugin-octopus-deploy': patch
'@backstage/plugin-splunk-on-call': patch
'@backstage/plugin-stack-overflow': patch
'@backstage/plugin-techdocs-react': patch
'@backstage/app-defaults': patch
'@backstage/core-app-api': patch
'@backstage/plugin-catalog-graph': patch
'@backstage/plugin-catalog-react': patch
'@backstage/plugin-code-coverage': patch
'@backstage/plugin-config-schema': patch
'@backstage/plugin-cost-insights': patch
'@backstage/plugin-explore-react': patch
'@backstage/plugin-github-issues': patch
'@backstage/plugin-tech-insights': patch
'@backstage/plugin-user-settings': patch
'@backstage/plugin-azure-devops': patch
'@backstage/plugin-code-climate': patch
'@backstage/plugin-gcp-projects': patch
'@backstage/plugin-search-react': patch
'@backstage/create-app': patch
'@backstage/test-utils': patch
'@backstage/plugin-azure-sites': patch
'@backstage/plugin-firehydrant': patch
'@backstage/plugin-cloudbuild': patch
'@backstage/plugin-home-react': patch
'@backstage/plugin-kubernetes': patch
'@backstage/plugin-lighthouse': patch
'@backstage/plugin-scaffolder': patch
'@backstage/plugin-stackstorm': patch
'@backstage/plugin-tech-radar': patch
'@backstage/plugin-codescene': patch
'@backstage/plugin-dynatrace': patch
'@backstage/plugin-gcalendar': patch
'@backstage/plugin-org-react': patch
'@backstage/plugin-pagerduty': patch
'@backstage/plugin-shortcuts': patch
'@backstage/plugin-sonarqube': patch
'@backstage/plugin-xcmetrics': patch
'@backstage/plugin-airbrake': patch
'@backstage/plugin-api-docs': patch
'@backstage/plugin-circleci': patch
'@backstage/plugin-devtools': patch
'@backstage/plugin-graphiql': patch
'@backstage/plugin-linguist': patch
'@backstage/plugin-newrelic': patch
'@backstage/plugin-opencost': patch
'@backstage/plugin-periskop': patch
'@backstage/plugin-playlist': patch
'@backstage/plugin-puppetdb': patch
'@backstage/plugin-techdocs': patch
'@backstage/plugin-bitrise': patch
'@backstage/plugin-catalog': patch
'@backstage/plugin-explore': patch
'@backstage/plugin-jenkins': patch
'@backstage/plugin-rollbar': patch
'@backstage/theme': patch
'@backstage/plugin-allure': patch
'@backstage/plugin-badges': patch
'@backstage/plugin-bazaar': patch
'@backstage/plugin-search': patch
'@backstage/plugin-sentry': patch
'@backstage/plugin-fossa': patch
'@backstage/plugin-ilert': patch
'@backstage/plugin-kafka': patch
'@backstage/plugin-nomad': patch
'@backstage/plugin-vault': patch
'@backstage/plugin-gocd': patch
'@backstage/plugin-home': patch
'@backstage/plugin-todo': patch
'@backstage/plugin-adr': patch
'@backstage/plugin-org': patch
---
Add official support for React 18.
.changeset/popular-bikes-do.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-code-coverage': patch
---
The warning for missing code coverage will now render the entity as a reference.
.changeset/pretty-swans-worry.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/core-components': patch
---
Fixed the type declaration of `DependencyGraphProps`, the `defs` prop now expects `JSX.Element`s.
.changeset/shaggy-beers-collect.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/dev-utils': patch
'@backstage/plugin-techdocs': patch
---
Added support for React 18. The new `createRoot` API from `react-dom/client` will now be used if present.
.changeset/sweet-buckets-fry.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog-react': patch
---
The `spec.type` field in entities will now always be rendered as a string.
.changeset/thick-dolphins-boil.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-catalog-import': patch
---
The `app.title` configuration is now properly required to be a string.
.changeset/wet-cows-brake.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-search-react': patch
---
The filter options passed to `SearchResultGroupLayout` are now always explicitly rendered as strings by default.
.changeset/wild-geese-occur.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-search': patch
---
Minor internal code cleanup.
.yarn/patches/@material-ui-pickers-npm-3.3.11-1c8f68ea20.patch
+112
View File
@@ -0,0 +1,112 @@
diff --git a/DateTimePicker/DateTimePickerTabs.d.ts b/DateTimePicker/DateTimePickerTabs.d.ts
index 52396cccbb66861dd6519459141e7744aa25aaf8..75c5a9053a88abf2454b7783c0101a1a8c9375f1 100644
--- a/DateTimePicker/DateTimePickerTabs.d.ts
+++ b/DateTimePicker/DateTimePickerTabs.d.ts
@@ -7,5 +7,5 @@ export interface DateTimePickerTabsProps {
timeIcon?: React.ReactNode;
}
export declare const useStyles: (props?: any) => Record<"tabs", string>;
-export declare const DateTimePickerTabs: React.SFC<DateTimePickerTabsProps>;
+export declare const DateTimePickerTabs: React.FC<DateTimePickerTabsProps>;
export default DateTimePickerTabs;
diff --git a/_shared/ModalDialog.d.ts b/_shared/ModalDialog.d.ts
index 067070067ccf6e7699d17f422934daf14370d225..c45a583adef09a2091865db91b2687e66af81b47 100644
--- a/_shared/ModalDialog.d.ts
+++ b/_shared/ModalDialog.d.ts
@@ -15,7 +15,7 @@ export interface ModalDialogProps extends DialogProps {
showTabs?: boolean;
wider?: boolean;
}
-export declare const ModalDialog: React.SFC<ModalDialogProps & WithStyles<typeof styles>>;
+export declare const ModalDialog: React.FC<ModalDialogProps & WithStyles<typeof styles>>;
export declare const styles: Record<"dialog" | "dialogRoot" | "dialogRootWider" | "withAdditionalAction", import("@material-ui/core/styles/withStyles").CSSProperties | import("@material-ui/core/styles/withStyles").CreateCSSProperties<{}> | ((props: {}) => import("@material-ui/core/styles/withStyles").CreateCSSProperties<{}>)>;
declare const _default: React.ComponentType<Pick<React.PropsWithChildren<ModalDialogProps & {
classes: Record<"dialog" | "dialogRoot" | "dialogRootWider" | "withAdditionalAction", string>;
diff --git a/_shared/PickerToolbar.d.ts b/_shared/PickerToolbar.d.ts
index f1ccd368bf9ab853cf0356d03fce0390becad8cd..e75ef734788cb26cc07dc079c714f759f525c447 100644
--- a/_shared/PickerToolbar.d.ts
+++ b/_shared/PickerToolbar.d.ts
@@ -5,5 +5,5 @@ export declare const useStyles: (props?: any) => Record<"toolbar" | "toolbarLand
interface PickerToolbarProps extends ExtendMui<ToolbarProps> {
isLandscape: boolean;
}
-declare const PickerToolbar: React.SFC<PickerToolbarProps>;
+declare const PickerToolbar: React.FC<PickerToolbarProps>;
export default PickerToolbar;
diff --git a/_shared/WithUtils.d.ts b/_shared/WithUtils.d.ts
index 22fe0425817be182a6c9a1a21a0f9eefb61696e7..b5b2a966ec0ea8427c4355227d8425b9c1af3790 100644
--- a/_shared/WithUtils.d.ts
+++ b/_shared/WithUtils.d.ts
@@ -4,4 +4,4 @@ import { MaterialUiPickersDate } from '../typings/date';
export interface WithUtilsProps {
utils: IUtils<MaterialUiPickersDate>;
}
-export declare const withUtils: () => <P extends WithUtilsProps>(Component: React.ComponentType<P>) => React.SFC<Pick<P, Exclude<keyof P, "utils">>>;
+export declare const withUtils: () => <P extends WithUtilsProps>(Component: React.ComponentType<P>) => React.FC<Pick<P, Exclude<keyof P, "utils">>>;
diff --git a/_shared/icons/ArrowLeftIcon.d.ts b/_shared/icons/ArrowLeftIcon.d.ts
index ce0f208a2aa6dae03a77dfe830a10a95c2085030..95a516da22e02b9a4167ee4a52bf2cd0a1b4aec6 100644
--- a/_shared/icons/ArrowLeftIcon.d.ts
+++ b/_shared/icons/ArrowLeftIcon.d.ts
@@ -1,3 +1,3 @@
import React from 'react';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
-export declare const ArrowLeftIcon: React.SFC<SvgIconProps>;
+export declare const ArrowLeftIcon: React.FC<SvgIconProps>;
diff --git a/_shared/icons/ArrowRightIcon.d.ts b/_shared/icons/ArrowRightIcon.d.ts
index 71443a34f7bbd2cef8c2af487c817b7ea788dd7a..a96314aa8750180773f1d006ed766e5a7e8e071d 100644
--- a/_shared/icons/ArrowRightIcon.d.ts
+++ b/_shared/icons/ArrowRightIcon.d.ts
@@ -1,3 +1,3 @@
import React from 'react';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
-export declare const ArrowRightIcon: React.SFC<SvgIconProps>;
+export declare const ArrowRightIcon: React.FC<SvgIconProps>;
diff --git a/_shared/icons/DateRangeIcon.d.ts b/_shared/icons/DateRangeIcon.d.ts
index 722f8736d86f248d464c5af855795663d9e220d3..6018043d41861d96335f060ea1dc78336892ce66 100644
--- a/_shared/icons/DateRangeIcon.d.ts
+++ b/_shared/icons/DateRangeIcon.d.ts
@@ -1,3 +1,3 @@
import React from 'react';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
-export declare const DateRangeIcon: React.SFC<SvgIconProps>;
+export declare const DateRangeIcon: React.FC<SvgIconProps>;
diff --git a/_shared/icons/KeyboardIcon.d.ts b/_shared/icons/KeyboardIcon.d.ts
index c1a0a111d831acc58cf19aa6d54f8324e68de9d8..8d7d1dac47815cef02215c4f11f36e73509b4219 100644
--- a/_shared/icons/KeyboardIcon.d.ts
+++ b/_shared/icons/KeyboardIcon.d.ts
@@ -1,3 +1,3 @@
import React from 'react';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
-export declare const KeyboardIcon: React.SFC<SvgIconProps>;
+export declare const KeyboardIcon: React.FC<SvgIconProps>;
diff --git a/_shared/icons/TimeIcon.d.ts b/_shared/icons/TimeIcon.d.ts
index 49e0b627132f7d31d1b0a205548229a9f7a2c0a6..15ebc6e630992edb3b01790c0dd651651adf51de 100644
--- a/_shared/icons/TimeIcon.d.ts
+++ b/_shared/icons/TimeIcon.d.ts
@@ -1,3 +1,3 @@
import React from 'react';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
-export declare const TimeIcon: React.SFC<SvgIconProps>;
+export declare const TimeIcon: React.FC<SvgIconProps>;
diff --git a/views/Calendar/CalendarHeader.d.ts b/views/Calendar/CalendarHeader.d.ts
index 842cbd8e021eb6d8e6553ba68033f13140485b61..7f60b4bffce1a96ade02e2671fd705c8fe87dfa2 100644
--- a/views/Calendar/CalendarHeader.d.ts
+++ b/views/Calendar/CalendarHeader.d.ts
@@ -15,5 +15,5 @@ export interface CalendarHeaderProps {
onMonthChange: (date: MaterialUiPickersDate, direction: SlideDirection) => void | Promise<void>;
}
export declare const useStyles: (props?: any) => Record<"transitionContainer" | "switchHeader" | "iconButton" | "daysHeader" | "dayLabel", string>;
-export declare const CalendarHeader: React.SFC<CalendarHeaderProps>;
+export declare const CalendarHeader: React.FC<CalendarHeaderProps>;
export default CalendarHeader;
diff --git a/views/Calendar/SlideTransition.d.ts b/views/Calendar/SlideTransition.d.ts
index f00e98a72bd0e6cfd80ab45b33b905e802b60e9b..699119009fa5ea886e7f782425aee39b7608b8c2 100644
--- a/views/Calendar/SlideTransition.d.ts
+++ b/views/Calendar/SlideTransition.d.ts
@@ -7,5 +7,5 @@ interface SlideTransitionProps {
children: React.ReactChild;
}
export declare const useStyles: (props?: any) => Record<"transitionContainer" | "slideEnter-left" | "slideEnter-right" | "slideEnterActive" | "slideExit" | "slideExitActiveLeft-left" | "slideExitActiveLeft-right", string>;
-declare const SlideTransition: React.SFC<SlideTransitionProps>;
+declare const SlideTransition: React.FC<SlideTransitionProps>;
export default SlideTransition;
package.json
+5 -3
View File
@@ -47,10 +47,12 @@
]
},
"resolutions": {
"@types/react": "^17",
"@types/react-dom": "^17",
"@types/react": "^18",
"@types/react-dom": "^18",
"jest-haste-map@^29.4.3": "patch:jest-haste-map@npm%3A29.4.3#./.yarn/patches/jest-haste-map-npm-29.4.3-19b03fcef3.patch",
"mock-fs@^5.2.0": "patch:mock-fs@npm%3A5.2.0#./.yarn/patches/mock-fs-npm-5.2.0-5103a7b507.patch"
"mock-fs@^5.2.0": "patch:mock-fs@npm%3A5.2.0#./.yarn/patches/mock-fs-npm-5.2.0-5103a7b507.patch",
"@material-ui/pickers@^3.3.10": "patch:@material-ui/pickers@npm%3A3.3.11#./.yarn/patches/@material-ui-pickers-npm-3.3.11-1c8f68ea20.patch",
"@material-ui/pickers@^3.2.10": "patch:@material-ui/pickers@npm%3A3.3.11#./.yarn/patches/@material-ui-pickers-npm-3.3.11-1c8f68ea20.patch"
},
"version": "1.19.0",
"dependencies": {
packages/app-defaults/package.json
+3 -3
View File
@@ -42,15 +42,15 @@
"@material-ui/icons": "^4.9.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
"@backstage/test-utils": "workspace:^",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@types/react": "^16.13.1 || ^17.0.0"
},
"files": [
packages/app-next-example-plugin/package.json
+2 -2
View File
@@ -39,8 +39,8 @@
"@material-ui/icons": "^4.9.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
packages/app-next/package.json
+3 -3
View File
@@ -89,8 +89,8 @@
"app-next-example-plugin": "workspace:^",
"history": "^5.0.0",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-use": "^17.2.4",
@@ -100,7 +100,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/jquery": "^3.3.34",
"@types/react": "*",
packages/app-next/src/index.tsx
+2 -2
View File
@@ -15,7 +15,7 @@
*/
import '@backstage/cli/asset-types';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import app from './App';
ReactDOM.render(app, document.getElementById('root'));
ReactDOM.createRoot(document.getElementById('root')!).render(app);
packages/app/package.json
+3 -3
View File
@@ -94,8 +94,8 @@
"@roadiehq/backstage-plugin-github-pull-requests": "^2.2.7",
"@roadiehq/backstage-plugin-travis-ci": "^2.0.5",
"history": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-use": "^17.2.4",
@@ -106,7 +106,7 @@
"@playwright/test": "^1.32.3",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/jquery": "^3.3.34",
"@types/react": "*",
packages/app/src/index.tsx
+2 -2
View File
@@ -16,7 +16,7 @@
import '@backstage/cli/asset-types';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
packages/core-app-api/package.json
+3 -3
View File
@@ -57,8 +57,8 @@
"zod": "^3.21.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -66,7 +66,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/zen-observable": "^0.8.0",
packages/core-app-api/src/apis/system/ApiProvider.test.tsx
+16
View File
@@ -118,6 +118,10 @@ describe('ApiProvider', () => {
}).toThrow(/^API context is not available/);
}).error,
).toEqual([
expect.objectContaining({
detail: new Error('API context is not available'),
type: 'unhandled exception',
}),
expect.objectContaining({
detail: new Error('API context is not available'),
type: 'unhandled exception',
@@ -134,6 +138,10 @@ describe('ApiProvider', () => {
}).toThrow(/^API context is not available/);
}).error,
).toEqual([
expect.objectContaining({
detail: new Error('API context is not available'),
type: 'unhandled exception',
}),
expect.objectContaining({
detail: new Error('API context is not available'),
type: 'unhandled exception',
@@ -156,6 +164,10 @@ describe('ApiProvider', () => {
}).toThrow('No implementation available for apiRef{x}');
}).error,
).toEqual([
expect.objectContaining({
detail: new Error('No implementation available for apiRef{x}'),
type: 'unhandled exception',
}),
expect.objectContaining({
detail: new Error('No implementation available for apiRef{x}'),
type: 'unhandled exception',
@@ -176,6 +188,10 @@ describe('ApiProvider', () => {
}).toThrow('No implementation available for apiRef{x}');
}).error,
).toEqual([
expect.objectContaining({
detail: new Error('No implementation available for apiRef{x}'),
type: 'unhandled exception',
}),
expect.objectContaining({
detail: new Error('No implementation available for apiRef{x}'),
type: 'unhandled exception',
packages/core-app-api/src/app/AppContext.test.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { useVersionedContext } from '@backstage/version-bridge';
import { AppContext as AppContextV1 } from './types';
import { AppContextProvider } from './AppContext';
packages/core-app-api/src/app/AppManager.test.tsx
+28 -32
View File
@@ -639,26 +639,24 @@ describe('Integration Test', () => {
const Provider = app.getProvider();
const Router = app.getRouter();
const { error: errorLogs } = withLogCollector(() => {
expect(() =>
render(
<Provider>
<Router>
<Routes>
<Route path="/test/:thing" element={<ExposedComponent />}>
<Route path="/some/:thing" element={<HiddenComponent />} />
</Route>
</Routes>
</Router>
</Provider>,
),
).toThrow(
'Parameter :thing is duplicated in path test/:thing/some/:thing',
render(
<Provider>
<Router>
<Routes>
<Route path="/test/:thing" element={<ExposedComponent />}>
<Route path="/some/:thing" element={<HiddenComponent />} />
</Route>
</Routes>
</Router>
</Provider>,
);
});
expect(errorLogs).toEqual([
expect.stringContaining(
'The above error occurred in the <Provider> component',
),
expect.objectContaining({
message: expect.stringContaining(
'Parameter :thing is duplicated in path test/:thing/some/:thing',
),
}),
]);
});
@@ -676,24 +674,22 @@ describe('Integration Test', () => {
const Provider = app.getProvider();
const Router = app.getRouter();
const { error: errorLogs } = withLogCollector(() => {
expect(() =>
render(
<Provider>
<Router>
<Routes>
<Route path="/test/:thing" element={<ExposedComponent />} />
</Routes>
</Router>
</Provider>,
),
).toThrow(
/^External route 'extRouteRef1' of the 'blob' plugin must be bound to a target route/,
render(
<Provider>
<Router>
<Routes>
<Route path="/test/:thing" element={<ExposedComponent />} />
</Routes>
</Router>
</Provider>,
);
});
expect(errorLogs).toEqual([
expect.stringContaining(
'The above error occurred in the <Provider> component',
),
expect.objectContaining({
message: expect.stringMatching(
/^External route 'extRouteRef1' of the 'blob' plugin must be bound to a target route/,
),
}),
]);
});
packages/core-app-api/src/routing/FlatRoutes.beta.test.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ function makeRouteRenderer(node: ReactNode) {
);
if (rendered) {
rendered.unmount();
rendered.rerender(content);
rendered = render(content);
} else {
rendered = render(content);
}
packages/core-app-api/src/routing/FlatRoutes.compat.test.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ describe.each(['beta', 'stable'])('FlatRoutes %s', rrVersion => {
);
if (rendered) {
rendered.unmount();
rendered.rerender(content);
rendered = render(content);
} else {
rendered = render(content);
}
packages/core-app-api/src/routing/FlatRoutes.stable.test.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ function makeRouteRenderer(node: ReactNode) {
);
if (rendered) {
rendered.unmount();
rendered.rerender(content);
rendered = render(content);
} else {
rendered = render(content);
}
packages/core-app-api/src/routing/RoutingProvider.beta.test.tsx
+2 -4
View File
@@ -17,7 +17,7 @@
import React, { PropsWithChildren, ReactElement } from 'react';
import { MemoryRouter, Routes } from 'react-router-dom';
import { render } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { useVersionedContext } from '@backstage/version-bridge';
import {
childDiscoverer,
@@ -353,9 +353,7 @@ describe('v1 consumer', () => {
initialProps: {
routeRef: routeRef1 as AnyRouteRef,
},
wrapper: ({
children,
}: React.PropsWithChildren<{ routeRef: AnyRouteRef }>) => (
wrapper: ({ children }) => (
<RoutingProvider
routePaths={
new Map<RouteRef<any>, string>([
packages/core-app-api/src/routing/RoutingProvider.stable.test.tsx
+2 -4
View File
@@ -17,7 +17,7 @@
import React, { PropsWithChildren, ReactElement } from 'react';
import { MemoryRouter, Routes, Route, useOutlet } from 'react-router-dom';
import { render } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { useVersionedContext } from '@backstage/version-bridge';
import {
childDiscoverer,
@@ -385,9 +385,7 @@ describe('v1 consumer', () => {
initialProps: {
routeRef: routeRef1 as AnyRouteRef,
},
wrapper: ({
children,
}: React.PropsWithChildren<{ routeRef: AnyRouteRef }>) => (
wrapper: ({ children }) => (
<RoutingProvider
routePaths={
new Map<RouteRef<any>, string>([
packages/core-components/package.json
+3 -4
View File
@@ -78,8 +78,8 @@
"zod": "^3.21.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -88,8 +88,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/ansi-regex": "^5.0.0",
"@types/classnames": "^2.2.9",
packages/core-components/src/components/AutoLogout/disconnectedUsers.test.ts
+1 -1
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import {
packages/core-components/src/components/Link/Link.test.tsx
+3 -4
View File
@@ -14,8 +14,8 @@
* limitations under the License.
*/
import React from 'react';
import { fireEvent, waitFor, screen } from '@testing-library/react';
import React, { ComponentType } from 'react';
import { fireEvent, waitFor, screen, renderHook } from '@testing-library/react';
import {
MockAnalyticsApi,
TestApiProvider,
@@ -24,7 +24,6 @@ import {
import { analyticsApiRef, configApiRef } from '@backstage/core-plugin-api';
import { isExternalUri, Link, useResolvedPath } from './Link';
import { Route, Routes } from 'react-router-dom';
import { renderHook, WrapperComponent } from '@testing-library/react-hooks';
import { ConfigReader } from '@backstage/config';
describe('<Link />', () => {
@@ -128,7 +127,7 @@ describe('<Link />', () => {
});
describe('useResolvedPath', () => {
const wrapper: WrapperComponent<React.PropsWithChildren<{}>> = ({
const wrapper: ComponentType<React.PropsWithChildren<{}>> = ({
children,
}) => {
const configApi = new ConfigReader({
packages/core-components/src/components/LogViewer/useLogViewerSearch.test.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { act, renderHook } from '@testing-library/react-hooks';
import { act, renderHook } from '@testing-library/react';
import { applySearchFilter, useLogViewerSearch } from './useLogViewerSearch';
import { AnsiLine } from './AnsiProcessor';
packages/core-components/src/components/LogViewer/useLogViewerSelection.test.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { act, renderHook } from '@testing-library/react-hooks';
import { act, renderHook } from '@testing-library/react';
import { TestApiProvider, MockErrorApi } from '@backstage/test-utils';
import { errorApiRef } from '@backstage/core-plugin-api';
import { AnsiLine } from './AnsiProcessor';
packages/core-components/src/components/TabbedLayout/TabbedLayout.test.tsx
+5
View File
@@ -48,6 +48,11 @@ describe('TabbedLayout', () => {
});
expect(error).toEqual([
expect.objectContaining({
detail: new Error(
'Child of TabbedLayout must be an TabbedLayout.Route',
),
}),
expect.objectContaining({
detail: new Error(
'Child of TabbedLayout must be an TabbedLayout.Route',
packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx
+4 -1
View File
@@ -67,6 +67,9 @@ describe('<ErrorBoundary/>', () => {
});
expect(error).toEqual([
expect.objectContaining({
detail: new Error('Bomb'),
}),
expect.objectContaining({
detail: new Error('Bomb'),
}),
@@ -75,6 +78,6 @@ describe('<ErrorBoundary/>', () => {
),
expect.stringMatching(/^ErrorBoundary/),
]);
expect(error.length).toEqual(3);
expect(error.length).toEqual(4);
});
});
packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx
+2 -1
View File
@@ -19,6 +19,7 @@ import Badge from '@material-ui/core/Badge';
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import { HeaderTabs } from './HeaderTabs';
import userEvent from '@testing-library/user-event';
const mockTabs = [
{ id: 'overview', label: 'Overview' },
@@ -41,7 +42,7 @@ describe('<HeaderTabs />', () => {
'false',
);
rendered.getByText('Docs').click();
await userEvent.click(rendered.getByText('Docs'));
expect(rendered.getByText('Docs').parentElement).toHaveAttribute(
'aria-selected',
packages/core-components/src/layout/Sidebar/Items.test.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ import HomeIcon from '@material-ui/icons/Home';
import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
import { Sidebar } from './Bar';
import { SidebarItem, SidebarSearchField, SidebarExpandButton } from './Items';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { makeStyles } from '@material-ui/core/styles';
import { analyticsApiRef } from '@backstage/core-plugin-api';
packages/core-components/src/layout/Sidebar/SidebarOpenStateContext.test.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import React, { ReactNode, useContext } from 'react';
import { renderWithEffects } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import { renderHook, act } from '@testing-library/react-hooks';
import { renderHook, act } from '@testing-library/react';
import {
LegacySidebarContext,
SidebarOpenStateProvider,
packages/core-components/src/layout/Sidebar/SidebarPinStateContext.test.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import React, { ReactNode, useContext } from 'react';
import { renderWithEffects } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import { renderHook, act } from '@testing-library/react-hooks';
import { renderHook, act } from '@testing-library/react';
import {
LegacySidebarPinStateContext,
SidebarPinStateProvider,
packages/core-plugin-api/package.json
+3 -4
View File
@@ -54,8 +54,8 @@
"i18next": "^22.4.15"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -64,8 +64,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0"
},
"files": [
packages/core-plugin-api/src/analytics/AnalyticsContext.test.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { AnalyticsContext, useAnalyticsContext } from './AnalyticsContext';
const AnalyticsSpy = () => {
packages/core-plugin-api/src/analytics/useAnalytics.test.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { useAnalytics } from './useAnalytics';
import { useApi } from '../apis';
packages/core-plugin-api/src/apis/system/useApi.test.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { createVersionedContextForTesting } from '@backstage/version-bridge';
import { createApiRef } from './ApiRef';
import { useApi } from './useApi';
packages/core-plugin-api/src/app/useApp.test.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { createVersionedContextForTesting } from '@backstage/version-bridge';
import { useApp } from './useApp';
packages/core-plugin-api/src/extensions/useElementFilter.test.tsx
+18 -18
View File
@@ -15,7 +15,7 @@
*/
import React, { ReactNode } from 'react';
import { useElementFilter } from './useElementFilter';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { attachComponentData } from './componentData';
import { featureFlagsApiRef } from '../apis';
import { LocalStorageFeatureFlags } from '@backstage/core-app-api';
@@ -316,23 +316,23 @@ describe('useElementFilter', () => {
</MockComponent>
);
const { result } = renderHook(
props =>
useElementFilter(props.tree, elements =>
elements
.selectByComponentData({
key: WRAPPING_COMPONENT_KEY,
withStrictError: 'Could not find component',
})
.findComponentData({ key: INNER_COMPONENT_KEY }),
),
{
initialProps: { tree },
wrapper: Wrapper,
},
);
expect(result.error?.message).toEqual('Could not find component');
expect(() =>
renderHook(
props =>
useElementFilter(props.tree, elements =>
elements
.selectByComponentData({
key: WRAPPING_COMPONENT_KEY,
withStrictError: 'Could not find component',
})
.findComponentData({ key: INNER_COMPONENT_KEY }),
),
{
initialProps: { tree },
wrapper: Wrapper,
},
),
).toThrow('Could not find component');
});
it('should support fragments and text node iteration', () => {
packages/core-plugin-api/src/routing/useRouteRef.test.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import React from 'react';
import { MemoryRouter, Router } from 'react-router-dom';
import { createVersionedContextForTesting } from '@backstage/version-bridge';
packages/core-plugin-api/src/translation/useTranslationRef.test.tsx
+31 -39
View File
@@ -20,7 +20,7 @@ import {
TestApiProvider,
withLogCollector,
} from '@backstage/test-utils';
import { renderHook } from '@testing-library/react-hooks';
import { act, renderHook, waitFor } from '@testing-library/react';
import { createTranslationRef, TranslationRef } from './TranslationRef';
import { useTranslationRef } from './useTranslationRef';
// eslint-disable-next-line @backstage/no-relative-monorepo-imports
@@ -91,19 +91,15 @@ describe('useTranslationRef', () => {
],
});
const { result, waitForNextUpdate } = renderHook(
() => useTranslationRef(plainRef),
{
wrapper: makeWrapper(translationApi),
},
);
const { result } = renderHook(() => useTranslationRef(plainRef), {
wrapper: makeWrapper(translationApi),
});
await waitForNextUpdate();
const { t } = result.current;
expect(t('key1')).toBe('en1');
expect(t('key2')).toBe('en2');
await waitFor(() => {
const { t } = result.current;
expect(t('key1')).toBe('en1');
expect(t('key2')).toBe('en2');
});
});
it('should switch between languages', async () => {
@@ -123,26 +119,25 @@ describe('useTranslationRef', () => {
],
});
const { result, waitForNextUpdate } = renderHook(
() => useTranslationRef(plainRef),
{
wrapper: makeWrapper(translationApi),
},
);
const { result } = renderHook(() => useTranslationRef(plainRef), {
wrapper: makeWrapper(translationApi),
});
const { t } = result.current;
await waitFor(() => {
const { t } = result.current;
expect(t('key1')).toBe('default1');
expect(t('key2')).toBe('default2');
expect(t('key1')).toBe('default1');
expect(t('key2')).toBe('default2');
});
languageApi.setLanguage('de');
await waitForNextUpdate();
await waitFor(() => {
const { t: t2 } = result.current;
const { t: t2 } = result.current;
expect(t2('key1')).toBe('de1');
expect(t2('key2')).toBe('de2');
expect(t2('key1')).toBe('de1');
expect(t2('key2')).toBe('de2');
});
});
it('should load default resource', async () => {
@@ -165,19 +160,16 @@ describe('useTranslationRef', () => {
languageApi,
});
const { result, waitForNextUpdate } = renderHook(
() => useTranslationRef(resourceRef),
{
wrapper: makeWrapper(translationApi),
},
);
const { result } = renderHook(() => useTranslationRef(resourceRef), {
wrapper: makeWrapper(translationApi),
});
await waitForNextUpdate();
await waitFor(() => {
const { t } = result.current;
const { t } = result.current;
expect(t('key1')).toBe('de1');
expect(t('key2')).toBe('de2');
expect(t('key1')).toBe('de1');
expect(t('key2')).toBe('de2');
});
});
it('should log once and then ignore loading errors', async () => {
@@ -212,7 +204,7 @@ describe('useTranslationRef', () => {
});
const { error } = await withLogCollector(['error'], async () => {
await rendered2.waitForNextUpdate();
await act(rendered2.rerender);
});
const msg =
packages/dev-utils/package.json
+1 -1
View File
@@ -56,7 +56,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"zen-observable": "^0.10.0"
},
packages/dev-utils/src/devApp/render.tsx
+1 -4
View File
@@ -49,10 +49,7 @@ import { createRoutesFromChildren, Route } from 'react-router-dom';
import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
import 'react-dom';
let ReactDOM:
| typeof import('react-dom')
// TODO: replace with import('react-dom/client') when repo is migrated to 18
| { createRoot(el: HTMLElement): { render(el: JSX.Element): void } };
let ReactDOM: typeof import('react-dom') | typeof import('react-dom/client');
if (process.env.HAS_REACT_DOM_CLIENT) {
ReactDOM = require('react-dom/client');
} else {
packages/frontend-app-api/package.json
+2 -2
View File
@@ -26,7 +26,7 @@
"@backstage/cli": "workspace:^",
"@backstage/test-utils": "workspace:^",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3"
"@testing-library/react": "^14.0.0"
},
"configSchema": "config.d.ts",
"files": [
@@ -49,7 +49,7 @@
"lodash": "^4.17.21"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
}
}
packages/frontend-app-api/src/routing/RouteResolver.test.ts
+1 -2
View File
@@ -26,9 +26,8 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
import { RouteResolver } from './RouteResolver';
import { MATCH_ALL_ROUTE } from './extractRouteInfoFromInstanceTree';
const element = () => null;
const rest = {
element,
element: null,
caseSensitive: false,
children: [MATCH_ALL_ROUTE],
plugins: new Set<BackstagePlugin>(),
packages/frontend-plugin-api/package.json
+2 -3
View File
@@ -27,15 +27,14 @@
"@backstage/frontend-app-api": "workspace:^",
"@backstage/test-utils": "workspace:^",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/react": "^14.0.0",
"history": "^5.3.0"
},
"files": [
"dist"
],
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"dependencies": {
packages/frontend-plugin-api/src/routing/useRouteRef.test.tsx
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import React from 'react';
import { MemoryRouter, Router } from 'react-router-dom';
import { createVersionedContextForTesting } from '@backstage/version-bridge';
packages/integration-react/package.json
+2 -2
View File
@@ -38,8 +38,8 @@
"@types/react": "^16.13.1 || ^17.0.0"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
packages/techdocs-cli-embedded-app/package.json
+3 -3
View File
@@ -29,8 +29,8 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"history": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.2",
"react-dom": "^18.0.2",
"react-router-dom": "^6.3.0",
"react-use": "^17.2.4"
},
@@ -38,7 +38,7 @@
"@backstage/cli": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/react": "*",
"@types/react-dom": "*",
packages/techdocs-cli-embedded-app/src/index.tsx
+2 -2
View File
@@ -16,7 +16,7 @@
import '@backstage/cli/asset-types';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
packages/test-utils/src/testUtils/appWrappers.test.tsx
+5
View File
@@ -92,6 +92,11 @@ describe('wrapInTestApp', () => {
});
expect(error).toEqual([
expect.objectContaining({
detail: new Error(
'MockErrorApi received unexpected error, Error: NOPE',
),
}),
expect.objectContaining({
detail: new Error(
'MockErrorApi received unexpected error, Error: NOPE',
packages/theme/package.json
+2 -2
View File
@@ -40,8 +40,8 @@
"peerDependencies": {
"@material-ui/core": "^4.12.2",
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
packages/version-bridge/package.json
+3 -4
View File
@@ -36,15 +36,14 @@
"@types/react": "^16.13.1 || ^17.0.0"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react-hooks": "^8.0.0"
"@testing-library/react": "^14.0.0"
},
"files": [
"dist"
packages/version-bridge/src/lib/VersionedContext.test.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import React, { useContext } from 'react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import {
createVersionedContext,
createVersionedContextForTesting,
plugins/adr/package.json
+3 -3
View File
@@ -62,8 +62,8 @@
"remark-gfm": "^3.0.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -73,7 +73,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/git-url-parse": "^9.0.0",
"cross-fetch": "^3.1.5",
plugins/airbrake/package.json
+3 -3
View File
@@ -43,8 +43,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -54,7 +54,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/allure/package.json
+3 -3
View File
@@ -42,8 +42,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -53,7 +53,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/analytics-module-ga/package.json
+3 -3
View File
@@ -40,8 +40,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -51,7 +51,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/react": "^16.13.1 || ^17.0.0",
"msw": "^1.0.0"
plugins/analytics-module-ga4/package.json
+3 -3
View File
@@ -37,8 +37,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -48,7 +48,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/jest": "^28.1.3",
"@types/react": "^16.13.1 || ^17.0.0",
plugins/analytics-module-newrelic-browser/package.json
+2 -2
View File
@@ -30,7 +30,7 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
},
"devDependencies": {
"@backstage/cli": "workspace:^",
@@ -38,7 +38,7 @@
"@backstage/dev-utils": "workspace:^",
"@backstage/test-utils": "workspace:^",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/apache-airflow/package.json
+3 -3
View File
@@ -40,8 +40,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -51,7 +51,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/api-docs-module-protoc-gen-doc/package.json
+2 -2
View File
@@ -36,8 +36,8 @@
"grpc-docs": "^1.1.2"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
plugins/api-docs/package.json
+3 -3
View File
@@ -52,8 +52,8 @@
"swagger-ui-react": "^5.0.0"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -63,7 +63,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/swagger-ui-react": "^4.18.0",
"cross-fetch": "^3.1.5",
plugins/apollo-explorer/package.json
+3 -3
View File
@@ -40,8 +40,8 @@
"use-deep-compare-effect": "^1.8.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -51,7 +51,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/azure-devops/package.json
+3 -3
View File
@@ -45,8 +45,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -56,7 +56,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/azure-sites/package.json
+3 -3
View File
@@ -47,8 +47,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -58,7 +58,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/badges/package.json
+2 -2
View File
@@ -43,8 +43,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
plugins/bazaar/package.json
+2 -2
View File
@@ -51,8 +51,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
plugins/bitrise/package.json
+3 -3
View File
@@ -46,8 +46,8 @@
"recharts": "^2.5.0"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -57,7 +57,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/recharts": "^1.8.15",
"msw": "^1.0.0"
plugins/bitrise/src/components/BitriseBuildDetailsDialog/BitriseBuildDetailsDialog.test.tsx
+2 -1
View File
@@ -18,6 +18,7 @@ import React from 'react';
import { render } from '@testing-library/react';
import { BitriseBuildDetailsDialog } from './BitriseBuildDetailsDialog';
import { BitriseBuildResult } from '../../api/bitriseApi.model';
import userEvent from '@testing-library/user-event';
jest.mock('../BitriseArtifactsComponent', () => ({
BitriseArtifactsComponent: (_props: { build: string }) => <>VISIBLE</>,
@@ -48,7 +49,7 @@ describe('BitriseArtifactsComponent', () => {
expect(rendered.queryByText('VISIBLE')).not.toBeInTheDocument();
btn.click();
await userEvent.click(btn);
expect(rendered.getByText('VISIBLE')).toBeInTheDocument();
});
plugins/catalog-graph/package.json
+3 -4
View File
@@ -47,8 +47,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -59,8 +59,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0"
},
"files": [
plugins/catalog-graph/src/components/CatalogGraphPage/useCatalogGraphPage.test.ts
+1 -1
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { RELATION_MEMBER_OF } from '@backstage/catalog-model';
import { act, renderHook } from '@testing-library/react-hooks';
import { act, renderHook } from '@testing-library/react';
import { useLocation as useLocationMocked } from 'react-router-dom';
import { Direction } from '../EntityRelationsGraph';
import { useCatalogGraphPage } from './useCatalogGraphPage';
plugins/catalog-graph/src/components/EntityRelationsGraph/useEntityRelationGraph.test.ts
+1 -1
View File
@@ -19,7 +19,7 @@ import {
RELATION_OWNER_OF,
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { pick } from 'lodash';
import { useEntityRelationGraph } from './useEntityRelationGraph';
import { useEntityStore as useEntityStoreMocked } from './useEntityStore';
plugins/catalog-graph/src/components/EntityRelationsGraph/useEntityRelationNodesAndEdges.test.ts
+29 -29
View File
@@ -21,7 +21,7 @@ import {
RELATION_PART_OF,
stringifyEntityRef,
} from '@backstage/catalog-model';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook, waitFor } from '@testing-library/react';
import { filter, keyBy } from 'lodash';
import { useEntityRelationGraph as useEntityRelationGraphMocked } from './useEntityRelationGraph';
import { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';
@@ -163,7 +163,7 @@ describe('useEntityRelationNodesAndEdges', () => {
});
test('should generate unidirectional graph with merged relations', async () => {
const { result, waitForValueToChange } = renderHook(() =>
const { result } = renderHook(() =>
useEntityRelationNodesAndEdges({
rootEntityRefs: ['b:d/c'],
unidirectional: true,
@@ -171,9 +171,9 @@ describe('useEntityRelationNodesAndEdges', () => {
}),
);
await waitForValueToChange(
() => result.current.nodes && result.current.edges,
);
await waitFor(() => {
expect(result.current.nodes && result.current.edges).toBeDefined();
});
const { nodes, edges, loading, error } = result.current;
@@ -236,7 +236,7 @@ describe('useEntityRelationNodesAndEdges', () => {
});
test('should generate unidirectional graph', async () => {
const { result, waitForValueToChange } = renderHook(() =>
const { result } = renderHook(() =>
useEntityRelationNodesAndEdges({
rootEntityRefs: ['b:d/c'],
unidirectional: true,
@@ -244,9 +244,9 @@ describe('useEntityRelationNodesAndEdges', () => {
}),
);
await waitForValueToChange(
() => result.current.nodes && result.current.edges,
);
await waitFor(() => {
expect(result.current.nodes && result.current.edges).toBeDefined();
});
const { nodes, edges, loading, error } = result.current;
@@ -309,7 +309,7 @@ describe('useEntityRelationNodesAndEdges', () => {
});
test('should generate bidirectional graph with merged relations', async () => {
const { result, waitForValueToChange } = renderHook(() =>
const { result } = renderHook(() =>
useEntityRelationNodesAndEdges({
rootEntityRefs: ['b:d/c'],
unidirectional: false,
@@ -317,9 +317,9 @@ describe('useEntityRelationNodesAndEdges', () => {
}),
);
await waitForValueToChange(
() => result.current.nodes && result.current.edges,
);
await waitFor(() => {
expect(result.current.nodes && result.current.edges).toBeDefined();
});
const { nodes, edges, loading, error } = result.current;
@@ -412,7 +412,7 @@ describe('useEntityRelationNodesAndEdges', () => {
});
test('should generate bidirectional graph with all relations', async () => {
const { result, waitForValueToChange } = renderHook(() =>
const { result } = renderHook(() =>
useEntityRelationNodesAndEdges({
rootEntityRefs: ['b:d/c'],
unidirectional: false,
@@ -420,9 +420,9 @@ describe('useEntityRelationNodesAndEdges', () => {
}),
);
await waitForValueToChange(
() => result.current.nodes && result.current.edges,
);
await waitFor(() => {
expect(result.current.nodes && result.current.edges).toBeDefined();
});
const { nodes, edges, loading, error } = result.current;
@@ -515,15 +515,15 @@ describe('useEntityRelationNodesAndEdges', () => {
});
test('should generate graph with multiple root nodes', async () => {
const { result, waitForValueToChange } = renderHook(() =>
const { result } = renderHook(() =>
useEntityRelationNodesAndEdges({
rootEntityRefs: ['b:d/c', 'b:d/c2'],
}),
);
await waitForValueToChange(
() => result.current.nodes && result.current.edges,
);
await waitFor(() => {
expect(result.current.nodes && result.current.edges).toBeDefined();
});
const { nodes, edges, loading, error } = result.current;
@@ -586,16 +586,16 @@ describe('useEntityRelationNodesAndEdges', () => {
});
test('should filter by relation', async () => {
const { result, waitForValueToChange } = renderHook(() =>
const { result } = renderHook(() =>
useEntityRelationNodesAndEdges({
rootEntityRefs: ['b:d/c'],
relations: [RELATION_OWNER_OF],
}),
);
await waitForValueToChange(
() => result.current.nodes && result.current.edges,
);
await waitFor(() => {
expect(result.current.nodes && result.current.edges).toBeDefined();
});
const { nodes, edges, loading, error } = result.current;
@@ -646,16 +646,16 @@ describe('useEntityRelationNodesAndEdges', () => {
});
test('should filter by kind', async () => {
const { result, waitForValueToChange } = renderHook(() =>
const { result } = renderHook(() =>
useEntityRelationNodesAndEdges({
rootEntityRefs: ['b:d/c'],
kinds: ['b'],
}),
);
await waitForValueToChange(
() => result.current.nodes && result.current.edges,
);
await waitFor(() => {
expect(result.current.nodes && result.current.edges).toBeDefined();
});
const { nodes, edges, loading, error } = result.current;
plugins/catalog-graph/src/components/EntityRelationsGraph/useEntityStore.test.ts
+5 -5
View File
@@ -16,7 +16,7 @@
import { Entity } from '@backstage/catalog-model';
import { useApi as useApiMocked } from '@backstage/core-plugin-api';
import { act, renderHook } from '@testing-library/react-hooks';
import { act, renderHook, waitFor } from '@testing-library/react';
import { useEntityStore } from './useEntityStore';
jest.mock('@backstage/core-plugin-api');
@@ -65,7 +65,7 @@ describe('useEntityStore', () => {
catalogApi.getEntityByRef.mockResolvedValue(entity);
const { result, waitFor } = renderHook(() => useEntityStore());
const { result } = renderHook(() => useEntityStore());
act(() => {
result.current.requestEntities(['kind:namespace/name']);
@@ -85,7 +85,7 @@ describe('useEntityStore', () => {
const err = new Error('Hello World');
catalogApi.getEntityByRef.mockRejectedValue(err);
const { result, waitFor } = renderHook(() => useEntityStore());
const { result } = renderHook(() => useEntityStore());
act(() => {
result.current.requestEntities(['kind:namespace/name']);
@@ -134,7 +134,7 @@ describe('useEntityStore', () => {
catalogApi.getEntityByRef.mockResolvedValue(entity1);
const { result, waitFor } = renderHook(() => useEntityStore());
const { result } = renderHook(() => useEntityStore());
act(() => {
result.current.requestEntities(['kind:namespace/name1']);
@@ -189,7 +189,7 @@ describe('useEntityStore', () => {
catalogApi.getEntityByRef.mockResolvedValue(entity1);
const { result, waitFor } = renderHook(() => useEntityStore());
const { result } = renderHook(() => useEntityStore());
act(() => {
result.current.requestEntities(['kind:namespace/name1']);
plugins/catalog-graphql/package.json
+2 -2
View File
@@ -47,8 +47,8 @@
"winston": "^3.2.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
plugins/catalog-import/package.json
+3 -4
View File
@@ -56,8 +56,8 @@
"yaml": "^2.0.0"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -67,8 +67,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"msw": "^1.0.0"
},
plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ import { configApiRef } from '@backstage/core-plugin-api';
import { MockConfigApi, TestApiProvider } from '@backstage/test-utils';
import { makeStyles } from '@material-ui/core';
import { render, screen } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import React from 'react';
import { PreviewCatalogInfoComponent } from './PreviewCatalogInfoComponent';
plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewPullRequestComponent.test.tsx
+1 -1
View File
@@ -16,7 +16,7 @@
import { makeStyles } from '@material-ui/core';
import { render, screen } from '@testing-library/react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import React from 'react';
import { PreviewPullRequestComponent } from './PreviewPullRequestComponent';
plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.test.tsx
+94 -104
View File
@@ -18,7 +18,7 @@ import { configApiRef, errorApiRef } from '@backstage/core-plugin-api';
import { catalogApiRef } from '@backstage/plugin-catalog-react';
import { TestApiProvider, MockConfigApi } from '@backstage/test-utils';
import { TextField } from '@material-ui/core';
import { act, render, screen } from '@testing-library/react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { AnalyzeResult, catalogImportApiRef } from '../../api';
@@ -101,36 +101,34 @@ describe('<StepPrepareCreatePullRequest />', () => {
it('renders without exploding', async () => {
catalogApi.getEntities.mockReturnValue(Promise.resolve({ items: [] }));
await act(async () => {
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={({ register }) => {
return (
<>
<TextField {...asInputRef(register('title'))} />
<TextField {...asInputRef(register('body'))} />
<TextField {...asInputRef(register('componentName'))} />
<TextField {...asInputRef(register('owner'))} />
</>
);
}}
/>,
{
wrapper: Wrapper,
},
);
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={({ register }) => {
return (
<>
<TextField {...asInputRef(register('title'))} />
<TextField {...asInputRef(register('body'))} />
<TextField {...asInputRef(register('componentName'))} />
<TextField {...asInputRef(register('owner'))} />
</>
);
}}
/>,
{
wrapper: Wrapper,
},
);
const title = await screen.findByText('My title');
const description = await screen.findByText('body', {
selector: 'strong',
});
expect(title).toBeInTheDocument();
expect(title).toBeVisible();
expect(description).toBeInTheDocument();
expect(description).toBeVisible();
const title = await screen.findByText('My title');
const description = await screen.findByText('body', {
selector: 'strong',
});
expect(title).toBeInTheDocument();
expect(title).toBeVisible();
expect(description).toBeInTheDocument();
expect(description).toBeVisible();
});
it('should submit created PR', async () => {
@@ -142,39 +140,37 @@ describe('<StepPrepareCreatePullRequest />', () => {
}),
);
await act(async () => {
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={({ register }) => {
return (
<>
<TextField {...asInputRef(register('title'))} />
<TextField {...asInputRef(register('body'))} />
<TextField
{...asInputRef(register('componentName'))}
id="name"
label="name"
/>
<TextField
{...asInputRef(register('owner'))}
id="owner"
label="owner"
/>
</>
);
}}
/>,
{
wrapper: Wrapper,
},
);
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={({ register }) => {
return (
<>
<TextField {...asInputRef(register('title'))} />
<TextField {...asInputRef(register('body'))} />
<TextField
{...asInputRef(register('componentName'))}
id="name"
label="name"
/>
<TextField
{...asInputRef(register('owner'))}
id="owner"
label="owner"
/>
</>
);
}}
/>,
{
wrapper: Wrapper,
},
);
await userEvent.type(await screen.findByLabelText('name'), '-changed');
await userEvent.type(await screen.findByLabelText('owner'), '-changed');
await userEvent.click(screen.getByRole('button', { name: /Create PR/i }));
});
await userEvent.type(await screen.findByLabelText('name'), '-changed');
await userEvent.type(await screen.findByLabelText('owner'), '-changed');
await userEvent.click(screen.getByRole('button', { name: /Create PR/i }));
expect(catalogImportApi.submitPullRequest).toHaveBeenCalledTimes(1);
expect(catalogImportApi.submitPullRequest.mock.calls[0]).toMatchObject([
@@ -226,31 +222,29 @@ spec:
new Error('some error'),
);
await act(async () => {
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={({ register }) => {
return (
<>
<TextField {...asInputRef(register('title'))} />
<TextField {...asInputRef(register('body'))} />
<TextField {...asInputRef(register('componentName'))} />
<TextField {...asInputRef(register('owner'))} />
</>
);
}}
/>,
{
wrapper: Wrapper,
},
);
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={({ register }) => {
return (
<>
<TextField {...asInputRef(register('title'))} />
<TextField {...asInputRef(register('body'))} />
<TextField {...asInputRef(register('componentName'))} />
<TextField {...asInputRef(register('owner'))} />
</>
);
}}
/>,
{
wrapper: Wrapper,
},
);
await userEvent.click(
await screen.findByRole('button', { name: /Create PR/i }),
);
});
await userEvent.click(
await screen.findByRole('button', { name: /Create PR/i }),
);
expect(screen.getByText('some error')).toBeInTheDocument();
expect(catalogImportApi.submitPullRequest).toHaveBeenCalledTimes(1);
@@ -273,30 +267,26 @@ spec:
}),
);
await act(async () => {
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={renderFormFieldsFn}
/>,
{
wrapper: Wrapper,
},
);
render(
<StepPrepareCreatePullRequest
analyzeResult={analyzeResult}
onPrepare={onPrepareFn}
renderFormFields={renderFormFieldsFn}
/>,
{
wrapper: Wrapper,
},
);
await waitFor(() => {
expect(catalogApi.getEntities).toHaveBeenCalledTimes(1);
});
expect(catalogApi.getEntities).toHaveBeenCalledTimes(1);
expect(renderFormFieldsFn).toHaveBeenCalled();
expect(renderFormFieldsFn.mock.calls[0][0]).toMatchObject({
groups: [],
groupsLoading: true,
groups: ['my-group'],
groupsLoading: false,
});
expect(
renderFormFieldsFn.mock.calls[
renderFormFieldsFn.mock.calls.length - 1
][0],
).toMatchObject({ groups: ['my-group'], groupsLoading: false });
});
describe('generateEntities', () => {
plugins/catalog-import/src/components/useImportState.test.tsx
+1 -8
View File
@@ -16,7 +16,7 @@
import { Entity, CompoundEntityRef } from '@backstage/catalog-model';
import { cleanup } from '@testing-library/react';
import { act, renderHook } from '@testing-library/react-hooks';
import { act, renderHook } from '@testing-library/react';
import { AnalyzeResult } from '../api';
import {
@@ -73,7 +73,6 @@ describe('useImportState', () => {
describe('onAnalysis & onPrepare & onReview & onReset', () => {
it('should work', async () => {
const { result } = renderHook(() => useImportState());
await cleanup();
expect(result.current).toMatchObject({
activeFlow: 'unknown',
@@ -148,7 +147,6 @@ describe('useImportState', () => {
it('should work skipped', async () => {
const { result } = renderHook(() => useImportState());
await cleanup();
expect(result.current).toMatchObject({
activeFlow: 'unknown',
@@ -198,7 +196,6 @@ describe('useImportState', () => {
it('should ignore on invalid state', async () => {
const { result } = renderHook(() => useImportState());
await cleanup();
// state 'analyze'
act(() => {
@@ -264,7 +261,6 @@ describe('useImportState', () => {
describe('onGoBack', () => {
it('should work', async () => {
const { result } = renderHook(() => useImportState());
await cleanup();
expect(result.current.activeStepNumber).toBe(0);
expect(result.current.onGoBack).toBeUndefined();
@@ -303,7 +299,6 @@ describe('useImportState', () => {
it('should work for skipped', async () => {
const { result } = renderHook(() => useImportState());
await cleanup();
expect(result.current.activeStepNumber).toBe(0);
expect(result.current.onGoBack).toBeUndefined();
@@ -329,7 +324,6 @@ describe('useImportState', () => {
describe('should consider prepareNotRepeatable', () => {
it('as true', async () => {
const { result } = renderHook(() => useImportState());
await cleanup();
expect(result.current.onGoBack).toBeUndefined();
@@ -351,7 +345,6 @@ describe('useImportState', () => {
it('as false', async () => {
const { result } = renderHook(() => useImportState());
await cleanup();
expect(result.current.onGoBack).toBeUndefined();
plugins/catalog-react/package.json
+3 -4
View File
@@ -72,8 +72,8 @@
"zen-observable": "^0.10.0"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
@@ -84,8 +84,7 @@
"@backstage/test-utils": "workspace:^",
"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^12.1.3",
"@testing-library/react-hooks": "^8.0.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.0.0",
"@types/zen-observable": "^0.8.0",
"react-test-renderer": "^16.13.1"
plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx
+1 -3
View File
@@ -179,9 +179,7 @@ describe('<EntityAutocompletePicker/>', () => {
</TestApiProvider>,
);
await waitFor(() =>
expect(updateFilters).toHaveBeenLastCalledWith({
options: undefined,
}),
expect(screen.getByTestId('options-picker-expand')).toBeInTheDocument(),
);
fireEvent.click(screen.getByTestId('options-picker-expand'));
plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx
+16 -12
View File
@@ -74,9 +74,10 @@ describe('<EntityLifecyclePicker/>', () => {
</TestApiProvider>,
);
await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled());
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['experimental']),
await waitFor(() => {
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['experimental']),
});
});
});
@@ -119,9 +120,10 @@ describe('<EntityLifecyclePicker/>', () => {
</TestApiProvider>,
);
await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled());
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['production']),
await waitFor(() => {
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['production']),
});
});
fireEvent.click(screen.getByTestId('lifecycles-picker-expand'));
expect(screen.getByLabelText('production')).toBeChecked();
@@ -147,9 +149,10 @@ describe('<EntityLifecyclePicker/>', () => {
</TestApiProvider>,
);
await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled());
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['experimental']),
await waitFor(() => {
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['experimental']),
});
});
rendered.rerender(
@@ -210,9 +213,10 @@ describe('<EntityLifecyclePicker/>', () => {
</TestApiProvider>,
);
await waitFor(() => expect(catalogApi.getEntityFacets).toHaveBeenCalled());
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['production']),
await waitFor(() => {
expect(updateFilters).toHaveBeenLastCalledWith({
lifecycles: new EntityLifecycleFilter(['production']),
});
});
});
});
plugins/catalog-react/src/components/EntityNamespacePicker/EntityNamespacePicker.test.tsx
+1 -3
View File
@@ -113,9 +113,7 @@ describe('<EntityNamespacePicker/>', () => {
</TestApiProvider>,
);
await waitFor(() =>
expect(updateFilters).toHaveBeenLastCalledWith({
namespace: undefined,
}),
expect(screen.getByTestId('namespace-picker-expand')).toBeInTheDocument(),
);
fireEvent.click(screen.getByTestId('namespace-picker-expand'));
plugins/catalog-react/src/components/EntityOwnerPicker/useFacetsEntities.test.ts
+5 -13
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook, waitFor } from '@testing-library/react';
import { useFacetsEntities } from './useFacetsEntities';
import { CatalogApi } from '@backstage/catalog-client';
@@ -50,9 +50,7 @@ describe('useFacetsEntities', () => {
},
});
const { result, waitFor } = renderHook(() =>
useFacetsEntities({ enabled: true }),
);
const { result } = renderHook(() => useFacetsEntities({ enabled: true }));
result.current[1]({ text: '' });
await waitFor(() => {
@@ -91,9 +89,7 @@ describe('useFacetsEntities', () => {
},
});
const { result, waitFor } = renderHook(() =>
useFacetsEntities({ enabled: true }),
);
const { result } = renderHook(() => useFacetsEntities({ enabled: true }));
result.current[1]({ text: '' });
await waitFor(() => {
@@ -147,9 +143,7 @@ describe('useFacetsEntities', () => {
},
});
const { result, waitFor } = renderHook(() =>
useFacetsEntities({ enabled: true }),
);
const { result } = renderHook(() => useFacetsEntities({ enabled: true }));
result.current[1]({ text: '' }, { limit: 2 });
await waitFor(() => {
@@ -261,9 +255,7 @@ describe('useFacetsEntities', () => {
},
});
const { result, waitFor } = renderHook(() =>
useFacetsEntities({ enabled: true }),
);
const { result } = renderHook(() => useFacetsEntities({ enabled: true }));
result.current[1]({ text: 'der ' });
await waitFor(() => {
plugins/catalog-react/src/components/EntityOwnerPicker/useQueryEntities.test.ts
+2 -2
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { renderHook } from '@testing-library/react-hooks';
import { renderHook, waitFor } from '@testing-library/react';
import { CatalogApi } from '@backstage/catalog-client';
import { useQueryEntities } from './useQueryEntities';
@@ -62,7 +62,7 @@ describe('useQueryEntities', () => {
totalItems: 2,
});
const { result, waitFor } = renderHook(() => useQueryEntities());
const { result } = renderHook(() => useQueryEntities());
const [, fetch] = result.current!;
fetch({ text: 'text' });
plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.test.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ const apis = TestApiRegistry.from([catalogApiRef, catalogApi]);
describe('<EntityPeekAheadPopover/>', () => {
it('renders all owners', async () => {
renderInTestApp(
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityPeekAheadPopover entityRef="component:default/service1">
<Button data-testid="popover1">s1</Button>
plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx
+17 -10
View File
@@ -14,7 +14,13 @@
* limitations under the License.
*/
import { fireEvent, render, waitFor, screen } from '@testing-library/react';
import {
fireEvent,
render,
waitFor,
screen,
act,
} from '@testing-library/react';
import React from 'react';
import { MockEntityListContextProvider } from '../../testUtils/providers';
import { EntityTagFilter } from '../../filters';
@@ -127,9 +133,7 @@ describe('<EntityTagPicker/>', () => {
</TestApiProvider>,
);
await waitFor(() =>
expect(updateFilters).toHaveBeenLastCalledWith({
tags: undefined,
}),
expect(screen.getByTestId('tags-picker-expand')).toBeInTheDocument(),
);
fireEvent.click(screen.getByTestId('tags-picker-expand'));
@@ -218,13 +222,16 @@ describe('<EntityTagPicker/>', () => {
</TestApiProvider>,
);
await waitFor(() =>
expect(updateFilters).toHaveBeenLastCalledWith({
tags: new EntityTagFilter(['tag1']),
}),
expect(screen.getByTestId('tags-picker-expand')).toBeInTheDocument(),
);
fireEvent.click(screen.getByTestId('tags-picker-expand'));
fireEvent.click(screen.getByLabelText('tag2'));
expect(screen.getByLabelText('tag2')).toBeChecked();
await act(async () => {
fireEvent.click(screen.getByTestId('tags-picker-expand'));
});
await act(async () => {
fireEvent.click(screen.getByLabelText('tag2'));
});
expect(updateFilters).toHaveBeenLastCalledWith({
tags: new EntityTagFilter(['tag1', 'tag2']),
});
plugins/catalog-react/src/components/UnregisterEntityDialog/useUnregisterEntityDialogState.test.tsx
+36 -72
View File
@@ -17,16 +17,9 @@
import { CatalogApi, Location } from '@backstage/catalog-client';
import { Entity, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
import { catalogApiRef } from '../../api';
import {
act,
renderHook,
RenderHookResult,
} from '@testing-library/react-hooks';
import React, { ReactNode } from 'react';
import {
UseUnregisterEntityDialogState,
useUnregisterEntityDialogState,
} from './useUnregisterEntityDialogState';
import { renderHook, waitFor } from '@testing-library/react';
import React from 'react';
import { useUnregisterEntityDialogState } from './useUnregisterEntityDialogState';
import { TestApiProvider } from '@backstage/test-utils';
function defer<T>(): { promise: Promise<T>; resolve: (value: T) => void } {
@@ -85,31 +78,23 @@ describe('useUnregisterEntityDialogState', () => {
});
it('goes through the happy unregister path', async () => {
let rendered: RenderHookResult<
{ children?: ReactNode },
UseUnregisterEntityDialogState
>;
act(() => {
rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
const rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
expect(rendered!.result.current).toEqual({ type: 'loading' });
expect(rendered.result.current).toEqual({ type: 'loading' });
resolveLocation({ type: 'url', target: 'https://example.com', id: 'x' });
resolveColocatedEntities([entity]);
await act(async () => {
await rendered!.waitForNextUpdate();
});
expect(rendered!.result.current).toEqual({
type: 'unregister',
location: 'url:https://example.com',
colocatedEntities: [{ kind: 'Component', namespace: 'ns', name: 'n' }],
unregisterLocation: expect.any(Function),
deleteEntity: expect.any(Function),
await waitFor(() => {
expect(rendered.result.current).toEqual({
type: 'unregister',
location: 'url:https://example.com',
colocatedEntities: [{ kind: 'Component', namespace: 'ns', name: 'n' }],
unregisterLocation: expect.any(Function),
deleteEntity: expect.any(Function),
});
});
});
@@ -117,74 +102,53 @@ describe('useUnregisterEntityDialogState', () => {
entity.metadata.annotations![ANNOTATION_ORIGIN_LOCATION] =
'bootstrap:bootstrap';
let rendered: RenderHookResult<
{ children?: ReactNode },
UseUnregisterEntityDialogState
>;
act(() => {
rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
const rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
resolveLocation({ type: 'bootstrap', target: 'bootstrap', id: 'x' });
resolveColocatedEntities([]);
await act(async () => {
await rendered!.waitForNextUpdate();
});
expect(rendered!.result.current).toEqual({
type: 'bootstrap',
location: 'bootstrap:bootstrap',
deleteEntity: expect.any(Function),
await waitFor(() => {
expect(rendered.result.current).toEqual({
type: 'bootstrap',
location: 'bootstrap:bootstrap',
deleteEntity: expect.any(Function),
});
});
});
it('chooses only-delete when there was no location annotation', async () => {
delete entity.metadata.annotations![ANNOTATION_ORIGIN_LOCATION];
let rendered: RenderHookResult<
{ children?: ReactNode },
UseUnregisterEntityDialogState
>;
act(() => {
rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
const rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
resolveLocation(undefined);
resolveColocatedEntities([]);
await act(async () => {
await rendered!.waitForNextUpdate();
});
expect(rendered!.result.current).toEqual({
type: 'only-delete',
deleteEntity: expect.any(Function),
await waitFor(() => {
expect(rendered.result.current).toEqual({
type: 'only-delete',
deleteEntity: expect.any(Function),
});
});
});
it('chooses only-delete when the location could not be found', async () => {
let rendered: RenderHookResult<
{ children?: ReactNode },
UseUnregisterEntityDialogState
>;
act(() => {
rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
const rendered = renderHook(() => useUnregisterEntityDialogState(entity), {
wrapper: Wrapper,
});
resolveLocation(undefined);
resolveColocatedEntities([]);
await act(async () => {
await rendered!.waitForNextUpdate();
});
expect(rendered!.result.current).toEqual({
type: 'only-delete',
deleteEntity: expect.any(Function),
await waitFor(() => {
expect(rendered.result.current).toEqual({
type: 'only-delete',
deleteEntity: expect.any(Function),
});
});
});
});
plugins/catalog-react/src/hooks/useEntity.test.tsx
+8 -8
View File
@@ -15,7 +15,7 @@
*/
import React, { PropsWithChildren } from 'react';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import {
useEntity,
useAsyncEntity,
@@ -31,13 +31,13 @@ const entity = { metadata: { name: 'my-entity' }, kind: 'MyKind' } as Entity;
describe('useEntity', () => {
it('should throw if no entity is provided', async () => {
const { result } = renderHook(() => useEntity(), {
wrapper: ({ children }: React.PropsWithChildren<{}>) => (
<EntityProvider children={children} />
),
});
expect(result.error?.message).toMatch(/entity has not been loaded/);
expect(() =>
renderHook(() => useEntity(), {
wrapper: ({ children }: React.PropsWithChildren<{}>) => (
<EntityProvider children={children} />
),
}),
).toThrow(/entity has not been loaded/);
});
it('should provide an entity', async () => {
plugins/catalog-react/src/hooks/useEntityListProvider.test.tsx
+39 -29
View File
@@ -25,7 +25,7 @@ import {
storageApiRef,
} from '@backstage/core-plugin-api';
import { MockStorageApi, TestApiProvider } from '@backstage/test-utils';
import { act, renderHook } from '@testing-library/react-hooks';
import { act, renderHook, waitFor } from '@testing-library/react';
import qs from 'qs';
import React, { PropsWithChildren } from 'react';
import { MemoryRouter } from 'react-router-dom';
@@ -119,10 +119,14 @@ describe('<EntityListProvider />', () => {
});
it('resolves backend filters', async () => {
const { result, waitForValueToChange } = renderHook(() => useEntityList(), {
const { result } = renderHook(() => useEntityList(), {
wrapper,
});
await waitForValueToChange(() => result.current.backendEntities);
await waitFor(() => {
expect(result.current.backendEntities.length).toBeGreaterThan(0);
});
expect(result.current.backendEntities.length).toBe(2);
expect(mockCatalogApi.getEntities).toHaveBeenCalledWith({
filter: { kind: 'component' },
@@ -130,13 +134,16 @@ describe('<EntityListProvider />', () => {
});
it('resolves frontend filters', async () => {
const { result, waitFor } = renderHook(() => useEntityList(), {
const { result } = renderHook(() => useEntityList(), {
wrapper,
initialProps: {
userFilter: 'all',
},
});
await waitFor(() => !!result.current.entities.length);
await waitFor(() => {
expect(result.current.backendEntities.length).toBeGreaterThan(0);
});
expect(result.current.backendEntities.length).toBe(2);
act(() =>
@@ -160,13 +167,14 @@ describe('<EntityListProvider />', () => {
const query = qs.stringify({
filters: { kind: 'component', type: 'service' },
});
const { result, waitFor } = renderHook(() => useEntityList(), {
wrapper,
initialProps: {
location: `/catalog?${query}`,
},
const { result } = renderHook(() => useEntityList(), {
wrapper: ({ children }) =>
wrapper({ location: `/catalog?${query}`, children }),
});
await waitFor(() => {
expect(result.current.queryParameters).toBeTruthy();
});
await act(() => waitFor(() => !!result.current.queryParameters));
expect(result.current.queryParameters).toEqual({
kind: 'component',
type: 'service',
@@ -174,7 +182,7 @@ describe('<EntityListProvider />', () => {
});
it('does not fetch when only frontend filters change', async () => {
const { result, waitFor } = renderHook(() => useEntityList(), {
const { result } = renderHook(() => useEntityList(), {
wrapper,
});
@@ -200,32 +208,34 @@ describe('<EntityListProvider />', () => {
});
it('debounces multiple filter changes', async () => {
const { result, waitForNextUpdate, waitForValueToChange } = renderHook(
() => useEntityList(),
{
wrapper,
},
);
await waitForValueToChange(() => result.current.backendEntities);
const { result } = renderHook(() => useEntityList(), {
wrapper,
});
await waitFor(() => {
expect(result.current.backendEntities.length).toBeGreaterThan(0);
});
expect(result.current.backendEntities.length).toBe(2);
expect(mockCatalogApi.getEntities).toHaveBeenCalledTimes(1);
act(() => {
await act(async () => {
result.current.updateFilters({ kind: new EntityKindFilter('component') });
result.current.updateFilters({ type: new EntityTypeFilter('service') });
});
await waitForNextUpdate();
expect(mockCatalogApi.getEntities).toHaveBeenCalledTimes(2);
await waitFor(() => {
expect(mockCatalogApi.getEntities).toHaveBeenCalledTimes(2);
});
});
it('returns an error on catalogApi failure', async () => {
const { result, waitForValueToChange, waitFor } = renderHook(
() => useEntityList(),
{
wrapper,
},
);
await waitForValueToChange(() => result.current.backendEntities);
const { result } = renderHook(() => useEntityList(), {
wrapper,
});
await waitFor(() => {
expect(result.current.backendEntities.length).toBeGreaterThan(0);
});
expect(result.current.backendEntities.length).toBe(2);
mockCatalogApi.getEntities = jest.fn().mockRejectedValue('error');
plugins/catalog-react/src/hooks/useEntityOwnership.test.tsx
+5 -9
View File
@@ -18,7 +18,7 @@ import { CatalogApi } from '@backstage/catalog-client';
import { ComponentEntity, RELATION_OWNED_BY } from '@backstage/catalog-model';
import { IdentityApi, identityApiRef } from '@backstage/core-plugin-api';
import { TestApiProvider } from '@backstage/test-utils';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook, waitFor } from '@testing-library/react';
import React from 'react';
import { catalogApiRef } from '../api';
import { useEntityOwnership } from './useEntityOwnership';
@@ -83,19 +83,15 @@ describe('useEntityOwnership', () => {
});
mockCatalogApi.getEntityByRef.mockResolvedValue(undefined);
const { result, waitForValueToChange } = renderHook(
() => useEntityOwnership(),
{
wrapper: Wrapper,
},
);
const { result } = renderHook(() => useEntityOwnership(), {
wrapper: Wrapper,
});
expect(result.current.loading).toBe(true);
expect(result.current.isOwnedEntity(ownedEntity)).toBe(false);
await waitForValueToChange(() => result.current.loading);
await waitFor(() => expect(result.current.loading).toBe(false));
expect(result.current.loading).toBe(false);
expect(result.current.isOwnedEntity(ownedEntity)).toBe(true);
});
});
plugins/catalog-react/src/hooks/useEntityPermission.test.tsx
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common/alpha';
import { renderHook } from '@testing-library/react-hooks';
import { renderHook } from '@testing-library/react';
import { useEntityPermission } from './useEntityPermission';
import { useAsyncEntity } from './useEntity';
import { usePermission } from '@backstage/plugin-permission-react';
plugins/catalog-react/src/hooks/useRelatedEntities.test.tsx
+6 -4
View File
@@ -16,8 +16,8 @@
import { Entity } from '@backstage/catalog-model';
import { TestApiProvider } from '@backstage/test-utils';
import { WrapperComponent, renderHook } from '@testing-library/react-hooks';
import React, { PropsWithChildren } from 'react';
import { renderHook, waitFor } from '@testing-library/react';
import React, { ComponentType, PropsWithChildren } from 'react';
import { catalogApiRef } from '../api';
import { useRelatedEntities } from './useRelatedEntities';
@@ -50,7 +50,7 @@ describe('useRelatedEntities', () => {
getEntitiesByRefs: jest.fn(),
};
const wrapper: WrapperComponent<PropsWithChildren<{}>> = ({ children }) => {
const wrapper: ComponentType<PropsWithChildren<{}>> = ({ children }) => {
return (
<TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
{children}
@@ -70,7 +70,9 @@ describe('useRelatedEntities', () => {
expect(rendered.result.current).toEqual({ loading: true });
await rendered.waitForValueToChange(() => rendered.result.current.loading);
await waitFor(() => {
expect(rendered.result.current.loading).toBe(false);
});
expect(catalogApi.getEntitiesByRefs).toHaveBeenCalledWith({
entityRefs: ['group:default/the-owners-1', 'group:default/the-owners-2'],
plugins/catalog-react/src/hooks/useStarredEntities.test.tsx
+30 -40
View File
@@ -16,7 +16,7 @@
import { Entity } from '@backstage/catalog-model';
import { TestApiProvider } from '@backstage/test-utils';
import { act, renderHook } from '@testing-library/react-hooks';
import { act, renderHook, waitFor } from '@testing-library/react';
import React, { PropsWithChildren } from 'react';
import {
starredEntitiesApiRef,
@@ -56,14 +56,13 @@ describe('useStarredEntities', () => {
});
it('should return an empty set', async () => {
const { result, waitForNextUpdate } = renderHook(
() => useStarredEntities(),
{ wrapper },
);
const { result } = renderHook(() => useStarredEntities(), {
wrapper,
});
await waitForNextUpdate();
expect(result.current.starredEntities.size).toBe(0);
await waitFor(() => {
expect(result.current.starredEntities.size).toBe(0);
});
});
it('should return a set with the current items', async () => {
@@ -72,25 +71,21 @@ describe('useStarredEntities', () => {
mockApi.toggleStarred(id);
}
const { result, waitForNextUpdate } = renderHook(
() => useStarredEntities(),
{ wrapper },
);
const { result } = renderHook(() => useStarredEntities(), {
wrapper,
});
await waitForNextUpdate();
for (const item of expectedIds) {
expect(result.current.starredEntities.has(item)).toBeTruthy();
}
await waitFor(() => {
for (const item of expectedIds) {
expect(result.current.starredEntities.has(item)).toBeTruthy();
}
});
});
it('should listen to changes when the storage is set elsewhere', async () => {
const { result, waitForNextUpdate } = renderHook(
() => useStarredEntities(),
{ wrapper },
);
await waitForNextUpdate();
const { result } = renderHook(() => useStarredEntities(), {
wrapper,
});
expect(result.current.starredEntities.size).toBe(0);
expect(result.current.isStarredEntity(mockEntity)).toBeFalsy();
@@ -99,42 +94,37 @@ describe('useStarredEntities', () => {
// catch when the hook re-renders with the latest data
setTimeout(() => result.current.toggleStarredEntity(mockEntity), 1);
await waitForNextUpdate();
await waitFor(() => {
expect(result.current.starredEntities.size).toBe(1);
});
expect(result.current.starredEntities.size).toBe(1);
expect(result.current.isStarredEntity(mockEntity)).toBeTruthy();
});
it('should write new entries to the local store when adding a toggling entity', async () => {
const { result, waitForNextUpdate } = renderHook(
() => useStarredEntities(),
{ wrapper },
);
act(() => {
result.current.toggleStarredEntity(mockEntity);
const { result } = renderHook(() => useStarredEntities(), {
wrapper,
});
await waitForNextUpdate();
await act(async () => {
result.current.toggleStarredEntity(mockEntity);
});
expect(result.current.isStarredEntity(mockEntity)).toBeTruthy();
expect(result.current.isStarredEntity(secondMockEntity)).toBeFalsy();
});
it('should remove an existing entity when toggling entries', async () => {
const { result, waitForNextUpdate } = renderHook(
() => useStarredEntities(),
{ wrapper },
);
const { result } = renderHook(() => useStarredEntities(), {
wrapper,
});
act(() => {
await act(async () => {
result.current.toggleStarredEntity(mockEntity);
result.current.toggleStarredEntity(secondMockEntity);
result.current.toggleStarredEntity(mockEntity);
});
await waitForNextUpdate();
expect(result.current.isStarredEntity(mockEntity)).toBeFalsy();
expect(result.current.isStarredEntity(secondMockEntity)).toBeTruthy();
});

Some files were not shown because too many files have changed in this diff Show More