Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent use of queries in enhanceQueries #3

Open
sbr61 opened this issue Nov 1, 2022 · 1 comment
Open

Inconsistent use of queries in enhanceQueries #3

sbr61 opened this issue Nov 1, 2022 · 1 comment

Comments

@sbr61
Copy link

sbr61 commented Nov 1, 2022

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
Copy link
Owner

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants