storybook-addon-mock
storybook-addon-mock copied to clipboard
Support named parameters in URLs
Hi team, I have a feature request that I'd be able to help implement if you're interested and can point me in the right direction as far as where to start. I need to be able to support named parameters in URLs:
Default.parameters = {
mockData: [
{
url: 'http://localhost:3000/games/:id',
method: 'DELETE',
status: 204,
response: null,
},
],
}
This is a simple example that could potentially also be solved with a wildcard, but for more complex cases I'll need to be able to access the value of this parameter in a response function.
Is this functionality you'd be interested in seeing added? I may be a little out of my comfort zone contributing something like this but I'm happy to take a stab at it if you can suggest where to get started. I love your tool and I want to be able to keep using it!
Would be really nice to have this feature! Then code of stories can be improved from this:
const mockUsers = generateMockUsers(10) // generating 10 users.
const mockSubscriptions = generateSubscriptions(mockUsers, 4) // generating 4 subscriptions for every user
Default.parameters = {
mockData: [
...(mockUsers.map(user => {
const subscriptions = mockSubscriptions[user.id]
return [
{
url: `/users/${user.id}`,
method: 'GET',
status: 200,
response: user,
},
...subscriptions.map(sub => ({
url: `/users/${user.id}/subscription/${sub.id}`,
method: 'GET',
status: 200,
response: sub,
}))
]
}).flat()),
]
}
to this:
const mockUsers = generateMockUsers(10) // generating 10 users.
const mockSubscriptions = generateSubscriptions(mockUsers, 4) // generating 4 subscriptions for every user
Default.parameters = {
mockData: [
{
url: `/users/:userId`,
method: 'GET',
status: 200,
response: request => {
const userId = request.pathParams.userId
return mockUsers.find(user => user.id === userId)
},
},
{
url: `/users/:userId/subscriptions/:subId`,
method: 'GET',
status: 200,
response: request => {
const userId = request.pathParams.userId
const subId = request.pathParams.subId
return mockSubscriptions[userId].find(sub => sub.id === subId)
},
}
]
}
As far as I can see, this feature is already partly implemented. You can use named parameters in URLs, however these parameters are not passed to the response function, which would be great.