Skip to content

Latest commit

 

History

History
92 lines (64 loc) · 3.4 KB

Testing.md

File metadata and controls

92 lines (64 loc) · 3.4 KB

Testing in Angular

Testing is a crucial part of the development process in Angular, ensuring that your application works as expected under different scenarios and before it goes into production. Angular provides built-in tools and frameworks that make it easier to test both the smaller units and the overall behavior of the application. This document discusses unit testing for components and end-to-end testing using Protractor.

Table of Contents

Unit Testing Components

Unit tests in Angular aim to test the smallest pieces of code, such as individual components, in isolation from the rest of the application. Angular CLI projects come pre-configured with Jasmine and Karma for unit testing.

Setting Up Unit Tests

When you generate a new component with Angular CLI, it automatically creates a spec file for unit testing. Here’s how to set up and write tests for a component:

// Import necessary Angular testing utilities
import { ComponentFixture, TestBed } from '@angular/core/testing';

// Import the component you will be testing
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    // Configure the testing module
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should display the correct title', () => {
    component.title = 'Test Title';
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('h1')?.textContent).toContain('Test Title');
  });
});

In this example, TestBed is used to set up an Angular testing environment that mimics the module where the component resides. The tests check if the component can be created and if it displays the correct title.

End-to-End Testing with Protractor

End-to-end testing involves testing the complete application from start to finish. It ensures that all the integrated pieces of the application work together as expected. Angular applications are often tested using Protractor, which interacts with your application as a user would.

Setting Up Protractor

Protractor is set up by default when you create a new project with Angular CLI. To run end-to-end tests, use the following command:

ng e2e

Writing a Protractor Test

Here’s an example of an end-to-end test written for Protractor:

import { browser, by, element } from 'protractor';

describe('My Application', () => {
  it('should display welcome message', () => {
    browser.get('/');
    expect(element(by.css('app-root h1')).getText()).toEqual('Welcome to My Application!');
  });
});

This test navigates to the root of the application and checks whether the welcome message is correct.

Testing is integral to developing reliable applications in Angular. By regularly writing and running both unit and end-to-end tests, you can catch issues early, ensuring your application remains stable and performs as expected.