css - 如何针对 FUOC 自动测试我的 webpack 捆绑网站？

Question

我构建了一个与 webpack 捆绑在一起的 React + Redux 网络。由于捆绑错误，我的网站开始显示 FUOC行为(一些组件没有将它们的 CSS 注入(inject)服务器响应，因此在加载最终 CSS 之前，应用程序的无样式部分会“闪现”)。其他错误包括第 3 方组件的 FUOC(需要手动操作)。

我对服务器和网络的不同部分进行了自动化测试。但是我如何自动测试 FOUC(使用我的 node.js 工具链)？我对 selenium 和 phantomjs 犹豫不决，但这似乎有点矫枉过正，而且我仍然不知道如何检测到它。

Answer 1

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

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)