Struggling to perform testing on my Angular 1.5 component

I am currently diving into the world of testing and encountering several challenges.

Below is a simple component that I am working with:

(function () {
  "use strict";

  angular.module("testList", [])
    .component("testList", {
      templateUrl: "test-list.component.html",
      controllerAs: "model",
      controller: testController
    });

  function testController() {
    var model = this;
    model.test = "test";
  }
}());

My goal in this test scenario is to verify that "test" indeed equals "test". However, on running the test script, I am faced with the error message: undefined is not a function

"use strict";

describe("Testing Component", function () {
  var $componentController;

  beforeEach(module('testList'));

  beforeEach(inject(function(_$componentController_) {
    $componentController = _$componentController_;
  }));

  it("should see if test equals test", function() {
    var ctrl = $componentController('testList', null, { test: "test"});
    expect(ctrl.test).toEqual("test");
  });
});

If anybody could provide some guidance or assistance, I would greatly appreciate it.

Answer №1

It seems like you're on the right track with your code. Check out this JSBin link for a working example similar to yours: https://jsbin.com/cefefabobo/edit?html,js,output. The test has been successful.

Make sure you have properly loaded the angular-mocks.js script.

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

Combining JS Promise.all with onDOMContentLoaded to ensure all resources are

Is there a way to efficiently retrieve a json file for data while also waiting for the dom to load in order to populate a table simultaneously? The current method I am using is slow as it waits for the dom and then performs the get request. $(document).r ...

Unable to transfer Vue.js components in and out of the project

I have a directory structured like this. VueTree components Classic.vue Modern.vue index.js The Classic and Modern components consist of a template, export default {}, and a style. I am importing both of them in index.js as: import Classic ...

Trouble with React routes: only fixed after refreshing the page

import React, { useEffect, useState } from 'react'; import { Container, AppBar, Typography, Grow, Grid, useTheme } from '@material-ui/core'; import { useDispatch } from 'react-redux'; import { BrowserRouter, Router, Route, Swi ...

Has Apache initiated a forced logout process?

Running a LAMP server, I have implemented Apache basic authentication to log in users accessing the server homepage. I am currently seeking a way to enforce user logout, but my attempts with mod_session & mod_auth_form have not been successful. The page ...

VueJS encountered an insecure XMLHttpRequest endpoint during the request

I am currently working on a project that consists of a VueJs app with a Laravel backend serving as the API. While testing the app locally, everything works smoothly with the Https protocol. However, upon deploying it to the production server, I encountere ...

Unable to prevent ordered lists from overlapping with other content I attempt to place beneath them in HTML

function filterImages() { let input = document.getElementById('searchbar').value; input = input.toLowerCase(); let images = document.getElementsByClassName('gallery'); for (let i = 0; i < images.length; i++) { ...

Ways to evenly disperse values

I have a total of 10,000 units that I want to distribute among 99 points in a non-uniform manner following an increasing linear curve. The value assigned to each point will progressively increase from the first point to the last, where the final point migh ...

Javascript is not being executed on Firefox Mobile

I need help with running my local website on the Firefox mobile emulator. Although I can see the welcome page, I am unable to access the website because it requires the execution of some JavaScript. Can someone please advise me on how to enable this featur ...

I am currently working on creating a basic task tracker using Express, however, I am encountering difficulties in getting the 'delete' button to function properly

Struggling to implement a simple to do list with a "delete" button that doesn't seem to be working? No errors are popping up, but the button remains unresponsive. Various attempts have been made to fix this issue without success. Uncertain whether the ...

What is the most efficient method for refreshing a page when a hash change is identified alongside AJAX content loading?

I'm dealing with displaying AJAX content on a webpage where multiple products are listed. When a user clicks on a product, it should load without refreshing the entire page, appending the product UPC as a hash to the URL. The challenge arises when use ...

Show/hide functionality for 3 input fields based on radio button selection

I need assistance with a form that involves 2 radio buttons. When one radio button is selected, I want to display 3 text boxes and hide them when the other radio button is chosen. Below is the code snippet: These are the 2 radio buttons: <input type= ...

Interacting with my Rails API through JavaScript requests

Exploring the world of Rails and diving into creating a basic rails-api. Currently facing an issue while trying to incorporate user addition to my model using a JavaScript request... Let's take a look at my HTML file named add-user.html: <script ...

Develop an ngDialog template that can be easily reused across different projects

I am interested in developing a reusable template for my application. As far as I know, it seems like you can't directly pass the title and body to ngDialog. What I'm looking for is something similar to the following : <div> <h2>{{ ...

The left side inputs are contingent upon the div

I am faced with a challenge involving two inputs inside a div. Below is the code snippet: <div style="width:100%;height:500px;border-style:solid;border-color:#1d69b4;margin-top:25px;"> <div style="float:left; width:70%;height:100 ...

The event listener is not firing when the array is modified

I can't seem to understand why my $watch function is not getting triggered. Here's a snippet from the relevant controller: $scope.$watch('tasks', function (newValue, oldValue) { //perform some actions //only enters here once ...

Is it possible to target only the direct children of the element specified as the context node with querySelectorAll, without relying on IDs for selection?

Imagine having an HTML structure similar to the one below: <div id="a"> <div id="b"> <div id="c"></div> </div> </div> When trying to select the children of "a" using querySelectorAll, you could attempt: //Sele ...

jQuery for Cross-Site AJAX Communication: Enhancing Website Function

I currently have a jQuery plugin that performs numerous AJAX calls, mostly JSON data. I'm interested in finding the most efficient way to enable cross-site calls, where the URLs used in $.get and $.post are not from the same domain. While I've h ...

Neglecting a light source in the Three.js framework

Currently, I am in the process of constructing a 3D hex grid and my goal is to integrate a fog of war feature. This is a glimpse of what the grid looks like at present: The lighting setup I have arranged is as follows: // Setting up hemisphere light var ...

Updating website links in real time with the power of jquery

Is there a way to dynamically change the parameter of a link? For example: Link1 Link2 Link3 By default, their URL is ?item=text, so link1 would be href="?item=link1", etc. But when I click on link1, the URLs of link2 and link3 should change to include ...

angular locally implementing paging with a JSON file

I am currently in the process of setting up a service that will allow me to switch to live data from an API whenever I choose. The getData function includes skip and take parameters to specify the starting record and number of records to retrieve. At the ...