storybook-addon-mock
storybook-addon-mock copied to clipboard
Support for differentiating URL
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 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 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