Mocking services in tests in Angular - Step-by-Step Execution

Concept Flow - Mocking services in tests

Test Setup

↓

Create Mock Service

↓

Inject Mock into Component

↓

Run Test

↓

Verify Behavior

↓

Test Pass/Fail

This flow shows how a mock service replaces a real service in tests to control behavior and verify outcomes.

Execution Sample

Angular

import { TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { DataService } from './data.service';

const mockDataService = { getData: () => ['mock', 'data'] };

TestBed.configureTestingModule({
  providers: [{ provide: DataService, useValue: mockDataService }]
});

This code sets up a test where DataService is replaced by a mock that returns fixed data.

Execution Table

Step	Action	Service Used	Component Behavior	Test Outcome
1	TestBed configures testing module	Mock service created	Component will use mock service	Setup ready
2	Component created and injected	Mock service injected	Component calls getData() on mock	Mock data returned ['mock', 'data']
3	Component processes data	Mock service data used	Component displays or uses mock data	Behavior controlled by mock
4	Assertions run	Mock service data verified	Test checks expected output from mock data	Test passes if output matches
5	Test completes	Mock service only used	No real service calls made	Test isolated and reliable

💡 Test ends after assertions verify component behavior using mock service data

Variable Tracker

Variable	Start	After Setup	After Injection	After Data Call	Final
dataService	undefined	mockDataService object	mockDataService object	mockDataService.getData() returns ['mock', 'data']	mockDataService object
componentData	undefined	undefined	undefined	['mock', 'data']	['mock', 'data']

Key Moments - 3 Insights

Why does the component use the mock service instead of the real one?

Because in TestBed configuration, the real service is replaced by the mock using provide/useValue, as shown in execution_table step 1.

How does the mock service control the test outcome?

The mock returns fixed data, so the component behavior is predictable and test assertions can verify expected results, as seen in steps 3 and 4.

What happens if we forget to provide the mock service in the test setup?

The component would use the real service, possibly causing unpredictable behavior or external calls, breaking test isolation (not shown in the table but implied).

Visual Quiz - 3 Questions

Look at the execution table, at which step is the mock service injected into the component?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Check the 'Service Used' and 'Action' columns in execution_table row for Step 2.

According to variable_tracker, what is the value of componentData after the data call?

A undefined

B ['mock', 'data']

C null

D empty array []

💡 Hint

Look at the 'componentData' row under 'After Data Call' column in variable_tracker.

If the mock service returned an empty array instead, how would the test outcome in step 4 change?

A Test would fail if expecting ['mock', 'data']

B Test would pass regardless

C Test would error out

D No change in test outcome

💡 Hint

Refer to execution_table step 4 where assertions check expected output from mock data.

Concept Snapshot

Mocking services in Angular tests:
- Use TestBed to replace real service with mock via provide/useValue
- Mock controls data returned to component
- Component uses mock service during test
- Assertions verify behavior based on mock data
- Ensures isolated, predictable tests

Full Transcript

In Angular testing, mocking services means replacing a real service with a fake one that returns controlled data. The test setup uses TestBed to provide the mock service instead of the real one. When the component is created, it receives the mock service. The component calls methods on the mock, which returns fixed data. This predictable data lets tests check if the component behaves correctly. The test ends after assertions confirm the expected behavior. This approach avoids real service calls and makes tests reliable and isolated.