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.

Sign up for GitHub

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

Jump to bottom

Allow narrowing down the part of the DOM that is printed when queries fail #902

Open
Floriferous opened this issue Feb 24, 2021 · 7 comments
Open

Allow narrowing down the part of the DOM that is printed when queries fail #902

Floriferous opened this issue Feb 24, 2021 · 7 comments
Labels
enhancement New feature or request

Comments

@Floriferous
Copy link

Describe the feature you'd like:

When a query fails, the default behavior appears to be to log the entire <body /> in the error message. In our case, even during tests, the body contains a lot of <script> tags, which makes the output so long that we don't get to see the actual interesting part, where the error is.

It would be great if we could specify which part of the DOM we want to be logged, as I control the wrapping element, and know how to query it. So a kind of config that says onErrorQuery: '.test-wrapper' could query for that element and print it?

Here's an example 
Unable to find an element with the text: All files. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

<body>
  
  
  <script
    type="text/javascript"
  >
    __meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%402.0%22%2C%22gitCommitHash%22%3A%22bee1380c47f2431e7543c64da04c16cffd03b27c%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22development%22%2C%22TEST_METADATA%22%3A%22%7B%5C%22driverPackage%5C%22%3A%5C%22meteortesting%3Amocha%5C%22%2C%5C%22isAppTest%5C%22%3Afalse%2C%5C%22isTest%5C%22%3Atrue%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%22microservice%22%3A%22admin%22%2C%22environment%22%3A%22dev%22%2C%22google_maps_key%22%3A%22AIzaSyCdoi6BxlTf7GgxqAGAsd1ADM_UwgqWUP8%22%2C%22subdomains%22%3A%7B%22api%22%3A%22http%3A%2F%2Flocalhost%3A5500%22%2C%22admin%22%3A%22http%3A%2F%2Flocalhost%3A5000%22%2C%22app%22%3A%22http%3A%2F%2Flocalhost%3A4000%22%2C%22backend%22%3A%22http%3A%2F%2Flocalhost%3A5500%22%2C%22pro%22%3A%22http%3A%2F%2Flocalhost%3A4100%22%2C%22www%22%3A%22http%3A%2F%2Flocalhost%3A3000%22%7D%2C%22mochaRuntimeArgs%22%3A%7B%22mochaOptions%22%3A%7B%22grep%22%3Afalse%2C%22invert%22%3Afalse%2C%22serverReporter%22%3A%22xunit%22%2C%22clientReporter%22%3A%22xunit%22%2C%22serverOutput%22%3A%22%2Fhome%2Fcircleci%2Fapp%2Fresults%2Funit-server.xml%22%2C%22clientOutput%22%3A%22%2Fhome%2Fcircleci%2Fapp%2Fresults%2Funit-client.xml%22%7D%2C%22runnerOptions%22%3A%7B%22runClient%22%3Atrue%2C%22runServer%22%3Afalse%2C%22browserDriver%22%3A%22puppeteer%22%2C%22testWatch%22%3Afalse%2C%22runParallel%22%3Afalse%7D%7D%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22_hmrSecret%22%3A%22fd025f14551ba3c0663add63ee8c159ade192e50cf3ca13debd00f3f5b49400f7ee3bd92ea847a333e9eb07573450f36f873341b69fc5fe73d699ee2271af002%22%2C%22reactFastRefreshEnabled%22%3Atrue%2C%22meteortesting%3Amocha-core_config%22%3A%22%7B%5C%22forbidOnly%5C%22%3Atrue%7D%22%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%221b03a8526f1fa1e2344655cf0162f6a596c2e08c%22%2C%22versionRefreshable%22%3A%22416dd968fa897bf40b5a30a1ad2a9dbf1cd2f3f1%22%2C%22versionNonRefreshable%22%3A%221b03a8526f1fa1e2344655cf0162f6a596c2e08c%22%2C%22versionReplaceable%22%3A%22416dd968fa897bf40b5a30a1ad2a9dbf1cd2f3f1%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%22s6izz8zbdmmi.ir22rcw5pwnq%22%7D%2C%22appId%22%3A%22s6izz8zbdmmi.ir22rcw5pwnq%22%2C%22isModern%22%3Atrue%7D"))
  </script>
  

  
  <script
    src="/packages/meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/meteor-base.js?hash=29010b127daf4ebacaaf9db9b8a61487e57d7d86"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/modules.js?hash=c244c67d5857c87afa25245102ae430b2f3a556d"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/modern-browsers.js?hash=54726531b4795563b9a80c7b5a0cd309bbcf0864"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/babel-compiler.js?hash=8c5705ac79152fc21e82c438dba99009224c6cec"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/hot-module-replacement.js?hash=22d8cfbe1ca1509fc13b6f268883287a7c6b3b6c"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/react-fast-refresh.js?hash=b6c1b2fb7b85526cb964fb12dbb325c90c3ae990"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ecmascript.js?hash=6aac20a70923a44476d944a4d125196412f1aa5a"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ecmascript-runtime.js?hash=f47aa897b4de5ae6f0c0017bb5398dfb81681191"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/babel-runtime.js?hash=c4994a0e8fd67db094a0635e8fcb0355c0cb7c1c"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/fetch.js?hash=0b9fdd2f5e9d2d8b0f9d52621e86d2fdcf0b4140"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/dynamic-import.js?hash=3bc51bea4e14cfec0e3cd05ada6fbd83aae8f92f"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/es5-shim.js?hash=5a0c0b4a871e6831f41adcf5125f8849af0dccc6"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ecmascript-runtime-client.js?hash=c5953dc3019ce157fa142871649fc345d9c89924"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/base64.js?hash=d815902a305964cd5d5124cfca68a5d562f2ebab"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ejson.js?hash=18007405fd1814ce9b3b5e6b00e070ceb25ffa72"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/diff-sequence.js?hash=e7fa948eeff64f908873f6c77502554d52a4d615"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/geojson-utils.js?hash=574576455f62f44cc91645f1ffa25291c5570d40"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/id-map.js?hash=49a2eb01ca354603f5cf6a364a3e58c5a0873e53"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/random.js?hash=d072c94358e70b22c75e95559471ca75f78e4e64"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/mongo-id.js?hash=bf89be67790e02a065ad87c0803798c9b9be4f61"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ordered-dict.js?hash=0542cdf204403ec33348fd779911ad2b9b4e7a48"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/tracker.js?hash=5ef67b97eaf2ca907dc38459283f2349bada6814"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/minimongo.js?hash=1adf430b764303f94c69db2f8fe0a2da539aa476"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/check.js?hash=75acf7c24e10e7b3e7b30bb8ecc775fd34319ce5"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/retry.js?hash=687659eb641def936a59de913280418c7d832945"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/callback-hook.js?hash=6760faa220114e35df517db805f6ca0fe2b9c2ab"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ddp-common.js?hash=e155eb98000548e178b4993ea1b69407d4a547ec"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/reload.js?hash=f447bf6e7b53c13e47d38152b484a9f86e77d692"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/socket-stream-client.js?hash=50e1fc1ec576cba39c38336d2bd55ba023e60bc6"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ddp-client.js?hash=9e4081c1b0dfde446688af96b8d9e8494e67fe2a"
    type="text/javascript"
  />
  
  
  <script
    src="/packages/ddp.js?hash=675438ff1bf207eeda74d574359af6643aefb5fd"
    type="text/javascript"
  />
  
  
  <script
   ...
@eps1lon
Copy link
Member

eps1lon commented Feb 24, 2021

Facing the same issue with karma. Though I wouldn't narrow it by container. That breaks down once you're UI library supports portals and you can actually have rendered element in a "container" and body.

It seems to me that we should just ignore <script /> elements by default.

@eps1lon eps1lon added the enhancement New feature or request label Feb 24, 2021
@Floriferous
Copy link
Author

Is there no way to specify where portals should be rendered? Or do they always render in the body tag?

@eps1lon
Copy link
Member

eps1lon commented Feb 24, 2021

Is there no way to specify where portals should be rendered? Or do they always render in the body tag?

That's not really relevant here. You shouldn't change the implementation just for tests.

@eps1lon
Copy link
Member

eps1lon commented Feb 25, 2021

Started the effort in master...eps1lon:feat/pretty-dom-noise.

Though it seems like pretty-format does not allow to return "nothing". By returning an empty string the spacing is appended (a newline in our case) which produces

<body>
      
      
  <p>
    Hello, Dave
  </p>
</body>

from

<body>
  <script
    src="context.js"
  />
  <!-- Some comment -->
  <p>
    Hello, Dave
  </p>
</body>

which isn't ideal.

So either I'm missing some API in pretty-format or we first need to add "return nothing" as a feature to pretty-format.

This was referenced Feb 28, 2021
Closed
Merged
@lewisandrew
Copy link

Could we update this line to the following, that way we can override some tags?

export const DEFAULT_IGNORE_TAGS = process.env.DEFAULT_IGNORE_TAGS || 'script, style';

I'd like to hide svg path elements from the error debug output which can bloat the output quite a lot.

@jeffal
Copy link

jeffal commented Nov 14, 2022

Seems like updating this config option should work: https://testing-library.com/docs/dom-testing-library/api-configuration/#defaultignore, but I am not seeing what I would expect.

@jeffal
Copy link

jeffal commented Nov 30, 2022

Seems like updating this config option should work: https://testing-library.com/docs/dom-testing-library/api-configuration/#defaultignore, but I am not seeing what I would expect.

This is working for me after upgrading to the latest version (8.18.1 -> 8.19.0).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jeffal @lewisandrew @Floriferous @eps1lon