Bright Security’s Enterprise Grade Dev-Centric DAST Integrates with

Microsoft Defender for Cloud →
Product
Product overview

See how dev-centric DAST for the enterprise secures your business.

Web attacks

Continuous security testing for web applications at high-scale.

API attacks

Safeguard your APIs no matter how often you deploy.

Business logic attacks

Future-proof your security testing with green-flow exploitation testing.

LLM attacks

Next-gen security testing for LLM & Gen AI powered applications and add-ons.

Interfaces & extensions

Security testing throughout the SDLC - in your team’s native stack.

Integrations

Connecting your security stack & resolution processes seamlessly.

Docs

Getting started with Bright and implementing it in your enterprise stack.

Book a demo

We’ll show you how Bright’s DAST can secure your security posture.

Resources
Blog

Check out or insights & deep dives into the world of security testing.

Webinars & events

Upcoming & on-demand events and webinars from security experts.

Docs

Getting started with Bright and implementing it in your enterprise stack.

Case studies

Dive into DAST success stories from Bright customers.

Research

Download whitepapers & research on hot topics in the security field.

Company
About us

Who we are, where we came from, and our Bright vision for the future.

News

Bright news hot off the press.

Webinars & events

Upcoming & on-demand events and webinars from security experts.

We're hiring

Want to join the Bright team? See our open possitions.

Bug bounty

Found a security issue or vulnerability we should hear about? Let us know!

Contact us

Need some help getting started? Looking to collaborate? Talk to us.

Resources > Blog >
Unit Testing in Angular: The Basics and a Quick Tutorial

Unit Testing in Angular: The Basics and a Quick Tutorial

Oliver Moradov

What Is Unit Testing in Angular?

Angular is an application design framework and development platform for creating complex, high performance single page applications.

Angular unit tests help you test a specific unit of Angular code in isolation. Angular unit tests isolate parts of your code to reveal problems like bad logic, coding errors, or malfunctioning features. 

Unit testing can be difficult to achieve for complex projects with poor separation of concerns. However, Angular allows you to write code in such a way that it can be easy to individually test each piece of functionality in your application. If you plan for unit testing in advance and follow Angular coding best practices, it should be straightforward to add unit tests to your applications.

In this article:

Why Should You Unit Test Angular Apps?

Angular unit tests allow you to test your application for coding errors and unexpected user behavior. Testing all possible behaviors can be tedious and inefficient, but generating tests for each coupling block in your application will help identify problems with each block.

One of the easiest ways to test the strength of a block is to create a test for each block. You should do this proactively, and not wait for a bug to surface in production. Create unit tests for blocks (components, services, etc.) to easily detect bugs and fix them earlier in the development process.

Learn more in our detailed guide to unit testing vs integration testing.

Basics of Angular Component Testing

Angular component testing involves checking the performance and quality of application components. You can perform Angular component tests manually by running the application to see if the components behave as expected. However, manual testing is time-consuming and impractical for large, complex web applications. You’ll most likely need to find a better way to test Angular components. 

Angular projects using the Angular CLI come with Jasmine and Karma to simplify and automate the testing process. Jasmine is a behavior-based testing framework you can use to write unit tests. You can then run the tests on Karma to verify if individual application parts are functioning correctly. The unit tests pass if the code functions correctly and fail if it contains a bug.

The test files should use the name.component.spec.ts naming convention. Keeping them with the other files associated with the same component is best. If you built your Angular app using the Angular CLI, you might have seen the app.component.spec.ts file – this file has unit tests for the core AppComponent. When you run tests with the Angular CLI, you run all the unit tests in the *.spec.ts files.

You can use the ng test command in the terminal to run tests with the Angular CLI. It will trigger Karma to open the default browser to run the tests you wrote using Jasmine and display the test outcomes.

Here are some of the basic functions in Jasmine:

  • describe(string, function) – takes a title and function containing one or multiple specs. It is also called a test suite.
  • it(string, function) – takes a title and function that contains one or multiple expectations. It is also called specs.
  • expect(actual) – takes a value known as an actual. Typically, you use expect functions alongside matcher functions. They work together to return boolean values depicting a spec’s passing or failing.
  • Matcher – takes a value representing the expected value. Matcher function are chained to expect functions. Examples of matchers include toBeTruthy(), toContain(), and toEqual().

Related content: Read our guide to unit testing best practices

Quick Tutorial: How to Code an Angular Unit Test

An Angular unit test is based on a describe container, which has several different blocks such as it, beforeEach, and xit. The beforeEach block always runs first. Other blocks do not depend on each other and may run in any order. Almost all unit tests use two utilities called TestBed and async.

The beforeEach block declares an application component that should run in the testing environment. Here is an example of a beforeEach block. Note that the compileComponents() function might not be needed if you are using webpack.

beforeEach(async(() => {
   TestBed.configureTestingModule({
      declarations: [
         MyComponent
      ],
   }).compileComponents();
}));

A first step in a unit test is to verify that an instance of the application component is successfully created. See the code below—the property fixture.debugElement.componentInstance generates an instance of your component. The code tests whether the component is created using the assertion toBeTruthy :

it('component should be created', async(() => {
    const fixture = TestBed.createComponent(MyComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
}));

Now, let’s write another code block that shows whether we have access to the properties of the component. The following test checks if the title that would appear in the browser when the component is rendered is really the correct title. Of course you would have to switch my-title for the actual title defined in the component.

it(`component should have title 'my-title'`, async(() => {
     const fixture = TestBed.createComponent(MyComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('my-title');
}));

Finally, we can inspect DOM elements created by the component. Let’s check the <h1> HTML tag generated by the component. We’ll use the detectChanges() function to simulate running in a browser environment. The fixture.debugElement.nativeElement property will give us access to an actual on-page DOM element.

it('component should render 'Welcome to My App' in h1 tag', async(() => {
   const fixture = TestBed.createComponent(MyComponent);
   fixture.detectChanges();
   const compiled = fixture.debugElement.nativeElement;
 expect(compiled.querySelector('h1').textContent).toContain('Welcome to My App!');
}));

This is a simple demonstration of how a specs.ts file can help you load an Angular application component, run it in a testing environment, and verify different aspects of the component in a simulated browser environment.

Security Unit Testing in Angular with Bright Security

Bright is a developer-first Dynamic Application Security Testing (DAST) scanner, the first of its kind to integrate into unit testing, revolutionizing the ability to shift security testing even further left. You can now start to test every component / function at the speed of unit tests, baking security testing across development and CI/CD pipelines to minimize security and technical debt, by scanning early and often, spearheaded by developers. With NO false positives, start trusting your scanner when testing your applications and APIs (SOAP, REST, GraphQL), built for modern technologies and architectures. Sign up now for a free account and read our docs to learn more.

Resources

Domain Hijacking: How It Works and 6 Ways to Prevent It

What Is Domain Hijacking?  Domain hijacking refers to the unauthorized acquisition of a domain name by a third party, effectively taking control away from the rightful owner. This form of cyber attack can lead to significant disruptions, including loss of website functionality, email services, and potentially damaging the brand’s reputation.  Domain hijackers often exploit security

Mastering Vulnerability Management: A Comprehensive Guide

Modern day organizations face a constant barrage of cyber threats, making it imperative to implement robust vulnerability management processes. Vulnerability management is a systematic approach to identifying, evaluating, treating, and reporting on security vulnerabilities in systems and their associated software. In this blog post, we’ll delve into the four crucial steps of vulnerability management process

Vulnerability Scanners: 4 Key Features, Types, and How to Choose

A vulnerability scanner is a specialized software tool designed to assess the security of computers, networks, or applications by automatically detecting and analyzing weaknesses. These scanners proactively search for security vulnerabilities, such as unpatched software, misconfigurations, and other security gaps that could be exploited by attackers. Some scanners can simulate the actions of an attacker to help identify exploitable vulnerabilities.

Get our newsletter