Jasmine JavaScript

What is Jasmine JavaScript?

In the realm of JavaScript, Jasmine stands out as an exceptionally well-regarded framework utilized by programmers to manage intricate testing tasks. By leveraging jasmine.js, developers are equipped to conduct tests on various types of JavaScript applications.

In JavaScript, Jasmine adheres to a methodology referred to as Behavior Driven Development (BDD), which assists in guaranteeing that every line of JavaScript code is adequately subjected to unit testing.

Through the implementation of the BDD (Behavior-Driven Development) approach, it allows for a concise syntax to evaluate the most fundamental unit of the application rather than assessing the entire system in its entirety.

Jasmine serves as a testing framework primarily utilized by Angular developers, as it is integrated directly into Angular projects. This tool is capable of testing both asynchronous and synchronous JavaScript code effectively.

Features of Jasmine JavaScript

Jasmine, a popular testing framework for JavaScript, offers several notable features, including:

In JavaScript, Jasmine is accessible for use in both web browsers and Node.js environments, offering a straightforward syntax that simplifies the process of writing tests.

In JavaScript, it also offers behavior-driven testing functionality, and there is no need for any DOM elements when creating test cases.

Jasmine also supports the asynchronous testing.

To execute a double test, one can utilize spies provided by Jasmine.JS.

Jasmine is utilized by programming languages including Python and Ruby.

In JavaScript, Jasmine is a comprehensive testing framework that provides all the essential tools required for validating our code.

How does the Jasmine tool work in JavaScript?

In JavaScript, Jasmine serves as a framework that simplifies the readability of our code. To grasp the functionality of Jasmine effectively, it is essential to familiarize ourselves with several key concepts, including:

Suite

In JavaScript, a collection of test scenarios is referred to as a Jasmine Suite. This suite serves the purpose of testing particular functionalities of the code. Within the Jasmine framework in JavaScript, the global function known as describe has two parameters: the first parameter specifies the title of the test suite, while the second parameter contains the function that executes the test suite.

Syntax

The syntax of the test suite are as follows:

//This is the  test suite
describe("Test Suite", function() {
    //...
});

In JavaScript, a Jasmine spec can be established as a test case within the context of a test suite. This Jasmine spec comprises two parameters: the first parameter serves to display the title of the test suite, while the second parameter contains the function that executes the test suite. Within this function, you will find one or multiple expectations, which are essentially assertions that can evaluate to either true or false.

describe("Test Suite", function() {
    it("test spec", function() {
      expect( expression ).toEqual(true);
    }); 
});

Installation of Jasmine in JavaScript

To set up Jasmine in a JavaScript project, it is essential to execute a series of commands locally within your project environment. These commands include:

npm install -save-dev jasmine

In JavaScript, we have the capability to execute the CLI tool utilizing "npx jasmine…" commands alongside the local installation of Jasmine mentioned earlier. Alternatively, we can opt to install Jasmine globally, which would allow us to call the CLI tool directly without having to use npx.

Nonetheless, it is advised against installing Jasmine on a global scale, as maintaining the globally installed version of Jasmine in harmony with each individual project that utilizes it can be quite challenging.

npm install -g jasmine

Init a project:

In JavaScript, initializing a Jasmine project can be accomplished quite effortlessly. This process involves the straightforward creation of a spec directory along with a configuration JSON file for your setup:

npx jasmine init

How to Implement Jasmine Tool in JavaScript?

There are various ways to implement the Jasmine tool in JavaScript, which is described below:

• ✅ Implementing/Using Jasmine as a Library
• ✅ Using Standalone Jasmine
• ✅ Implementing/ Using Jasmine via the CLI

Implementing/Using Jasmine as a Library

In JavaScript, the Jasmine framework can be incorporated into our code through the utilization of different methods and paths.

Example

Consider the following example: initially, we must import Jasmine. Subsequently, we utilize the loadConfigFile function to load the configuration file located at the "spec/support/jasmine.json" directory. Lastly, we will proceed to run Jasmine.

var Jasmine = require('jasmine'); 
var jasmine = new Jasmine(); 

jasmine.loadConfigFile('spec/support/jasmine.json'); 
jasmine.configureDefaultReporter({ 
	showColors: false
}); 
jasmine.execute();

Using Standalone Jasmine

In JavaScript, to begin this implementation, the first step is to obtain the most recent version of Jasmine from the GitHub repository link. After downloading, you should extract the files into the directory of the project that you wish to test. The resulting folder will comprise several default files and directories, which are detailed below:

/lib: It contains the core Jasmine files.

/src: This section contains the source file required for our testing process. Furthermore, these files encompass any deleted files, provided that our project directory is already configured, or they can be utilized effectively for hosting our source code.

/spec: By utilizing spec, we are able to encapsulate the tests that we intend to develop.

SpecRunner.html: Within JavaScript, this particular file functions as a test execution tool. We can initiate our specifications merely by opening this file.

In JavaScript, it is necessary to modify the files referenced from both the src and spec directories to incorporate our actual source and testing files within the default SpecRunner.html file.

Example

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Jasmine Spec Runner v3.2.1</title> 
 <link rel="shortcut icon"
        type="image/png"
        href="lib/jasmine-3.2.1/jasmine_favicon.png"> 
    <link rel="stylesheet"
        href="lib/jasmine-3.2.1/jasmine.css"> 

    <script src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image"></script> 
    <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script> 
    <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script> 
  <!-- include source files here... -->
    <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script> 
    <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script> 
    <!-- include spec files here... -->
    <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script> 
    <script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script> 
</head> 
<body> 
</body> 
</html>

Implementing/Using Jasmine via the CLI

In JavaScript, the Jasmine Command Line Interface (CLI) simplifies the execution of Jasmine tests. By default, the results are shown in the terminal. To enhance our comprehension, we should initiate the installation of Jasmine globally by executing the following command:

npm install -g jasmine

The subsequent task involves establishing a directory for our project and moving into that directory.

$ mkdir jasmine-project $ cd jasmine-project

The file named Jasmin.json has been generated. This file includes the standard content typically found in a jasmine.json file.

Example

{ 
"spec_dir": "spec", 
"spec_files": [ 
	"**/*[sS]pec.js"
], 
"helpers": [ 
	"helpers/**/*.js"
], 
"stopSpecOnExpectationFailure": false, 
"random": true
}

Explanation

• ✅ spec_dir: With the use of this, we can specify the path where Jasmine looks for the test files.
• ✅ helpers: We can specify the path where Jasmine looks for the helper files. These files are executed before specs/ These helpers files can be used to define the custom matchers.
• ✅ spec_files: It specifies the patterns of test files, which means, by default, all JS files that end with Spec or spec strings.
• ✅ stopSpecOnExpectationFailure: Make sure to remember this: "When set to true, it immediately stops a spec on the first expectation failure, which can be used as a CLI option with stop-on-failure."
• ✅ random: "When using JavaScript, setting Jasmine to true will cause it to pseudo-randomly run the test cases, making it a viable CLI option."

Example

Let’s consider a straightforward example to explore the application of the Jasmine framework:

describe("Nested Describe Demo", function () { 
    beforeEach(function () { 
        console.log("beforeEach level 1"); 
    }); 
    describe("MyTest level2", function () { 
        beforeEach(function () { 
            console.log("beforeEach level 2"); 
        }); 
        describe("MyTest level3", function () { 
            beforeEach(function () { 
                console.log("beforeEach level 3"); 
            }); 
            it("is a simple spec in level3", function () { 
                console.log("A simple spec in level 3"); 
                expect(true).toBe(true); 
            }); 
            afterEach(function () { 
                console.log("afterEach level 3"); 
            }); 
        }); 
        afterEach(function () { 
            console.log("afterEach level 2"); 
        }); 
    }); 
    afterEach(function () { 
        console.log("afterEach level 1"); 
    }); 
});

Output:

beforeEach level 1
beforeEach level 2
beforeEach level 3
A simple spec in level 3
afterEach level 3
afterEach level 2
afterEach level 1

Advantages of Jasmine tool in JavaScript

The Jasmine framework in JavaScript offers several benefits, including:

In JavaScript, Jasmine operates independently of the browser, framework, platform, and programming language.

In JavaScript, Jasmine offers a straightforward and easily understandable syntax that simplifies the process of writing tests, thanks to its integrated matchers as well.

In JavaScript, Jasmine facilitates both test-driven development (TDD) and behavior-driven development (BDD).

Disadvantages of Jasmine tool in JavaScript

Utilizing the Jasmine framework for JavaScript does come with certain drawbacks, including:

It requires plenty of configurations.

In JavaScript, individuals utilizing the Jasmine framework are required to choose either an assertion library or a mocking framework prior to its implementation.

The procedure of setting up configurations can often lead to significant frustration.

Conclusion

To summarize, Jasmine transcends the role of a mere testing framework; it serves as a conduit to developing JavaScript applications that are not only more reliable but also easier to maintain and operate efficiently. The Jasmine framework incorporates a wide array of features, including built-in assertions/expectations and utilities for creating test doubles. Nevertheless, it lacks an integrated test runner, which necessitates the use of an external tool such as Karma to fulfill that requirement.