mirror of https://github.com/portainer/portainer
refactor(tests): wrap tests explicitly with provider [EE-6686] (#11090)
Chaim Lev-Ari
9 months ago
committed by
GitHub
parent
27aaf322b2
commit
f8e3d75797
@ -1,37 +0,0 @@
|
||||
import 'vitest-dom/extend-expect';
|
||||
import { render, RenderOptions } from '@testing-library/react';
|
||||
import { UIRouter, pushStateLocationPlugin } from '@uirouter/react';
|
||||
import { PropsWithChildren, ReactElement } from 'react';
|
||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
|
||||
function Provider({ children }: PropsWithChildren<unknown>) {
|
||||
return <UIRouter plugins={[pushStateLocationPlugin]}>{children}</UIRouter>;
|
||||
}
|
||||
|
||||
function customRender(ui: ReactElement, options?: RenderOptions) {
|
||||
return render(ui, { wrapper: Provider, ...options });
|
||||
}
|
||||
|
||||
// re-export everything
|
||||
export * from '@testing-library/react';
|
||||
|
||||
// override render method
|
||||
export { customRender as render };
|
||||
|
||||
export function renderWithQueryClient(ui: React.ReactElement) {
|
||||
const testQueryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
const { rerender, ...result } = customRender(
|
||||
<QueryClientProvider client={testQueryClient}>{ui}</QueryClientProvider>
|
||||
);
|
||||
return {
|
||||
...result,
|
||||
rerender: (rerenderUi: React.ReactElement) =>
|
||||
rerender(
|
||||
<QueryClientProvider client={testQueryClient}>
|
||||
{rerenderUi}
|
||||
</QueryClientProvider>
|
||||
),
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
import { UISref, UIView } from '@uirouter/react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
|
||||
import { withTestRouter } from '@/react/test-utils/withRouter';
|
||||
|
||||
function RelativePathLink() {
|
||||
return (
|
||||
<UISref to=".custom">
|
||||
<span>Link</span>
|
||||
</UISref>
|
||||
);
|
||||
}
|
||||
|
||||
test.todo('should render a link with relative path', () => {
|
||||
const WrappedComponent = withTestRouter(RelativePathLink, {
|
||||
stateConfig: [
|
||||
{
|
||||
name: 'parent',
|
||||
url: '/',
|
||||
|
||||
component: () => (
|
||||
<>
|
||||
<div>parent</div>
|
||||
<UIView />
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'parent.custom',
|
||||
url: 'custom',
|
||||
},
|
||||
],
|
||||
route: 'parent',
|
||||
});
|
||||
|
||||
render(<WrappedComponent />);
|
||||
|
||||
expect(screen.getByText('Link')).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1,49 @@
|
||||
import { ComponentType } from 'react';
|
||||
import {
|
||||
ReactStateDeclaration,
|
||||
UIRouter,
|
||||
UIRouterReact,
|
||||
UIView,
|
||||
hashLocationPlugin,
|
||||
servicesPlugin,
|
||||
} from '@uirouter/react';
|
||||
|
||||
/**
|
||||
* A helper function to wrap a component with a UIRouter Provider.
|
||||
*
|
||||
* should only be used in tests
|
||||
*/
|
||||
export function withTestRouter<T>(
|
||||
WrappedComponent: ComponentType<T>,
|
||||
{
|
||||
route = '/',
|
||||
stateConfig = [],
|
||||
}: { route?: string; stateConfig?: Array<ReactStateDeclaration> } = {}
|
||||
): ComponentType<T> {
|
||||
const router = new UIRouterReact();
|
||||
|
||||
// router.trace.enable(Category.TRANSITION);
|
||||
router.plugin(servicesPlugin);
|
||||
router.plugin(hashLocationPlugin);
|
||||
|
||||
// Set up your custom state configuration
|
||||
stateConfig.forEach((state) => router.stateRegistry.register(state));
|
||||
router.urlService.rules.initial({ state: route });
|
||||
|
||||
// Try to create a nice displayName for React Dev Tools.
|
||||
const displayName =
|
||||
WrappedComponent.displayName || WrappedComponent.name || 'Component';
|
||||
|
||||
function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
|
||||
return (
|
||||
<UIRouter router={router}>
|
||||
<UIView />
|
||||
<WrappedComponent {...props} />
|
||||
</UIRouter>
|
||||
);
|
||||
}
|
||||
|
||||
WrapperComponent.displayName = `withTestRouter(${displayName})`;
|
||||
|
||||
return WrapperComponent;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import { ComponentType } from 'react';
|
||||
import { QueryClient } from 'react-query';
|
||||
|
||||
import { withReactQuery } from '@/react-tools/withReactQuery';
|
||||
|
||||
export function withTestQueryProvider<T>(
|
||||
WrappedComponent: ComponentType<T & JSX.IntrinsicAttributes>
|
||||
) {
|
||||
const testQueryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
return withReactQuery(WrappedComponent, testQueryClient);
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
import 'vitest-dom/extend-expect';
|
||||
Loading…
Reference in new issue