Files
gradio-app--gradio/js/spa/test/web_component_embed.spec.ts
wehub-resource-sync adf0d17497
publish / version_or_publish (push) Has been cancelled
storybook-build / changes (push) Has been cancelled
storybook-build / :storybook-build (push) Has been cancelled
Sync Gradio Skills to Hugging Face / sync-skills (push) Has been cancelled
functional / changes (push) Has been cancelled
functional / build-frontend (push) Has been cancelled
functional / functional-test-SSR=false (push) Has been cancelled
functional / functional-reload (push) Has been cancelled
js / changes (push) Has been cancelled
js / js-test (push) Has been cancelled
docs-build / changes (push) Has been cancelled
docs-build / docs-build (push) Has been cancelled
docs-build / website-build (push) Has been cancelled
functional / functional-test-SSR=true (push) Has been cancelled
hygiene / hygiene-test (push) Has been cancelled
python / changes (push) Has been cancelled
python / build (push) Has been cancelled
python / test-ubuntu-latest-flaky (push) Has been cancelled
python / test-ubuntu-latest-not-flaky (push) Has been cancelled
python / test-windows-latest-flaky (push) Has been cancelled
python / test-windows-latest-not-flaky (push) Has been cancelled
chore: import upstream snapshot with attribution
2026-07-13 13:17:32 +08:00

56 lines
1.7 KiB
TypeScript

import { test, expect } from "@self/tootils";
// Embeds an app with the `<gradio-app>` web component and re-attaches the
// element, a regression test for `this.app.$destroy is not a function` (#12507).
// Skipped in SSR mode: the test discovers the bundle from the index HTML, which
// SSR (SvelteKit) doesn't expose. Embedding itself works fine against an SSR app.
test.skip(
process.env?.GRADIO_SSR_MODE?.toLowerCase() === "true",
"test discovers the web-component bundle from the client-rendered index HTML"
);
test("app embeds and renders via the <gradio-app> web component", async ({
page
}) => {
const app_url = new URL(page.url()).origin;
const page_errors: string[] = [];
page.on("pageerror", (e) => page_errors.push(e.message));
await page.setContent(`
<h1>Host page</h1>
<div id="slot"></div>
<script type="module">
const html = await (await fetch("/")).text();
const entry = html.match(/assets\\/index-[A-Za-z0-9_-]+\\.js/)[0];
await import("/" + entry);
await customElements.whenDefined("gradio-app");
document.getElementById("slot").innerHTML =
'<gradio-app src="${app_url}"></gradio-app>';
</script>
`);
const embed = page.locator("gradio-app");
await expect(embed.getByRole("button", { name: "Greet" })).toBeVisible({
timeout: 20_000
});
// #12507: re-attaching re-runs connectedCallback with `this.app` already set.
await page.evaluate(() => {
const slot = document.getElementById("slot");
const el = slot?.querySelector("gradio-app");
if (el) {
el.remove();
slot?.appendChild(el);
}
});
await expect(embed.getByRole("button", { name: "Greet" })).toBeVisible({
timeout: 20_000
});
expect(
page_errors.filter((e) => /\$destroy is not a function/.test(e))
).toHaveLength(0);
});