एफयूओसी के खिलाफ अपने वेबपैक-बंडल वेब का स्वचालित रूप से परीक्षण कैसे करें?

Question

मैंने एक रिएक्ट + रेडक्स वेब बनाया है जो वेबपैक के साथ बंडल हो जाता है। एक bundling त्रुटि के कारण अपने वेब FUOC व्यवहार दिखाने के लिए शुरू कर दिया (कुछ घटकों सर्वर प्रतिक्रिया के लिए अपने सीएसएस इंजेक्षन नहीं किया, इसलिए एक अंतिम सीएसएस से पहले आवेदन की unstyled भागों के 'फ्लैश' लोड किया गया था वहाँ था)। अन्य त्रुटियों में तीसरे पक्ष के घटकों के लिए एफयूओसी शामिल है (जिसके लिए मैन्युअल कार्य करने की आवश्यकता है)।

मैं सर्वर और अपने वेब के विभिन्न भागों के लिए परीक्षण स्वचालित है। लेकिन मैं स्वचालित रूप से एफओयूसी (मेरे नोड.जेएस टूलचैन के साथ) के लिए कैसे परीक्षण करूं? मैंने सेलेनियम और फैंटोमज के बारे में सोचा, लेकिन यह एक ओवरकिल की तरह लगता है, और मुझे अभी भी पता नहीं है कि मैं इसे कैसे पहचान सकता हूं।

Answer 1

मैं FOUC साथ सुनिश्चित तत्वों लगाने से FOUC को रोकने ही दिखाई जब उनके सीएसएस पूरी तरह लोड हो रहे हैं। इसे सरल बनाने के लिए, मैं इसे पूरे शरीर पर लागू करता हूं। उदाहरण के लिए:

body { 
    opacity: 0; 
} 

फिर, बाद में सीसीएस फ़ाइल में या कुछ घटक के साथ भरी हुई ...

body { 
    opacity:1; 
} 

यह प्रभावी रूप से छुपाता तत्वों के दौरान समय प्रस्तुत करना है, जबकि वे अभी भी तैयार किया जा रहा हो। इससे पिछड़ा काम करना, आप दृश्य तत्व या अन्य सीएसएस गुणों के परीक्षण के लिए अपने तत्व/घटक के लिए सीएसएस के लोडिंग से पहले चलाने के लिए एक यूनिट टेस्ट बना सकते हैं जिसे तत्व दिखाई देने से पहले लोड किया जाना चाहिए। चाल यह सुनिश्चित करने के लिए होगी कि ये परीक्षण तत्व के प्रस्तुत करने के प्रत्येक चरण में उपयुक्त समय पर चल रहे हों।

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