Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature]: Jest like callback matchers for component tests #30910

Open
Mihitoko opened this issue May 20, 2024 · 2 comments
Open

[Feature]: Jest like callback matchers for component tests #30910

Mihitoko opened this issue May 20, 2024 · 2 comments

Comments

@Mihitoko
Copy link

Mihitoko commented May 20, 2024

馃殌 Feature Request

When this feature gets implemented:
Playwright would provide a generic callback mock that can be passed into components which then later can be asserted using appropriate assertions from expect

Example

Status Quo:
From the docs

// from the
test('event should work', async ({ mount }) => {
  let clicked = false;

  const component = await mount(
    <Button title="Submit" onClick={() => { clicked = true }}></Button>
  );

  await component.click();

  expect(clicked).toBeTruthy();
});

What it could look like after implementation:

test('event should work', async ({ mount }) => {
  const mock = fn() // fn is provided by playwright

  const component = await mount(
    <Button title="Submit" onClick={mock}></Button>
  );

  await component.click();

  await expect(mock).toHaveBeenCalledTimes(1);
});

Other assertions could be:
.toHaveBeenCalled
.toHaveBeenCalledWith

Motivation

The primary motivation is ease of use.
Testing single components also involves how they react to user interaction, and how they would pass information to their parents.
As in the example docs example firing a callback when a component is clicked.

Since stuff like this is common to test i would see it beneficial to have a common way to do it.

When a user implements these themself mistakes can happen leading to flaky tests.
Taking the docs example as a reference, since the assertion is not wrapped into expect.poll the test might be flaky because as far as i know the React event is not guaranteed fired before the assertion.
A native feature could lower the risk of this happen.

I think having these assertions would make migrating from other component test frameworks a lot easier since a lot of frameworks offer these kinds of assertions and having a native alternative could lower the entry barrier to migrate.

Overall i think it would greatly improve usability and improve ease of use writing component tests with playwright-ct.

@Mihitoko
Copy link
Author

If this feature would get approved i would also like looking into implementing it.
If that's ok.

@pavelfeldman
Copy link
Member

It is likely to grow our expect API surface twice or so. If you can use third party mocking library (sinon?), that would work. Otherwise we would need to consider a better interop with jest.fn or to repeat it in our api, which is suboptimal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants