Exploring the use of ngResource in conjunction with HttpBackend - Potentially unreached rejection issue

Issue

Currently, I am working on testing a controller utilizing Karma, Mocha, Chai, and PhantomJS as part of the testing process.

IndexCtrl.js (simplified)

app.controller('IndexCtrl', ['$scope', '$resource', function($scope, $resource) {
  var methods = {
      get:{
          method:'GET'
      }
  };

  var Users = $resource('/api/v1/search/:search', {},methods);

  $scope.testResource = function(){
      Users.get({search: 'TEST'}, function(result){
        $scope.someTestValue = true;
      }, function(){
        console.log("hello world");
      });       
  };
}]);

index.controller.test.js (similarly simplified, with non-http tests)

describe('Index', function () {

  var ctrl, $httpBackend;
  beforeEach(module('myApp'));
  beforeEach(inject(function($rootScope, $controller, $injector){
      $httpBackend = $injector.get('$httpBackend');

      $scope = $rootScope.$new();
      ctrl = $controller('IndexCtrl', {
          $scope: $scope
      });    
  }));

  describe('Search', function () {
      it('Triggering the watcher by changing the override', function () {
          $httpBackend.expectGET('/.*/', undefined).respond(200, {});
          $scope.testResource();
          $httpBackend.flush();
          expect($scope.someTestValue).to.equal(true);
      });   
  });
});

However, upon running the test, I encountered the following error. If I remove the flush line, the error does not occur, but the functionality does not operate as intended.

PhantomJS 2.1.1 (Mac OS X 0.0.0) Index Search Changing the override should trigger the watcher FAILED
the string "Possibly unhandled rejection: {\"line\":1421,\"sourceURL\":\"node_modules/angular-mocks/angular-mocks.js\",\"stack\":\"$httpBackend@node_modules/angular-mocks/angular-mocks.js:1421:90\\nsendReq@webroo...

<p><strong><em>package.json</em></strong></p>

<pre><code>{
  "name": "myApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "web-test": "node ./node_modules/karma/bin/karma start karma.conf.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Editor's Message

In comparison to the issue highlighted in Angular 1.6.0: "Possibly unhandled rejection" error, where the error wasn't triggered by a flush, and the remedy was reverting to AngularJS 1.5.9. Despite attempting to roll back to Angular 1.5.9 based on the suggestion, I have yet to resolve the problem. Consequently, if I receive another automatic "marked as a duplicate" response...

Answer №1

There seems to be a bug related to unhandled rejects in Angular versions 1.5.9 to 1.6.0. To fix this issue, add the following code snippet to your app configuration:

.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}])

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

What is the reasoning behind exporting it in this manner in the index file?

As I was going through a tutorial about nests, there was this step where the instructor made a folder named "dtos" and inside it, they created two dto files (create-user.dto and edit-user.dto). Following that, they also added an index file in the same fold ...

Looking to locate the child div elements within a parent div

I am having trouble determining the individual lengths of child divs within parent classes that share the same name. For example: <div class="main-div"> <div class="parent"> <div class="child"></div> <div class= ...

Having difficulty managing asynchronous Node JS API requests

I'm a beginner in Node.js and I've taken on a project that involves querying both the Factual API and Google Maps API. As I put together code from various sources, it's starting to get messy with callbacks. Currently, I'm facing an issu ...

Utilizing JavaScript to manage a div's actions throughout various pages

I am currently working on an HTML project that involves having a collapsible text box on each page. However, I am struggling to figure out the best way to achieve the desired behavior. Essentially, some of the links will belong to a class that will set a v ...

dual slider controls on a single webpage

I am attempting to place two different sliders on the same page. When I implement the following code for one slider, it functions correctly: <h3>Strength of Belief</h3> <div class="slidecontainer"> <div class="slider_left"> < ...

Changing an Array into JSON format using AngularJS

I am attempting to switch from a dropdown to a multiselect dropdown. <select name="molecularMethod" class="form-control" ng-model="request.molecularMethod" multiple> It is functioning properly. However, when items are selected, it generates an arra ...

Encountering a problem when utilizing window.ethereum in Next Js paired with ether JS

Experiencing some difficulties while utilizing the window.ethereum in the latest version of NextJs. Everything was functioning smoothly with NextJs 12, but after upgrading to NextJs 13, this error started popping up. Are there any alternative solutions ava ...

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

Experiencing Strange Issues with Jquery Image Carousel... Assistance Needed!

I recently created a jquery slideshow using a tutorial I found at this link: While the slideshow is functioning correctly for the most part, there is a strange issue that occurs right at the beginning when displaying the first image. Initially, the first ...

Is it feasible to directly load image objects into jQuery colorbox?

Currently, I am working with the "colorbox" jQuery plugin and I have a specific requirement to dynamically load a set of preloaded image objects into colorbox. The challenge lies in the fact that I have three different image sizes - thumbnail, display, an ...

How a JavaScript function handles the scope of a for loop index

Here's some Javascript code I'm working with: func1() { for(i = 2; i < 5; i ++) { console.log(i); func2(i); } } func2(x) { for(i = 100; i < 200; i ++) { do something } } I've noticed that when runni ...

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

I have a color picker that triggers the following jQuery script: //event.color.toHex() = hex color code $('#iframe-screen').contents().find('body a').css('color', event.color.toHex()); This script will change the color of al ...

The json object in AngularJs does not appear on the screen

I'm attempting to showcase the JSON object at the conclusion of the form, as illustrated below: <p> <input type="text" name="title" ng-model="blog.title" /> </p> <p> <textarea name="txt" ng-mod ...

Make sure the auto import feature in TypeScript Visual Studio Code Editor is set to always use the ".js" extension

At times, the auto-import completion feature includes the .js extension, but inconsistently. When this extension is missing in the TypeScript source, the emitted JavaScript file may encounter runtime issues like module not found error since the tsc compile ...

Refresh the webpage when using the browser's back or forward button in AngularJS with ui-router

In my AngularJS app, I have configured the ui-router state as follows: $locationProvider.html5Mode(true); $stateProvider .state('index', { url: '/index?zoom&center', views: { ...

Tips for displaying a React component with ReactDOM Render

_Header (cshtml) <div id="Help"></div> export default class Help { ReactDOM.render( <Help/>, document.getElementById('Help') ); } Help.js (component) } My objective is to di ...

I need to know how to create a patch request in Vue.js and simultaneously modify the marks input for specific individuals by using v-model

Hello there, I am currently developing a student assessment input form using vuejs, express, and mongoDB. The backend API is complete and functioning properly when tested with postman. Here is the code: // UPDATE MARKS router.patch('/:studentId' ...

Interactive mobile navigation featuring clickable elements within dropdown menus

I recently implemented a mobile nav menu based on instructions from a YouTube tutorial that I found here. Everything was working perfectly until I encountered an issue on the 'reviews list' page. The dropdown in the mobile nav is supposed to be ...

Generating a JSON document from a collection of text files

I have a question about JSON files and bash scripting: My goal is to create a JSON file that contains two keys, "key1" and "key2", each with multiple values stored in separate .txt files. The contents of the .txt files for each key are structured like thi ...

Utilizing the jexcel plugin to seamlessly integrate arrays for a personalized subtitle editing experience

Could you please assist me in understanding how to utilize the jexcel plugin for pushing arrays? To achieve the push functionality, I would like it to behave similarly to arrays containing 6 different colors as outlined below: Subtitles = orange, Caption ...