Browser tests follow-up

[pngwn]

Description

This is a follow-up to the recent browser testing changes focusing on testing component events.

It adds/ modifies a couple of utilities to ensure we can easily and reliably test component events. As we changed how events are fired from components in 6.0 we needed to change the utilities we use to fire them as well. We now have:

listen("event_name") -> Mock

listens for a component event and returns a mock that we can assert on:

test("focus: emitted when input gains focus", async () => {
  const { getByDisplayValue, listen } = await render(Textbox, default_props);
  
  const item = getByDisplayValue("hi");
  const focus = listen("focus");

  item.focus();

  expect(focus).toHaveBeenCalledTimes(1);
});

set_data(data) -> Promise<void>

in v6 we also changed how we update the data inside components. This help sets the data of a component and returns a promise that has resolved when the data has been propagated through the sveltey system (in theory, may have limits).

Exmaple:

test("change: emitted when value changes from outside", async () => {
  const { listen, set_data } = await render(Textbox, default_props);
  const change = listen("change");

  await set_data({ value: "hello world" });

  expect(change).toHaveBeenCalledTimes(1);
  expect(change).toHaveBeenCalledWith("hello world");
});

In addition to the utilities I created a series of event test for the Textbox component to show how we use them and what a decent set of tests might look like.

Feedback very welcome!

AI Disclosure

We encourage the use of AI tooling in creating PRs, but the any non-trivial use of AI needs be disclosed. E.g. if you used Claude to write a first draft, you should mention that. Trivial tab-completion doesn't need to be disclosed. You should self-review all PRs, especially if they were generated with AI.

• I attempted to use AI repeatedly and failed.

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Storybook	failed!	Details
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/ab36d83fdcfff8011691c8df0726ac84d5f2aa10/gradio-6.9.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@ab36d83fdcfff8011691c8df0726ac84d5f2aa10#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/ab36d83fdcfff8011691c8df0726ac84d5f2aa10/gradio-client-2.1.0.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/textbox	patch
@gradio/utils	patch
@self/spa	patch
@self/tootils	patch
gradio	patch

---

• Browser tests follow-up

---

‼️ Changeset not approved. Ensure the version bump is appropriate for all packages before approving.

• Maintainers can approve the changeset by checking this checkbox.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[freddyaboulton]

Looks great @pngwn ! Love the new mock API. I think this sets us up really nicely to convert lots of the e2e tests with unit tests.

[pngwn]

I think I addressed everything now @freddyaboulton. Obviously ci doing its thing