Webpack paketli web sitemi FUOC'a karşı otomatik olarak nasıl test edilir?

Question

Web paketi ile birlikte gelen bir React + Redux web oluşturdum. Paketleme hatasından dolayı, web sitem FUOC davranışını göstermeye başladı (bazı bileşenler CSS'yi sunucu yanıtına enjekte etmediler, bu nedenle son CSS yüklenmeden önce uygulamanın uygulama dışı bölümlerinde bir "flaş" oluştu). Diğer hatalar, üçüncü parti bileşenler için FUOC'u (yapılması gereken manuel iş için gerekli) içeriyordu.

Web sitemin ve farklı bölümlerinin otomatik testini yaptım. Fakat FOUC'u nasıl otomatik olarak test ederim (node.js toolchain'imle)? Selenyum ve phantomjileri öğrendim, ama bu bir aşırı sıkıcı gibi görünüyor ve hala nasıl algılayabileceğimi bilmiyorum.

Answer 1

FOUC'lu kaplama elemanlarını uygulayarak FOUC'u önlerim, sadece CSS'si dolu olduğunda görünürler. Bunu basitleştirmek için tüm vücuda uygularım. Örneğin:

Sonra

body { 
    opacity: 0; 
} 

, daha sonra CCS dosyasında veya yüklenen bazı bileşenle ...

body { 
    opacity:1; 
} 

Bu etkin hala çekiliyor yaparken elemanları sırasında zaman işlemek gizler. Bundan geriye doğru çalışarak, görünürlüğün veya öğenin görünür hale gelmesinden önce yüklenmesi gereken diğer CSS özelliklerinin test edilmesi için eleman/bileşeniniz için CSS'nin yüklenmesinden önce çalışacak bir birim testi oluşturabilirsiniz. Hile, bu testlerin, elemanın işlenişinin her aşamasında uygun zamanda yürütüldüğünden emin olmaktır.

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