-
Notifications
You must be signed in to change notification settings - Fork 668
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
feat(visible): Add visible() method on Wrapper (#327) #335
Conversation
Thanks for the PR 😀 I don't think we should add a parent method as part of this PR, or at all —#65 You should use the element parentNode/parentElement properties to traverse the parent tree. Like you found, most vnodes have an undefined parent. Functional vnodes use the parent property. |
I just removed
|
387c59e
to
e7ee4da
Compare
@@ -10,7 +10,7 @@ | |||
], | |||
"scripts": { | |||
"build": "node build/build.js", | |||
"build:test": "NODE_ENV=test node build/build.js", | |||
"build:test": "cross-env NODE_ENV=test node build/build.js", |
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, good spot
src/wrappers/wrapper.js
Outdated
*/ | ||
visible (): boolean { | ||
if (!this.exists()) { | ||
console.log('NOT EXISTS') |
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 should throw an error here using the throwError
function:
throwError('cannot call visible on a wrapper without an element')
src/wrappers/wrapper.js
Outdated
* Utility to check wrapper is visible. Returns false if a parent element has display: none or visibility: hidden style. | ||
*/ | ||
visible (): boolean { | ||
if (!this.exists()) { |
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 should check for an element here instead of exists—if(!this.element)
. That's how we check for an element in other tests (I think this might solve the flow error)
src/wrappers/wrapper.js
Outdated
} | ||
element = element.parentElement | ||
} | ||
console.log('no parent') |
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 should remove these console logs
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.
Looks good, just a couple of changes. Also we need the flow error to be fixed
Are you able to make these changes @Toilal ? |
Oops, I just forget this one, i'll do ASAP |
Done |
I think it is necessary to add this to the document. |
Yes this should be added to the documentation before merging
…On 14 Jan 2018 14:21, "38elements" ***@***.***> wrote:
I think it is necessary to add this to the document.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#335 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AMlbW-sJq-X7_hmFySwR4CiB9VkiFl1Lks5tKg1XgaJpZM4RWjoh>
.
|
@Toilal Can you add a page on visible to docs/en/wrapper/api/visible.md, docs/en/api/wrapper-array/visible.md, and add a links to both pages in docs/en/SUMMARY. |
Rebased and docs added. |
Can you restard the build ? |
docs/en/api/wrapper/visible.md
Outdated
@@ -0,0 +1,21 @@ | |||
# exists() |
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.
title missed
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.
Oops
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.
Fixed
docs/en/SUMMARY.md
Outdated
@@ -63,6 +64,7 @@ | |||
* [setProps](api/wrapper-array/setProps.md) | |||
* [trigger](api/wrapper-array/trigger.md) | |||
* [update](api/wrapper-array/update.md) | |||
* [visible](api/wrapper/visible.md) |
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 should be wrapper-array
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've made the same as exists() with use the same page.
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 didn't realize exists uses the same page, this is an error with the exists page.
The wrapper-array pages have different examples that use a wrapper-array
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.
Should I fix exists page too ? Or another pull request ?
Assert `Wrapper` or `WrapperArray` is visible. | ||
|
||
Returns false if an ancestor element has `display: none` or `visibility: hidden` style. | ||
|
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 should add that this is useful for testing whether v-show is working correctly
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
docs/en/api/wrapper/visible.md
Outdated
|
||
const wrapper = mount(Foo) | ||
expect(wrapper.visible()).toBe(true) | ||
expect(wrapper.find('is-not-visible').visible()).toBe(false) |
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-not-visible should be a class selector, not a tag selector
src/wrappers/error-wrapper.js
Outdated
@@ -36,6 +36,10 @@ export default class ErrorWrapper implements BaseWrapper { | |||
return false | |||
} | |||
|
|||
visible (): boolean { | |||
return false |
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 should throw an error, like the other methods.
Only exists returns false, everything else throws an error to indicate that find was not succesful
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.
Don't you think it should match the behavior of exists()
method ? Having this return an error would make assertions on non-visible elements more verbose.
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.
No, I think it should throw an error. exists
checks if find is successful, so it makes sense to return false. If find('div') is not successful, exists should return false.
Every other method checks something on the Wrapper element/ instance.
We need to make a distinction between a node being visible and a node being present.
wrapper.update() | ||
expect(wrapper.find('.child.ready').visible()).to.equal(true) | ||
}) | ||
}) |
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.
Nice tests 👌
dbce8b6
to
d214733
Compare
I just squashed everything and make visible() method fails for non-existent elements. I think it's know OK :p |
42a153a
to
113aff8
Compare
docs/en/api/wrapper/visible.md
Outdated
const wrapper = mount(Foo) | ||
expect(wrapper.visible()).toBe(true) | ||
expect(wrapper.find('.is-not-visible').visible()).toBe(false) | ||
expect(wrapper.findAll('div').visible()).toBe(true) |
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 remove the findAll examples please
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 :)
Thanks @Toilal 🙂 |
Ready ! :)