Unit tests using ngMock never seem to reach completion when dealing with external promises

I'm currently facing a challenge in unit testing the handling of external promises being resolved or rejected.

The issue arises when using the ngMock module, as it seems to prevent these promises from ever completing. This is particularly problematic for my tests involving HTTP requests and timeouts.

For instance, consider the situation with angular-pouchdb, an essential dependency in my project. Due to the utilization of PouchDB promises after version 2.0.0, the tests remain stuck without finishing when ngMock is included.

An example snippet, derived from angular-pouchdb test cases:

var scope;
beforeEach(function() {
  var $injector = angular.injector(['ng', 'ngMock', 'pouchdb']);
  var pouchDB = $injector.get('pouchDB');
  scope = $injector.get('$rootScope');
  db = pouchDB('db');
});

it('should wrap destroy', function(done) {
  db.destroy()
    .then(shouldBeOK)
    .catch(shouldNotBeCalled)
    .finally(done);

  // Despite attempting multiple methods like $apply, $applySync, $timeout.flush, etc., the tests simply do not finish.
  scope.$apply();
});

The output for the aforementioned test appears as follows:

C:\Users\Gustavo\Projetos\main\angular-pouchdb (master)
λ karma start
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Windows 8 0.0.0)]: Connected on socket s1A7jIzmtcOxkGCtzYke with id 42899233
PhantomJS 1.9.8 (Windows 8 0.0.0) Angular-aware PouchDB public API should wrap destroy FAILED
        Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Hence, my main inquiry revolves around: Could there be something crucial that I am overlooking in Angular's unit testing process? Or perhaps, might this issue stem from an internal bug within ngMock?

An issue regarding this matter has also been raised in the angular-pouchdb repository.

Answer №1

Update 8/25: The issue has been resolved, but I am still investigating the root cause. I will provide a detailed update in the coming days.

After spending several days troubleshooting this problem in my free time, it appears to be an exception failure in a 3rd party promise from pouchDB that encounters a 10-second timeout without throwing a proper error. This issue arises when I set the following timeout interval:

jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;

Upon examining a custom build and adding some logging to pouchDB, I confirmed that the promise is not being returned correctly. This issue persists in both 3.6 and 4.0 versions of pouchDB. In my console logs, there are uncaught 409 errors around test 3, indicating that something is not being handled properly within pouchDB.

Refer to the following links for examples with and without ngMock enabled:

https://i.sstatic.net/uATeY.png

https://i.sstatic.net/uEHW4.png

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

The full page image slider in my HTML website is experiencing issues with loading images properly

My website is having trouble loading a full-page image slider. It seems like the images are not loading properly, possibly due to a javascript issue. Check out my script below: $("#menutoggle").click(function() { $('.xs-menu').toggleClass(& ...

Begin an asynchronous function

I am new to the world of React and I encountered an issue while trying to call an async function. The error message "Unexpected reserved word 'await'" keeps popping up. The async function is located in a Helper class which handles all the API ca ...

Direct attention to the modal display

I'm having trouble auto-focusing an input field when a modal is displayed. Here's what I've tried, but it doesn't seem to be working: jQuery(document).ready(function($) { $('#myModal').on('show.bs.modal', functi ...

What is the best way to set an element in an array that is nested within another array using AngularJS?

$scope.pictures=[ { name:"/images/profile2.jpg", caption:"Food and Hunger", votes:0, User:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="68101112280f05090104460b0705">[email protecte ...

Ways to halt a watch statement or digest cycle within Angular

At the moment, I have implemented a text input linked to a model using a $scope.watch statement to observe changes in the model. The purpose of this setup is to create an auto-complete / typeahead feature. <!-- HTML --> <input type="text" ng-mode ...

Storing the results of an Ajax call in a global variable

What is the best way to store and access the output of an ajax call within a global variable? let globalOutput = []; $.ajax({ type: "GET", url: uri, dataType : "json", contentType: "application/json", data: { input: filterVa ...

Implementing a long press feature for a stopwatch in React

I'm facing a dilemma with this particular issue. Before reaching out here, I scoured the community and found numerous solutions for handling long press events in React, but they all seem to focus on click button events. Currently, I am devising a sto ...

Versatile Function for Handling Dropdown Changes

I am faced with the challenge of executing a javascript function when multiple select elements are changed. I want to create a versatile function that can be set as the onchange method for various select elements. The following code accomplishes this task ...

Vue Error: The function slugify is not defined

Currently, I am working on a feature where I want to extract the value from one input field, convert it into a slug format, and display it in another input field. This project involves Laravel Spark, Vue, and Bootstrap 4. Here is the content of my listing ...

The route you are trying to access is currently unavailable

I've successfully developed a web app, and now I need to replicate the same HTML page with a slightly different controller. Despite my attempts to utilize ngRoute, it's not functioning as expected, and I'm uncertain if my route setup will yi ...

Bootstrap-enhanced JavaScript table filter functionalities

Hello, I am facing an issue with the table filter functionality. It seems to be working fine, but when I search for a name like "John" and there are multiple instances of "John" in the table, there is some blank space between the tables. I suspect the prob ...

Issue encountered when generating a line chart using JSON dataset

When trying to create a fiddle, I encountered an issue with plotting a line chart using data from a .json file. The error message displayed was: Uncaught SyntaxError: Unexpected token o The chart can be successfully plotted if the JSON is provided extern ...

Tips for customizing the time selector in material-ui-time-picker

Is there a way to enable keyboard input control for the material-ui-time-picker? Currently, it only allows editing when clicking on the clock interface. Here is a snippet of my code: import React, { Component } from "react"; import { TimePicker } from " ...

ReactJS - Triggering a timeout reset and reactivation with a single button press

When I click a button that has a callback function, I want it to start a timeout with a 5-second delay. If the button is clicked again within that 5 seconds, I want the timer to reset without triggering the timeout handler. The handler should only be calle ...

Accessing the FB Page plugin directly within the app browser

Utilizing the Facebook page plugin in a hybrid app created with worklight (6.2.01) looks like this: <div id="facebook-toc-feed" className="toc-feed"> <iframe id="fb-feed" src={"https://www.facebook.com/plugin ...

The function google.script.run encounters an error when dealing with file inputs

For the past two years, my Google Apps Script connected to a spreadsheet has been working flawlessly. I created an HTML form to upload CSV and Excel files for processing and data loading into the spreadsheet. However, since March 2020, file uploading has b ...

Issue with refreshing the checkboxradio, it does not function properly when used with disabled preloaded fields

Displayed below are two checkboxes (one disabled and one not), both unchecked and disabled using JavaScript. However, the disabled checkbox does not function properly. Any solutions to this issue? function toggleProp(e, prop, selector) { var is = $(e) ...

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

Even with the use of !event.repeat, the keyboard event still manages to trigger twice

I've been working on an interactive online piano that takes keyboard input, but I'm encountering a problem where sometimes it registers two events instead of one when a key is pressed. To address this issue, I attempted to use e.repeat (with e r ...

AngularJS input range is written inside the bubble that crosses over the screen

Is there a way to write inside the bubble of the range slider? I have adjusted the design of the range slider and now I simply want to display the number inside the bubble: Please see image for reference I aim to display the number inside a circle. What ...