What is preventing qUnit from sending notifications for exceptions within a frame?

When using qUnit, I've noticed that it doesn't provide any indication when an exception occurs in a later part of the test. For example, running the following code within a test():

stop();
function myfun(ed) {
    console.log('resumed');
    start(); //Resume qunit
    ok(1,'entered qunit again');
    ok(ed.getContent()== 'expected content') // < causes exception, no getContent() yet.
}
R.tinymce.onAddEditor.add(myfun)

If this is executed in an inner iframe on the page, an exception will occur (TypeError: ed.getContent is not a function), but qUnit will show 0 failures and give no notice of the exception.

(e.g., R representing the inner iframe, using a technique found here: ) Is it safe to assume that this method might not be suitable for testing sequences of UI interactions that lead to specific outcomes? Would employing something like Selenium always be a better choice, even for frontend web-app tests that are mostly JavaScript-based?

On a side note, I observed in Firefox console that the console.log statement appears below the exception message, despite being logged before the exception was thrown. Any ideas why this happens?

Answer №1

If one were to delve into the qUnit source code, they would discover two different methods for handling exceptions. The first method is controlled by the config.notrycatch setting and involves wrapping test setup, execution, and teardown in try..catch blocks. While this approach may not effectively handle exceptions thrown by asynchronous tests since qUnit is not the caller in those scenarios, there exists an additional mechanism known as the window.onerror handler which is governed by the Test.ignoreGlobalErrors setting. By default, both settings are set to false, ensuring that both types of exceptions are caught successfully.

test("foo", function() {
  stop();
  function myfun(ed) {
    start();
    ok(1, 'entered qunit again');
    throw "bar";
  }
  setTimeout(myfun, 1000);
});

Running the above code (excluding TinyMCE-specific parts) yields expected results with a passed test message followed by a failed one indicating an uncaught exception. If this methodology does not work in a specific case, several possibilities could be considered:

  1. The version of qUnit being used predates the resolution of qUnit issue 134 where a global exception handler was added.
  2. The Test.ignoreGlobalErrors setting is being altered within the codebase (unlikely).
  3. An existing window.onerror handler returns true, thus indicating to qUnit that the error has been handled. It seems unlikely that TinyMCE includes such a handler by default.
  4. TinyMCE may catch errors in event handlers when executed, a common practice to ensure continued callback execution even if exceptions occur.

Update: Another possibility overlooked previously is that the exception occurs within a frame where qUnit has not established its global error handler. Implementing the following code snippet in the frame should rectify this issue:

window.onerror = function() {
  if (parent.onerror) {
    return parent.onerror.apply(parent, arguments);
  } else
    return false;
}

In regards to your side note: the order in which messages appear using the console object is not guaranteed. The example console.log("foo");throw "bar"; demonstrates that exceptions are displayed before log messages, suggesting that log messages are processed asynchronously for potential performance optimizations. For precise details on how the console object operates in Firefox, examining the implementation specifics would be necessary.

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

Which is the better option for selecting DOM elements in a Vuejs 3 application: using raw js or jquery?

 I am currently working on developing an application using Node.js and Vue.js 3. One of the features I have implemented is a sidebar that dynamically fetches links from a routes file and displays them. The sidebar consists of a component that organize ...

Sequelize cannot locate the specified column in the database

click here for image description I encountered an issue where a column was not recognized after migrating with sequelize-cli. Even though all the columns are defined in the migration file, this error keeps appearing. Additionally, when trying to create a ...

Is it possible to implement a custom sign-in form for AWS Cognito?

Is it possible to replace the AWS Cognito hosted UI with a custom form in my Next.js app that utilizes AWS Cognito for authentication? import { Domain } from "@material-ui/icons"; import NextAuth from "next-auth"; import Providers fro ...

How can I intercept/manage the back button of the browser in React-router?

Utilizing Material-ui's Tabs, which are controlled, I am implementing them for (React-router) Links in the following manner: <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/> <Tab value={1} label="users ...

Is there a way to showcase a row of images when a button is clicked?

I am looking to create a functionality where pressing one of the buttons shown in the image below will toggle visibility of specific sections containing 3 images each. For example, clicking on "Tapas" will only display tapas images and hide main course ima ...

Guide on implementing themes to HTML within the append() function

I am currently working on a project where I need to dynamically add HTML tags using JavaScript. However, I have noticed that the themes or styles are not being applied to the newly added elements within the append method. In my HTML file, I am using jQue ...

Retrieving the correct selected value from multiple select tables created through a for loop can be achieved using JavaScript or jQuery

Despite searching Google and asking previous questions, I have not found a solution that addresses my specific issue. The common responses only pertain to one select element with multiple options. To further clarify, when I create code for a loop to genera ...

Angular formly - Enhancing User Input Focus

I have created a field wrapper that converts normal text into an input when hovered over with the mouse. Additionally, I have a directive that sets focus on the field when it is activated. Now, I am looking for a solution where the field remains open as l ...

Sorting through a collection of objects using various criteria in typeScript

Hello team, I have an array of objects that looks like this: data = [ { name: "Pork", category: "Food", subcategory: "Meat" }, { name: "Pepper", category: "Food", subcategory: "Vegetables" }, ...

Is the Date Epoch a reliable form of unique identification?

Currently, I'm developing a Node API and encountered a situation where I need to create a unique 15-digit random number for a model without using autoincrement. The challenge is to ensure that the generated number is not trivial. I am hesitant about ...

Contact form repair completed - Messages successfully delivered

I am facing an issue with the contact form on my HTML landing page. Currently, when you click the 'Submit' button, it redirects to a new PHP page displaying 'Success'. Is there a way to make it so that upon clicking 'Submit' a ...

Ways to enable JavaScript code to accept input from both a text field and a text

I have a JavaScript code that allows users to input text and choose to make it bold, italicized, or underlined. For example, if the user checks the bold option, the text will appear in bold format. Here is the JavaScript code I am using: $('input[n ...

The variable 'originalPrompt' has already been declared within the React TypeScript code

For the project I am working on, I do not have a variable named "originalPrompt," yet I keep seeing this error message. This problem seems to only occur for users who are using the "Selenium IDE" chrome extension. Is there a way to prevent this extension f ...

What is the most efficient method for storing text in my web application?

Hey there, I'm looking for a way to easily store and access the wording used in my application so that I can use them again whenever needed. For example, loading messages, validation messages, or informational messages are some of the wordings I want ...

Button component in React JS fails to appear on iPhones

After building a website using reactjs, I encountered an issue where the landing page's begin button is not displaying correctly on iPhones. The website works fine on all other devices, but on iPhones, the button is barely visible - with only a faint ...

Navigating through the content of slots within recurring slots in a subcomponent in Vue.js

I am encountering an issue with a child component, where each row in an object is rendered inside a div with a specific slot. I need to pass data from the parent for each of these elements. I've been attempting to iterate through every element of the ...

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...

Having difficulty with collapsing Bootstrap side navigation menu levels

I've been searching high and low for an example that matches my current issue, but so far, no luck. I'm attempting to design a collapsible side navigation with multiple levels in bootstrap using bootstrap.js. The problem I'm facing is that ...

"Encountered an error: Unable to access property 'fn' on an undefined object within the Wordpress

I attempted to recreate the steps outlined in this blog post Create A Realistic Self-solving Rubik's Cube With Three.js on a Wordpress page. However, I encountered the following error Uncaught TypeError: Cannot read property 'fn' of undefine ...

Iterating through an array and setting variables according to asynchronous code

I have created a function to loop through an array, call a promise, and update a variable based on the result. The code seems to be functioning correctly, but I am wondering if there is a more optimal way to write it. Any suggestions are appreciated. Tha ...