CODEWITHSUNDEEP
jquery-pluginstddqunitphantomjsgruntjs
Adam
Adam

Reputation: 4074

Discrepancy between PhantomJS and Qunit test in Grunt?

I'm writing my first jQuery plugin with Grunt and TDD, and its been awesome so far. All of my tests are passing in the browser, and all but this one are passing in phantomjs/qunit.

But I'm sure I'm just missing something here. I have a test that gets the css value of the margin that is added with jQuery. 

  test('adds appropriate styles to image', 1, function() {
    this.simpleString.adaminNumReplace();
    var newMargin = this.simpleString.find('> img:first').css('margin');
    strictEqual(newMargin, '0px', 'margin is equal to default');
  });

The test passes when I use the runner to test in browser. And when I visually check in the inspector. And if I console.log the value. Everything appears to be fine and points to '0px'.

But in the terminal window, the test fails:

$.fn.adaminNumReplace() - adds appropriate styles to image
Message: margin is equal to default
Actual: ""
Expected: "0px"
at file:///Applications/MAMP/htdocs/adamin_number_replace/libs/qunit/qunit.js:357

Is there any reason that phantomjs wouldn't be able to grab the css margin value? It says Actual is "". But it is definitely '0px'.

Any insight or thought would really be appreciated!

The full repo is here, in case it helps: Github Repo

Upvotes: 1

Views: 795

Answers (1)

Adam
Adam

Reputation: 4074

Okay. So I was able to figure this out. I'm not totally sure as to why. But calling the css shortcut

.css('margin')

returns nil in the terminal. But does work in the spec runner.

However, calling the specific:

.css('margin-top')

Does in fact return '0px' which is what i was going for here.

So it looks like the answer, in case anyone else might run into this:

I am not able to return css values when using a shortcut like 'margin' or 'padding'.

Use specifics like 'margin-top', 'padding-left' etc...

hope that helps someone else...

Upvotes: 1

Related Questions