feat: add asFragment return value from render
#192
Conversation
src/index.js
Outdated
| @@ -29,6 +30,7 @@ function render(ui, {container, baseElement = container, queries} = {}) { | |||
| // Intentionally do not return anything to avoid unnecessarily complicating the API. | |||
| // folks can use all the same utilities we return in the first place that are bound to the container | |||
| }, | |||
| asFragment: () => JSDOM.fragment(container.innerHTML), | |||
There was a problem hiding this comment.
Is there a reason to do this with JSDOM rather than:
const fragment = document.createDocumentFragment()
fragment.innerHTML = container.innerHTMLThat way we don't have to rely on JSDOM directly. I want this package to be capable of running in the browser.
There was a problem hiding this comment.
Great point! Pushed a new commit using plain DOM APIs for it.
Followed https://stackoverflow.com/a/25214113/1850276, but JSDOM doesn't support Ranges (jsdom/jsdom#317), so I added a fallback for it.
(I enjoy the fact that it was JSDOM's maintainer who asked the question on SO)
|
Would you like to add yourself to the contributors table? |
|
🎉 This PR is included in version 5.2.0 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
| @@ -29,6 +29,17 @@ function render(ui, {container, baseElement = container, queries} = {}) { | |||
| // Intentionally do not return anything to avoid unnecessarily complicating the API. | |||
| // folks can use all the same utilities we return in the first place that are bound to the container | |||
| }, | |||
| asFragment: () => { | |||
| if (typeof document.createRange === 'function') { | |||
There was a problem hiding this comment.
might wanna add a /* istanbul ignore if */ here, and leave a comment pointing back to jsdom/jsdom#317
There was a problem hiding this comment.
Thanks! I've just committed that 👍
What:
Adds the possibility to get a
DocumentFragmentversion of the rendered component.Why:
I have a test of a connected redux component, and I want to snapshot the diff between them after dispatching an action. Since
containeris a live binding, itsinnerHTMLchanges, meaning comparison becomes meaningless.An extra advantage is IMO that you don't need to do
firstChildon snapshots, as having theFragmentwrapper makes sense. At least in my mind 🙂How:
By upgrading
kcd-scriptsto a version with Jest 23, and adding a dependency onJSDOMwhich matches the one found in Jest (to not rely on dependency hoisting).Checklist: