Adds mockAsyncRedwoodDirective to test asynchronous Validator or Transformer RedwoodDirectives

[dthyresson]

Fixes #5713

mockRedwoodDirective does not await the inner validator function, thus making it hard to test that an async validator functions throws an error

• Adds mockAsyncRedwoodDirective
• Adds docs with example

[netlify]

✅ Deploy Preview for redwoodjs-docs ready!

Name	Link
🔨 Latest commit	e94ab1a
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62c2d03daf3c000009c95cee
😎 Deploy Preview	https://deploy-preview-5822--redwoodjs-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[dthyresson]

@xmonkee Could you take a look at this implementation and the doc examples and confirm that this resolved the issue your raised in #5713 . Thanks!

[jtoar]

Thanks @dthyresson, looking good! Works locally for me. I made a few edits to the docs. The example in the JSDoc may need updating. And I'm a little confused if it should be mockedResolvedValue or resolvedValue for transformer directives?

While this work as is, I have an API suggestion. What if instead of making another function, we just check if directive.onResolverCalled is async or not? That way users don't have to learn another API.

To be more explicit, the code would look like...

export const mockRedwoodDirective: DirectiveMocker = (
  directive,
  executionMock
) => {
  const { directiveArgs = {}, context, ...others } = executionMock

  if (context) {
    setContext(context || {})
  }
  
  // Here's the new code; just do a check here, instead of making another function
  if (directive.onResolverCalled.constructor.name === 'AsyncFunction') {
    return async () => {
      if (directive.type === DirectiveType.TRANSFORMER) {
        const { mockedResolvedValue } = others as TransformerMock
        return await directive.onResolverCalled({
          resolvedValue: mockedResolvedValue,
          context: globalContext,
          ...others,
        } as DirectiveParams)
      } else {
        await directive.onResolverCalled({
          context: globalContext,
          directiveArgs,
          ...others,
        } as DirectiveParams)
      }
    }
  }

  return () => {
    if (directive.type === DirectiveType.TRANSFORMER) {
      const { mockedResolvedValue } = others as TransformerMock
      return directive.onResolverCalled({
        resolvedValue: mockedResolvedValue,
        context: globalContext,
        ...others,
      } as DirectiveParams)
    } else {
      directive.onResolverCalled({
        context: globalContext,
        directiveArgs,
        ...others,
      } as DirectiveParams)
    }
  }
}

I tested it out locally and it seems to work. Thoughts on this approach?

[jtoar]

The docs say mockedResolvedValue but here says resolvedValue—which should it be?

[dthyresson]

Thanks @dthyresson, looking good! Works locally for me. I made a few edits to the docs. The example in the JSDoc may need updating. And I'm a little confused if it should be mockedResolvedValue or resolvedValue for transformer directives?

While this work as is, I have an API suggestion. What if instead of making another function, we just check if directive.onResolverCalled is async or not? That way users don't have to learn another API.

To be more explicit, the code would look like...

export const mockRedwoodDirective: DirectiveMocker = (
  directive,
  executionMock
) => {
  const { directiveArgs = {}, context, ...others } = executionMock

  if (context) {
    setContext(context || {})
  }
  
  // Here's the new code; just do a check here, instead of making another function
  if (directive.onResolverCalled.constructor.name === 'AsyncFunction') {
    return async () => {
      if (directive.type === DirectiveType.TRANSFORMER) {
        const { mockedResolvedValue } = others as TransformerMock
        return await directive.onResolverCalled({
          resolvedValue: mockedResolvedValue,
          context: globalContext,
          ...others,
        } as DirectiveParams)
      } else {
        await directive.onResolverCalled({
          context: globalContext,
          directiveArgs,
          ...others,
        } as DirectiveParams)
      }
    }
  }

  return () => {
    if (directive.type === DirectiveType.TRANSFORMER) {
      const { mockedResolvedValue } = others as TransformerMock
      return directive.onResolverCalled({
        resolvedValue: mockedResolvedValue,
        context: globalContext,
        ...others,
      } as DirectiveParams)
    } else {
      directive.onResolverCalled({
        context: globalContext,
        directiveArgs,
        ...others,
      } as DirectiveParams)
    }
  }
}

I tested it out locally and it seems to work. Thoughts on this approach?

@jtoar I like that much better. I was taking my cue from @xmonkee and #5713.

But a single function simplifies much!

[dthyresson]

@jtoar Do you want to push that refactoring into this PR? Much appreciated!

[jtoar]

@dthyresson just pushed the suggestion. This one seems good to go but maybe we can give xmonkee a few days for feedback.

[jtoar]

@dthyresson I've been waiting for xmonkee's feedback here before merging but let me know if you got feedback on another channel.