Provide request url matching

[kettanaito]

What:

I propose to provide a smart request url matching.

https://github.com/kettanaito/msw/blob/a1196004c390d115d29941de405d9db571357107/serviceWorker.js#L38

Why:

To support placeholders, params, and other parts of url:

How

https://domain.com/shop/:shopId

To match all the following:

https://domain.com/shop/foo // { shopId: "foo" }
https://domain.com/shop/bar // { shopId: "bar" }

We can also parse the params and expose them within the req reference for handler(req) to access in the mocking handler.

The challenge here is that the logic happens inside a Service Worker, thus it should be done without requiring any package.

[bebraw]

Something like url-matcher can likely handle the matching part. Simple after that.

[kettanaito]

@bebraw Thing is, it is not enough to simply determine if a string matches a given mask. Here's the draft unit case of how this should work:

const parsedRoute = parseRoute(
  'http://foo.com/user/:username/:messageId',
  'http://foo.com/user/bebraw/21'
)

expect(parsedRoute).toEqual({
  params: {
    username: 'bebraw',
    messageId: '21'
  }
})

So the params can be inserted into the req reference and passed into the mocking function. Afaik, there is no params/query parsing on the Request instance by default.

[bebraw]

Yeah, I see. It's a bit more complicated.

[kettanaito]

@bebraw I have a stupid idea to gather the map of param names and their indexes, and then reduce the route string into the map of params.

[bebraw]

Worth a go.

[kettanaito]

So, there is a small function that check if a route matches the mask, and gathers its params. It's limited, but works.

function parseRoute(mask, route) {
  let paramsList = []
  const replacedMask = mask.replace(/:(\w+)/g, (a, b) => {
    paramsList.push(b)
    return '(\\w+)'
  })

  const match = new RegExp(replacedMask).exec(route)
  const params = match && match.slice(1, match.length).reduce((acc, paramValue, index) => {
    const paramName = paramsList[index]
    return Object.assign(acc, {
      [paramName]: paramValue
    })
  }, {})

  return {
    url: route,
    matches: !!match,
    params,
  }
}

Update: I've integrated this to the Service Worker right now and it's great so far.

[kettanaito]

The current implementation looks sufficient at the moment, closing.