Add a way to disable delay in runtime for all mocked requests

[isqua]

trafficstars

Very useful plugin, thank you! I use it in many components to show loading and saving processes.

I also write screenshot tests on my Storybook components. I have to synchronize mock delay time and pause in my tests, which causes the tests to take a bit longer to run.

Usually, I would like to have no delays in my tests. So I would like to be able to turn off all delays in mocked request. For example, through global types or another way that can be controlled through the URL. Something like this:

// .storybook/preview.js

export const globalTypes = {
  mockDelay: {
    name: 'Mock delay',
    description: 'Enable/disable mock delays',
    defaultValue: 'enabled',
    toolbar: {
      icon: 'circlehollow',
      // Array of plain string values or MenuItem shape (see below)
      items: ['enabled', 'disabled'],
      // Property that specifies if the name of the item will be displayed
      showName: true,
      // Change title based on selected value
      dynamicTitle: true,
    },
  },
};

Do you think this is possible? What's the best way to implement it?

[nutboltu]

@isqua, you can set up the delay time from the addon panel. However, it won't fix your problem as we are using setTimeout even though the delay time is 0. I have to raise a PR to fix this issue. Any PR from your end will also welcome :)

[isqua]

@nutboltu, thank you for the response! Is it a way to change the value programmatically? setTimeout with 0 is not the issue for me, I just would to reduce the time needed for load data in tests.

[nutboltu]

There are no global types for that, as this is a special case. I would recommend using a separate mock data list for the load tests and using delay 0 in that mock data.

[isqua]

Yes, I am going to use something like this:

const meta: Meta<IMyComponentStoryArgs> = {
    title: 'components/MyComponent',
    decorators: [withMock],
    parameters: {
        mockData: adjustTimers([
            {
                url: '/api/mydata/success',
                method: 'PATCH',
                status: 201,
                delay: 500,
                response: {},
            },
            {
                url: '/api/mydata/error',
                method: 'PATCH',
                status: 502,
                delay: 500,
                response: {},
            },
        ]),
    },
};

export default meta;

and the adjustTimers will reset timers based on the environment. I just looking for a more native way :)