feat(test-utils): add lwc-test-utils with templateQuerySelector API #414
Conversation
Benchmark resultsBase commit: lwc-engine-benchmark
|
There was a problem hiding this comment.
I'm not sure where in this set of proposed changes we would do so, but I think it would be great to:
- Mention the best practice of not digging too deep into the component tree in order to keep tests robust.
- Talk about the problem that these functions are solving (i.e., future-proofing tests from breaking once we introduce shadow DOM semantics).
packages/lwc-test-utils/index.js
Outdated
| * @returns {Element} The first decendent that matches the given selectors. | ||
| */ | ||
| export function templateQuerySelector(element, selectors) { | ||
| return Element.prototype.querySelector.call(element, selectors); |
There was a problem hiding this comment.
@caridy @davidturissini is there any way to guarantee that we return only the elements in the current template? Otherwise, these functions will not really future-proof users from the introduction of shadow DOM semantics.
There was a problem hiding this comment.
We might have to expose something. Lets chat about this.
|
@ekashida Responding to your two points:
|
| @@ -0,0 +1,58 @@ | |||
| # lwc-test-utils | |||
|
|
|||
| A collection of utility functions to assist in unit testing Lightning web components. | |||
There was a problem hiding this comment.
maybe LWC components or Lightning Web Component to stay consistent
There was a problem hiding this comment.
Ya the capitalization is a common point of confusion. It's less about consistency and more about intent. This is how the doc team explained it to me:
Lightning Web Components --> the "model"/framework used to develop the components
Lightning web components --> the individual components developed using the LWC framework
I did lowercase on purpose because these utils are to help unit test individual components.
packages/lwc-test-utils/index.js
Outdated
| export function getShadowRoot(element) { | ||
| if (!element || !element.$$ShadowRoot$$) { | ||
| const tagName = element && element.tagName && element.tagName.toLowerCase(); | ||
| throw new Error(`Attempting to retrieve the ShadowRoot of '${tagName || element}' but no shadowRoot property found`); |
There was a problem hiding this comment.
"ShadowRoot" should probably just be "shadow root"
packages/lwc-test-utils/index.js
Outdated
| * @returns {ShadowRoot} The shadowRoot property of the given element | ||
| */ | ||
| export function getShadowRoot(element) { | ||
| if (!element || !element.$$ShadowRoot$$) { |
There was a problem hiding this comment.
I don't think we should check for the existence of element.$$ShadowRoot$$ because not all elements have a shadow root.
There was a problem hiding this comment.
Missed the part where we expect the parameter to be an LWC Element.
packages/lwc-test-utils/index.js
Outdated
| const tagName = element && element.tagName && element.tagName.toLowerCase(); | ||
| throw new Error(`Attempting to retrieve the ShadowRoot of '${tagName || element}' but no shadowRoot property found`); | ||
| } | ||
| return element.$$ShadowRoot$$; |
There was a problem hiding this comment.
return element.$$ShadowRoot$$ || null; since element.shadowRoot evaluates to null for elements without an attached shadow root.
There was a problem hiding this comment.
Missed the part where we expect the parameter to be an LWC Element.
Details
Introduce
lwc-test-utilsthat provides test helper functions to retrieve the ShadowRoot off of an LWCElement.Depends on #417
Also update
lwc-jest-presetto providelwc-test-utilsout of the box (as a hard dependency instead of a peerDependency!).Does this PR introduce a breaking change?
If using
lwc-jest-preset, users will need to upgrade to Jest >= 23.0.0 and can remove thelwc-jest-transformer,lwc-jest-resolver, andlwc-jest-serializerdevDependencies from their project.