Is there a way to automate testing for my web application bundled with webpack against FUOC?

After creating a React + Redux web app bundled with webpack, I encountered a bundling error that caused my website to display flash of unstyled content (FUOC) behavior. Certain components did not inject their CSS into the server response, resulting in parts of the application appearing unstyled before the final CSS loaded. Additionally, third-party components also experienced FUOC, requiring manual intervention. While I have automated tests for the server and various web components, I am unsure how to automatically test for FOUC within my node.js toolchain. Selenium and PhantomJS seem like potential options, but may be overkill. Furthermore, detecting FOUC remains a challenge.

cssnode.jstestingwebwebpack

Answer №1

To prevent FOUC, I ensure that elements affected by it are only displayed once their CSS has fully loaded. One simple way to achieve this is by applying a temporary styling rule to the entire body element like so:

body {
    opacity: 0;
}

Later in the CSS file or when loading a component, the visibility can then be set back to normal as shown below:

body {
    opacity:1;
}

This approach effectively hides the elements during rendering while they are still being processed. By working backwards from this point, one can create a unit test to check for visibility or other important CSS properties before the element becomes visible. The key is to ensure these tests are conducted at each stage of the rendering process.

// Test for FOUC: load component and check for no visiblity ...    
expect($('#testElement').is(':visible')).toBe(false)

/** 
 * Load component/element CSS here and then... 
 */

// Check for visibility or other CSS properties after loading ...
expect($('#testElement').is(':visible')).toBe(true)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble passing input contexts to Dialogflow through Node.js

I have been trying to integrate input contexts into Dialogflow using node.js, but I am facing difficulties getting it to work. I have shared what I have done so far, and any guidance on this would be greatly appreciated. Although there are no errors or fa ...

node.jsdialogflow-es

When trying to install loom-truffle-provider with npm, the process fails due to an issue caused by the conflicting versions of node

I've hit a roadblock while trying to install the loom-truffle-provider on my system. node = v14.18.1 npm = 6.14.15 Linux Ubuntu 20.04 Whether I attempt a local or global installation, both methods result in the following error: ~$ npm install -g lo ...

node.jsnpmnode-gypscrypt

Display issues occur with Bootstrap 4.2.1 flex-box layout columns exceeding the browser edge

Why does COLUMN02 extend beyond the browser's edge when using flex-basis for column widths? What mistake am I making? Unfortunately, it doesn't display correctly in the code snippets here but works in the fiddle. TIA! http://jsfiddle.net/dragont ...

csslayoutflexboxbootstrap-4

Is the stylesheet connected but failing to load?

Updating an app from Rails 3.2 to version 4 has been mostly successful, but I am encountering issues with some of my stylesheets not being applied correctly. Checking the source code (ctr+U), everything appears to be linked properly: <!DOCTYPE html> ...

cssruby-on-railstwitter-bootstrap

Is there a secure way to prevent user input from causing issues in a BigQuery node insert? Can the BigQuery.insert node library support parameterized queries for added security

I am seeking advice on how to securely insert user form data into BigQuery using the Google Cloud BigQuery library. Specifically, I am curious about the most effective methods for sanitizing, escaping, and cleaning the input data. Is it feasible to implem ...

javascriptsqlnode.jssecuritygoogle-bigquery

No receiving a callback_query update upon user pressing an inline button in the Telegram webhook

When using the node-telegram-bot-api library, I encountered an issue with my Webhook. Although I am able to receive updates when messages are sent, I do not get any updates when a user presses a button in an inline keyboard. class BotController { async ...

javascriptnode.jstelegram-webhooknode-telegram-bot-api

Creating a design utilizing HTML columns with a set height and the ability to scroll horizontally

For my android project, I have a requirement to display a view (WebView) that dynamically loads content. The content will consist of <div class="content-item"> tags that are added by JavaScript to <div class="content-holder"> after the page has ...

javascripthtmlcsshorizontal-scrollingfixed-width

Data is not being stored in req.session

I am currently working on setting up a login system for users to register and sign in to a website, allowing them to edit their personal information once logged in. In order to determine if a user is logged in, I have been trying to set req.session.isLogg ...

node.jsreactjssessionexpress

Aligning items in several columns

Setting up a grid layout where the content is centered can be tricky, but I've found a solution that works well. Take a look at the code snippet below: .outer { width: 100%; height: 100px; margin-top: 10px; m ...

htmlcss

What is the title of this particular CSS method?

I've been implementing a unique approach for more than a year now, and I have yet to come across similar practices elsewhere. Essentially, I am structuring display "states" or "modes" by utilizing CSS classes. Despite searching for terms like "css mod ...

css

Access to the specified executable files created by either electron-packager or electron-forge is restricted by Windows

Running into an issue on my Win 8.1 x64 machine where the Windows binaries are generating an error message upon execution. Encountering a Windows error stating: "Windows cannot access the specified device, path, or file. You may not have the appropriate ...

node.jsnpmelectronelectron-packagerelectron-forge

Ways to subtly adjust the edges of text in a design

https://i.stack.imgur.com/sr4PF.pngIs there a way to adjust the border of text that already has a border applied? I have successfully created the text with the border using the following CSS: h1 { font-size: 35pt; text-align: center; font-family: ...

csstext

Struggling to deploy a basic node.js application to Heroku or connect it with MongoDB

Currently, I'm facing some challenges trying to deploy a simple Twitter-like app to HEROKU or MongoDB. However, I seem to be hitting roadblocks with both platforms. With MongoDB, I encounter either an internal server error or the actual code displayin ...

javascriptnode.jsexpressherokunpm

Unable to uninstall npm

I have encountered an issue with removing npm on my system. After checking the location of npm using the command which npm, the output showed as /snap/bin/npm. However, when I attempted to remove npm using sudo apt-get remove npm, it displayed a message ...

node.jsubuntunpm

Issue with Node.js inability to retrieve Mongoose find query results

Currently learning Node.JS and facing an issue that I can't seem to resolve. My project involves creating a restful service for retrieving data from mongo. app.js var database = require('./database.js'); ... app.get('/metadata', ...

node.jsmongodbexpressmongoose

The error message "Property 'originalUrl' is not found in type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'" appeared

In my TypeScript project, I am utilizing a gulpfile to initiate the process. Within the gulpfile, I am using express where I encounter an issue while trying to access req.originalUrl, with req being the request object. An error is thrown stating Property ...

node.jstypescriptexpress

Is it possible for Typescript and Next.js to import a different project's *source code* only from the module's root directory?

Issue with Sharing React Components between Closed and Open Source Next.js Projects I am facing a challenge in my development setup involving two Next.js projects, one closed source (Project A) and the other open source (Project B). In Project A, which is ...

typescriptwebpacknext.jscompiler-options

Looking to make changes to the updateActivePagerLink setting in JQuery Cycle?

I'm in the process of developing a basic slideshow with 3 images, and I am relatively new to Jquery and Cycle. The slideshow is functioning properly, and the 3 pager links are also functional. The only remaining task for me is to implement "activeSli ...

jqueryhtmlcssjquery-pluginsjquery-cycle

Transforming multipart/form-data cURL requests to Fetch in Node.js

By sending the cURL request below, I successfully interact with a pulsar api to update function configurations. Effective cURL Request curl --request PUT -H "Content-Type: multipart/form-data" -F functionConfig='{"parallelism": ...

node.jscurlfetchapache-pulsar

Creating a split hero section view using a combination of absolute/relative CSS techniques, Tailwind, and React

I'm in the process of creating a website using Nextjs, React, and TailwindCSS, and I aim to design a Hero section that resembles the one on the following website. https://i.sstatic.net/tq3zW.png My goal is to: Have a text title and buttons on the l ...

cssreactjstypescriptnext.jstailwind-css