A Reactive Form method to make the building of storybook tests for UI components leveraging Angular Reactive Forms easier.

[michael-lloyd-morris]

Is your feature request related to a problem? Please describe.

I have recently figured out how to effectively create Reactive Form components that can be stood up in Storybook and tested. The process can be seen in action in the code in this branch of the tutorial repository I wrote to document this:

https://github.com/michael-lloyd-morris/storybook-angular-reactive-forms/tree/ch3-simple-reactive-form-component

Reactive Form UI components must be attached to a form. They are guided to this attachment through an application service known as the ControlContainer. In testing this must be mocked, and here is the code to do so:

let container:FormGroup

@Injectable()
class MockContainer {

  public control:FormGroup

  constructor(private fb:FormBuilder) {
    this.control = this.fb.group({
      basic: ['Hello World'],
    })
    container = this.control
  }
}

The decorator of the story that uses this is then provided with the mock like so

  decorators: [
    moduleMetadata({
      providers: [{
        provide: ControlContainer,
        useClass: MockContainer
      }] 
    }),
  ]

This works, but it is awkward.

Describe the solution you'd like

I'd like to be able to just have a new method that can be put in the decorator

  decorators: [
    reactiveForm(formDefinition)
  ]

The form definition would be identical in all respects to the argument one would give the Reactive Form Builder.

It would create a provider for the story that satisfies the ControlContainer service requirement, but it would also pass an additional member of the object received by the play function of the story called reactiveForm to enable the test inspection of the form state as the UI control under test is interacted with. So in action a story leveraging the requested code fully would look like this.

export const Basic: Story = {
  args: {
    id: 'basic-field',
    label: 'Text Field',
    formControlName: 'basic'
  },
  decorators: [
    reactiveForm([{basic: ['Hello World']})
  ],
  play: async ({canvasElement, reactiveForm}) => {
    const canvas = within(canvasElement)
    const control = reactiveForm.get('basic')
    const input = canvas.getByLabelText('Text Field') as HTMLInputElement

    // Initial State
    expect(input.value).toBe('Hello World')
    expect(control!.value).toBe('Hello World')

    await userEvent.clear(input)
    expect(input.value).toBe(control.!value)

    await userEvent.type('Goodbye')
    expect(control.!value).toBe('Goodbye')
  }
}

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

[michael-lloyd-morris]

Bump so this doesn't get autoclosed.