DEV Community: Suraj Pandey

Unit Testing in Angular 15 for Developers

Suraj Pandey — Sat, 22 Apr 2023 05:04:20 +0000

Unit testing is something that is important for our application. Why??

Because it increases the quality of our application, test and determines if it works as intended, and helps us detect bugs early in the development cycle, today we are about to cover Unit testing in general as well as in angular from basics.

Let’s dive in,

Here are a few types of automated testing:

Unit Testing
E2E Testing
Integration Testing

Unit testing is focused on testing individual units or a component of an application in isolation from the rest of the application. The purpose of unit testing is to verify that each unit of code is working correctly and as expected. It involves writing and running automated test cases that check the functionality of a small piece of code, such as a function or a class.

E2E testing also known as end-to-end testing involves testing the entire application by automating the web browser to test a live running application with front end application, web server, and database. With E2E testing, the entire application can be validated

Integration testing is defined as testing more than one unit but less than a complete application. It involves checking whether one part of the application works with another part. It typically involves testing how individual units of code work together in various combinations to ensure that they integrate and function as expected.

There is also, Functional testing involves checking whether the application meets the specified requirements. It typically involves testing the application’s inputs and outputs to ensure that they meet the desired specifications and that the application behaves as expected.

Different types of Unit Testing:

Isolated UT
Shallow UT
Deep Integration Testing

Isolated unit tests: Involves basic tests that isolate the testing of a single unit of code such as a class or function free of dependencies. It uses mock objects to simulate the behaviour of other components that the unit interacts with, to ensure that the unit functions correctly.

Shallow unit tests: Involves testing one or more components or services that depend on each other.

Deep integration tests: It can be a bit complex, it tests one or more components or services that depend on each other and includes nested components.Used to test multiple components that have child components. It verifies that the unit integrates correctly with all of its dependencies and works as expected.

During unit testing, components often have dependencies that may be bulky like API calls, database interaction etc. We don’t want to use it in unit testing components. To address this, mocking can be used. Mocking is a powerful technique for isolating units of code and testing them in isolation from their dependencies. By using mocks, developers can write unit tests that are fast and reliable, and that focus on the behaviour of the code being tested rather than the behaviour of external dependencies.

There are different types of mock objects:

Dummies: These are dummy classes or objects that replace actual objects in the unit test.

Stubs: These are classes that take control and simulate the behaviour of dependencies.

Spies: These are objects that record information about how a dependency is used during the test. They can be used to verify that certain methods are called the expected number of times or with the expected parameters.

Till now we discussed unit testing in general, now let’s talk about unit testing in Angular.

When we create an Angular project using the Angular CLI, it automatically installs all the necessary utilities for testing. This includes the Karma test runner and the Jasmine testing framework, as well as other dependencies.

Jasmine is a popular JavaScript testing library that provides a clean syntax for writing tests, as well as powerful features such as spies and matchers, which allow you to track function calls and arguments. Jasmine is often used for testing Angular applications because of its ease of use and powerful features.

Matchers are a key feature of the Jasmine testing framework that allows you to test whether a value or object meets certain expectations. Jasmine provides a rich set of matchers that you can use to test various aspects of your code. To use a matcher, call the expect function with the value that you want to test, and then chain it with the matcher that you want to use.

Some examples of matchers that Jasmine provides include:

expect(x).toBe(y): checks whether x is equal to y using the === operator.
expect(x).toEqual(y): checks whether x is deeply equal to y, which means that all of their properties and values are the same.
expect(x).toBeDefined(): checks whether x is defined, which means that it is not undefined.
expect(x).toBeNull(): checks whether x is null.
expect(x).toBeTruthy(): checks whether x is truthy, which means that it is not false, 0, null, undefined, or an empty string or array.
expect(x).toBeFalsy(): checks whether x is falsy, which means that it is false, 0, null, undefined, or an empty string or array.
expect(x).toContain(y): checks whether x contains y, which can be a string, array, or object property.
expect(x).toBeGreaterThan(y): checks whether x is greater than y.
expect(x).toBeLessThan(y): checks whether x is less than y.

expect(2+3).toEqual(5);

If these built-in matchers don’t fit your requirement, Jasmine also allows you to define custom matchers, for a specific condition that is not covered by the built-in matchers using "jasmine.addMatchers()"

// Define a custom matcher using jasmine.addMatchers()
beforeEach(function() {
  jasmine.addMatchers({
    toBeDivisibleByTwo: function() {
      return {
        compare: function(actual, expected) {
          var result = {};
          result.pass = actual % 2 === 0;
          if (result.pass) {
            result.message = actual + ' is divisible by 2';
          } else {
            result.message = actual + ' is not divisible by 2';
          }
          return result;
        }
      };
    }
  });
});

// Use the custom matcher in a test case
it('should test whether a number is divisible by 2', function() {
  expect(10).toBeDivisibleByTwo();
});

"describe" and "it" functions are used to define test suites and test cases.

describe function is used to group related test cases together. It takes two arguments: a string that describes the group of tests, and a callback function that contains the actual tests.

describe('Test Suite', function() {
  // tests go here
});

it function is used to define a single test case. It takes two arguments: a string that describes what the test is checking, and a callback function that contains the actual test code.

it('should return true when given an even number', function() {
  expect(isEven(2)).toBe(true);
});

disable or focus a test by using the 'x' or 'f' prefix, respectively, before the describe or it function. A disabled test will be skipped when the tests are run, while a focused test will be the only test that is run.

xdescribe('my disabled tests', function() {
  // tests that will be skipped go here
});

fdescribe('my focused tests', function() {
  // only these tests will be run
});

Jasmine provides hooks (beforeAll, beforeEach, afterAll, afterEach) for setting up and tearing down test fixtures. What it means is preparing the environment for running tests and cleaning up after the tests have been completed.

**beforeAll **function is called once before all of the tests in a test suite are run.
**beforeEach **function is called before each test case.
**afterAll **function is called once after all of the tests in a suite have been run
**afterEach **function is called after each test case.

describe('Test Suite 1', function() {
  let value;

  beforeEach(function() {
    value = 42;
  });

  it('should return the correct value', function() {
    expect(myFunction(value)).toEqual(84);
  });
});

Here before each test case value will be set to 42

Karma, on the other hand, is a test runner that can be used to execute tests written with Jasmine. It provides an easy way to run tests in multiple browsers and provides real-time feedback on test results, which makes the testing process more efficient.

Results of tests are shown in the terminal window in real-time, as well as in the browser window that Karma opens to run your tests.

AngularUnitTesting: a simple angular project to demonstrate angular unit testing from basics.

We have covered the fundamentals here, Next time will dive deep into writing test cases from scratch and exploring concepts like spies, TestBed, ComponentFixture and a lot more.

OSI Model

Suraj Pandey — Sat, 08 Apr 2023 10:49:36 +0000

In and Out of networking.

Whether you know it all or not Networking is complex. Complex architectures are hard to understand right? To make it simpler for everyone, to understand networking, the OSI model was introduced it’s just a conceptual model that was adopted by networking devices and software vendors so that communication is possible seamlessly.

OSI model is the reason devices from different vendors that you have, don’t have a hard time communicating with each other because everyone, participating in this are on one page. Also if the entire communication of such a complex architecture is understood then for any specific problem, troubleshooting becomes easy and if some new requirement came in then it can also be implemented easily.

There exist ‘N’ number of use case of why OSI model? What is the need?

Let’s discuss more on what is OSI (Open System Interconnection) model.

Data is sent out as well as received by your system and the same model is used to visualize its flow of it. For the sake of simplicity, the OSI model is divided into 7 layers and each layer has a defined goal. Each layer works independently without worrying about other layers.

Application:
This layer is closest to the end user, here data is created/consumed using some kind of tool which can be a browser, software, mail client and many more.
eg: HTTP, FTP, SMTP, POP3 …

Presentation:
This layer ensures that data is in understandable format to a machine when data is sent out and to end users when data is received, encoding/decoding, and compression of data are also part of this.
eg: SSL, SSH, JPEG, MPEG…

Session:
This layer ensures and manages a communication channel is kept open/close and functional while data transfer is in progress. This communication channel “sessions” are used between devices for long period communication without interruption.
eg: API’s, Sockets, WinSock…

Transport:
This layer is responsible for the transmission of data, data received from the session layer is broken into smaller chunks and more data is added “Headers” for identification purposes called “segments” and also assembles all the segments turning back into data when received from the network layer. At a time on a system multiple applications/tools may use the internet and this layer identifies data received is for which application using ports. It controls many things like at which rate to send data so that receiving device matches the connection speed, validating received data, requesting again if not received, delivery quality and all.
eg: TCP, UDP…

Network:
This layer is responsible for deciding the path for data transmission and facilitates communication between networks. Segments received from the transport layer is broken into smaller chunks and more data is added for identification purpose called “packets” and also assembles all the packets and turn them back into segments when received from the data Link layer. The best path is discovered by this layer in the physical network for the transmission/routing of packets.
eg: IP, IPSec, ICMP…

Data Link:
This layer is responsible for establishing and terminating connections between connected nodes on the network. Packets received from the network layer is broken into smaller chunks and more data is added for identification purpose called “frames” and also assembles all the frames turning back into packets when received from the physical layer. At this layer, Logical Link Control and Media Access Control works, which identifies network protocols, performs error checking and synchronizes frames, and uses MAC addresses to connect devices and define permissions to transmit and receive data.
eg: ARP, VLAN, Ethernet, Switch

Physical:
This layer is responsible for physical or wireless connections between nodes. Raw data is transmitted in the form of series of 0s and 1s, also takes care of bit rate control.
eg: Cables, Hubs, Fiber

Data flow is bidirectional, at each layer additional information is added such as IP, TCP, Ethernet headers.

A lot of times OSI model and TCP/IP model is used interchangeably but it is wrong because:

The TCP/IP model is the functional model and OSI model is the conceptual model. What I mean is OSI model is a generic model which can be used to visualize any form of networking whereas TCP/IP model is designed to work with specific network communication and protocols.
Another difference is several layers are collapsed into one.

A to Z of git and GitHub

Suraj Pandey — Wed, 02 Nov 2022 23:59:30 +0000

Before diving into what is git and GitHub lets understand what is “version control system”.

Version Control System

It is a fancy term used to represent management of the changes in project development lifecycle. Also known as source control or revision control.
This practice allows developers to track entire history of changes and who made them, if at any point of time incompatible changes are pushed into main codebase then it can be easily rolled back.

Collaboration is made possible because of version control systems, it can be centralized where tracked files are stored in a single server or distributed where tracked files can be cloned into multiple locations and also can be accessed from multiple locations.

Well known VCS tools are :
Git, Subversion and Mercurial

git

Among all git is the most popular option among developers. Also it is an open source distributed VCS.
Take a look at git source code here.
git provide GUI and command line tool.

I recommend using command line as it offers to use git more freely with all set of commands.

There are 4 stages we encounter when using git:

Untracked : files which are not being tracked.
Unmodified : files which are not modified but git is tracking them.
Modified : files contains changes and git is tracking them.
Staged : files are ready to commit.

In development process we create a new file to write code which are in untracked stage, after done with writing code we may want to commit this change so that later if something wrong happens we can revert back. File is moved to staged area and committed.
Now this file is in unmodified stage and if developer want to make any changes it will be under modified stage indicating there are some changes which developer may want to commit.
Each commit is recorded in history of the project(repository).

GitHub

Repositories are like folders which contains files and different versions of a project.

GitHub is a platform where we can host these repositories and others can collaborate.
Similar platform which provide same kind of services are: Gitbucket, Bitbucket, GitLab and many more

Others have read only access to public repositories on specific account in GitHub until or unless proper access is not provided to others.

Command ;

— What that command does

Once git is installed you will need to configure author information locally or globally, Author details are necessary before committing so,

git config — global user.name “[name]” ;

— Sets the name of author to your commit transactions

git config — global user.email “[email address]” ;

— Sets the email of author to your commit transactions

git config –global -l ;

— there are many other configurations, which can be listed

When we proceed with our project we have to initialize it as git repository first.

git init [projectName] ;

— initialize git repository

In the development process many files may be added or already tracked files may be edited, those files can be added to stage area. * means add all files to stage area

git add [fileName] or git add * ;

— add files to stage area

git restore — -staged [filename];

— remove specified file from stage area

Sometimes we may want to exclude files from tracking ,like files which are only required in development environment and others. Path of those files can be added in “.gitignore” file and it will be ignored by git.

git commit -m “commit message” ;

— commit staged changes to project version history

git reset [commitHash] ;

— remove commits done after specified commit preserving changes locally

git status ;

— at any point of time status of files can be checked

git log ;

— at any point of time logs of repository can be checked

git clone [url] ;

— clone a git repository to your local system

Branches are one of the superpower of git which helps to create parallel version of main repository and work in that without affecting main branch.

git branch [branchName] ;

— creates a new branch, -d can be used to delete a branch

git checkout [branchName] ;

— switch to specified branch, -b can be used to create and switch to it at the same time.

git merge [branchName] ;

— merge specified branch changes into current branch

Stash area is a place where changes can be stored temporarily without committing changes into repository. It can be used in a place where we want to try out many alternative solutions without committing any changes. Stash area is like a STACK, every stashed item is placed on top.

git stash -m “stash message” ;

— move changes to stash area and have clean codebase, -a can be used to stash untracked items[all] also

git stash pop ;

— bring back changes from stash area, — index n can be used to bring back specific stash item

Repositories in local and repositories hosted in GitHub can be synchronized , in this operation every repository is associated with unique URL, “remote ” command is used to work with URLs in git. After creating a repository in GitHub and project development is done locally, Now it is the time to push/sync local repository to remote repository in GitHub.

git remote add origin [RepositoryURL] ;

— map URL to origin[naming convention] and when dealing with local and remote repositories this origin name can be used in place of entire url.

git fetch ;

— gets history updates from remote repository

git pull ;

— updates working directory with commits in remote repository, it is combination of fetch and merge

git push ;

— updates remote repository with all the commits in local repository

In both, push and pull commands which branch to push and where to push can be specified
git push [whereToPush] [whichBranchToPush]

git push origin main

git pull origin main

Forking a repository means copying a repository from someone else’s account to your GitHub account, cause while making contribution we cannot directly push our commits to their repository that will raise security concerns.

Once repository in our GitHub account we can make changes as we like and when we want to merge it to original codebase of this forked repository we can raise a Pull Request and maintainers of that repository may review and merge it into their code base.

Do check out GitHub student developer pack