-
Notifications
You must be signed in to change notification settings - Fork 24
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
Findwrapper name #57
base: master
Are you sure you want to change the base?
Findwrapper name #57
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Couple of small things, but overall - thanks for the PR!
src/preact-render-spy.js
Outdated
verifyOnlySingleNode(this); | ||
|
||
const nodeName = this[0].nodeName; | ||
return typeof nodeName === 'function' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please don't return the result of a ternary, I'd generally prefer to see
if (typeof nodeName === 'function') {
return ...;
}
return ...;
But that might just be my old jQuery style preferences, I think it's easier to understand if's than ternaries 90% of the time as a reader.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, we need to be aware of the displayName
:
func.displayName
should be used if it exists, likefunc.displayName || func.name
I think.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
^ correct
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For some reason I thought preact doesn't support displayName
. I will fix that :)
src/preact-render-spy.js
Outdated
@@ -164,6 +164,12 @@ const verifyFoundNodes = wrapper => { | |||
} | |||
}; | |||
|
|||
const verifyOnlySingleNode = wrapper => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🥇 thanks for this, we needed it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it weird if I ask you open a PR with this method and using it in existing methods? That'd be easy to merge in.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure thing :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Take a look at #69. When we merge that PR I will merge master to this branch :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done :)
@@ -166,6 +166,10 @@ Returns a new `FindWrapper` with a subset of the previously selected elements gi | |||
|
|||
Uses the same possible selectors as [`RenderContext#find(selector)`](#rendercontextfindselector). | |||
|
|||
### `FindWrapper#name()` | |||
Returns the name of node. | |||
This can only be called on a wrapper of a single node. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you think of a small usage/test assertion to include here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done :)
Fixed, take a look |
} | ||
|
||
const context = shallow(<MyComponent />); | ||
expect(context.name()).toBe('Node'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you verify this shouldn't be context.output().name()
? I feel like context.name() === 'MyComponent'
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You're right. Now this is different behaviour than what's implemented in enzyme.
In enzyme the example from README would work.
I don't really know what to do with that. Do you have any ideas?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We aren't really trying to be 100% enzyme compatible, just "inspired by enzyme"
In many situations I could see you wanting context.output()
by default, but since this is a different rendering example than say:
shallow(<div><MyComponent class="first" /><MyComponent class="second" /></div>);
where context.name()
would be 'div'
either way, .find('.first').name()
is MyComponent, and .find('.first').output().name()
would then be "Node" I think it makes sense to show the difference in the example here, just show expect(context.name()).toBe('MyComponent')
AND expect(context.output().name()).toBe('Node')
though .output()
is returning raw VDOM instead of a FindWrapper... this puts us in an interesting place... we need an .output()
that returns FindWrappers
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So what you're saying is that the implementation is good (not the same as enzyme's but this is not an issue for us) and I only have to adjust the documentation?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm saying we probably need to figure out a solution for .outputWrapped
or something to make context.rendered().name()
or something workable for this test... got any thoughts? I like the idea of .output() == FindWrappered
and .rendered() == VNodes
- but it breaks back-compat with 1.0 already, so if we keep .output() === VNodes
maybe use .resolved() === FindWrappered
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would be in favor of .instance() == VNode
and .output() == FindWrapper
but it also breaks backwards compatibility.
Or without breaking back compat make .instance()
return VNode
, leave .output()
as it is (doing effectively the same thing as .instance()
) and then make .instanceWrapper()
return FindWrapper
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm gonna bring this conversation to #66 -- need @mzgoddard to chime in on it too I think.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm game for name
returning this[0].nodeName
or 'MyComponent'
.
I think a name to see the next level in for a component node could be inspect
or stepIn
. I think instance
would be confusing along side component
.
In that case .stepIn().name()
would give you 'Node'
and .resolved().name()
would give 'span'
or whatever raw dom node name Node returns. .stepIn().stepIn().name()
would also give 'span'
if Node was the last component type in the chain of nested nodes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This readme is still "incorrect" - could you update this / show an example of the difference between enzyme?
src/preact-render-spy.js
Outdated
@@ -164,6 +164,12 @@ const verifyFoundNodes = wrapper => { | |||
} | |||
}; | |||
|
|||
const verifyOnlySingleNode = wrapper => { | |||
if (wrapper.length !== 1) { | |||
throw new Error('preact-render-spy: component method can only be used on a single node'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const verifyOnlySingleNode = (wrapper, methodName) => {
throw new Error(`preact-render-spy: ${methodName} method can only be used on a single node`);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Waiting for #69 to be merged.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there anything else blocking this PR from being merged?
Resolves #56