How to automatically test my web packet network against FUOC?

Question

I created a React + Redux network that comes bundled with webpack. Due to a binding error, my network began to demonstrate FUOC behavior (some components did not add their CSS to the server response, so there was a “flash” of the unpainted parts of the application until the last CSS was loaded.) Other errors included FUOC for third-party components (which required manual work).

I have an automated test for the server and different parts of my network. But how do I automatically test FOUC (using my node.js toolchain)? I am very versed in selenium and phantoms, but this seems like an overkill, and I still don't know how I could find it.

Answer 1

I prevent FOUC by applying collateral with FOUC, visible only when their CSS is fully loaded. To make it simple, I apply it to the whole body. For instance:

body { opacity: 0; } 

Then, later in the CCS file or download some component ...

 body { opacity:1; } 

This effectively hides elements during rendering while they are still being drawn. By working with this, you can create a unit test to run before loading CSS for your element / component to check the visibility or other CSS properties that need to be loaded before the element becomes visible. The trick would be to have these tests run at the appropriate time at each stage of the element's rendering.

 // Test for FOUC load component then verify for no visiblity ... expect($('#testElement').is(':visible')).toBe(false) /** * load component/elemnt css here then ... */ // then test for visibility or other css properties ... expect($('#testElement').is(':visible')).toBe(true)