Refactor DI approach for components

test/common/ErrorHandler.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { ErrorHandler as createErrorHandler } from '../../src/common/ErrorHandler';
+import type { PropsWithChildren } from 'react';
+import { ErrorHandler as BaseErrorHandler } from '../../src/common/ErrorHandler';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 const ComponentWithError = () => {
@@ -9,18 +10,16 @@ const ComponentWithError = () => {
 
 describe('<ErrorHandler />', () => {
   const reload = vi.fn();
-  const window = fromPartial<Window>({
-    location: { reload },
-  });
+  const location = fromPartial<Window['location']>({ reload });
   const cons = fromPartial<Console>({ error: vi.fn() });
-  const ErrorHandler = createErrorHandler(window, cons);
+  const ErrorHandler = (props: PropsWithChildren) => <BaseErrorHandler console={cons} location={location} {...props} />;
 
   beforeEach(() => {
     vi.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors
   });
 
   it('renders children when no error has occurred', () => {
-    render(<ErrorHandler children={<span>Foo</span>} />);
+    render(<ErrorHandler><span>Foo</span></ErrorHandler>);
 
     expect(screen.getByText('Foo')).toBeInTheDocument();
     expect(screen.queryByText('Oops! This is awkward :S')).not.toBeInTheDocument();
@@ -28,14 +27,14 @@ describe('<ErrorHandler />', () => {
   });
 
   it('renders error page when error has occurred', () => {
-    render(<ErrorHandler children={<ComponentWithError />} />);
+    render(<ErrorHandler><ComponentWithError /></ErrorHandler>);
 
     expect(screen.getByText('Oops! This is awkward :S')).toBeInTheDocument();
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('reloads page on button click', async () => {
-    const { user } = renderWithEvents(<ErrorHandler children={<ComponentWithError />} />);
+    const { user } = renderWithEvents(<ErrorHandler><ComponentWithError /></ErrorHandler>);
 
     expect(reload).not.toHaveBeenCalled();
     await user.click(screen.getByRole('button'));

test/common/MainHeader.test.tsx

@@ -1,11 +1,14 @@
 import { screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
-import { MainHeader as createMainHeader } from '../../src/common/MainHeader';
+import { MainHeaderFactory } from '../../src/common/MainHeader';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<MainHeader />', () => {
-  const MainHeader = createMainHeader(() => <>ServersDropdown</>);
+  const MainHeader = MainHeaderFactory(fromPartial({
+    ServersDropdown: () => <>ServersDropdown</>,
+  }));
   const setUp = (pathname = '') => {
     const history = createMemoryHistory();
     history.push(pathname);

test/common/ShlinkWebComponentContainer.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { useParams } from 'react-router-dom';
-import { ShlinkWebComponentContainer as createContainer } from '../../src/common/ShlinkWebComponentContainer';
+import { ShlinkWebComponentContainerFactory } from '../../src/common/ShlinkWebComponentContainer';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
 
 vi.mock('react-router-dom', async () => ({
@@ -10,12 +10,12 @@ vi.mock('react-router-dom', async () => ({
 }));
 
 describe('<ShlinkWebComponentContainer />', () => {
-  const ShlinkWebComponentContainer = createContainer(
-    vi.fn().mockReturnValue(fromPartial({})),
-    fromPartial({}),
-    () => <>ShlinkWebComponent</>,
-    () => <>ServerError</>,
-  );
+  const ShlinkWebComponentContainer = ShlinkWebComponentContainerFactory(fromPartial({
+    buildShlinkApiClient: vi.fn().mockReturnValue(fromPartial({})),
+    TagColorsStorage: fromPartial({}),
+    ShlinkWebComponent: () => <>ShlinkWebComponent</>,
+    ServerError: () => <>ServerError</>,
+  }));
   const setUp = (selectedServer: SelectedServer) => render(
     <ShlinkWebComponentContainer selectServer={vi.fn()} selectedServer={selectedServer} settings={{}} />,
   );