storybook-addon-mock icon indicating copy to clipboard operation
storybook-addon-mock copied to clipboard

Support for differentiating URL

Open erprilianoAbbas opened this issue 1 year ago • 1 comments
trafficstars

Hi,

I have this case where this URL is being called in getLookupValue(lookupName) function on my React component : api/lookup/?lookupName={lookupName},

then in my code I'd call that API like this :

const [title, gender, contactMethod] = await Promise.all([
  getLookupValue('TITLE'),
  getLookupValue('GENDER'),
  getLookupValue('CONTACT_METHOD')
]);

// rest of the code

Then this is how I wrote the mockData on my stories.

// other codes
parameters: {
  mockData: [
    {
        url: 'https://dummy-api.com/api/lookup/?lookupName=TITLE',
        method: 'GET',
        status: 200,
        response: [ { lookupText: 'Mr', lookupValue: 1 } ]
    },
    {
        url: 'https://dummy-api.com/api/lookup/?lookupName=GENDER',
        method: 'GET',
        status: 200,
        response: [ { lookupText: 'Male', lookupValue: 1 } ]
    },
    {
        url: 'https://dummy-api.com/api/lookup/?lookupName=CONTACT_METHOD',
        method: 'GET',
        status: 200,
        response: [ { lookupText: 'Email', lookupValue: 1 } ]
    },
  ],
}

// rest of the codes

Issue

When I debug my code, it seems only CONTACT_METHOD that successfully being mocked, then when I commented that part, GENDER was successfully being mocked. So, I'm assuming all the previous values are being overwritten by the latest value, which in this case is CONTACT_METHOD, because it has almost identical url and only distinguished by the query params.

Question

Is there any other ways to successfully handle this case using this plugin?

erprilianoAbbas avatar May 25 '24 13:05 erprilianoAbbas

@erprilianoAbbas if you use the custom response function, you can easily intercept the request params and respond by the lookup name

parameters: {
  mockData: [
    {
      url: 'https://dummy-api.com/api/lookup',
      method: 'GET',
      status: 200,
      response: (request) => {
        if (request.query.lookupName === 'TITLE') {
          return [ { lookupText: 'Mr', lookupValue: 1 } ];
        } else if (request.query.lookupName === 'GENDER') {
          return [ { lookupText: 'Male', lookupValue: 1 } ]
        } else if (request.query.lookupName === 'CONTACT_METHOD') {
          return [ { lookupText: 'Email', lookupValue: 1 } ]
        }
        return [];
      }
    }
  ]
}

nutboltu avatar Jun 11 '24 10:06 nutboltu

@nutboltu Unfortunately, this isn't a perfect solution. Sometimes, it is necessary to send the first request immediately and the second with a delay. At the moment, it seems that there is no way to do this with this addon

pryahin avatar Nov 15 '24 11:11 pryahin