Unexpected request detected by AngularJS $httpBackend

Attempting to setup a unit test for an AngularJS controller that utilizes a service making a $http.get call. Despite using $httpBackend.expectGET followed by $httpBackend.flush(), the application is attempting to make GET requests for template HTML resources, resulting in an unexpected request error.


        beforeEach(inject(function($injector){
            controller = $injector.get('$controller');
            scope = $injector.get('$rootScope').$new();
            httpBackend = $injector.get('$httpBackend');
            httpBackend.whenGET(UrlPrefix+"/promotions/default.json").respond("yeh");
        }));
        
        it("should fetch promotions", function() {
            httpBackend.expectGET(UrlPrefix+"/promotions/default.json");
    
            Controller = controller('promotionsController', {
                $scope: scope
            });
    
            scope.getPromotions();
            httpBackend.flush();
        });
    

Encountering:

Unexpected request : GET ./template/loader/app-loader.html

This template should be loaded before the controller. Any suggestions on how to bypass these template GET requests?

Answer №1

If you don't need a real HTML template for this particular test, you can prevent it from being downloaded by populating the $templateCache with a dummy template. Here is an example:

beforeEach(inject(function($injector, $templateCache) {
    // ...
    $templateCache.put('./template/loader/app-loader.html', '');
}));

You may need to adjust the template URL to match the real one that is being requested.

Answer №2

In my opinion, I believe the best course of action is to go around it

 $httpBackend.whenGET('./template/loader/app-loader.html').passThrough();

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

How to enable cross-origin resource sharing

While using $resource for making http calls, I encountered an issue with my backend application being deployed on a different port. When attempting to fetch data from the server using the request method(GET), my browser automatically attaches the request m ...

Steps for importing a React component as an embedded SVG image

I have developed a SVG component in React by converting an SVG file to a React component using the svg-to-react cli tool. In order to load and display additional svg files within this component, I am utilizing the SVG image tag as demonstrated below. This ...

Issue with jSignature transitioning properly from display:none to display:block within a multi-page form

After searching through numerous resources, I have been unable to find a solution to my specific issue. I have a multi-page form that incorporates jSignature as the final tab. The structure closely follows the example from the W3Schools website, tailored t ...

Displaying Dates in an Express Application using EJS

I have a MySQL table with a column containing date data. I am building a webpage to display this data in a more user-friendly way. Currently, the displayed result looks like this: https://i.sstatic.net/lGamr.png I would like the dates in the column to ...

Tips for transferring the button ID value to a GET request?

I recently developed a Node.js application that interacts with a database containing student information and their current marks. Utilizing MongoDB, I retrieve the data and present it in a table within an .ejs file. index.js router.get("/dashboard", funct ...

Material UI TreeView: Organize and present node data with multiple columns in a tree structure

const treeItems = [ { id: 1, name: 'English', country: 'US', children: [ { id: 4, name: 'Spring', country: 'Uk', ...

Verify in Mongo if a specific document is already present

Currently in development of my MEAN app, the client-side sends a $http POST request to my API with a JSON array containing soundcloud track data specific to each user. My goal now is to save these tracks to my app database within a 'tracks' table ...

In what way does s% access the title attribute within the Helmet component?

I am seeking clarification on how the reference to %s is connected to the title attribute of the <SEO /> component within the <Helmet /> component in the gatsby starter theme. Can you explain this? Link to GitHub repo On Line 19 of the code: ...

The attempted use of Wget with JavaScript integration was unsuccessful

Is there a way to save a dynamically generated page from the command line? I attempted to download it using: wget PageWithJS.com -O output.html However, the output.html file does not include the dynamically generated content. Any suggestions? ...

Is it possible in Elasticsearch to dynamically construct and send a JSON query object?

Currently I am utilizing angularjs alongside elasticsearch.angular.js. Constructing a dynamic JSON query object to reflect user requests has been successfully achieved. I am now seeking assistance on how to pass this constructed object to the search API wi ...

Incorporating Bootstrap Navbar into a create-react-app project

I recently created a new project using create-react-app. To incorporate Bootstrap into my project, I followed these steps: npm install --save bootstrap@3 Next, I imported Bootstrap in my root file index.js: import 'bootstrap/dist/css/bootstrap.css& ...

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

Vue dynamic components fail to re-render within a v-for loop upon data changes

I've created a dynamic table component that allows me to modify columns by changing their ordering, adding new ones, or removing existing ones. The structure of my table body is as follows: <tr v-for="row in data" :key="row.id"& ...

Set a personalized date as the initial reference point for the datepicker interface

Wondering how to set a default starting date for the datepicker in angular-ui.bootstrap? I recently discovered that this line of code does the trick. $scope.date = new Date(1980-12-12); While it successfully displays the value in the input box and date ...

Having difficulty making Skrollr compatible with BootStrap 3 single page wonder

I am completely new to JavaScript, which is why I decided to use Skrollr. However, I have been facing some challenges in getting Skrollr to work properly on my webpage. I added the following code at the end of my page: <script type="text/javascript" sr ...

What is the technique for nesting states in AngularJS?

Greetings, I am currently in the process of creating an Angularjs application and as a newcomer to Angularjs, I have encountered some challenges with nesting UI states. My goal is to develop a forgot password page with the following flow: ForGotPassword ...

The unitPngFix plugin ensures that the display of hidden div elements cannot be altered

I have been trying to resolve an issue with PNG files and transparency in IE browsers on my website. I have made progress, but there seems to be a problem specifically with IE6. To display transparent PNG images correctly on my site in IE browsers, I am u ...

What is the process for crafting a Vuejs controlled input form?

Although I am familiar with creating controlled components in React using state, I am new to the Vue framework and would like to understand how to adapt my code from React to be compatible with Vue. My goal is to store the values of input fields in a data ...

Error occurs when attempting to write to a Node stream after it has already

I'm experimenting with streaming to upload and download files. Here is a simple file download route that unzips my compressed file and sends it via stream: app.get('/file', (req, res) => { fs.createReadStream('./upload/compres ...

Is the presence of an excessive number of arguments in the object that includes functions an instance

In my program, I have implemented a feature where the user can provide an array to determine which functions are executed in a loop. However, managing the list of variables that need to be passed into each function has become challenging as the list keeps ...