Testing with Jasmine & Karma

Q: What are Jasmine and Karma, and what role does each play in testing an Angular app?

Jasmine is a testing framework that provides the actual syntax for writing tests, like describe and it blocks and expect assertions. Karma is a test runner that executes those tests in a real browser and reports the results, and both are set up automatically when you create a new Angular project with the CLI.

Q: How do you use Angular's TestBed to test a component that depends on a service?

TestBed lets you configure a testing module specifically for your test, providing either the real service or a mock version, then create an instance of your component within that controlled testing environment to verify its behavior.

Q: How would you test that clicking a button in a component triggers the expected behavior?

You find the button element in the rendered component's DOM, simulate a click event on it using dispatchEvent, run change detection to let Angular process the resulting update, and then check that the expected outcome, such as an updated property or displayed text, actually occurred.

Q: How would you test an Angular service that makes HTTP requests, without making real network calls during the test?

You use Angular's HttpClientTestingModule and the HttpTestingController, which let you intercept outgoing requests during a test, verify the exact request was made correctly, and manually provide a fake response, all without any real network activity happening.

Q: What is the difference between a unit test and a component test in an Angular app?

A unit test checks a small, isolated piece of logic, like a single function or service method, completely on its own, often without needing Angular's TestBed at all. A component test renders an actual component using TestBed and checks that it behaves correctly, often simulating user interactions like clicks, giving you confidence that the component works as a whole.

5 questions found

What are Jasmine and Karma, and what role does each play in testing an Angular app?

Beginner

Jasmine is a testing framework that provides the actual syntax for writing tests, like describe and it blocks and expect assertions. Karma is a test runner that executes those tests in a real browser and reports the results, and both are set up automatically when you create a new Angular project with the CLI.

describe('Calculator', () => {
  it('adds two numbers correctly', () => {
    expect(add(2, 3)).toBe(5);
  });
});

// Run with: ng test

Real-world example A team writes a simple Jasmine test verifying their calculator function adds numbers correctly, and Karma automatically runs it in a real Chrome browser every time they execute ng test.

Common follow-ups: How do you run tests just once instead of watching for changes continuously?;What is the difference between Jasmine's toBe and toEqual matchers?

Angular CLI & Project Structure;End to End Testing with Cypress & Playwright

How do you use Angular's TestBed to test a component that depends on a service?

Intermediate

TestBed lets you configure a testing module specifically for your test, providing either the real service or a mock version, then create an instance of your component within that controlled testing environment to verify its behavior.

TestBed.configureTestingModule({
  imports: [UserListComponent],
  providers: [{ provide: UserService, useValue: { getUsers: () => of([{ name: 'Alice' }]) } }]
});

const fixture = TestBed.createComponent(UserListComponent);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('Alice');

Real-world example A test for a user list component provides a fake UserService returning predictable sample data, verifying the component correctly displays that data without needing a real backend server running during the test.

Common follow-ups: Why do you need to call fixture.detectChanges() before checking the rendered output?;What is the difference between TestBed.createComponent and directly instantiating a component class?

Services & Dependency Injection;Dependency Injection Providers & Injection Tokens

How would you test that clicking a button in a component triggers the expected behavior?

Intermediate

You find the button element in the rendered component's DOM, simulate a click event on it using dispatchEvent, run change detection to let Angular process the resulting update, and then check that the expected outcome, such as an updated property or displayed text, actually occurred.

const button = fixture.nativeElement.querySelector('button');
button.click();
fixture.detectChanges();

expect(component.count).toBe(1);
expect(fixture.nativeElement.textContent).toContain('Count: 1');

Real-world example A test for a counter component simulates a real button click and verifies that both the internal count property and the actual displayed text on screen correctly update to reflect the new value.

Common follow-ups: Why is calling detectChanges again after the click necessary for the test to see the updated content?;How would you test a component using the newer signal based state instead of a plain property?

Angular Signals;Components & Templates

How would you test an Angular service that makes HTTP requests, without making real network calls during the test?

Advanced

You use Angular's HttpClientTestingModule and the HttpTestingController, which let you intercept outgoing requests during a test, verify the exact request was made correctly, and manually provide a fake response, all without any real network activity happening.

TestBed.configureTestingModule({
  imports: [HttpClientTestingModule],
  providers: [UserService]
});

const httpMock = TestBed.inject(HttpTestingController);
const service = TestBed.inject(UserService);

service.getUsers().subscribe((users) => expect(users.length).toBe(1));

const req = httpMock.expectOne('/api/users');
req.flush([{ name: 'Alice' }]);

Real-world example A test for a UserService confirms it makes exactly one request to the correct API endpoint and correctly processes the response, using HttpTestingController to simulate the server's reply without any real network call.

Common follow-ups: What does the expectOne method actually verify, and what happens if no matching request was made?;Why is it important to call httpMock.verify() at the end of these tests?

HTTP Client & Interceptors;Services & Dependency Injection

What is the difference between a unit test and a component test in an Angular app?

Beginner

A unit test checks a small, isolated piece of logic, like a single function or service method, completely on its own, often without needing Angular's TestBed at all. A component test renders an actual component using TestBed and checks that it behaves correctly, often simulating user interactions like clicks, giving you confidence that the component works as a whole.

// Unit test, testing a plain function, no TestBed needed
it('formats price correctly', () => {
  expect(formatPrice(9.5)).toBe('$9.50');
});

// Component test, testing a full rendered component using TestBed
it('displays formatted price', () => {
  fixture.detectChanges();
  expect(fixture.nativeElement.textContent).toContain('$9.50');
});

Real-world example A team writes a quick unit test for their price formatting function, and a separate component test using TestBed to confirm a PriceTag component actually displays that formatted price correctly to the user on screen.

Common follow-ups: Why is it useful to have both kinds of tests instead of relying on just one type?;How much of an app's total test coverage should typically be unit tests versus component tests?

End to End Testing with Cypress & Playwright;Components & Templates