Tips for simulating a DOM element in Jasmine so that it is accessible to the controller

Trying to simulate a DOM element in my jasmine test

     it('Testing radio button change', function () {
        simElement = angular.element("<div><input class='my_radio' type='radio' /></div>");
        simElement.find('input')[0].checked = true;
        var scope = $rootScope.$new();
        $compile(simElement)(scope);
        scope.$digest();

        console.log(simElement.find('input')[0].checked); // expected output: true
        myController.changeRadio();
        console.log(simElement.find('input')[0].checked); // expected output: false

    }); 

Inside my controller

function changeRadio(){
    for(var i = 0; i < angular.element('.simElement').length; i++){
        angular.element('simElement')[i].checked = false;
    }
}

The console log should display the following results:

true
false

Even though myController.changeRadio successfully switches the radio button from true to false when the app is running, the jasmine test suite failed. It was discovered that the controller couldn't locate the input element at all. Is there a way to provide the compiled DOM to the controller during testing?

Answer №1

Your current approach seems to be off track. It appears that you are testing HTML elements in your unit tests, which is not the intended purpose. Unit testing should focus solely on testing code functionality. Consider using E2E testing with protractor for assessing the HTML interface instead.

As an illustration...

<div ng-show="isVisible">Visible</div>

In my unit tests, I verify the logic of toggling the visibility based on certain conditions within the controller. In my E2E tests, I interact with the div element and validate that its visibility changes as expected.

I hope this explanation clarifies things for you.

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

Issue with Prisma ORM in Next.js 13: Outdated Data Shown When Navigating Instead of Latest Data

In my project, I am utilizing Next.js 13 and Prisma ORM to fetch data in a server component and then pass it down to child components using a context. The page route is structured like so: /item/[id], and the id is used in the layout.tsx file to retrieve t ...

Message displayed on picture carousel

<div class="slider"> <div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> <p class="projectname">Project</p> <p class="clientname">Client Name</p> </div> &l ...

Tips on preventing the mutation of v-model input in Vue

I have a code that calculates the amount of coins from an array. This code helps me determine how many items I can buy from a table with a given order. In the code, orderSize is being mutated in order to get the result. However, when I add an input field f ...

Updating an array with complex values in React using the useState hook in

I am working with a long array where I need to update the quantity under the misc array for each person. Each person in the array has a list of miscellaneous items, and each of those items can have their own array with quantities that need to be updated. T ...

My goal is to use both jQuery and PHP to automatically populate the dropdown list

Here is my PHP code for executing a query: $host = "localhost"; $user = "root"; $pass = "abc123"; $databaseName = "class"; $con = mysql_connect($host,$user,$pass); $dbs = mysql_select_db($databaseName, $con); $result = mysql_qu ...

Why do images show up on Chrome and Mozilla but not on IE?

I have tested the code below. The images display in Chrome and Mozilla, but not in IE. The image format is .jpg. Can someone please assist? bodycontent+='<tr class="span12"><td class="span12"><div class="span12"><img class="span ...

Unable to utilize the resolved value received from a promise and returned from it

Within the code snippet below, I am retrieving a Table object from mysql/xdevapi. The getSchema() and getTable() methods return objects instead of promises. The purpose of this function is to return a fulfilled Table object that can be used synchronously i ...

Adding an image in HTML from a different drive - step-by-step guide!

Currently, I am immersing myself in HTML, CSS, and JavaScript as I gear up for my upcoming school project centered around frontend development. Here's the issue I encountered. While attempting to insert an image into one of my HTML files, I ran into ...

The ng-View feature appears to be malfunctioning within AngularJS

I'm extremely new to AngularJS and am having trouble with ng-view. Here is the code from AngularFormsApp.js: var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]); angularFormsApp.config(function ($routeProvider) { $routeP ...

Message displayed in a div element on the status bar

I am working on implementing a loading description box that will display information about what is currently loading or show the percentage of the loading progress. My current approach involves using a basic "show div after on document.all" setup where th ...

The NUXT project encounters issues when trying to compile

I am currently working on an admin panel using the nuxt + nest stack. I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template While in development mode, the project starts up without any issues. However, when I ...

When attempting to retrieve data saved to req.session with express-session from a different endpoint, the data appears to be

While working on my project with express-session, I encountered a peculiar issue. I am saving the currently logged in user to the session, but when I try to access the currentUser key on the get route, I find that the value is an empty object. Strangely, i ...

Get the host name using Node.js server without using the 'req' parameter

Currently, I am utilizing req.headers.host to identify the host name of the server, which works well when dealing with incoming requests at the server. However, I am curious about how one can determine the host name without a request (i.e. without req). T ...

Utilizing AJAX for XML data parsing

I need help with formatting XML data into a table. The code I've written isn't working as expected. The XML data is structured in branches, causing it to not display correctly. Can someone assist me in fixing this issue? <!DOCTYPE html> &l ...

Experiment with using webdriverio and javascript to select checkboxes

Currently, I am experimenting with testing the selection of checkboxes using webdriverio in combination with mocha and chai. Below is an example of what I attempted utilizing a javascript module pattern select_checkbox: function(browser, key, value){ r ...

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

The journey of data starting from a PHP file, moving through JavaScript, and circling back to PHP

I've encountered an interesting challenge with my PHP file and Wordpress shortcode. It all starts when the shortcode is embedded in a webpage, triggering a php function from within the file. This function executes an SQL query to extract data, then s ...

Concealing or revealing an image with jQuery when hovering

I currently have 3 <a> tags within my html, each containing 2 images. Specifically, the greyscale images are the ones that are visible while the colored ones are set to display:none. I am aiming to achieve a functionality where upon hovering over th ...

What is the best way to use setInterval with multiple objects?

Subject: Here is an example of JavaScript code: var User = function(data){ this.name = data.name; this.delay = data.delay; this.say(); } User.prototype.say = function(){ _self = this; setInterval(function(){ console.log(_self.name); }, t ...

The json_encode() function returned a JSON that is not valid

In my PHP file (although more complex, even with the simplest code it fails), I have: <?php $salida = array(1,2,3,4,5); echo json_encode($salida); ?> The response received is: [1,2,3,4,5] While this appears valid, it's actually not. When pas ...