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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support createAsyncCallback in play function #508

Open
PeterChen1997 opened this issue Mar 25, 2024 · 11 comments
Open

Support createAsyncCallback in play function #508

PeterChen1997 opened this issue Mar 25, 2024 · 11 comments

Comments

@PeterChen1997
Copy link

Hello bros, thanks for creating this great repo.

I met a problem that I want to run the loki after the play function. To show the target tooltip.

image

I think it's nice if we support this function in play funciton.

the createAsyncCallback can only be called in component itself. It's a bit invasive method

@leobastiani
Copy link

Related to #133

@PeterChen1997
Copy link
Author

I thinks this is not relative.. The logic is js controlled. So the pesudo plugin will not work

it just work in css level

@leobastiani
Copy link

Comparing to this snippet #359 (comment)
I see a difference here

const asyncCallback = createAsyncCallback();
// ...
finally {
  asyncCallback();
}

I think you need another call after it has been created in your code snippet

@PeterChen1997
Copy link
Author

Comparing to this snippet #359 (comment) I see a difference here

const asyncCallback = createAsyncCallback();
// ...
finally {
  asyncCallback();
}

I think you need another call after it has been created in your code snippet

ohhhh thx for your help. I will have a try tomorrow!

@PeterChen1997
Copy link
Author

image image

@leobastiani thx bro, but I tried to call asyncCallback function like the snippet. I got this error, it seems the promise is not be solved properly..

@PeterChen1997
Copy link
Author

    await userEvent.hover(group);

I think the loki currently not support the await test function. It back to work after I remove this line

@PeterChen1997
Copy link
Author

@oblador Hello boss, could you please have I look 👀

@leobastiani
Copy link

leobastiani commented Mar 28, 2024

I hope I give you a clue saying that I managed to make it work after applying this comment #359 (comment)

I'm also using await canvas.findByText(...) and await userEvent.hover(...) like you are trying

@PeterChen1997
Copy link
Author

I hope I give you a clue saying that I managed to make it work after applying this comment #359 (comment)

I'm also using await canvas.findByText(...) and await userEvent.hover(...) like you are trying

ohhh thx, I got the meaning. I'll have a try tommorow!

@leobastiani
Copy link

leobastiani commented Mar 28, 2024

Try to create and share here a demo repo reproducing this issue if you wish ❤️

@PeterChen1997
Copy link
Author

PeterChen1997 commented May 29, 2024

That's my implementation, if it helps:

import createAsyncCallback from '@loki/create-async-callback';
import isLokiRunning from '@loki/is-loki-running';

const waitForDocumentLoaded = () => {
  if (document.readyState === 'loading') {
    return new Promise<void>((resolve) => {
      document.addEventListener('DOMContentLoaded', () => resolve());
    });
  }

  return Promise.resolve();
};

const enablePointerEvents = () => {
  const styleElement = document.createElement('style');

  document.documentElement.appendChild(styleElement);
  styleElement.sheet?.insertRule('* {pointer-events: auto !important}');
};

type Params = {
  canvasElement: HTMLElement;
};

export const decoratePlayFunctionForLoki =
  <T extends (params: Params) => Promise<void>>(target: T) =>
  async (context: Params) => {
    const lokiRunning = isLokiRunning();
    const asyncCallback = createAsyncCallback();

    if (lokiRunning) {
      await waitForDocumentLoaded();

      enablePointerEvents();
    }

    try {
      await target(context);
    } finally {
      asyncCallback();
    }
  };

and use it like this in stories.tsx

  play: decoratePlayFunctionForLoki(async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    const group = canvas.getByText('G');

    await userEvent.hover(group);
  }),

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

No branches or pull requests

2 participants