Do not inject components into other components

test/servers/CreateServer.test.tsx

@@ -2,7 +2,8 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { CreateServerFactory } from '../../src/servers/CreateServer';
+import { ContainerProvider } from '../../src/container/context';
+import { CreateServer } from '../../src/servers/CreateServer';
 import type { ServersMap } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
@@ -24,17 +25,19 @@ describe('<CreateServer />', () => {
       callCount += 1;
       return result;
     });
-    const CreateServer = CreateServerFactory(fromPartial({
-      ImportServersBtn: () => <>ImportServersBtn</>,
-      useTimeoutToggle,
-    }));
     const history = createMemoryHistory({ initialEntries: ['/foo', '/bar'] });
 
     return {
       history,
       ...renderWithStore(
         <Router location={history.location} navigator={history}>
-          <CreateServer />
+          <ContainerProvider value={fromPartial({
+            ImportServersBtn: () => <>ImportServersBtn</>,
+            useTimeoutToggle,
+            buildShlinkApiClient: vi.fn(),
+          })}>
+            <CreateServer />
+          </ContainerProvider>
         </Router>,
         {
           initialState: { servers },
@@ -64,11 +67,6 @@ describe('<CreateServer />', () => {
     expect(screen.getByText('The servers could not be imported. Make sure the format is correct.')).toBeInTheDocument();
   });
 
-  it('shows import button when no servers exist yet', () => {
-    setUp({ servers: {} });
-    expect(screen.queryByText('ImportServersBtn')).toBeInTheDocument();
-  });
-
   it('creates server data when form is submitted', async () => {
     const { user, history, store } = setUp();
     const expectedServerId = 'the_name-the_url.com';

test/servers/ManageServers.test.tsx

@@ -1,8 +1,9 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
+import { ContainerProvider } from '../../src/container/context';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
-import { ManageServersFactory } from '../../src/servers/ManageServers';
+import { ManageServers } from '../../src/servers/ManageServers';
 import type { ServersExporter } from '../../src/servers/services/ServersExporter';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
@@ -11,16 +12,20 @@ describe('<ManageServers />', () => {
   const exportServers = vi.fn();
   const serversExporter = fromPartial<ServersExporter>({ exportServers });
   const useTimeoutToggle = vi.fn().mockReturnValue([false, vi.fn()]);
-  const ManageServers = ManageServersFactory(fromPartial({
-    ServersExporter: serversExporter,
-    ImportServersBtn: () => <span>ImportServersBtn</span>,
-    useTimeoutToggle,
-  }));
   const createServerMock = (value: string, autoConnect = false) => fromPartial<ServerWithId>(
     { id: value, name: value, url: value, autoConnect },
   );
   const setUp = (servers: ServersMap = {}) => renderWithStore(
-    <MemoryRouter><ManageServers /></MemoryRouter>,
+    <MemoryRouter>
+      <ContainerProvider value={fromPartial({
+        ServersExporter: serversExporter,
+        ImportServersBtn: () => <span>ImportServersBtn</span>,
+        useTimeoutToggle,
+        buildShlinkApiClient: vi.fn(),
+      })}>
+        <ManageServers />
+      </ContainerProvider>
+    </MemoryRouter>,
     {
       initialState: { servers },
     },

test/servers/helpers/ImportServersBtn.test.tsx

@@ -1,9 +1,9 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { ContainerProvider } from '../../../src/container/context';
 import type { ServerData, ServersMap, ServerWithId } from '../../../src/servers/data';
-import type {
-  ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
-import { ImportServersBtnFactory } from '../../../src/servers/helpers/ImportServersBtn';
+import type { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
+import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
 import type { ServersImporter } from '../../../src/servers/services/ServersImporter';
 import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithStore } from '../../__helpers__/setUpTest';
@@ -13,9 +13,10 @@ describe('<ImportServersBtn />', () => {
   const onImportMock = vi.fn();
   const importServersFromFile = vi.fn().mockResolvedValue([]);
   const serversImporterMock = fromPartial<ServersImporter>({ importServersFromFile });
-  const ImportServersBtn = ImportServersBtnFactory(fromPartial({ ServersImporter: serversImporterMock }));
   const setUp = (props: Partial<ImportServersBtnProps> = {}, servers: ServersMap = {}) => renderWithStore(
-    <ImportServersBtn {...props} onImport={onImportMock} />,
+    <ContainerProvider value={fromPartial({ ServersImporter: serversImporterMock })}>
+      <ImportServersBtn {...props} onImport={onImportMock} />
+    </ContainerProvider>,
     {
       initialState: { servers },
     },