Update Action wrappers to make sure they can represent any interactor

[cowboyd]

In order to integrate with the storybook debugger, we need to be able to represent interactors in code form and not just in text description form. Currently, an interactor sequence such as

async function play() {
  await TextField('Username').fillIn('cowboyd');
  await TextField('Password').fillIn('secure-password');
}

will be rendered in storybook as:

1. fill in "cowboyd" into the textfield "Username"
2. fill in "secure-password" into the textfield "Password"

That's because the current facilities to generate a textual representation of interactors is optimized for rendering user-readable errors inside the test failure output. However, we want to be able to render the interaction as close to code as possible, so that the storybook output looks like:

1. TextField('Username').fillIn('cowboyd');
2. TextField('Password').fillIn('secure-password');

This issue is set up to track that we have the pieces in place to do this:

• [ ] print the interactor constructor, the locator and filters, and action name along with arguments.
• [ ] represent hiearchies of interactors
• [ ] print matchers as code instead of descriptions

[cowboyd]

Also, I think we'll need to be able to remove a wrapper too right?

[wKich]

@cowboyd What wrapper do you mean?

[cowboyd]

@wKich I'm referring to the action wrapper and that it receives enough information to render the storybook step.

[wKich]

But why do we need to be able to remote it?

[cowboyd]

I'm not sure what you mean by remote it?

[wKich]

I mean that you said Also, I think we'll need to be able to remove a wrapper too right? Why do we need to remote it?

[cowboyd]

Ah yes, remove, not "remote".

The answer is flexibility and embeddability. If we don't have the ability to remove it, then we cannot safely use it at any other scope other than the global scope. For example, it lets us scope the action wrapper to the context of the storybook interaction.

onPlay((step, signal) => {
  let remove = addActionWrapper(createWrapper(step));
  signal.addEventListener('abort', remove);
})

[wKich]

Oh, sorry. I didn't notice, that I did a typo :)