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

Support named parameters in URLs

Open oscaralanpierce opened this issue 2 years ago • 2 comments

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!

oscaralanpierce avatar Mar 07 '23 21:03 oscaralanpierce

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)
      },
    }
  ]
}

weeklyTea avatar Mar 28 '23 10:03 weeklyTea

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.

sr258 avatar Nov 20 '23 18:11 sr258