DEV Community: Fran Saoco

Using and Mocking Angular Environments with Jest

Fran Saoco — Mon, 21 Apr 2025 13:02:36 +0000

In production-grade Angular applications, API URLs and other environment-specific properties are typically configured through environment files located in the src/environments/ directory. These can be generated using the Angular CLI command:

ng generate environments

This creates the standard environment files:

environment.ts (production defaults)
environment.development.ts (development configuration)
You could add other environments like staging...

Secure Configuration Management

For security best practices:

Never commit sensitive URLs directly in environment files
Use CI/CD variables (GitLab, GitHub Actions, etc.) to inject values during build

Protect repository variables by marking them as:

Masked (hidden in logs)
Protected (only available on protected branches)

Update the files:
environment.ts

export const environment = {
    production: true,
    API_URL: '${API_URL}' // CI/CD variable - This will be replaced during build
};

environment.development.ts

export const environment = {
  production: false,
  API_URL: 'https://api.example.com/data' // Used only in development
};

Use the environment variables:
data-http.service.ts

...
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class DataHttpService {
  http = inject(HttpClient);

  getData(): Observable<unknown> {
    return this.http.get<unknown>(environment.API_URL);
  }
}

Unit testing with environment mocks

You could add an environment global mock in setup-jest.ts:

...

jest.mock('./src/environments/environment', () => ({
  environment: {
    API_URL: 'https://api.example.com/data',
    production: false
  }
}));

Mocking environment variables in unit tests is strongly recommended to ensure isolation, consistency, and security while testing all scenarios.

data-http.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DataHttpService } from './data-http.service';
import { environment } from '../environments/environment';


describe('DataHttpService', () => {
  let service: DataHttpService;
  let httpMock: HttpTestingController;
  const mockData = { id: 1, name: 'Test Data' };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataHttpService]
    });

    service = TestBed.inject(DataHttpService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();  // Verify no outstanding requests
  });

  it('should use mock API_URL', () => {
    expect(environment.API_URL).toBe('https://api.example.com/data'); // Url defined in the setup-jest.ts file
  });

  describe('.getData', () => {
        it('should make GET request and return data', () => {
        service.getData().subscribe(data => {
          expect(data).toEqual(mockData);
        });

        const req = httpMock.expectOne(environment.API_URL);
        expect(req.request.method).toEqual('GET');
        req.flush(mockData);
      });
    });
});

Testing Angular HTTP Services using Jest

Fran Saoco — Fri, 18 Apr 2025 11:41:58 +0000

The tests check if the HTTP service works correctly by:

Making fake API calls (GET/POST)
Returning test data
Handling errors properly
All without using real internet connections

This ensures the service works as expected before using it in real apps.

data-http-service.ts

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const API_URL = 'https://api.example.com/data';

@Injectable({
  providedIn: 'root'
})
export class DataHttpService {
  http = inject(HttpClient);

  getData(): Observable<unknown> {
    return this.http.get<unknown>(API_URL);
  }

  postData(payload: unknown): Observable<unknown> {
    return this.http.post<unknown>(API_URL, payload);
  }

}

Production tip: Store API URLs in environment variables (never in code) and mock them for testing, complete walkthrough: Using and Mocking Angular Environments with Jest

data-http-service.spec.ts

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DataHttpService } from './data-http.service';

describe('DataHttpService', () => {
  let service: DataHttpService;
  let httpMock: HttpTestingController;
  const API_URL = 'https://api.example.com/data';
  const mockData = { id: 1, name: 'Test Data' };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataHttpService]
    });

    service = TestBed.inject(DataHttpService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();  // Verify no outstanding requests
  });


  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  describe('.getData', () => {
    it('should make GET request and return data', () => {
      service.getData().subscribe(data => {
        expect(data).toEqual(mockData);
      });

      const req = httpMock.expectOne(API_URL);
      expect(req.request.method).toEqual('GET');
      req.flush(mockData);
    });

    it('should handle GET errors', () => {
      const mockError = { status: 404, statusText: 'Not Found' };

      service.getData().subscribe({
        next: () => fail('Should have failed'),
        error: (error) => {
          expect(error.status).toEqual(mockError.status);
        }
      });

      const req = httpMock.expectOne(API_URL);
      req.flush(null, mockError);
    });
  });

  describe('.postData', () => {
    it('should make POST request with payload', () => {
      const testPayload = { data: 'test' };

      service.postData(testPayload).subscribe(data => {
        expect(data).toEqual(mockData);
      });

      const req = httpMock.expectOne(API_URL);
      expect(req.request.method).toEqual('POST');
      expect(req.request.body).toEqual(testPayload);
      req.flush(mockData);
    });

    it('should handle POST errors', () => {
      const testPayload = { data: 'test' };
      const mockError = { status: 500, statusText: 'Server Error' };

      service.postData(testPayload).subscribe({
        next: () => fail('Should have failed'),
        error: (error) => {
          expect(error.status).toEqual(mockError.status);
        }
      });

      const req = httpMock.expectOne(API_URL);
      req.flush(null, mockError);
    });
  });

});

Testing Angular Components with Services using Jest

Fran Saoco — Fri, 18 Apr 2025 10:44:33 +0000

Mock services in component tests to isolate behavior, control responses, and validate interactions without testing the service itself. This keeps tests fast, focused, and free from external dependencies.

another-component.ts

import { Component, inject } from '@angular/core';
import { MySuperService } from '../my-super.service';

@Component({
  selector: 'app-another',
  template: `<p class="message">My message: {{message}}<p>`,
})
export class AnotherComponent {
  mySuperService = inject(MySuperService);
  message = '';
  showMessage() {
    this.message = this.mySuperService.getMessage();
  }
}

another-component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { AnotherComponent } from './another.component';
import { MySuperService } from '../my-super.service';
import { By } from '@angular/platform-browser';

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

  const mockMySuperServiceMock = {
        getMessage: jest.fn().mockReturnValue('Super message')
    };

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AnotherComponent],
            providers: [
        { provide: MySuperService, useValue: mockMySuperService },
      ]

    });
    fixture = TestBed.createComponent(AnotherComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  describe ('.showMessage', () => {
    it('should show the message', () => {
      expect(mockMySuperService.getMessage).not.toHaveBeenCalled();
      expect(component.message).toBe('');
      component.showMessage();
expect(mockMySuperService.getMessage).toHaveBeenCalledTimes(1);
      expect(component.message).toBe('Super message');
    });

    it('should display message in template', () => {
      component.showMessage();
      fixture.detectChanges();

      const messageEl = fixture.debugElement.query(By.css('p.message'));
      expect(messageEl.nativeElement.textContent).toContain('Super message');
    });
  });

});

Testing Angular Components with Inputs and Outputs using Jest

Fran Saoco — Thu, 17 Apr 2025 16:14:20 +0000

io.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-io',
  template: `
        <button (click)="changeColor()"></button>
        <p>My favourite color is: {{color}}</p>
    `,
})
export class IoComponent {
  @Input() color = '';
  @Output() colorChange = new EventEmitter<string>();

  changeColor() {
    this.colorChange.emit('pink');
  }
}

When testing Angular components with @Input() and @Output(), we need to verify they work as they would in a real app. The best way? Mock their parent (host) component.

This approach lets us:

Control input values passed to the component.
Capture emitted events exactly like a real parent would.

io-component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { IoComponent } from './io.component';
import { Component, ViewChild } from '@angular/core';

@Component({
  template: `
      <app-io
       [color]="hostColor"
       (colorChange)="onColorChanged($event)">
      </app-io>`
})
class HostComponent {
  @ViewChild(IoComponent) ioComponent!: IoComponent;
  hostColor = 'red';
  emittedColor = '';
  onColorChanged(color: string) {
    this.emittedColor = color;
  };
}

describe('IoComponent', () => {
  let hostComponent: HostComponent;
  let hostFixture: ComponentFixture<HostComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [IoComponent, HostComponent]
    });
    hostFixture = TestBed.createComponent(HostComponent);
    hostComponent = hostFixture.componentInstance;
    hostFixture.detectChanges();
  });

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

  describe('Input binding', () => {
    it('should receive initial color from host', () => {
      expect(hostComponent.ioComponent.color).toBe('red');
    });

    it('should update when host changes color', () => {
      hostComponent.hostColor = 'blue';
      hostFixture.detectChanges();
      expect(hostComponent.ioComponent.color).toBe('blue');
    });
  });

  describe('Output binding', () => {
    it('should emit new color when button clicked', () => {
      const button = hostFixture.nativeElement.querySelector('button');
      button.click();
      expect(hostComponent.emittedColor).toBe('pink');
    });

    it('should emit through direct component call', () => {
      const spy = jest.spyOn(hostComponent.ioComponent.colorChange, 'emit');
      hostComponent.ioComponent.changeColor();
      expect(spy).toHaveBeenCalledWith('pink');
    });
  });

});

Testing Angular Components with Children using Jest

Fran Saoco — Thu, 17 Apr 2025 14:42:23 +0000

parent-component.ts

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h1>Parent Component</h1>
      <app-child [value]="parentValue"></app-child>
    </div>
  `,
})
export class ParentComponent {
  parentValue = 'Parent Value';
}

parent-component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ParentComponent } from './parent.component';
import { Component, Input } from '@angular/core';
import { By } from '@angular/platform-browser';

// Child component mock
@Component({
  selector: 'app-child',
  template: '<div>{{ value }}</div>'
})
class MockChildComponent {
  @Input() value: string = '';
}

describe('ParentComponent', () => {
  let parentComponent: ParentComponent;
  let fixture: ComponentFixture<ParentComponent>;
  let childComponent: MockChildComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ParentComponent, MockChildComponent] // Use mock instead of real child
    });
    fixture = TestBed.createComponent(ParentComponent);
    parentComponent = fixture.componentInstance;
    childComponent = fixture.debugElement.query(By.directive(MockChildComponent)).componentInstance as MockChildComponent;
    fixture.detectChanges();
  });

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

  it('should pass the correct value to child component', () => {
    expect(childComponent.value).toBe('Parent Value');
  });

  it('should update child component when parent value changes', () => {
    parentComponent.parentValue = 'New Value';
    fixture.detectChanges();

    expect(childComponent.value).toEqual('New Value');
  });

});

Tip: The mock child component (MockChildComponent) ensures you're only testing the parent component's behavior.

Testing Angular simple Components using Jest

Fran Saoco — Thu, 17 Apr 2025 10:40:23 +0000

simple-component.ts

@Component({
  selector: 'simple-component',
  template: `
        <button (click)="showMessage()">
            Show message
        </button>
        <div class="message" *ngIf="isMessage">
            <p>{{message}}<p>
        </div>
    `,
})
export class SimpleComponent {
  isMessage = false;
  color = 'blue';
  message = ""

/* We don't test private functions directly only the result when
 they're called by a public function */
  private getNewMessage() {
    return 'I am the new message';
  }

  showMessage() {
    this.message = this.getNewMessage();
    this.isMessage = true;
    this.color = 'red';
  }
}

simple-component.spec.ts

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

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

    fixture = TestBed.createComponent(SimpleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).toBeTruthy();
  });

  describe('.showMessage()', () => {
    it('should initialize with default state', () => {
      expect(component.message).toEqual('');
      expect(component.isMessage).toEqual(false);
      expect(component.color).toEqual('blue');
    });

    it('should update the message when called', () => {
      component.showMessage();
      expect(component.message).toEqual('I am the new message');
    });

    it('should set isMessage to true when called', () => {
      component.showMessage();
      expect(component.isMessage).toEqual(true);
    });

    it('should change color to red when called', () => {
      component.showMessage();
      expect(component.color).toEqual('red'); 
    });

    it('should show the message in the DOM when button is clicked', () => {
      const button = fixture.nativeElement.querySelector('button');
      button.click();
      fixture.detectChanges();

      const messageDiv = fixture.nativeElement.querySelector('div.message');
      const messageElement = fixture.nativeElement.querySelector('p');

      expect(messageDiv).toBeTruthy(); // Div is visible
      expect(messageElement.textContent).toEqual('I am the new message');
    });
  });
});

How to Set Up Jest in Angular 19 (Step-by-Step Guide)

Fran Saoco — Thu, 17 Apr 2025 10:39:18 +0000

1. Install the dependencies:

npm install jest jest-preset-angular @types/jest --save-dev

jest: Core testing framework.
jest-preset-angular: Adds Angular support for Jest.
@types/jest: TypeScript definitions for Jest.

2. Remove Karma:

npm remove karma karma-chrome-launcher karma-jasmine karma-coverage karma-jasmine-html-reporter

3. Update `test` script on `package.json` file:

"scripts": {
    ...
    "test": "jest",

4. Create `jest.config.js` file:

module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
    transform: {
        '^.+\\.ts$': 'ts-jest', // Only transform .ts files
    },
    transformIgnorePatterns: [
        '/node_modules/(?!flat)/', // Exclude modules except 'flat' from transformation
    ],
};

5. Create `setup-jest.ts` file:

import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
setupZoneTestEnv();

6. Update `tsconfig.spec.json` file:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

7. Update the `test` property in `angular.json` file:

"test": {
  "builder": "@angular-devkit/build-angular:jest",
  "options": {
    "tsConfig": "tsconfig.spec.json"
  }
}

8. Verify that `esModuleInterop` property is included in `tsconfig.json` file:

"compilerOptions": {
    "baseUrl": "./",
    ...
    "esModuleInterop": true, // <= add it if it is not there

Testing Angular with Jest

Fran Saoco — Thu, 17 Apr 2025 10:38:53 +0000

Unit tests verify small, isolated parts of your code like components, services, and pipes by testing them independently without external dependencies. They execute quickly, help find bugs early, and are straightforward to maintain. Focus on testing business logic, data transformations, and component behavior while avoiding external API calls, UI styling, and third-party library tests.

In this series, I'll share practical examples of testing different parts of an Angular application using Jest.
While these tests aren't exhaustive or mandatory and there are certainly other aspects you could test they aim to serve as a helpful guide when writing unit tests for your own projects.
Find other examples and documentation on angular.dev

Understanding RxJS Mapping Operators: concatMap, mergeMap, switchMap (with a Job Interview Analogy)

Fran Saoco — Mon, 14 Apr 2025 15:36:25 +0000

Are you learning RxJS, preparing for Angular job interviews, or struggling to understand the key differences between these three critical operators?

Let’s break down concatMap, mergeMap, and switchMap. While they all "flatten" Observables, their behavior is quite different and choosing the wrong one can lead to subtle bugs.

To make them easier to grasp, let’s use a job interview analogy with Google and Microsoft.

Scenario: The Interview Process

Imagine you're interviewing at this two companies:

First Observable (hrInterviews$) → The HR interview (happens first).

const hrInterviews$ = of('GoogleHRInterview', 'MicrosoftHRInterview')

Second Observable (pmInterview) → The Product Manager interview (happens after HR).

We'll see how each operator changes the flow of these interviews.

1. concatMap: Finish One Interview Before Starting the Next

Runs Observables in sequence. When order matters (e.g., sequential API calls).

Analogy:

You finish Google’s HR interview → Start Google’s PM interview.
Only after Google’s PM interview is done, you move to Microsoft’s HR interview, then its PM interview.

hrInterviews$.pipe(
  concatMap(company => pmInterview(company))  
).subscribe();

Output: Google HR → Google PM → Microsoft HR → Microsoft PM

2. mergeMap: Run All Interviews in Parallel

Runs Observables in parallel. When tasks are independent (e.g., multiple API calls).

Analogy:

You finish Google’s HR interview → Start Google’s PM interview.
At the same time, if Microsoft’s HR interview finishes, you immediately start Microsoft’s PM interview.

hrInterviews$.pipe(
  mergeMap(company => pmInterview(company))  
).subscribe();

Output (possible interleaving): Google HR → Microsoft HR → Google PM → Microsoft PM

3. switchMap: Cancel Previous Interview If a New One Starts

Cancels the previous Observable when a new one arrives. When only the latest matters (e.g., search autocomplete).

Analogy:

You finish Google’s HR interview → Start Google’s PM interview.
But if Microsoft’s HR interview finishes before Google’s PM interview ends, you cancel Google’s PM interview and switch to Microsoft’s PM interview.

hrInterviews$.pipe(
  switchMap(company => pmInterview(company))  
).subscribe();

Output (if Microsoft HR arrives before Google PM finishes): (Google PM starts) → Microsoft HR → (Google PM cancelled) → Microsoft PM

Wrapping up

Need strict order? → concatMap
Need parallel execution? → mergeMap
Only care about the latest? → switchMap

Try your RxJS code online at playcode.io/rxjs.

DEV Community: Fran Saoco

Using and Mocking Angular Environments with Jest

Secure Configuration Management

Unit testing with environment mocks

Testing Angular HTTP Services using Jest

Testing Angular Components with Services using Jest

Testing Angular Components with Inputs and Outputs using Jest

Testing Angular Components with Children using Jest

Testing Angular simple Components using Jest

How to Set Up Jest in Angular 19 (Step-by-Step Guide)

1. Install the dependencies:

2. Remove Karma:

3. Update test script on package.json file:

4. Create jest.config.js file:

5. Create setup-jest.ts file:

6. Update tsconfig.spec.json file:

7. Update the test property in angular.json file:

8. Verify that esModuleInterop property is included in tsconfig.json file:

Testing Angular with Jest

Understanding RxJS Mapping Operators: concatMap, mergeMap, switchMap (with a Job Interview Analogy)

Scenario: The Interview Process

1. concatMap: Finish One Interview Before Starting the Next

2. mergeMap: Run All Interviews in Parallel

3. switchMap: Cancel Previous Interview If a New One Starts

Wrapping up

3. Update `test` script on `package.json` file:

4. Create `jest.config.js` file:

5. Create `setup-jest.ts` file:

6. Update `tsconfig.spec.json` file:

7. Update the `test` property in `angular.json` file:

8. Verify that `esModuleInterop` property is included in `tsconfig.json` file: