Jak automatycznie przetestować moją witrynę sieci Web z pakietem FUOC?

Question

Zbudowałem sieć React + Redux, która jest dołączana do pakietu internetowego. Z powodu błędu związanego z pakietowaniem moja strona internetowa zaczęła wykazywać zachowanie FUOC (niektóre komponenty nie wprowadziły swojego CSS do odpowiedzi serwera, więc nastąpił "flash" niesymilowanych części aplikacji przed załadowaniem ostatecznego CSS). Inne błędy obejmowały FUOC dla komponentów innych producentów (co wymagało ręcznej pracy).

Mam automatyczny test serwera i różnych części mojej witryny. Ale jak automatycznie przetestować dla FOUC (z moim toolchain node.js)? Myślałem o selen i phantomjs, ale wydaje się, że to przesada i wciąż nie wiem, jak mogłem to wykryć.

Answer 1

Uniemożliwiam stosowanie FOUC przez zapewnienie, że elementy z FOUC są widoczne tylko wtedy, gdy ich CSS jest w pełni załadowany. Aby to uprościć, stosuję go do całego ciała. Na przykład:

body { 
    opacity: 0; 
} 

Następnie, później w pliku CCS lub ładowany z jakiegoś składnika ...

body { 
    opacity:1; 
} 

To skutecznie ukrywa elementy podczas renderowania czasu gdy oni wciąż wyciągnąć. Pracując wstecz, możesz utworzyć test jednostkowy, który będzie wykonywany przed załadowaniem CSS dla twojego elementu/komponentu, w celu przetestowania widoczności lub innych właściwości CSS, które powinny zostać załadowane, zanim element stanie się widoczny. Podejście polegałoby na zapewnieniu, że testy te będą wykonywane we właściwym czasie na każdym etapie renderowania elementu.

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