Testing inline style attribute

Testing
1

Hi everyone. Is there a way that I can query the value of an inline style attribute?

Thanks.

2

Hey @JonoLightning do you mean how you can check the value of a particular style attribute in a test? Depending on your test case there are several options:

Checking the Style Attribute of a HTML element

If you had an element with e.g. the id my-stylish-element and a particular inline style attached to it:

<div id="my-stylish-element" style="background-color: blue;"></div>

you could check its style attribute in your integration or acceptance tests as follows:

import { find } from '@ember/test-helpers';
// ... 
let element = find('#my-stylish-element');
assert.equal(element.style.backgroundColor, 'blue');
// ...

You can read more about the style attribute in the MDN docs on HTMLElement.style here.

Checking the Evaluated Style of a HTML Element

Sometimes you’d also like to learn more about the computed value of a style property in a test. In this case the getComputedStyle API is useful:

import { find } from '@ember/test-helpers';
// ... 
let element = find('#my-stylish-element');
let computedElStyle = window.getComputedStyle(element);
assert.equal(computedElStyle.getPropertyValue('background-color'), 'rgb(0,0,255)'); // rgb(0,0,255) = 'blue'
// ...

I hope this helps :sparkles:

5 Likes