Inconsistent use of queries in enhanceQueries

[sbr61]

There is an inconsistency in the queries being used by enhanceQueries dependent on whether the within option is present in the query descriptor object passed to the accessor functions.

In the two following lines taken from the usage description of enhanceQueries:

const enhanced = enhanceQueries(queries);
expect(enhanced.query({ filter: 'text', params: ['Expected text'] }).toBeTruthy();

the queryByText method in the queries object passed to enhanceQueries is being used.

However, when using the within property:

  const containerConfig = { filter: "testId", params: ["container-id"] };
  expect(
    enhanced.query({
      filter: "text",
      params: ["Expected text"],
      within: containerConfig,
    })
  ).toBeTruthy();

the original queryByText method from dom-testing-library is being used.

The inconsistency is caused by line 26 of enhance-queries.js:

return dtlWithin(scopedElement)[fnName](...params);

With the following change to this line

 return dtlWithin(scopedElement, queries)[fnName](...params);

the second example would also use the queryByText method in the queries object passed to enhanceQueries.

May I ask you to provide this fix? Would it also be possible to add extra exports for queryBySelector, queryAllBySelector, getBySelector, getAllBySelector, findBySelector, and findAllBySelector to index.js?

Both changes would be required to use query-extensions together with angular-testing-library. Because angular-testing-library has its own versions of screen and within (triggering Angular change detection), the query-extensions versions of screen and within cannot be used without loosing the Angular enhancements. However, with the suggested changes, it would be possible to use enhanceQueries with the queries returned by the angular-testing-library render function as follows:

import { queries as dtlQueries } from '@testing-library/dom';
import {
    enhanceQueries, queryBySelector, queryAllBySelector, getBySelector, getAllBySelector, findBySelector, findAllBySelector
} from 'query-extensions';

const queries = enhanceQueries(
        await render(AppComponent, {
            queries: {
                ...dtlQueries,
                queryBySelector, queryAllBySelector, getBySelector, getAllBySelector, findBySelector, findAllBySelector
            }
        }
);

Here, render gets the original queries from dom-testing-library plus the selector queries from query-extensions, binds fixture.nativeElement to all of them (fixture is a refence to the rendered AppComponent), and returns wrapped versions (performing Angular change detection) for all these queries. enhanceQueries then finally adds the six extra accessor functions for the wrapped queries.

[tjefferson08]

Thanks for the detailed report, @sbr61!

I'll have a look at this when I have some time. PRs are welcome, too, if you're up for tackling it yourself!