Testing an Angular service using Karma, Jasmine, and JSPM

I am currently working on writing a unit test for my Angular 1 application using JSPM with Karma and Jasmine.

Below is a snippet of my Karma configuration (jspm section) :

jspm: {
    meta: {
        'jspm_packages/github/angular/angular.js': {
            format: 'global',
            exports: 'angular'
        },
        'jspm_packages/github/angular/angular-mocks.js': {
            format: 'global',
            deps:   'angular'
        }
    },
    loadFiles: [
        'test/**/*.js'
    ],
    serveFiles: [
        'app/**/*.js'
    ]
},

My initial focus is to test a custom angular service :

// imports

class Game {

    constructor($rootScope, $http, $timeout, $translate, $location) {

        // ...

        this.$rootScope.game = this;

    }

}

Here is the content of my test file :

import { module, inject } from 'angular-mocks';

describe('this is a test', function () {

    beforeEach(module('module-name'));

    var game;

    beforeEach(inject(function(_game_) {
        game = new _game_;
    }));

    it('should be defined', function () {
        expect(game).toBeDefined();
    });
});

The issue I am facing is that I keep encountering an error. The inject function from angular-mocks appears to be malfunctioning as my variable game remains undefined when it shouldn't be.

PhantomJS 2.1.1 (Windows 8 0.0.0) should be defined FAILED
    forEach
    loadModules
    createInjector
    workFn
    {path}/node_modules/karma-jspm/src/adapter.js:61:24
    tryCatchReject@D:/{path}/jspm_packages/system-polyfills.src.js:1188:34
    runContinuation1@D:/{path}/jspm_packages/system-polyfills.src.js:1147:18
    when@D:/{path}/jspm_packages/system-polyfills.src.js:935:20
    run@D:/{path}/jspm_packages/system-polyfills.src.js:826:17
    _drain@D:/{path}/jspm_packages/system-polyfills.src.js:102:22
    drain@D:/{path}/jspm_packages/system-polyfills.src.js:67:15
    Expected undefined to be defined.
    D:/{path}/node_modules/karma-jspm/src/adapter.js:61:24
    tryCatchReject@D:/{path}/jspm_packages/system-polyfills.src.js:1188:34
    runContinuation1@D:/{path}/jspm_packages/system-polyfills.src.js:1147:18
    when@D:/{path}/jspm_packages/system-polyfills.src.js:935:20
    run@D:/{path}/jspm_packages/system-polyfills.src.js:826:17
    _drain@D:/{path}/jspm_packages/system-polyfills.src.js:102:22
    drain@D:/{path}/jspm_packages/system-polyfills.src.js:67:15

I'm at a loss trying to figure out why it's not functioning properly. Any suggestions would be greatly appreciated.

Answer №1

It might be a bit delayed now, but give it a shot without using the new keyword:

beforeEach(inject(function(_game_) {
    game = _game_;
}));

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

Next JS is successfully importing external scripts, however, it is failing to run them as

In my upcoming project using the latest version 12.1.6, I am incorporating bootstrap for enhanced design elements. The bootstrap CSS and JS files have been included from a CDN in the pages/_app.js file as shown below: import '../styles/globals.css&apo ...

Rendering to a texture using the pingpong method in Three.js went smoothly, with no issues detected and the output was not

I attempted to implement the pingpong texture swap technique to generate smoke in threejs by following a tutorial that was published some years ago. Unfortunately, this tutorial utilizes an outdated version of threejs, and I am experiencing difficulties tr ...

How to access a grandchild's property using a string in JavaScript

Is there a way to access a property nested deep within an object when creating a custom sorting function? I am attempting to implement a sort function that can sort an array based on a specific criteria. const data = [ { a: { b: { c: 2 } ...

`In JavaScript strict mode, overridden function fails to execute`

I'm facing an issue where a modified function is not being called. The original implementation is shown below. // Base file defining and exporting a function function a() { // do something } module.exports = { a: a, b: function () { ...

Navigating boolean data extracted from JSON strings with angular expressions

Currently, I'm extracting information from a JSON string with Angular and experimenting with my application. Task Status: {{task.completed}} // output is either true or false I aim to accomplish the following: If task completed == true, display "c ...

Toggle the visibility of a button embedded within an ng-repeat loop

I am attempting to display or hide buttons within an ng-repeat loop, specifically in a simple table. I want to replace a delete button with a confirm button. Below is my code: ..... Angular stuff ..... function ContactsCtrl($scope, $http) { $scope.o ...

Streamline your Javascript code by utilizing multiple logical operators within a filter function

Looking for some help simplifying this code. Can anyone assist? I need to make changes to this code because I made an error. Correction needed: Updated test filter function: this._test = test?.filter(({ foo }: Foo) => { return foo ...

The issue with <asp:button> not functioning properly has been detected specifically in Internet

I am facing an issue with my asp button in my application. It works perfectly fine in Mozilla, Chrome, and IE 8 but it fails to work in IE 9. I have tried various solutions but none of them seem to solve the problem. If anyone knows how to fix this, pleas ...

Issue in ReactJS: Function with parameters is returning undefined values

Having a React app, I am currently facing an issue while trying to convert temperatures from Kelvin to Fahrenheit. Although I have set up a simple function to achieve this, I am consistently receiving undefined values. // Within the CityWeatherComponent i ...

Is there a way to access and read all JSON files within a directory in a Meteor application?

Is there a way to read all JSON files within a folder in my Meteor application? This is the structure I currently have: /server -- /methods -- -- file1.json -- -- file2.json I've attempted to read all JSON files using this code snippet: var ...

"Enhancing user engagement in ThreeJS: a guide to incorporating interactivity

After successfully rendering a model in ThreeJS, my next task is to incorporate interactivity by: Coloring specific parts of the model based on user input. Implementing a feature where clicking on any part of the model triggers it to be highlighted. As ...

Timezones not synchronizing properly with Moment.js

Hello everyone, I am currently exploring the world of moment.js along with the timezone add-on. I'm encountering some issues with a world clock project that involves using moment.js and moment-timezone.js together on a page where highcharts are also p ...

Unit testing AngularJS service with promise

Could use some assistance with unit testing a service that relies on a repository returning a promise to the consumer. Struggling to figure out how to properly test the promise. Any guidance would be welcomed! ...

Code written in JQuery functions correctly when executed within the console, yet encounters issues when located within the script tag or

I'm attempting to build an online drawing tool reminiscent of an Etch-A-Sketch by using a grid of div elements. However, I'm facing an issue where the code responsible for highlighting the boxes when the mouse hovers over them (using the mouseent ...

Exploring the global document object within Next.js

We have been working on a project using nextjs and are facing an issue with changing the styling of a button upon click. Despite using document.getElementById, we are unable to change the styling no matter what we try. pages/index.js function Index() { ...

Unable to close window with window.close() method after initially opening it with JS or JQuery

I am currently using an Instagram API that requires users to log out through the link . This link redirects users to the Instagram page, but I want them to be redirected to my own page instead. Although I tried different methods from a previous post on thi ...

implementing dynamic navigation bar, when transforming into a dropdown menu using ReactJS

I am currently utilizing a navigation bar from a Bootstrap theme within my React project. The navigation bar includes an in-built media query that determines whether it should display as a dropdown menu or not, with a toggler to handle the dropdown functi ...

Unable to trigger .click event in Jquery after modifying CSS attributes

Looking for a solution with my HTML code snippet: <h2 class="more-button">Read More</h2> I want to change the position of another div when this button is clicked. I am trying to achieve this using: $(".more-button").click(function(){ $(" ...

What could be causing my controller to show {{message}} instead of the message that was set up in the configuration

<!DOCTYPE html> <html> <head> <script src="js/angular.js"></script> <script src="js/Script.js"></script> </head> <body ng-app="LoginPage" ng-controller = "LoginPageController"> <form ...

Refreshing the UI Grid in Angular

After triggering a modal pop up from another controller, upon closing the modal I need to perform an action and transfer the data to a separate controller that displays a UI grid bound to $scope.searchResultsGridOptions. In my ABCCtrl.js file: Upon modal ...