如何针对FUOC自动测试我的webpack-bundled web？

Question

我已经构建了一个与webpack捆绑在一起的React + Redux Web.由于捆绑错误,我的网站开始显示FUOC行为(某些组件没有将其CSS注入服务器响应,因此在加载最终CSS之前,应用程序中没有样式部分的"闪存").其他错误包括第三方组件的FUOC(需要手动工作).

我对服务器和网络的不同部分进行了自动化测试.但是如何自动测试FOUC(使用我的node.js工具链)？我讨论过selenium和phantomjs,但这似乎有点矫枉过正,我仍然不知道如何能够发现它.

Answer 1

我通过确保具有 FOUC 的元素仅在其 CSS 完全加载时才可见来防止 FOUC。为了简单起见，我将其应用于整个身体。例如：

body {
    opacity: 0;
}

然后，稍后在 CCS 文件中或加载一些组件...

body {
    opacity:1;
}

这可以有效地在渲染期间隐藏仍在绘制的元素。以此为基础，您可以创建一个单元测试，在加载元素/组件的 CSS 之前运行，以测试可见性或在元素变得可见之前应加载的其他 CSS 属性。诀窍是确保这些测试在元素渲染的每个阶段的适当时间运行。

// 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)