Discovering lingering timers in Angular using Jasmine

My test is failing randomly with an error message stating that fixture.isStable() should be true but 

5 timer(s) are still in the queue.
Despite my attempts to increase the tick value to 1s, it doesn't seem to have the desired effect.

I am aware that I could pass a large amount of time or terminate these timers, however, I prefer to identify and locate these timers. After analyzing the components and modules used, there are no clear clues as they do not contain any setTimeout or delay functions.

Is there a method to discover what these timers are and possibly determine their origin?

angulartypescriptjasmine

Answer №1

After some experimentation, I decided to switch from using tick to flush in my tests. This change uncovered an error with a service injected by a connected component in my application that was relying on webpack's import.

It wasn't until I used flush that the chunk load error became apparent.

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

What is the best way to dynamically include various properties in an object type depending on a generic union?

Consider the following union type: type Union = "a" | "b"; Is there a way to add multiple new keys to an object type with conditions? Adding one key with a condition is straightforward: type Condition<T extends Union> = { [K in ...

typescriptgenericstypesunion-typesconditional-types

The compiler is still throwing missing return errors despite narrowing down all potential types

I encountered the following issue: Function is missing a closing return statement and its return type does not include 'undefined'. Here's my TypeScript code snippet: function decodeData( data: string | number[] | ArrayBuffer | Uint8Arr ...

typescript

Explore the item and extract the data within Angular elements

I received the following data exactly as shown: { "packBarCode":"Q122344", "usedQty":11, "description":"Box of Chocs", "customerName":"Retail Mart" } via an API and stored it in an Array[] within my customerComponent.ts file. How can I access th ...

angularobject

When executing `npm run e2e`, the terminal does not display any output

After building my application with Angular 7, here is a snippet from my package.json file: "scripts": { "ng": "ng", "standardize": "prettier **/*.ts --write", "start": "npm run standardize && ng serve --port 5000", "build": "npm run standa ...

angularjasmineprotractore2e-testingangular-e2e

Issue locating name (generics) in Angular 4

I'm encountering issues with Angular 4. The TypeScript code is not compiling and generating errors when I try to run ng serve. I'm getting two errors in my-data.service.ts file - "Cannot find name 'Category' at line 9, column 30" and ...

angulartypescriptgenerics

What is the best way to retrieve an array that was created using the useEffect hook in React?

Utilizing the power of useEffect, I am fetching data from two different APIs to build an array. My goal is to access this array outside of useEffect and utilize it in the return statement below to render points on a map. However, when trying to access it ...

javascriptreactjstypescript

Is there a way to ensure that fields in a sub component are validated whenever we attempt to switch the Tab using a route

Hi there, I could really use your assistance. I've done some research, but I haven't been able to find a suitable solution for my problem. I have this shared component that contains the following code which enables tab navigation through various ...

angularangularjs-directiveangular-materialangular-ui-router

What is the proper way to implement Typescript custom props with styled-components?

My development project involves a Button component and a DayButton that extends the base Button. I also have a component that creates instances of DayButtons. //button.tsx export const StyledButton = styled.button` ... `; export interface ButtonProps { ...

reactjstypescriptstyled-components

Do not consider node_modules folder in the list of "issues"

Currently, I am executing the following task: { "taskName": "tsc watch", "command": "tsc -w", "type": "shell", "problemMatcher": "$tsc-watch" } using this specific tsconfig setup: { "compileOnSave": true, "files": ...

typescriptvisual-studio-codetsconfig

Unexpected alteration of property value when using methods like Array.from() or insertAdjacentElement

I'm encountering an issue where a property of my class undergoes an unintended transformation. import { Draggable, DragTarget } from '../Models/eventlisteners'; import { HeroValues } from '../Models/responseModels'; import { Uti ...

javascripttypescriptclassproperties

Trouble with Angular and Bootstrap dropdown functionality

I recently upgraded to Angular 11 for my application https://i.sstatic.net/XrqIC.png and incorporated Bootstrap 4 with Angular. While all other Bootstrap components are functioning properly, the dropdown feature is not working as expected. Despite install ...

angularbootstrap-4

Angular 6: Rendering a graph within a CSV file

I have successfully implemented ng-2 chart to display data in a chart format on my web application. Now, I am looking for a way to export this data as a CSV file. Is there a method to convert the data displayed in a chart format on the web app into a C ...

angularexport-to-csvng2-charts

Can you conduct testing on Jest tests?

I am in the process of developing a tool that will evaluate various exercises, one of which involves unit-testing. In order to assess the quality of tests created by students, I need to ensure that they are effective. For example, if a student provides the ...

node.jstypescripttestingjestjs

Guidelines on concealing the parent component while the child component is loading in Angular 2

In my latest project, the view setup is as follows: https://i.sstatic.net/VxJ9U.png Upon page load, the Parent Item Description should be visible while the Selected sub item description remains hidden. When a Sub Item x is selected, the Parent Item Desc ...

javascriptangularangular2-routing

The function angularCompiler.getNextProgram is not available in the context of angular 12 when using custom-webpack configurations

Recently, I upgraded my Angular 11 project to version 12. I have incorporated the @angular-builders/custom-webpack package in my devDependencies and I am using the below command for building my Angular project. ng build --configuration=production --build ...

angularwebpackangular12

When using MERN Stack (with Typescript) on DigitalOcean, encountering an issue where HTML files are displayed instead of JS and

Upon checking the console, I encountered this https://i.sstatic.net/PWoT5.jpg The app has been developed using Ubuntu and Nginx so far with no firewall configuration yet in place. This is my first time deploying a MERN stack and utilizing DigitalOcean. ...

typescriptdeploymentbuilddigital-oceanmern

The issue of HandleSubmit not functioning properly when used in conjunction with vee-validate on Vue3 and V

I am facing an issue with submitting a registration form that uses vee-validator for data validation. The handleSubmit function from vee-validator seems to be not returning or logging anything. Here is my code: <script setup lang="ts"> imp ...

javascripttypescriptvue.jsvitevee-validate

Arranging table columns in Angular 2

Having trouble organizing the columns of my table using Angular 2 The transform code for the pipe is as follows: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'orderBy' }) export class OrderByPipe implements Pipe ...

javascriptangulartypescript

The type 'never' does not have a property named 'map'

Whenever I try to make an axios get request within a next.js getServerSideProps function, I encounter a persistent TypeScript error underline on the map method. Despite troubleshooting extensively, I have not been able to resolve it. The request successf ...

typescriptnext.js

Angular 6: Enable directive visibility for parent components via ng-content with Angular Material enhancements

I am currently working on developing custom Angular Material components using Angular 6. My attempt to set up something similar to the following has encountered some challenges: custom-input.component.html <custom-input-wrapper> <input m ...

angularangular-material