timered-counter/dist/stories/story-parts/animation-events.js

Make the value change more vivid and natural

import { expect, fn, waitFor } from '@storybook/test';
import { range } from 'remeda';
import { equal as _equal, sleep } from '../utils/index.js';
export async function animationEvents(context, { counter, list = range(0, 5).map(v => v * 10), setBy, equal = _equal, }) {
    const { step, args } = context;
    setBy(counter, 'value', list[0]);
    await sleep((args.animationOptions.duration ?? 100) + 10);
    const timeredCounterAnimationStartListener = fn();
    const timeredCounterAnimationEndListener = fn();
    counter.addEventListener('timered-counter-animation-start', timeredCounterAnimationStartListener);
    counter.addEventListener('timered-counter-animation-end', timeredCounterAnimationEndListener);
    await step('Incrementing the value and watching the events', async () => {
        for await (const [index, value] of list.entries()) {
            setBy(counter, 'value', value);
            await waitFor(() => expect(timeredCounterAnimationStartListener).toHaveBeenCalledTimes(index), { timeout: (args.animationOptions.duration ?? 100) + 1000 });
            await waitFor(() => expect(timeredCounterAnimationEndListener).toHaveBeenCalledTimes(index), { timeout: (args.animationOptions.duration ?? 100) + 1000 });
            await equal(counter, counter.value, value);
        }
    });
    timeredCounterAnimationStartListener.mockReset();
    timeredCounterAnimationEndListener.mockReset();
    await step('Decrementing the value and watching the events', async () => {
        for await (const [index, value] of list.slice().reverse().entries()) {
            setBy(counter, 'value', value);
            await waitFor(() => expect(timeredCounterAnimationStartListener).toHaveBeenCalledTimes(index), { timeout: (args.animationOptions.duration ?? 100) + 1000 });
            await waitFor(() => expect(timeredCounterAnimationEndListener).toHaveBeenCalledTimes(index), { timeout: (args.animationOptions.duration ?? 100) + 1000 });
            await equal(counter, counter.value, value);
        }
    });
    timeredCounterAnimationStartListener.mockReset();
    timeredCounterAnimationEndListener.mockReset();
    counter.removeEventListener('timered-counter-animation-start', timeredCounterAnimationStartListener);
    counter.removeEventListener('timered-counter-animation-end', timeredCounterAnimationEndListener);
}
//# sourceMappingURL=animation-events.js.map