JavaScript unit testing with Jasmine

For this tutorial, we first need to install the latest version of Jasmine. We will use Jasmine 3.4 as a standalone version

Download the latest version of Jasmine from and unpack the file in your workspace

Alternatively, you can install Jasmine from the command line:

#Global installation
npm install -g jasmine

#Local installation:
npm install –save-dev jasmine

After installation, you have the following file structure in your workspace:


The /spec directory will host all your tests and /src will host your JavaScript code. Open SpecRunner.html to see which tests passed and which failed

In Jasmine tests are summarized to suites. A Jasmine suite consists of several tests or specifications and is included in the describe() function. The describe () function has the following signature: describe (‘name or title’, function callback ())

describe(“Test Suite”, () => {


Specs are tests that are implemented in the it () function. The it () function has the following signature: it (‘name or title’, function callback ())

In the next section, we will implement some of the most commonly used tests during unit testing with Jasmine. Keep in mind that tests, also known as specs, are executed in the it () function

In our first Jasmine suite, we want to test whether a function named “orderTotal” meets the following requirements:

a. If orderTotal is of type function
b. Returns the aggregate of the prices of all products in the order
c. If productDescriptions is of type function
d. All products have a string product which is not empty


My first bundle with Webpack 4

Webpack is a open-source bundler for web assets like CSS or JavaScript files

To install Webpack you will need NPM to be installed on your computer or any similar package manager like Yarn.

Open a command line and go to the root directory of your project, then run

C:\>xampp\htdocs\webpack-project>npm install webpack –save-dev


Proceed to install CLI

C;\>xampp\htdocs\webpack-project>npm install –save-dev webpack-cli


Now create a package.json file in the root of your project directory with the following contents


Create also a webpack.config.js file in the root of your project directory with the following contents


Create a new folder named assets and a new folder named js in the assets folder with the following Javascript file


Create a HTML File which we will use later to see if everything works fine

Open a command line and go to the root directory of your project, then run:

C:\>xampp\htdocs\webpack-project>npm run build


Run also:

C:\>xampp\htdocs\webpack-project>npm run watch


for Webpack to create a new bundle everytime changes are made to the JavaScript file

Finnaly click the Click me button and an alert box should be displayed if everything is working fine

What is Bootstrap?

Bootstrap is the most popular front-end framework for building responsive, mobile-first apps.

JavaScript Object Literals

An object literal is a comma-separated list of name-value pairs wrapped in curly braces. Object Literals can contain others Object Literals, Arrays and Functions.

What is JavaScript?

JavaScript is a programming language used to display dynamic HTML and CSS in Webbrowsers