hasStyle: incorrect child components check in case of nested CSS

[matrunchyk]

UPD. The real description of the problem is here.

Hi guys, I've just noticed that zIndex doesn't work with hasStyle.

I tried also .hasStyle('z-index', '9999'). Still false.

What am I doing wrong? Thanks.

[eddyerburgh]

Hi @matrunchyk ,

hasStyle uses the same values as css, so you use z-index instead of the JavaScript version zIndex.

This should work:

expect(temp1.hasStyle('z-index', '9999').to.equal(true)

[matrunchyk]

As I mentioned, .hasStyle('z-index', '9999') doesn't work either.
And even more. It works very weird :)

P.S I'm trying to debug it & reproduce it somewhere in fiddle. I'll let you know.

[matrunchyk]

Ok, so I figured out the problem.
Let's pretend a component has CSS rules like that:

.MyComponent > div {
    color: red;
}

As you can see, that div would be red only within .MyComponent.

But here you move an element (div in this case) to the body. So now it's impossible to check the real style of the div.

I'd suggest to not moving that only particular div (or any other child) but mount a whole component at all. Or at least check whether it's already exists in DOM.

[eddyerburgh]

Thanks, I'll look into this tonight.

[eddyerburgh]

Ok, I've got a failing test. I'll try and figure out a workaround in the next couple days

[matrunchyk]

@eddyerburgh Created a small repo with a component and a test.

[matrunchyk]

Alright, thank you!

[eddyerburgh]

Hi, so I've got a workaround. #26 means we can pass an option to attach the component to the DOM when mount is called.

When a component has been mounted to the DOM, hasStyle will check the node without having to attach it to the DOM.

The change to hasStyle hasn't been committed yet, but I'll update you when it's released. Should be by Saturday at the latest.

[matrunchyk]

wow looks great! Thank you for all you guys do here!

[eddyerburgh]

Hi, this is fixed in 1.11.1.

[matrunchyk]

Beautiful, thank you! :)