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

Need judge styles[transitionProp 'Duration'] is undefined #7444

Closed
niboac opened this issue Jan 13, 2018 · 6 comments
Closed

Need judge styles[transitionProp 'Duration'] is undefined #7444

niboac opened this issue Jan 13, 2018 · 6 comments

Comments

@niboac
Copy link

niboac commented Jan 13, 2018

Version

2.5.13

Reproduction link

https://github.com/niboac/testingvue

Steps to reproduce

When I run unit test, it shows:
/Users/cb/repo/blade-vue-ui/node_modules/vue/dist/vue.runtime.common.js:6904;
var transitionDurations = styles[transitionProp 'Duration'].split(', ');
TypeError: Cannot read property 'split' of undefined;
I think we need judge styles[transitionProp 'Duration'] is undefined or not.

What is expected?

styles[transitionProp 'Duration'] is defined.

What is actually happening?

styles[transitionProp 'Duration'] is NOT defined.

I FIXED it with those:
var styles = window.getComputedStyle(el);
var transitionDelays = styles[transitionProp 'Delay']? styles[transitionProp 'Delay'].split(', '):[];
var transitionDurations = styles[transitionProp 'Duration']?styles[transitionProp 'Duration'].split(', '):[];
var transitionTimeout = getTimeout(transitionDelays, transitionDurations);
var animationDelays = styles[animationProp 'Delay']?styles[animationProp 'Delay'].split(', '):[];
var animationDurations = styles[animationProp 'Duration']? styles[animationProp 'Duration'].split(', '):[];
var animationTimeout = getTimeout(animationDelays, animationDurations);
@posva
Copy link
Member

posva commented Jan 14, 2018

Please, make sure to boil down repros to the strict minimal when reporting a bug.
The error looks like you're not providing a transitionDuration for an animation, but it should not fail ever because it all styles are initialized to an empty string by default.
You may want to know there is a forum and a Discord server with a lot of people active, where you can ask questions 🙂

@posva posva closed this as completed Jan 14, 2018
@niboac
Copy link
Author

niboac commented Jan 15, 2018 •
edited
Loading

I made a repros for this bug, https://github.com/niboac/vue-element-test, can you have a look again please, thanks.
Please clone this project then: npm install & npm run unit, it will show the errors. @posva , and when I remove the directive "v-loading", it will have no error.

@posva
Copy link
Member

posva commented Jan 15, 2018

You still have too many things (like vue-router and element-ui (not sure if it's used though)). Please use the forums or Discord first and come back if you find out it's a bug

@industral
Copy link
Contributor

jsdom returns undefined from style instead of empty string.

$ node
> const jsdom = require("jsdom");
undefined
> const { JSDOM } = jsdom;
undefined
> const dom = new JSDOM(`<!DOCTYPE html><p style="color: red;">Hello world</p>`);
undefined
> dom.window.document.querySelector("p").style
CSSStyleDeclaration {
  '0': 'color',
  _values: { color: 'red' },
  _importants: { color: '' },
  _length: 1,
  _onChange: [Function] }
> dom.window.document.querySelector("p").style.color
'red'
> dom.window.document.querySelector("p").style.unexisted
undefined
>

So a solution is to do like that:

(styles[transitionProp + 'Delay'] || '').split(', ')

That's an all fix. I have the same issue and it's very annoying.

industral added a commit to industral/vue that referenced this issue May 30, 2018
@industral
fixed vuejs#7444
0d95627
adin234 pushed a commit to adin234/vue that referenced this issue Jul 11, 2018
@industral @adin234
fixed vuejs#7444
067648e
@chrisnicola
Copy link
Contributor

chrisnicola commented Jul 13, 2018 •
edited
Loading

Seeing this issue all of the sudden on tests running on our CI server. I can't quite explain it or why it just suddenly cropped up. Conditions are basically identical on CI and locally so it doesn't make any sense.

Seems to be intermittent. Rerunning multiple times resulted in a success eventually. Is this a timing bug?

@industral
Copy link
Contributor

industral commented Jul 13, 2018 •
edited
Loading

Yes. Usually can be reproduced when tests are doing concurrent.

yyx990803 pushed a commit that referenced this issue Oct 24, 2018
@industral @yyx990803
fix: handle undefined style properties in jsdom (fix #7444) (#8281)
5cfdf1a
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
@industral
fix: handle undefined style properties in jsdom (fix vuejs#7444) (vue…
f75fdd5 
…js#8281)
aJean pushed a commit to aJean/vue that referenced this issue Aug 19, 2020
@industral @aJean
fix: handle undefined style properties in jsdom (fix vuejs#7444) (vue…
edfd04a 
…js#8281)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@chrisnicola @industral @posva @niboac