| 1 | import { selectSettingsValue, settingsOptionValues } from "./settingsSelectTestUtils"; |
| 2 | import assert from "node:assert/strict"; |
| 3 | import { JSDOM } from "jsdom"; |
| 4 | import React, { act } from "react"; |
| 5 | import { createRoot } from "react-dom/client"; |
| 6 | import { ProviderCatalogPicker, type CatalogChoice } from "../components/ProviderCatalogPicker"; |
| 7 | import { LocaleProvider } from "../lib/i18n"; |
| 8 | import data from "../lib/providerCatalog.generated.json"; |
| 9 | const dom = new JSDOM('<div id="root"></div>', {url: "http://localhost/", pretendToBeVisual: true}); |
| 10 | Object.assign(globalThis, {window: dom.window, document: dom.window.document, HTMLElement: dom.window.HTMLElement, Node: dom.window.Node, Event: dom.window.Event, localStorage: dom.window.localStorage, IS_REACT_ACT_ENVIRONMENT: true}); |
| 11 | Object.defineProperty(globalThis, "navigator", {configurable: true, value: dom.window.navigator}); |
| 12 | window.matchMedia = (() => ({matches: true, addEventListener(){}, removeEventListener(){}})) as any; |
| 13 | const rootEl = document.getElementById("root")!; |
| 14 | const root = createRoot(rootEl); |
| 15 | const choices: CatalogChoice[] = Object.entries(data.catalogs).map(([id, catalog]) => ({ |
| 16 | id, catalog, label: id, keyEnv: catalog.brandId === "mimo" ? (catalog.product === "token" ? "MIMO_TOKEN_PLAN_API_KEY" : "MIMO_API_KEY") : `${catalog.region}_KEY`, keySet: false, models: [`${id}-model`], status: "available", statusLabel: "", actionLabel: "Add", canAdd: true, |
| 17 | })); |
| 18 | let installed = ""; |
| 19 | let submittedFormat: string | undefined; |
| 20 | const render = (busy = false, rows = choices) => root.render(<LocaleProvider><ProviderCatalogPicker choices={rows} busy={busy} onConnect={(id, _key, _url, format) => {installed = id; submittedFormat = format;}} onView={() => {}} onReset={() => {throw new Error("unexpected reset");}} /></LocaleProvider>); |
| 21 | await act(async () => {render();}); |
| 22 | const select = (dimension: string) => rootEl.querySelector<HTMLButtonElement>(`button.settings-select[id$="-${dimension}"]`)!; |
| 23 | async function change(dimension: string, value: string) { |
| 24 | await selectSettingsValue(select(dimension), value); |
| 25 | } |
| 26 | async function brand(name: string) { |
| 27 | await act(async () => {Array.from(rootEl.querySelectorAll<HTMLButtonElement>(".provider-catalog__brand")).find(el=>el.textContent?.endsWith(name))!.click();}); |
| 28 | } |
| 29 | assert.equal(rootEl.querySelectorAll(".provider-catalog__brand").length, new Set(choices.map(c=>c.catalog.brandId)).size); |
| 30 | await brand("智谱 / Z.AI"); |
| 31 | await change("region","cn"); |
| 32 | await change("product","coding"); |
| 33 | await change("format","anthropic"); |
| 34 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value,"https://open.bigmodel.cn/api/anthropic"); |
| 35 | await act(async () => { rootEl.querySelector<HTMLButtonElement>(".btn--primary")!.click(); }); |
| 36 | assert.equal(installed,"glm-coding-plan-cn-anthropic"); |
| 37 | await change("product","api"); |
| 38 | assert.equal(select("format").value,"openai"); |
| 39 | assert.equal((await settingsOptionValues(select("format"))).length,3,"all common protocols are offered"); |
| 40 | assert.equal(select("format").disabled,false); |
| 41 | await change("format","responses"); |
| 42 | await act(async () => { rootEl.querySelector<HTMLButtonElement>(".btn--primary")!.click(); }); |
| 43 | assert.equal(installed,"glm-cn"); |
| 44 | assert.equal(submittedFormat,"responses","custom protocol reaches connection creation"); |
| 45 | await change("format","openai"); |
| 46 | await change("region","global"); |
| 47 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value,"https://api.z.ai/api/paas/v4"); |
| 48 | await brand("MiMo"); |
| 49 | assert.deepEqual(await settingsOptionValues(select("product")), ["api", "token"], "MiMo exposes pay-as-you-go and Token Plan explicitly"); |
| 50 | assert.equal(rootEl.querySelector('button.settings-select[id$="-region"]'), null, "MiMo pay-as-you-go API does not pretend to be a regional account platform"); |
| 51 | await change("product", "token"); |
| 52 | assert.deepEqual(await settingsOptionValues(select("region")), ["ams", "cn", "sgp"], "Token Plan exposes its three service clusters"); |
| 53 | await change("region", "cn"); |
| 54 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value, "https://token-plan-cn.xiaomimimo.com/v1"); |
| 55 | assert.match(rootEl.querySelector<HTMLInputElement>('input[id$="-key"]')!.placeholder, /MIMO_TOKEN_PLAN_API_KEY/); |
| 56 | assert.match(rootEl.textContent!, /AI coding tools/); |
| 57 | await change("format", "anthropic"); |
| 58 | await change("region", "sgp"); |
| 59 | assert.equal(select("format").value, "anthropic", "cluster changes retain an explicitly selected protocol"); |
| 60 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value, "https://token-plan-sgp.xiaomimimo.com/anthropic"); |
| 61 | await change("product", "api"); |
| 62 | assert.equal(select("format").value, "anthropic", "product changes retain a supported protocol"); |
| 63 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value, "https://api.xiaomimimo.com/anthropic"); |
| 64 | assert.match(rootEl.querySelector<HTMLInputElement>('input[id$="-key"]')!.placeholder, /MIMO_API_KEY/); |
| 65 | assert.equal(select("region"), null); |
| 66 | assert.doesNotMatch(rootEl.textContent!, /AI coding tools/); |
| 67 | await brand("OpenAI"); |
| 68 | await change("format","responses"); |
| 69 | await act(async () => {render(true);}); |
| 70 | assert.equal(select("format").disabled,true,"mutation lock disables protocol changes"); |
| 71 | await act(async () => {render(false,choices.map(c=>c.id==="openai-responses"?{...c,canAdd:false,status:"installed",statusLabel:"Added"}:c));}); |
| 72 | assert.equal(rootEl.querySelector<HTMLButtonElement>(".btn--primary")!.disabled,true,"updated installed status cannot submit again"); |
| 73 | assert.equal(select("format").value,"responses","host refresh preserves explicit selection"); |
| 74 | await change("format","openai"); |
| 75 | assert.equal(rootEl.querySelector<HTMLButtonElement>(".btn--primary")!.disabled,false,"another uninstalled route stays available"); |
| 76 | await brand("OpenCode"); |
| 77 | await change("product","go"); |
| 78 | await change("format","anthropic"); |
| 79 | assert.ok((await settingsOptionValues(select("variant"))).length>1,"model-scoped routes stay reachable without duplicating brands"); |
| 80 | await brand("LM Studio"); |
| 81 | assert.equal(rootEl.querySelector('button.settings-select[id$="-region"]'),null,"single-platform providers avoid unnecessary choices"); |
| 82 | assert.match(rootEl.textContent!,/local installation/); |
| 83 | await change("format","responses"); |
| 84 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value,"http://localhost:1234/v1"); |
| 85 | await change("format","anthropic"); |
| 86 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value,"http://localhost:1234"); |
| 87 | await brand("PPIO / 派欧云"); |
| 88 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value,"https://api.ppio.com/openai"); |
| 89 | await change("format","anthropic"); |
| 90 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value,"https://api.ppio.com/anthropic"); |
| 91 | await act(async () => { rootEl.querySelector<HTMLButtonElement>(".btn--primary")!.click(); }); |
| 92 | assert.equal(submittedFormat,"anthropic"); |
| 93 | // A legacy host can put the Anthropic preset first. New official connections |
| 94 | // must still start with Chat Completions, while explicit choices survive refresh. |
| 95 | const deepseekTemplate = data.templates.find(p => p.id === "deepseek-chat")!; |
| 96 | assert.deepEqual(deepseekTemplate.provider.models, ["deepseek-flash", "deepseek-v4-pro"]); |
| 97 | assert.equal(deepseekTemplate.provider.default, "deepseek-flash"); |
| 98 | const deepseekChoice = {...choices.find(c => c.id === "deepseek-chat")!, models: deepseekTemplate.provider.models}; |
| 99 | await act(async () => {render(false, [{...deepseekChoice, catalog: {...deepseekChoice.catalog, format: "anthropic"}}]);}); |
| 100 | assert.equal(select("format").value, "openai"); |
| 101 | assert.match(rootEl.querySelector(".provider-catalog__models")!.textContent!, /deepseek-flash, deepseek-v4-pro/); |
| 102 | assert.doesNotMatch(rootEl.querySelector(".provider-catalog__models")!.textContent!, /deepseek-v4-flash/); |
| 103 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value, "https://api.deepseek.com/v1"); |
| 104 | assert.deepEqual(await settingsOptionValues(select("format")), ["openai", "responses", "anthropic"]); |
| 105 | await act(async () => { rootEl.querySelector<HTMLButtonElement>(".btn--primary")!.click(); }); |
| 106 | assert.equal(submittedFormat, "openai"); |
| 107 | await change("format", "anthropic"); |
| 108 | await act(async () => {render(false, [deepseekChoice]);}); |
| 109 | assert.equal(select("format").value, "anthropic"); |
| 110 | assert.equal(rootEl.querySelector<HTMLInputElement>('input[id$="-url"]')!.value, "https://api.deepseek.com/anthropic"); |
| 111 | await act(async () => root.unmount()); |
| 112 | console.log("PASS provider catalog: grouping, constrained selection, exact install, refresh state, local setup"); |
| 113 |