Learn free javascript-examples tutorials

4 ways to test button click event handler in Angular unit testing

February 21, 2023 ·  5 min read

In this tutorial, You learned unit testing button click event in Angular application. You can see my previous about Angular button click event example Let’s define an angular component - ButtonDemoComponent for the button click event In this component, Button is displayed and on clicking the button, the Click event is called and displays the message to the UI element. <div style="text-align:center"> <h1> Angular Button Click Event Example </h1> <button (click)="clickEvent()"> Click Me</button> <h2>{{msg}}</h2> </div> Typescript component...

Angular component testing - Input text value with test case examples

February 21, 2023 ·  4 min read

In this tutorial, How to unit test input text control on UI form in Angular application. In my previous post, Already discussed about how to read input text value in Angular application. I have an existing application created using the ng new cli command. Let’s create an Angular component using the ng g c component command. It creates an angular component. Let’s add an input text field and button binding to the template and typescript component....

Angular unit test Calling a method from the constructor of a class

February 21, 2023 ·  1 min read

Jasmine spyon is a double function to test methods and objects of a class in Javascript and typescript. It allows you to call methods or functions and returns the result. Syntax spyOn(object,"function").withArgs(arguments).and.returnValue(value); Angular unit test Calling a method from the constructor of a class Here is an example of calling a method from a construction myclass = function() { this.mymethod(); }; myclass.prototype.mymethod = function() { console.log("mymethod") } describe("The myclass constructor", function() { it("should call its prototype's mymethod", function() { spyOn(myclass....

how to fix 404 errors for webserver during karma unit testing Angular

February 21, 2023 ·  2 min read

Learn to fix webserver 404 not found errors in testing angular components or directives. This post includes a solution for 404 errors for loading assets files like json and images during running karma runner. 2021 01:06:33.123:WARN [web-server]: 404: /assets/arrow.png 2021 01:06:33.123:WARN [web-server]: 404: /assets/down.png Suppose you have a component that uses png or any image files, You will get an error while unit testing a component. Generally, When the ng test command is issued, It runs a web server and executes unit testing running ng serve and ng test are different environments....

How to write unit testing for private and static in Angular and typescript

February 21, 2023 ·  2 min read

This tutorial covers how to write unit testing for private methods in Angular applications. Private methods are private to the same class. It does not allow access outside in public methods of a typescript class. Writing Angular unit testing for private methods Let’s declare a class. export class Employee{ private calculateSalary(){ console.log("Private method to calculate salary") } public getTotalSalary(){ console.log("Return total salary of an employee") } } calculateSalary() is a private method that is accessible in public method getTotalSalary()....

How to write unit testing static methods in a class of Angular and typescript

February 21, 2023 ·  2 min read

In this tutorial, You learned how to do unit test static methods of typescript classes. It includes an example of how to test a component using the static method in Angular. Let’s declare an ES6 class in typescript with static methods. export class StaticClass { static getMessage(name: string): String { return 'Hi' + name + 'Welcome to my blog'; } } Here is a Unit test class for the ES6 class with a static method...

Typescript mock interface and async promise example

February 21, 2023 ·  2 min read

In this tutorial, You learned how to test a mock interface in typescript. Typescript is advanced to javascript with strong features like typesafe checking. Jest is a unit testing framework like jasmine from Facebook. How to mock an interface in Jest? Let’s declare an interface in typescript with an enum being used in the interface. role.ts: enum ROLE { ADMIN, SALES, FINANCE } user.ts: export interface User { id: number; name: string; role: ROLE....

Difference between HandlebarJS and Mustache |javascript templates Engine comparison

February 28, 2022 ·  2 min read

In this tutorial, Let us see the differences and comparisons between mustache and handlebar templates. Both are template languages for javascript and generate HTML output. Both are open-source frameworks. Let’s see the differences. MustacheJS Javascript: It is a simple webtemplate engine with tags replaced with values and supports many programming languages. Opensource template Compiled support in popular languages Logic less and no helper classes Active community Partials are easy to implement HandlebarJS javascript:...

Handlebar for loop iteration array of objects | each helper example

February 28, 2022 ·  3 min read

Handlebars is a template language for parsing objects in javascript-based templates. In these tutorials, We learned about each iteration in handler bars. Let’s see some examples of how to iterate in handlebars for example. handlebarJS provides looping with each helper class using #each helper classes. Handlebar JS provides expression templates that enclose in double curly braces - {{}}. each syntax {{#each variable}} {{this}} }} variable is a type of enumerated type like an array of objects/types or json objects....

Handlebar if-else helper examples| Conditional expression in the handlebar

February 28, 2022 ·  4 min read

This tutorial covers a handlebar if help classes with examples, it also includes how to test conditional block execution in handlebar mustache templates. HandlebarJS provides {{#if}} and {{#unless}}helper provides a helper to conditional test the expression against javascript objects. if the condition in the handlebar helps to solve the below things Conditional to check if an object is null or undefined or empty if and unless are used to check properties of an object, not an expressions...

How to declare comments in HandlebarJS with examples?

February 28, 2022 ·  2 min read

In this tutorial, Learned about how to declare comments in the handlebarJS template scripting language. Comments are text to describe line or code components. These are ignored by the compiler or interpreter in any programming language. Do handlebarJS support comments? Yes, It supports and uses to generate HTML content by the handlebar engine. Does it support inline-block and multiline comments? Inline comments are not supported but support single and multi-line comments....

How to get array length and check an array is empty in HandlebarJS

February 28, 2022 ·  2 min read

In this short tutorial, Learned about how to find the array length in handlebar template javascript with examples. There is a length attribute on the array which will not work outside but inside {{each}} helper classes. Array length in handlebar javascript if json object data of type is an array, we can use the length property as seen below syntax. {{array.length}} let’s declare json object { numbers: ["one", "two", "three"] } In html template, use {{numbers....

How to validate decimal numbers in javascript

February 28, 2022 ·  2 min read

In this tutorial, You learned how to validate decimal numbers in javascript. A decimal number is a number that is separated by a .symbol For example, 12.01,22.912 are decimal numbers. In UI form, There are different form validation errors like email, not required, and number only. Sometimes an input form wants validation for decimal numbers only. There are multiple ways we can check How to check a given number is decimal or not using regular expression javascript Written a function isDecimal, returns true for decimals and false for non-decimals....