[2.0 / next] createOptimisticStore: a guess on an errored store brings back the previous question's answer when the re-ask lands #4526

/**
 * @jsxImportSource @solidjs/web
 * @vitest-environment jsdom
 */
import { test } from "vitest";
import { For, Loading, Errored, action, createOptimisticStore, createSignal, flush, refresh } from "solid-js";
import { render } from "../src/index.js";
const tick = async () => { for (let i = 0; i < 4; i++) { await new Promise(r => setTimeout(r, 0)); flush(); } };
test("guess on an errored store brings back the previous question's answer", async () => {
  const asks: { key: string; res: (v: any) => void; rej: (e: any) => void }[] = [];
  const ask = (key: string) => new Promise<any>((res, rej) => asks.push({ key, res, rej }));
  const settle = async (key: string, f: (a: any) => void) => { const i = asks.findIndex(a => a.key === key); f(asks.splice(i, 1)[0]); await tick(); };
  const container = document.body.appendChild(document.createElement("div"));
  const frames: string[] = []; const snap = (l: string) => frames.push(`${l}: ${container.textContent}  air ${asks.map(a => a.key)}`);
  let setFilter!: (f: string) => void; let closeOne!: (id: number) => any;
  render(() => {
    const [filter, sf] = createSignal("open"); setFilter = sf;
    const [issues, set] = createOptimisticStore<any[]>(() => ask(`issues:${filter()}`), [], { key: "id" });
    closeOne = action(function* (id: number) {
      set(list => { const i = list.findIndex(t => t.id === id); if (i >= 0) list.splice(i, 1); });
      yield ask(`close:${id}`);
      refresh(issues);
    });
    return <Loading fallback={<p>loading</p>}><Errored fallback={e => <p>error {e().message}</p>}><p>{filter()}: <For each={issues}>{(it: any) => <i>[#{it.id}]</i>}</For></p></Errored></Loading>;
  }, container);
  await tick();
  await settle("issues:open", a => a.res([{ id: 1 }, { id: 3 }, { id: 4 }])); snap("loaded");
  setFilter("closed"); await tick(); snap("filter closed");
  await settle("issues:closed", a => a.rej(new Error("declined"))); snap("closed failed");
  closeOne(1); await tick(); snap("close #1");
  await settle("issues:closed", a => a.res([{ id: 2 }])); snap("closed answered");
  await settle("close:1", a => a.res({})); snap("close accepted");
  await settle("issues:closed", a => a.res([{ id: 1 }, { id: 2 }])); snap("refresh answered");
  console.log(frames.join("\n"));
});