Complex nested interactor functions do not work as expected

[wwilsman]

Given these interactors:

@interactor class SignInInteractor {
  fillName = fillable('[data-test-name-input]')
  fillEmail = fillable('[data-test-email-input]')
  submit = clickable('[data-test-submit]')
  fillAndSubmit(name, email) {
    return this
      .fillName(name)
      .fillEmail(email)
      .submit()
  }
}

@interactor class PageInteractor {
  signInForm = new SignInInteractor('[data-test-signin-form]')
}

I would expect this to work:

new PageInteractor()
  .signInForm.fillAndSubmit('Wil', 'wil@frontside.io')

But instead, an error is throw that might look like this:

PageInteractor.fillEmail is not a function

This is because when an interactor is nested, it's methods return new instances of the parent interactor. So fillName() in SignInInteractor will return a new PageInteractor.

We should have a way to break out of this nested structure for complex methods such as this. Something like this.pure(), this.scoped(), or something akin to return an un-nested interactor.