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 https://jasmine.github.io 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:

/lib
/spec
/src
SpecRunner.html

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

SpecRunner.html

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

package.json

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

webpack.config.js

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

index.js

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