Is it better to use AngularJS' ngMock inject before each test or for each individual test case?

Current Situation

As I work on writing tests for an Angular project, I have come across a common practice of creating "global" variables in a describe block to store dependencies needed for the tests. This approach involves defining variables like $controller and $rootScope within the describe block and then using them in the individual test cases.

describe('Some tests', function() {
    var $controller, $rootScope

    beforeEach(angular.mock.module('myApp'))
    beforeEach(angular.mock.inject(function(_$controller_, _$rootScope_) {
        $controller = _$controller_
        $rootScope  = _$rootScope_
    }))

    it('uses $controller inside', function() {
        // ...
    })
    it('uses $rootScope inside', function() {
        // ...
    })
})

While this method is efficient in terms of reusing dependencies across multiple tests, I have noticed that it can lead to unused global variables piling up and potentially causing confusion if not properly managed.

Proposed Solution

To address this issue, I have started injecting dependencies directly into each test case instead of relying on globals defined in a beforeEach block. By doing so, I can keep the scope of dependencies local to the specific test and avoid cluttering the code with unnecessary global variables.

describe('Some tests', function() {
    beforeEach(angular.mock.module('myApp'))

    it('uses $controller inside', angular.mock.inject(function($controller) {
        // Test using the $controller
    }))
    it('uses $rootScope inside', angular.mock.inject(function($rootScope) {
        // Test using $rootScope
    }))
})

This approach not only helps maintain code cleanliness but also simplifies the process of tracking where dependencies are coming from.

The Query

Given the above context, is there any drawback to injecting dependencies per test rather than within a beforeEach block?

Answer №1

There is no issue with adding dependencies based on your specific needs. The concern arises when efficiency is compromised, as the same file needs to be loaded multiple times. While this may not impact smaller test cases significantly, it can slow down performance as the number of test cases increases. Additionally, the modules being injected each time may rely on other modules, resulting in additional memory load. Therefore, utilizing global variables is the recommended approach.

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 can Vue define the relationship on the client-side when submitting a post belonging to the current user?

Currently, I am developing an application using Node.js, specifically Express server-side and Vue client-side, with SQLite + Sequelize for managing the database. One of the features of this app is that a user can create a post. While this functionality ex ...

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

Capturing a res.send(404) error in ExpressJS during production: Tips and tricks

Can middleware handle errors like 404 and 500 when they are returned this way? exports.index = function(req, res) { res.send(404); } In production, I would want to display a custom missing page for these errors. However, my error handler middleware doe ...

Angular: Keeping all FormControls in sync with model updates

I am dealing with a collection of FormControls that were created using FormBuilder: this.someForm = this.fb.group({ name: '', size: '', price: '', }); Is there an alternative method to update them based on ...

Unable to send HTML content back from the controller when making Ajax requests in a messaging application

Currently, I am in the process of developing an integrated chat application within CRM. The main functionality involves displaying the chat history between users when a logged-in user clicks on a contact using Ajax calls. However, I have encountered some i ...

Having trouble choosing an item from the Select2 drop-down menu

I have been developing an application that incorporates Select2 (version 3.5.1). The HTML used to create the dropdown / autocomplete field is as follows: <input id="mySelect" class="form-control" type="hidden"> The snippet above includes the form-c ...

Tips on working with an array received from a PHP script through AJAX

I've been stuck with this issue for the past few hours and I'm hoping to find a solution here. What I'm attempting to do is something like the following: PHP: $errorIds = array(); if(error happens){ array_push($errorIds, $user['user ...

Harness the power of React Material-UI with pure javascript styling

I am currently attempting to implement Material-UI in pure javascript without the use of babel, modules, jsx, or similar tools. <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8 ...

Switching between two states of a single 'td' element within a column

I am trying to implement a feature where only specific elements in the fourth column of a four-column table toggle when clicked. For example, clicking on an element in the fifth row third column should toggle the corresponding element in the fifth row four ...

Submitting a form with AJAX and additional fields can be accomplished by including the extra fields in

Imagine a scenario where I am working with a basic form like the one below <%= form_for(@category) do |f| %> <% if @category.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@category.errors.count, "erro ...

Developing numerous global objects within the context of JavaScript in Rails

I have an instance object called @cameras in my cameras controller's map method and am extracting necessary values from it for my specific purpose: + @cameras = load_user_cameras(true, false) + @map_data = [] + @cameras.each do |camera| + ...

An error is thrown when using AngularJS .length property

Currently, I am carrying out a regular task within my Filter to verify if angular.module('someApp') .filter('filterSomeData',['$filter',function ($filter) { return function (items, keyObj) { var filterObj ...

What could be causing my Puppeteer scraper to malfunction when I alter the search term?

The Task In this project, I am building a web scraper using NodeJS with Puppeteer. The goal is to scrape data for "Jeep Wranglers" and organize the results in JSON format. Comparing IPhone X and Jeep Wrangler Initially, everything worked smooth ...

What are the methods for detecting a change in a variable's value in JavaScript?

Although I am aware of Object.observe() and Object.prototype.watch(), these features are not widely supported. Fortunately, AngularJS does offer functionality to watch changes on objects. I am currently working on creating a script with similar capabiliti ...

Error: Unable to access the 'ht_4year_risk_opt' property because it is null

When attempting to call the servlet that returns JSON data, I encounter an error while parsing the data. var jsonResponse = jQuery.parseJSON(data); var ht_4year_risk_opt = jsonResponse.ht_4year_risk_opt; ...

The map's content shifts with every scroll of the mouse, rather than being controlled by the

After creating a custom control in leaflet, I noticed that when interacting with it using scroll or click, the underlying map is affected instead of the control itself. <CustomMapControl> <div className="custom-c ...

Determining the distance between points in an STL file with three.js

I'm currently working on a feature that requires users to click on two different points and calculate the distance between them. However, it seems like the clicks are occurring at random positions, resulting in inaccurate calculations. The calculati ...

Implementing a method to pass total value to the <td> tag in angular JS using controller

I am having trouble calculating the total IR for each table cell. Despite my efforts, the function is not working as expected and I can't figure out why. $scope.getTotalb = function () { var totalb = 0; for (var i = 0; i < $scope ...

Video background in webflow not currently randomizing

I want to add a dynamic video background to my website created with Webflow. I attempted to achieve this using Javascript by including the following links: "https://s3.amazonaws.com/webflow-prod-assets/63e4f3713963c5649a7bb382/63f787b42f81b8648e70fed ...

Having trouble with implementing Nested routes in Vuejs?

main.js import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld"; import User from " ...