Add filter delegation

[jnicklas]

A problem we've had with writing interactors is that filters do not compose in any meaningful way. Often we want to have a filter depend on another interactor to create better encapsulation. With filter delegation, building on filter methods introduced in #89, we can elegantly compose interactor filters.

An example:

const Calendar = HTML.extend<HTMLElement>("calendar")
  .selector("div.calendar")

const Datepicker = HTML.extend<HTMLDivElement>("datepicker")
  .selector("div.datepicker")
  .filters({
    open: Calendar().exists(),
    month: Calendar().find(Header()).text(),
  })
  .actions({
    toggle: async interactor => {
      await interactor.find(TextField({ placeholder: "YYYY-MM-DD" })).click();
    }
  });

In the future we may want to add support for delegated locators as well, but this is not included as part of this PR.

Depends on #89

[changeset-bot]

🦋 Changeset detected

Latest commit: e95ab99

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@interactors/html	Minor
@interactors/material-ui	Patch
@interactors/with-cypress	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✔️ Deploy Preview for interactors canceled.

🔨 Explore the source changes: e95ab99

🔍 Inspect the deploy log: https://app.netlify.com/sites/interactors/deploys/616ff78b1e9808000734e7dc

[taras]

  .filters({
    open: Calendar().exists(),
    month: Calendar().find(Header()).text(),
  })

This looks mind-blowingly good.

[cowboyd]

How do we handle "portals" "wormholes" or other techniques to render "pseudo-children" where visually and in the component tree, the child is associated with the parent, but in the DOM, it is in a completely separate tree?

In these cases, we want to break context and escape to the top of the page.

[jnicklas]

How do we handle "portals" "wormholes" or other techniques to render "pseudo-children" where visually and in the component tree, the child is associated with the parent, but in the DOM, it is in a completely separate tree?

In these cases, we want to break context and escape to the top of the page.

You can use the Page interactor for this, since it provides a wormhole:

  .filters({
     contextMenu: Page.find(ContextMenu())
  })