linearlabs-workspace / storybook-addon-mock

This addon allows you to mock fetch or XMLHttpRequest in the storybook.
https://storybook-addon-mock.netlify.app
MIT License
112 stars 47 forks source link

Support named parameters in URLs #163

Open danascheider opened 1 year ago

danascheider commented 1 year ago

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!

weeklyTea commented 1 year ago

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)
      },
    }
  ]
}
sr258 commented 1 year ago

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.