test(e2e): test sync percentage

e2e/packages/client-vanilla/index.html

@@ -11,6 +11,7 @@
     <div>
       <div id="block" title="block" data-testid="block">-1</div>
       <div id="sync-step" title="sync-step" data-testid="sync-step"></div>
+      <div id="sync-percentage" title="sync-percentage" data-testid="sync-percentage"></div>
     </div>
   </body>
 </html>

e2e/packages/client-vanilla/src/index.ts

@@ -6,7 +6,7 @@
   network: { components, latestBlock$, worldContract, waitForTransaction },
 } = await setup();
 
 const _window = window as any;
 _window.worldContract = worldContract;
 _window.waitForTransaction = waitForTransaction;
 
@@ -29,6 +29,10 @@
 // Update initial sync status in the UI
 components.SyncProgress.update$.subscribe(({ value }) => {
   const syncStep = value[0]?.step;
-  const element = document.querySelector("#sync-step");
-  if (element) element.innerHTML = String(syncStep);
+  const elementStep = document.querySelector("#sync-step");
+  if (elementStep) elementStep.innerHTML = String(syncStep);
+
+  const syncPercentage = value[0]?.percentage;
+  const elementPercentage = document.querySelector("#sync-percentage");
+  if (elementPercentage) elementPercentage.innerHTML = String(syncPercentage);
 });

e2e/packages/contracts/worlds.json

@@ -1,5 +1,5 @@
 {
   "31337": {
-    "address": "0x7de562d80d6c8672aa32654af67884f411976593"
+    "address": "0xad97505a508daf984fe60302109e0115e544b267"
   }
 }

e2e/packages/sync-test/createStoreSync.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { rpcHttpUrl } from "./setup/constants";
+import { deployContracts } from "./setup";
+import { createAsyncErrorHandler } from "./asyncErrors";
+import { createWorld, getComponentValueStrict } from "@latticexyz/recs";
+import { singletonEntity, syncToRecs } from "@latticexyz/store-sync/recs";
+import mudConfig from "../contracts/mud.config";
+import { transportObserver } from "@latticexyz/common";
+import { ClientConfig, createPublicClient, http } from "viem";
+import { getNetworkConfig } from "../client-vanilla/src/mud/getNetworkConfig";
+
+const address = "0xad97505a508daf984fe60302109e0115e544b267";
+
+describe("createStoreSync", () => {
+  const asyncErrorHandler = createAsyncErrorHandler();
+
+  it("creates the sync", async () => {
+    asyncErrorHandler.resetErrors();
+
+    await deployContracts(rpcHttpUrl);
+
+    const networkConfig = await getNetworkConfig();
+    const clientOptions = {
+      chain: networkConfig.chain,
+      transport: transportObserver(http(rpcHttpUrl ?? undefined)),
+      pollingInterval: 1000,
+    } as const satisfies ClientConfig;
+
+    const publicClient = createPublicClient(clientOptions);
+
+    const world = createWorld();
+    const { components } = await syncToRecs({
+      world,
+      config: mudConfig,
+      address,
+      publicClient,
+    });
+
+    expect(getComponentValueStrict(components.SyncProgress, singletonEntity).percentage).toMatchInlineSnapshot(`
+      100
+    `);
+  });
+});

e2e/packages/sync-test/data/waitForInitialSync.ts

@@ -3,4 +3,6 @@ import { Page, expect } from "@playwright/test";
 export async function waitForInitialSync(page: Page) {
   const syncStep = page.locator("#sync-step");
   await expect(syncStep).toHaveText("live");
+  const syncProgress = page.locator("#sync-percentage");
+  await expect(syncProgress).toHaveText("100");
 }