Troubleshooting a problem with testing an AngularJS controller in TypeScript using angular.mock.inject with Karma and Jasmine

Currently, I am facing a challenge while attempting to test an AngularJS 1 controller that is written in TypeScript using Jasmine + Karma. Unfortunately, I keep encountering an error that I am struggling to resolve. The error message itself is not very descriptive:

PhantomJS 2.1.1 (Windows 8 0.0.0) Login Controller should have text" FAILED forEach@/bower_components/angular/angular.js:341:24 loadModules@/bower_components/angular/angular.js:4456:12 createInjector@/bower_components/angular/angular.js:4381:22 workFn@/bower_components/angular-mocks/angular-mocks.js:2507:60 /bower_components/angular/angular.js:4496:53 forEach@/bower_components/angular/angular.js:341:24 loadModules@/bower_components/angular/angular.js:4456:12 createInjector@/bower_components/angular/angular.js:4381:22 workFn@/bower_components/angular-mocks/angular-mocks.js:2507:60 /bower_components/angular/angular.js:4496:53 PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.019 secs / 0.015 secs)

The issue seems to revolve around my code, which appears to be quite basic and does not perform any significant actions. It appears to fail at the angular.mocks.inject method. Interestingly enough, when I comment this out and add some simple tests, everything works as expected.

describe("Login Controller", () => {
    var controller: App.Login.LoginController;

    beforeEach(angular.mock.module("app.pages.auth.login"));

    beforeEach(angular.mock.module($provide => {
        $provide.value("$window", {});
    }));

    // I can get to here ok but this line below fails with the error above
    // Note I have also tried putting $rootScope back in but to no avail
    beforeEach(angular.mock.inject((/*$rootScope, $state, $http, $mdToast, $window, $log*/) => {
        console.log("test");
    }));

I have double-checked and confirmed that I have included angular-mocks.js in my list of files, albeit towards the end of my dependency list. Additionally, it is worth mentioning that I am utilizing wiredep for calculating my dependencies.

angularjstypescriptjasminekarma-runner

Answer №1

After encountering the identical issue, I successfully resolved it by including the import of the .ts file that establishes the module at the beginning of my test.ts file. The reason for this error is the absence of importing the .ts file defining the "app.pages.auth.login" module.

(It's worth noting that the error message provided was not very informative in resolving this issue.)

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

Creating a welcome screen that is displayed only the first time the app is opened

Within my application, I envisioned a startup/welcome page that users would encounter when the app is launched. They could then proceed by clicking a button to navigate to the login screen and continue using the app. Subsequently, each time the user revisi ...

javascriptangulartypescriptionic-framework

Continuously encountering the error message "Controller does not have a default constructor"

Utilizing Spring MVC alongside the Jackson library for JSON (planning to integrate AngularJS later on). The issue arises when I start Tomcat, as the "No default constructor found" error is displayed. Below is the error log: SEVERE: StandardWrapper.Throwab ...

javajsonangularjsspringspring-mvc

Malfunction in parsing the post request body

Recently, I have been facing an issue while attempting to execute a $http.post request in this manner: $http({ method: 'POST', url: '//192.168.2.1:3000/auth/signup', data: $scope.credentials, headers: { 'Content- ...

node.jsangularjsexpresshttp-post

Mocha has difficulty compiling Typescript code on Windows operating system

In developing my nodejs module, I created several unit tests using Mocha and Chai. While these tests run smoothly on macOS, they encounter compilation issues on Windows, resulting in the following error: D:\projects\antlr4-graps>npm test > ...

node.jstypescriptmocha.js

AngularJs is being used to extract data from Firebase with the help of $value, $id, and

I have been working on retrieving data from Firebase in my HTML using AngularJS. Everything is functioning well, however, when I access the child node, the data is displayed in an unexpected format. Please refer to the images below for more details: This ...

htmlangularjsjsonfirebase

Enhancing static SVG with dynamic tooltips using D3.js

Our challenge involves adding tooltips dynamically to a static SVG image when a hover event occurs on an object within the SVG using d3.js in the context of an AngularJS application. The SVG image we are working with is a floorplan, which is quite intrica ...

javascriptangularjsd3.jssvg

The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so: .chat-wind ...

cssangularjs

Arrange several columns according to the chosen criteria

There is a dropdown feature in my application that has three states - ascending, descending, and none. This dropdown is responsible for rearranging the items in a list. https://i.sstatic.net/xYIfM.png This is my code: list.component.html <div *ngFor= ...

javascriptarraysangulartypescriptsorting

The view fails to update when the object is modified

Within the acceptRequest function in child.component, the commissioner.requestAccepted property is set to false, and then the updated commissioner object is returned. Ideally, I want the button to be automatically removed from the view once the object is ...

angulartypescript

Updating the value of the variable using ng-submit

My application displays Quantity: {{num}}. The default value is set to 3 in the scope. The objective is to click on: <form ng-submit="addContact()"> <input class="btn-primary" type="submit" value="Add Contact"> </form> and to up ...

javascriptangularjs

The Angular view fails to refresh even after the controller has been modified

Encountering a problem where a variable in the controller gets updated but does not reflect in the view. The variable loginErrorMessage should show on the frontend, however, it disappears when navigating away and back to the page even after being updated i ...

angularjsionic-framework

The presence of 'eventually' in the Chai Mocha test Promise Property is undefined

I'm having trouble with using Chai Promise test in a Docker environment. Here is a simple function: let funcPromise = (n) => { return new Promise((resolve, reject) =>{ if(n=="a") { resolve("success"); ...

typescriptunit-testingmocha.jschai

Ensuring that a date is within a certain format in TypeScript

Can someone help me verify the validity of different date formats? I attempted the following method: let newdate = new Date(myStringDate); Date.parse(myStringDate) result = `${newdate.getDate()}/${newdate.getMonth() + 1}/${newdate.getFullYear()}` The re ...

angulartypescript

Learn how to implement a search filter in Angular by utilizing the "| filter" directive in your controller with a specific text query

Can you help with this code challenge? jsfiddle.net/TTY4L/3/ I am attempting to create a filtering list, where if I enter a value like 'avi', the list should display as: Avi Ravi, I understand the logic to achieve this: {{['Avi',&a ...

angularjs

Angular: Exploring the possibilities of condition-based click event implementation

In my component, there are two elements: 'order information' and a 'datepicker'. When clicking on the component, it will display the order information. However, I want to prevent the click event from being triggered if the user clicks ...

javascriptangulartypescript

Refine your search by focusing on select characteristics of an item

Is there a way to filter tasks in a table using only specific attributes provided in the table? Currently, when I enter a search term in the search bar, tasks are displayed even if they have attributes that match the input but are not displayed in the na ...

javascripthtmlangularjs

What is the correct way to access $auth in Nuxt with TypeScript?

<script lang="ts"> import LoginAdmin from '@/components/LoginAdmin.vue' import { Component, Vue } from 'nuxt-property-decorator' import Auth from "@nuxtjs/auth"; export default class MyStore extends Vue { pub ...

typescript

How can Angular incorporate JSON array values into the current scope?

I am currently working on pushing JSON data into the scope to add to a list without reloading the page. I am using the Ionic framework and infinite scroll feature. Can someone please point out what I am doing wrong and help me figure out how to append new ...

javascriptjsonangularjslistionic-framework

Next.js allows for the wrapping of a server component within a client component, seamlessly

I am currently working on a project where I have implemented a form to add data to a JSON using GraphQL and Apollo Client. The project is built with TypeScript and Next.js/React. However, I am facing a conflicting error regarding server client components ...

reactjstypescriptnext.jsgraphqlapollo

Applying Multiple Conditions to setCellProps in Material-UI

I am facing an issue with a data-table that is not in a class extending the React.Component, unlike some examples I have come across. My goal is to setCellProps based on certain conditions as outlined below: If utilization is less than or equal to 50, the ...

typescriptmaterial-ui