Toggle between the Angular test/development module and the production module

Currently, I am working on implementing an Angular app. During my e2e tests, I encountered a need to mock some server requests while allowing others to pass through using e2e httpBackend.

Vijitta has provided an example of how to utilize the HttpBackend:

` http://jsfiddle.net/vojtajina/DQHdk/ `

However, I face a dilemma where I want my application to boot up with the development module when testing, like so:

<html ng-app="AppDevModule">

On the other hand, during server runs, I prefer the production module to be included:

<html ng-app="AppCoreModule">

Manually switching between these modules in the HTML seems impractical. The documentation for e2e httpBackend offers a snippet for including the development module but does not address this specific issue.

In my setup using angular testacular, I attempted to configure it within the e2e tests as shown below:

describe("DHCP Client e2e.", function () {


    beforeEach(function () {


        var fakeAppModule = angular.module('AppCoreModule', ['AppCoreModule', 'ngMockE2E']);

        fakeAppModule.run(function ($httpBackEnd) {

            var networkInterface = [
                {
                    'secondarySubnets':[
                        {"dhcpOfferOptions":{"dnsServers":["8.8.8.8"], "offerTime":"400", "leaseTime":"600"}, "rangesLimits":[],
                            "network":"192.168.0.0", "slash":"24", "gateway":"192.168.0.1",
                            "isDynamic":"dynamic", "description":"asdsadsa"}
                    ]
                },
                {
                    'secondarySubnets':[
                        {"dhcpOfferOptions":{"dnsServers":["8.8.8.8"], "offerTime":"400", "leaseTime":"600"}, "rangesLimits":[],
                            "network":"192.168.0.0", "slash":"24", "gateway":"192.168.0.1",
                            "isDynamic":"dynamic", "description":"asdsadsa"}
                    ]
                }
            ];

            $httpBackEnd.whenGET('/^\/view\//').respond(200, '<div></div>');
            $httpBackEnd.whenGET('/r/networkInterface').respond(200, networkInterface);
            $httpBackEnd.whenGET('./../main/webapp/r/networkInterface').respond(200, networkInterface);

        });


        fakeAppModule.config(function ($provide) {
            $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);

        });
    });

Unfortunately, the results did not match my expectations.

Answer №1

After reviewing the discussion in the following thread: https://groups.google.com/forum/?fromgroups=#!topic/angular/3Xm7ZOmhNp0, it appears that using a mock backend is intended for situations where the real one has not been implemented yet. Once the real backend is ready, it is advised to switch to using it as relying on both versions simultaneously may cause testing results to not accurately reflect the functionality of the production application.

In conclusion, it is recommended to avoid switching between two application modules for testing and production whenever possible.

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

Generate a random 8-digit number with a specific range in JavaScript

I want to generate a random 8-digit number ranging from 0 to 7, excluding the numbers 8 and 9. Here is what I have tried so far, but I'm unable to exclude the numbers 8 and 9: var b = Math.floor(Math.random()*90000000) + 10000000; console.log(b) Is ...

Managing control among various child popups

In the situation I am facing, a parent window with login fields is present. In order to manage its controls, I have stored the window handle using: String parentWindow = idriver.getWindowHandle(); After entering the login credentials, a new popup (let&ap ...

Replacing jQuery.ajax from a different directory/domain - problem with using relative URLs

We are incorporating scripts from various sources and domains, including one that contains the definition for jQuery.ajax function. Calls to jQuery.ajax are being made from different places and domains using relative URLs, such as jQuery.ajax("my/relativ ...

Tips for creating a responsive background image that adjusts after resizing the window to a certain width

Is there a way to create a responsive background-image that adjusts when the window is resized to a specific width, similar to the main image on ? ...

What is the best way to obtain a unique dynamic id?

This is the unique identifier retrieved from the database. <input type="hidden" name="getID" value="<?php echo $row['ID']; ?>"> <input type="submit" name="getbtn" value="Get ID"> How can I fetch and display the specific dynami ...

Order Angular by a derived result

I have a question regarding my app: I am displaying a list of elements, each with different properties. One of these properties is used to retrieve another value from a factory. I would like to be able to sort the list based on this calculated value. Is t ...

Using an npm package within your current AngularJS project: A step-by-step guide

Exploring how to integrate the screenshot-desktop NPM package into a pre-existing AngularJS project ...

Image Placement Based on Coordinates in a Graphic Display

Placing dots on a map one by one using CSS positions stored in arrays. var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}]; var ...

Click on the next tab within the ExtJS tab menu

I am looking to deactivate a tab and if it happens to be active, I want the system to automatically switch to the next tab. I attempted myPanel.tab.disable(); if(myPanel.tab.active) myPanel.NextSibling().tab.setActive(); and myPanel.tab.disable(); ...

"Uncaught Error: Unable to retrieve null properties" encountered while utilizing regex match in cheerio web scraping

Extracting text from brackets in HTML using regex: <dl class="ooa-1o0axny ev7e6t84"> <dd class="ooa-16w655c ev7e6t83"> <p class="ooa-gmxnzj">Cekcyn (Kujawsko-pomorskie)</p> </dd> <dd class="ooa-16w655c ev7e6t ...

Is activating the CSP policy preventing the JavaScript on the front end from transmitting cookies and the referrer header?

Upon removing the CSP policy from the backend in Node.js, everything functions correctly. However, enabling it results in a break in the JavaScript code. To investigate further, I analyzed the request headers of the AJAX requests made by my JS files. Two ...

Which takes precedence: the end of the script tag or the backtick?

Currently, I am working on developing a page builder widget. My goal is to save the entirety of the HTML code for the edited page to both local storage and a database. The PHP script will load the saved HTML from the database, while JavaScript will handle ...

Why are imported modules unable to reach global variables in Node?

As I delve deeper into using ES6 and organizing my code across multiple files for better readability and version control, I've encountered an issue that has me puzzled. In one of my scenarios, I have a class defined in a separate file called class.js, ...

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

Trying to utilize "Thymeleaf" for the first time, I am attempting to pass a value to JavaScript with the following code: onclick="getPropId('${properties.id}')" The corresponding function is as follows: getPropId(inputID){alert(inputId);} Unf ...

javascript onload select the text in the textarea

Is there a way to have JavaScript automatically highlight the text inside a textarea when the page is loaded? ...

What is the best way to cluster related data points and display them together?

In order to efficiently manage the data I receive, it is necessary to group it based on specific criteria and display these groups in the user interface. "ServiceRequest": [ {"Status": "Re-Open", },{ "Status": "Open", ...

Fixing 404 Errors in Angular 2 Due to Component Relative Paths in SystemJS-Builder

I recently posted this on https://github.com/systemjs/builder/issues/611 My goal is to bundle my Angular 2 rc 1 application using systemjs-builder 0.15.16's buildStatic method. In my Angular component, there is a view and one or more external stylesh ...

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

Is it possible to implement a while loop in React?

Issue: I am facing a challenge while attempting to generate an array of 4 elements from a list using a while loop, but it seems to result in an infinite loop. const [options, setOptions] = useState([]); const fetchElements = () => { while(options. ...

Change the class upon clicking the element

Looking to create a function that toggles classes on elements when specific links are clicked. For example, clicking on link 1 should add the "active" class to the red element, while clicking on link 2 should do the same for the pink element, and so forth. ...