test: multiple previews sharing same port

Author: AriPerkkio

packages/runtime/src/store/previews.spec.ts

@@ -0,0 +1,52 @@
+import { assert, expect, test, vi } from 'vitest';
+import { PreviewsStore } from './previews.js';
+import type { PortListener, WebContainer } from '@webcontainer/api';
+
+test('marks multiple preview infos ready', async () => {
+  const { store, emit } = await getStore();
+
+  store.setPreviews([
+    { port: 3000, title: 'Dev' },
+    { port: 3000, title: 'Docs', pathname: '/docs' },
+  ]);
+
+  expect(store.previews.value).toHaveLength(2);
+  expect(store.previews.value![0].ready).toBe(false);
+  expect(store.previews.value![1].ready).toBe(false);
+
+  emit(3000, 'open', 'https://localhost');
+
+  await vi.waitFor(() => {
+    expect(store.previews.value![0].ready).toBe(true);
+    expect(store.previews.value![1].ready).toBe(true);
+  });
+});
+
+async function getStore() {
+  const listeners: PortListener[] = [];
+
+  const webcontainer: Pick<WebContainer, 'on'> = {
+    on: (type, listener) => {
+      if (type === 'port') {
+        listeners.push(listener as PortListener);
+      }
+
+      return () => undefined;
+    },
+  };
+
+  const promise = new Promise<WebContainer>((resolve) => {
+    resolve(webcontainer as WebContainer);
+  });
+
+  await promise;
+
+  return {
+    store: new PreviewsStore(promise),
+    emit: (...args: Parameters<PortListener>) => {
+      assert(listeners.length > 0, 'Port listeners were not captured');
+
+      listeners.forEach((cb) => cb(...args));
+    },
+  };
+}