Create ShlinkWebComponent test

shlink-web-component/src/ShlinkWebComponent.tsx

@@ -21,12 +21,15 @@ type ShlinkWebComponentProps = {
 };
 
 // FIXME This allows to track the reference to be resolved by the container, but it's hacky and relies on not more than
-//       one ShlinkWebComponent rendered at the same time
+//       one ShlinkWebComponent rendered at the same time.
+//       Works for now, but should be addressed.
 let apiClientRef: ShlinkApiClient;
 
 export const createShlinkWebComponent = (
   bottle: Bottle,
-): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '', createNotFound, tagColorsStorage }) => {
+): FC<ShlinkWebComponentProps> => (
+  { serverVersion, apiClient, settings, routesPrefix = '', createNotFound, tagColorsStorage },
+) => {
   const features = useFeatures(serverVersion);
   const mainContent = useRef<ReactNode>();
   const [theStore, setStore] = useState<Store | undefined>();

shlink-web-component/test/ShlinkWebComponent.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import Bottle from 'bottlejs';
+import type { TagColorsStorage } from '../src';
+import type { ShlinkApiClient } from '../src/api-contract';
+import { createShlinkWebComponent } from '../src/ShlinkWebComponent';
+
+describe('<ShlinkWebComponent />', () => {
+  let bottle: Bottle;
+  const dispatch = vi.fn();
+  const loadMercureInfo = vi.fn();
+  const apiClient = fromPartial<ShlinkApiClient>({});
+
+  const setUp = (tagColorsStorage?: TagColorsStorage) => {
+    const ShlinkWebComponent = createShlinkWebComponent(bottle);
+    return render(
+      <ShlinkWebComponent serverVersion="3.0.0" apiClient={apiClient} tagColorsStorage={tagColorsStorage} />,
+    );
+  };
+
+  beforeEach(() => {
+    bottle = new Bottle();
+
+    bottle.value('Main', () => <>Main</>);
+    bottle.value('store', {
+      dispatch,
+      getState: vi.fn().mockReturnValue({}),
+      subscribe: vi.fn(),
+    });
+    bottle.value('loadMercureInfo', loadMercureInfo);
+  });
+
+  it('registers services when mounted', async () => {
+    expect(bottle.container.TagColorsStorage).not.toBeDefined();
+    expect(bottle.container.apiClientFactory).not.toBeDefined();
+
+    setUp(fromPartial({}));
+
+    await waitFor(() => expect(bottle.container.TagColorsStorage).toBeDefined());
+    expect(bottle.container.apiClientFactory).toBeDefined();
+  });
+
+  it('renders main content', async () => {
+    setUp();
+    await waitFor(() => expect(screen.getByText('Main')).toBeInTheDocument());
+  });
+
+  it('loads mercure on mount', async () => {
+    setUp();
+
+    await waitFor(() => expect(dispatch).toHaveBeenCalledOnce());
+    expect(loadMercureInfo).toHaveBeenCalledOnce();
+  });
+});