• About Us
    • Who We Are
    • Our Work
    • Our Clients
    • Our Partners
    • Our Blog
    • News & Events
    • Insights
  • Solutions

    Analytics & Data Management

    Big DataBusiness AnalyticsData IntegrationData Warehousing

    Digital Business Automation

    Advanced Case ManagementBusiness Rules ManagementBusiness Process ManagementRobotic Process Automation

    Connectivity & System Integration

    Agile IntegrationAPI ManagementEnterprise Service Bus

    Enterprise Content Management

    Content Capturing & ImagingEnterprise Content Management

    Enterprise Portal & Mobility

    Digital Customer ExperienceDigital Workplace

  • Industry Solutions

    • Banking >
    • Government >

    Digital Banking Transformation

    Business Process Management

    Business Rules Management

    Checks Collection & Clearing

    Counter Fraud Management

    Customer Due Diligence

    Customer Onboarding

    Daily Vouchers Management

    Debt Collections & Recovery

    Instant Payment Network Gateway

    Enterprise Content Management

    Enterprise Service Bus

    Smart Analytics

    Trade Finance Automation

    Digital Government Transformation

    Business Analytics

    Business Process Management

    Correspondence Management

    Documents & Records Management

    Enterprise Service Bus

    Pensions & Social Programs

    Social Collaboration Portal

    Strategy Management

    Utility Billing

  • Services
    • Cloud Apps & Microservices
    • IT Consultancy
    • Application Development
    • Testing Services
  • Careers
    • Careers Homepage
    • Get To Know Us
    • Engineering @ Sumerge
    • Our Culture
    • Benefits & Wellbeing
    • Job Openings
    • Graduate Programs
  • Contact Us
  • About Us
    • Who We Are
    • Our Work
    • Our Clients
    • Our Partners
    • Our Blog
    • News & Events
    • Insights
  • Solutions

    Analytics & Data Management

    Big DataBusiness AnalyticsData IntegrationData Warehousing

    Digital Business Automation

    Advanced Case ManagementBusiness Rules ManagementBusiness Process ManagementRobotic Process Automation

    Connectivity & System Integration

    Agile IntegrationAPI ManagementEnterprise Service Bus

    Enterprise Content Management

    Content Capturing & ImagingEnterprise Content Management

    Enterprise Portal & Mobility

    Digital Customer ExperienceDigital Workplace

  • Industry Solutions

    • Banking >
    • Government >

    Digital Banking Transformation

    Business Process Management

    Business Rules Management

    Checks Collection & Clearing

    Counter Fraud Management

    Customer Due Diligence

    Customer Onboarding

    Daily Vouchers Management

    Debt Collections & Recovery

    Instant Payment Network Gateway

    Enterprise Content Management

    Enterprise Service Bus

    Smart Analytics

    Trade Finance Automation

    Digital Government Transformation

    Business Analytics

    Business Process Management

    Correspondence Management

    Documents & Records Management

    Enterprise Service Bus

    Pensions & Social Programs

    Social Collaboration Portal

    Strategy Management

    Utility Billing

  • Services
    • Cloud Apps & Microservices
    • IT Consultancy
    • Application Development
    • Testing Services
  • Careers
    • Careers Homepage
    • Get To Know Us
    • Engineering @ Sumerge
    • Our Culture
    • Benefits & Wellbeing
    • Job Openings
    • Graduate Programs
  • Contact Us
Automated Front-End Unit Testing in Angular Framework (Part 2)

Automated Front-End Unit Testing in Angular Framework (Part 2)

  • Posted by Yomna Anwar
  • On May 9, 2021

In the previous article, we discussed the different types of front-end testing and we have seen the libraries that Angular projects come bundled with to ease writing tests. Now, let’s see an example of how to test our view, components and how we can mock our component dependencies.

Mocking in Angular

When writing unit tests, you want to isolate the component being tested. And since we do not care much about injected dependencies and how do they behave. One concept that we must be familiar with when we write unit tests is mocking. So, what is mocking? It is the process of substituting any injected dependency in the component you want to test with fake or a mock to simulate this dependency behaviour. Remember, the key point in unit testing is to get the component you want to test in the right state also any dependency must behave in a certain way for you to be able to complete your unit test and therefore we must use MOCK. In the above example, we have used one of the Angular strategies for mocking and it is called spying. There are three ways to do mocking in Angular. Let us discuss them.

Mocking with fake classes

Mocking with a fake is a stub implementation, replacing the real implementation with a simplified fake one, as we know it as a dummy implementation. Let us refer to the previous article. If we want to mock the authentication service using a fake class, then we would create a class like this.

 

 class AuthenticationServiceMock { 
     canAccessUsers() { 
        return true; 
     } 
}

Now you can simply create an instance of that class and use it in the beforeEach by assigning the newly created instance to the injected dependency inside your component.

 

component = fixture.componentInstance;
component.authenticationService = new AuthenticationServiceMock();

When should you use a fake class? When the dependency you would like to mock is relatively simple.

Mocking by extending fakes and overriding methods

Like the previous method. You are going to create a new fake but this time the newly created class must extend from the original class you want to mock.

 

class AuthenticationService extends AuthenticationService {
    canAccessUsers() {
       return true;
    }
}

 

Now you can simply create an instance of that class and use it in the beforeEach by assigning the newly created instance to the injected dependency inside your component.

 

component = fixture.componentInstance;

component.authenticationService = new AuthenticationServiceMock();

 

When should you use a fake class extension? When the dependency you want to mock is relatively complex and you only want to mock a couple of functions, not the whole class.

 

Mocking using a spy

 

Mocking with spy is the method used in the original example. A spy is basically listening to the calls made to a certain function, then intercepts these and changes the response based on the code you have written.

 

 it('should have label and input field', () => {

const compiled = debugElement.nativeElement;

expect(compiled.querySelector('#requestEndDate').textContent).toContain('start date');

expect(compiled.querySelector('#contractEndDateInput')).toBeTruthy(); });

 

When should you use spying? When it is necessary for your test to assert that a function has been called. Or you want to write a relatively simple code.

Example tests

Testing Angular view part

 

it('should have label and input field', () => {

const compiled = debugElement.nativeElement;

expect(compiled.querySelector('#requestEndDate').textContent).toContain('start date')

expect(compiled.querySelector('#contractEndDateInput')).toBeTruthy();

});

In this example, I am testing that a specific label and a field is rendered in the HTML.

 

Testing angular controller part

 

In the below example, I am testing that a specific function in my controller is called and that all the variables are assigned values correctly.

 

it('should display search results correctly', () => {
    component.updateListRequest(null, null, 1);
    expect(requestsApiServiceSpy.requestSearch).toHaveBeenCalled();
    expect(component.filteredCases.length).toEqual(1);
    expect(component.cases.length).toEqual(1);
    expect(component.totalCases).toEqual(1);
    expect(component.dataFetched).toEqual(true);
});

 

Running your tests

With the help of angular CLI, running angular tests is a matter of writing a single command to the terminal.

 

ng test
 
Recent Blog Posts
  • Event Streaming: Enhancing Efficiency in Banking 
  • Your Guide To Integration Modernization
  • APIs: Transforming Chaos into Order
  • Event Streaming Simplified
  • Unlocking the Power of Spring Data JPA
Categories
  • Careers
  • Webinars
  • blog
    • Educational
  • Technology & Business
    • Digital Business Automation
    • /Modernization & Cloud Native Apps
    • Banking
    • Agile Integration
  • Software Engineering
    • Application Servers
    • Application Testing
    • Business Analysis
    • Frontend
    • Microservices
    • Uncategorized
  • Blog Posts
  • News & Events
  • Featured

Leading Remote Teams: 7 Tips to Keep Your Team Engaged

Building a declarative Jenkinsfile for Continuous Delivery

Next thumb
Scroll
Follow us

Significant change, positive impact and passion are our fuel. We have a unique culture reflecting the way we think and act. A culture that encourages freedom and responsibility, high performance, customer centricity and innovation.

Global Locations

Egypt

Saudi Arabia

United States

About us

Who We Are
Our Work
Our Clients
Careers
News & Events
Insights

Services

Cloud Apps & Microservices
Application Development
Consultancy
Testing Services

Solutions

Analytics & Data Management
Business Process Automation
Agile Integration
Enterprise Content Management
Enterprise Portal & Mobility

Industries

Banking
Government

Latest Blogs
  • Database Events & Triggers
    December 14, 2022
  • Design Patterns
    August 23, 2022
Copyright Ⓒ 2024 Sumerge. All rights reserved.
  • Blog
  • |
  • Support
  • |
  • Contact Us
  • |
  • Privacy Policy
Sumerge
Manage Cookie Consent
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage {vendor_count} vendors Read more about these purposes
View preferences
{title} {title} {title}

     

    Book A Free Consultation Session