7b9e726151
This commit converts the Images Table to Typescript and converts all API calls to image-builder to use RTK Query hooks. This should increase the performance of the app significantly. Previously our calls to the image-builder API were made in series. They are now made in parallel. We may want to investigate the possibility of hitting rate limiting now that we will be issuing requests in much more rapid succession. In the tests, moving to RTK Query hooks has allowed us to remove virtually all Jest mocking. However, this means that some of our previous tests which tested against implementation details were broken. Most notably, we no longer check the Redux store to verify that clones have been added correctly and we no longer check that compose requests were issued successfully. Test coverage will be restored in a follow-up PR where the dev-dependency @msw/data is added. Adding a persistent data layer to the tests using @msw/data will allow us to verify that our POST requests (creating composes and cloning them) are working by testing that the Images Table has been updated.
104 lines
2.7 KiB
JavaScript
104 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
|
|
import { configureStore } from '@reduxjs/toolkit';
|
|
import { screen, render } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { Provider } from 'react-redux';
|
|
import { createMemoryRouter, RouterProvider } from 'react-router-dom';
|
|
|
|
import CreateImageWizard from '../Components/CreateImageWizard/CreateImageWizard';
|
|
import LandingPage from '../Components/LandingPage/LandingPage';
|
|
import ShareImageModal from '../Components/ShareImageModal/ShareImageModal';
|
|
import { middleware, reducer } from '../store';
|
|
import { resolveRelPath } from '../Utilities/path';
|
|
|
|
export const renderCustomRoutesWithReduxRouter = async (
|
|
route = '/',
|
|
preloadedState = {},
|
|
routes
|
|
) => {
|
|
const store = configureStore({ reducer, middleware, preloadedState });
|
|
|
|
const router = createMemoryRouter(routes, {
|
|
initialEntries: [resolveRelPath(route)],
|
|
});
|
|
|
|
render(
|
|
<Provider store={store}>
|
|
<RouterProvider router={router} />
|
|
</Provider>
|
|
);
|
|
|
|
return { router, store };
|
|
};
|
|
|
|
export const renderWithReduxRouter = async (
|
|
route = '/',
|
|
preloadedState = {}
|
|
) => {
|
|
const store = configureStore({ reducer, middleware, preloadedState });
|
|
|
|
const routes = [
|
|
{
|
|
path: 'insights/image-builder/*',
|
|
element: <LandingPage />,
|
|
},
|
|
{
|
|
path: 'insights/image-builder/imagewizard/:composeId?',
|
|
element: <CreateImageWizard />,
|
|
},
|
|
{
|
|
path: 'insights/image-builder/share/:composeId',
|
|
element: <ShareImageModal />,
|
|
},
|
|
];
|
|
|
|
const router = createMemoryRouter(routes, {
|
|
initialEntries: [resolveRelPath(route)],
|
|
});
|
|
|
|
render(
|
|
<Provider store={store}>
|
|
<RouterProvider router={router} />
|
|
</Provider>
|
|
);
|
|
|
|
return { router, store };
|
|
};
|
|
|
|
export const renderWithProvider = (
|
|
component,
|
|
container,
|
|
preloadedState = {}
|
|
) => {
|
|
const store = configureStore({ reducer, middleware, preloadedState });
|
|
|
|
return render(<Provider store={store}>{component}</Provider>, {
|
|
container: container,
|
|
});
|
|
};
|
|
|
|
export const clickBack = async () => {
|
|
const user = userEvent.setup();
|
|
await user.click(await screen.findByRole('button', { name: /Back/ }));
|
|
};
|
|
|
|
export const clickNext = async () => {
|
|
const user = userEvent.setup();
|
|
await user.click(await screen.findByRole('button', { name: /Next/ }));
|
|
};
|
|
|
|
export const clickCancel = async () => {
|
|
const user = userEvent.setup();
|
|
await user.click(await screen.findByRole('button', { name: /Cancel/ }));
|
|
};
|
|
|
|
export const getNextButton = async () => {
|
|
const next = await screen.findByRole('button', { name: /Next/ });
|
|
return next;
|
|
};
|
|
|
|
export const verifyCancelButton = async (router) => {
|
|
await clickCancel();
|
|
expect(router.state.location.pathname).toBe('/insights/image-builder');
|
|
};
|