CDK - HarnessPredicate: override or disable base options

Feature Description

Option to disable or override the base options of a HarnessPredicate to keep our Harness implementation consistent.

Use Case

We have a component library and in some cases the FormControl is wrapped inside a custom component. For accessibility reasons we still want to link the label with the underlying FormControl. To do so, we need to remove the attribute reflection on the Host element to prevent having multiple Ids on the page.

// This code prevents the attribute reflection of the Id attribute into the DOM
@HostBinding('attr.id') null;

The problem is, that this breaks the lookup via selector on the base options. We would need to change the lookup to check the FormControl instead of the Host.

Of course, we could provide custom HarnessFilters. But then we would need to rename the options. It would be nice if we could override or disable the base options. Disabling or overriding the base options would allow us to keep a consistent interface throughout all components in our UI framework. Basically every Harness object would always provide the selector plus maybe something additional.

Possible solutions / approaches

Pass in custom match function

The HarnessPredicate could accept a custom match function

  constructor(public harnessType: ComponentHarnessConstructor<T>, 
  		     options: BaseHarnessFilters,
                     matchFunction?: ((option: BaseHarnessFilters) => Promise<boolean>) | null) 
{  }

Option to disable the base functions and then use the addOption to provide them yourself

  constructor(public harnessType: ComponentHarnessConstructor<T>, 
  		      options: BaseHarnessFilters,
                      disableBaseFunctions = false)
  {}

and then inside our Harness implementation:

 static with(options: BaseHarnessFilters): HarnessPredicate<CustomHarness> {
    return new HarnessPredicate(CustomHarness, options).addOption(
      'custom selector option',
      options.selector,
      async (harness: CustomHarness, selector: string) => {
        if (selector.startsWith('#')) {
          const inputField = await harness.getInputFieldElement();
          console.log(`#${inputField.getAttribute('id')}` === selector);
          return HarnessPredicate.stringMatches(
            `#${inputField.getAttribute('id')}`,
            selector
          );
        }
        return (await harness.host()).matchesSelector(selector);
      }
    );
  }

Let me know what you think of those proposed solutions. Is this something that you consider? If yes, I would be happy to open a PR.

[mmalerba]

Do we actually need to change anything to support this? Why don’t they just not pass the options through in their with function, like this:

static with(options: BaseHarnessFilters): HarnessPredicate<CustomHarness> {
    return new HarnessPredicate(CustomHarness, {})
        .addOption('custom selector option', options.selector, (...) => {...})
}

Or is there something I’m missing?

[mmalerba]

I would prefer to keep it non-optional so that people don’t forget to pass it along as @devversion mentioned