A guide on writing a Jasmine Unit Test for addEventListener

I'm struggling with writing a Jasmine unit test for AddEventListener. How can I effectively test if the code for addEventListener is functioning correctly?

private static disableScrollingOnPageWhenPanelOpen(): void {
window.addEventListener('DOMMouseScroll', PhoneInputComponent.preventDefault, { passive: false });
window.addEventListener('mousewheel', PhoneInputComponent.preventDefault, { passive: false });
window.addEventListener('touchmove', PhoneInputComponent.preventDefault, { passive: false });}

I attempted to write a test but it didn't work as expected.

describe('disableScrollingOnPageWhenPanelOpen', () => {
it('should disable DOMMouseScroll', () => {
  const e = new Event('DOMMouseScroll');
  PhoneInputComponent['disableScrollingOnPageWhenPanelOpen']();
  window.dispatchEvent(e);       
  spyOn(window, 'addEventListener').and.callThrough();
  expect(window).toHaveBeenCalledWith('e',
    PhoneInputComponent['preventDefault'], { passive: false });
});

If anyone could provide assistance on this matter, that would be greatly appreciated. I am attempting to verify if the addEventListener function has been properly called, but unsure if my testing method is correct.

Answer №1

Anticipate(window), the line window is not behaving as expected.

Consider revising the line to:

Anticipate(window.addEventListener).not.toHaveBeenCalledWith('e',
    PhoneInputComponent['preventDefault'], { passive: false });

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

Unravel the base64 encoded message from JavaScript and process it in Python

I'm currently facing an issue in Python while trying to decode a string sent by jQuery. Although I am not encountering any errors, I receive an encoding error when attempting to open the file. My objective is to decode the string in order to save it ...

Creating an Array of dynamically generated elements using jQuery

A dynamic table is being generated using jQuery's .append() function: $el.append('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].order + '</td>\n\<td&g ...

Unlocking nested JSON data in React applications

Encountering an issue while retrieving a nested JSON object from a local API endpoint /user/{id}. Here is an example of the JSON object: {"userId":122,"name":"kissa","email":"<a href="/cdn-cgi/l/email-protect ...

How can I upload multiple images in one request using Typescript?

HTML: <div> <input type ="file" (change)="selectFiles($event)" multiple="multiple" /> </div> Function to handle the change event selectFiles(event) { const reader = new FileReader(); if (event.target.files & ...

Adjust the size of the leaflet popup with Vue2Leaflet's l-popup component

I've been working on programming a web application and incorporating leaflet to showcase a map. I've set up markers and popups that show up when the markers are clicked. However, I've noticed that the popups look a bit odd right now – the ...

Is it possible that WebdriverIO is unable to retrieve the value for an input

Currently, I am in the process of automating tests specifically for a web application on Safari browser. However, I have encountered some challenges along the way. It appears that webdriverIO is not performing very well with Safari in my environment, which ...

There appears to be a TypeScript error in the cheerio-select library located at /home/Documents/node_modules/cheerio-select/lib/index.d.ts(1,15): missing comma. Error code: TS1005

Hello, I encountered an error in my terminal while trying to run npm run dev & npm run build. [0] The compilation failed. [0] [0] /home/Documents/frontend/node_modules/cheerio-select/lib/index.d.ts [0] TypeScript error in /home/fislam/Documents/fronten ...

Utilizing JavaScript to Parse RSS XML Feeds Across Domains

Looking to parse an RSS (XML) file without relying on the Google RSS feed. I have attempted using JSONP, but it resulted in downloading the file and throwing an error "Uncaught SyntaxError: Unexpected token < ". $.ajax({ type: "GET", ur ...

Leveraging Vue.js and TypeScript: accessing the type of the child component through refs

In my parent component, I have a child component named with a reference passed to it: <child ref="childRef" /> When trying to execute a function inside the child component from the parent component, I face some challenges: mounted() { ...

Implementing a persistent header on a WordPress site with Beaver Builder

My website URL is: . I have chosen to use beaver builder for building and designing my website. I am in need of a fixed header that can display over the top of the header image. Here is the code snippet that I currently have: <div id="header">html ...

Guide to making a circular animation image with JQUERY through Mouseover, TouchStart, Mouseend, and Touchend events

Trying to create a circular animation for rotating images. Found some help at this website: How to create circular animation with different objects using jQuery?. My current setup allows me to rotate using start and stop buttons. Is it possible to have the ...

What is the most effective way to loop through an object containing DOM selectors as values, and subsequently utilize them to assign new values?

I have a function that takes an object retrieved from a database as its argument. My goal is to display the values of this object in a form by associating each value with a specific DOM selector. Here is the code snippet where I achieve this: function pai ...

selecting the ajax url for the datatable

I need to select the datatable ajax URL based on whether it contains data1, data2, or data3. Below is my code snippet: $(document).ready(function() { var $table = $('#datatable1'); $table.DataTable({ "columnDefs": [ ...

Tips for correctly implementing the next() function within a middleware in a Node.js application

After successfully logging in and generating a bearer token, I attempted to verify the token by organizing the codes for controllers, middlewares, and routes. However, upon verification, I encountered the following error message: Error: Route.post() requir ...

A helpful guide on troubleshooting the ngx-bootstrap error within Angular-14

While working on my Angular-14 project, I encountered an issue with the package.json file: This is how my package.json looks like: "dependencies": { "@angular/animations": "^14.0.0", "@angular/common": "^14 ...

Create objects in the gallery

I recently developed a React Material-UI component using Typescript: <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start"> <Grid item xs={5}> <B ...

The functionality of $(selector).css() seems to be malfunctioning

I currently have an html div element stored in a variable var rows = ""; rows += "<div>1111 : Hi there</div>"; Despite multiple attempts, I have failed to add a background color to this div using the following methods: 1. $(rows).css({&apos ...

Credentials are not found in the Heroku S3 configuration. To fix this issue, ensure to set AWS_SDK_LOAD_CONFIG=1 if you are using AWS_CONFIG

I am encountering an issue when attempting to upload an image to Heroku via S3. The image is not stored locally, but I am experiencing difficulties in Heroku. I suspect that the credentials may be incorrect, although they work fine in localhost. Is there s ...

Angular mistakenly uses the incorrect router-outlet

Encountering an issue with Angular routing. The main app has its own routing module, and there is a sub module with its own routing module and router-outlet. However, the routes defined in the submodule are being displayed using the root router outlet inst ...

Breaking apart web addresses and their attached parameters

I am attempting to extract the part of a URL that comes after the last forward slash (/) and before the querystring. While I have been successful in obtaining the last segment of the URL, I have encountered difficulty in removing the querystring from it. ...