stylesheets loaded after document ready

[lazylester]

I'm testing the js on a page generated by a rails controller.

MagicLamp loads the page (it seems, correct me if I'm wrong) into a wrapper page of its own. This seems reasonable.

However by using this technique, the stylesheets from my page are loaded after the browser declares "document ready". Whereas in normal operation, stylesheets are loaded before document ready if there is javascript on the page. So a js test that involves the dom may not return the correct result (in my case it sometimes passes and sometimes fails, depending on how quickly the stylesheet is delivered by the server).

I've poked around the code to see where I could fix this, but it seems to be a fundamental characteristic of the architecture.

Any tips on where to fix this?

[crismali]

I haven't run into the problem myself, but I believe there are a few approaches you could take.

If you're using Teaspoon as your test runner there are options for adding stylesheets as fixtures and more generally to your tests (body_partial could also come in handy here). Teaspoon also supports deferring execution which could buy you time until you're sure your stylesheets have loaded.

Let me know if that helps or not :)

[lazylester]

Thanks for the ideas, @crismali.

I am using Teaspoon. The suggested methods for adding stylesheets in Teaspoon docs should only be used for configuration of the teaspoon page (per the Teaspoon docs), probably because it's a global setting.

Deferred execution would probably work, but feels to me like a hack (how long to defer? long enough that I don't see occasional test failures?).

I have successfully included stylesheets in the page header by using the Teaspoon boot_partial configuration parameter, as suggested in the configuration documentation, and putting a stylesheet_link_tag in the page header (via the _boot partial). However, whilst this does work, it is definitely suboptimal as it is a global configuration in the place where a suite-level or (ideally) test-level configuration is called-for.

If stylesheets are included as MagicLamp fixtures, they are loaded by xhr, after document-ready, and any js tests that depend on the app's css may not work reliably.

Ideally I think MagicLamp should be loading css fixtures into the page header, vs inside the .magic_lamp div. What do you think? Does it seem feasible?

[crismali]

I think it has potential, but I'm not sure what best way to incorporate that would be and the right solution might depend on the more common use case (which it's hard for me to tell what the more common use case is here because I've never run into this issue before :) )

I'll think about this for a bit and hopefully a solution will come to mind.