Component testing basics in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Angular component render?

Given the following Angular component template and class, what will be the rendered output in the browser?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-greet',
  template: `<h1>Hello, {{ name }}!</h1>`
})
export class GreetComponent {
  name = 'Alice';
}

A <h1>Hello, Alice!</h1>

B <h1>Hello, {{ name }}!</h1>

C <h1>Hello, !</h1>

D <h1>Hello, undefined!</h1>

💡 Hint

Remember Angular replaces {{ }} with the component's property values.

Angular templates use interpolation {{ }} to insert component property values. Here, name is 'Alice', so it renders Hello, Alice!

❓ state_output

intermediate

What is the value of 'count' after clicking the button twice?

Consider this Angular component that increments a counter on button click. What is the value of 'count' after clicking the button two times?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Increment</button><p>{{ count }}</p>`
})
export class CounterComponent {
  count = 0;
  increment() {
    this.count += 1;
  }
}

A 0

B 1

C 2

D undefined

💡 Hint

Each click calls increment which adds 1 to count.

The increment method adds 1 to count each time the button is clicked. After two clicks, count is 2.

📝 Syntax

advanced

Which option causes a syntax error in Angular component?

Identify the option that will cause a syntax error when defining an Angular component.

A @Component({ selector: 'app-test', template: '<p>Test</p>' }) export class TestComponent { constructor() {} }

B @Component({ selector: 'app-test', template: '<p>Test</p>' }) export class TestComponent

C @Component({ selector: 'app-test', template: '<p>Test</p>' }) export class TestComponent { }

D @Component({ selector: 'app-test', template: '<p>Test</p>' }) export class TestComponent {}

💡 Hint

Check if the class declaration is complete and properly closed.

Option B lacks the curly braces {} after the class declaration, causing a syntax error.

🔧 Debug

advanced

Why does this Angular test fail to detect the button click?

In this test, clicking the button does not update the count as expected. What is the likely cause?

Angular

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

@Component({
  selector: 'app-clicker',
  template: `<button (click)="increment()">Click me</button><p>{{ count }}</p>`
})
class ClickerComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

let fixture: ComponentFixture<ClickerComponent>;

beforeEach(() => {
  TestBed.configureTestingModule({ declarations: [ClickerComponent] }).compileComponents();
  fixture = TestBed.createComponent(ClickerComponent);
  fixture.detectChanges();
});

test('button click increments count', () => {
  const button = fixture.nativeElement.querySelector('button');
  button.click();
  fixture.detectChanges();
  expect(fixture.nativeElement.querySelector('p').textContent).toBe('1');
});

A Missing fixture.detectChanges() after button.click() to update the view

B The increment method is not defined in the component

C The button selector is incorrect and does not find the button

D The initial count is set to 1 instead of 0

💡 Hint

Angular tests need to update the view after state changes.

After clicking the button, the component state changes but the view does not update until fixture.detectChanges() is called.

🧠 Conceptual

expert

What is the primary purpose of Angular's TestBed in component testing?

Choose the best description of what Angular's TestBed provides when testing components.

A It replaces the Angular compiler with a faster JavaScript-only compiler for tests

B It automatically mocks all services and dependencies without configuration

C It runs the Angular application in a real browser environment for end-to-end testing

D It creates a testing module that configures and compiles components and their dependencies for isolated testing

💡 Hint

Think about how Angular prepares components and their environment for tests.

TestBed sets up a testing module that mimics an Angular module, allowing components and dependencies to be compiled and tested in isolation.

Practice

1. What is the main purpose of component testing in Angular?

easy

A. To test the entire application at once

B. To check if a component works correctly by itself

C. To test only the services used by components

D. To check the database connection

Solution

1. Step 1: Understand component testing scope

   Component testing focuses on testing a single component in isolation, not the whole app or services alone.

2. Step 2: Compare options with definition

   Only To check if a component works correctly by itself describes testing a component by itself, which matches the purpose of component testing.

3. Final Answer:

   To check if a component works correctly by itself -> Option B

4. Quick Check:

   Component testing = isolated component check [OK]

Hint: Component testing means testing one piece alone [OK]

Common Mistakes:

• Confusing component testing with full app testing
• Thinking services are tested alone in component tests
• Assuming database is tested in component tests

2. Which Angular testing utility is used to configure and create a component for testing?

easy

A. TestBed

B. HttpClient

C. NgModule

D. RouterModule

Solution

1. Step 1: Identify Angular testing utilities

   TestBed is the Angular utility designed to configure and create components in tests.

2. Step 2: Eliminate unrelated options

   HttpClient is for HTTP requests, NgModule defines modules, RouterModule handles routing, none create test components.

3. Final Answer:

   TestBed -> Option A

4. Quick Check:

   TestBed sets up test components [OK]

Hint: TestBed is the test setup tool in Angular [OK]

Common Mistakes:

• Confusing TestBed with NgModule
• Choosing HttpClient which is unrelated to testing setup
• Selecting RouterModule which is for routing

3. Given this test snippet, what will fixture.nativeElement.textContent contain?

TestBed.configureTestingModule({ declarations: [HelloComponent] }).compileComponents();
const fixture = TestBed.createComponent(HelloComponent);
fixture.componentInstance.name = 'Alice';
fixture.detectChanges();

@Component({ selector: 'app-hello', template: '<p>Hello, {{name}}!</p>' }) class HelloComponent { name = ''; }

medium

A. Hello, Alice!

B. Hello, !

C. Hello, name!

D. Error: name not defined

Solution

1. Step 1: Understand component property binding

   The component's name property is set to 'Alice' before change detection.

2. Step 2: Effect of fixture.detectChanges()

   This updates the template to reflect the new name value, so the paragraph shows 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   Property set + detectChanges updates template [OK]

Hint: detectChanges updates template with latest property values [OK]

Common Mistakes:

• Forgetting to call detectChanges so template stays old
• Assuming template shows variable name literally
• Thinking missing name causes error

4. What is wrong with this test setup code?

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [MyComponent]
  });
  fixture = TestBed.createComponent(MyComponent);
  component = fixture.componentInstance;
});

medium

A. fixture and component should be declared inside beforeEach

B. Should import MyComponent instead of declaring it

C. Missing call to compileComponents() before createComponent()

D. No need to call createComponent() in beforeEach

Solution

1. Step 1: Check TestBed setup sequence

   When using TestBed with components, compileComponents() must be called to compile templates before creating the component.

2. Step 2: Identify missing step

   The code configures the module but skips compileComponents(), which can cause errors or incomplete setup.

3. Final Answer:

   Missing call to compileComponents() before createComponent() -> Option C

4. Quick Check:

   compileComponents() needed before createComponent() [OK]

Hint: Always call compileComponents() before createComponent() [OK]

Common Mistakes:

• Skipping compileComponents() causes template errors
• Declaring variables inside beforeEach unnecessarily
• Thinking createComponent() is optional

5. You want to test a component that shows a list of items passed as an input. Which approach correctly tests that the rendered list matches the input array?

@Component({ template: '<ul><li *ngFor="let item of items">{{item}}</li></ul>' })
class ListComponent { @Input() items: string[] = []; }

hard

A. Only check component.items property without inspecting the DOM

B. Set component.items but do not call detectChanges(), then check fixture.nativeElement.textContent

C. Call detectChanges() before setting component.items, then check component.items.length

D. Set component.items to an array, call detectChanges(), then check fixture.nativeElement.querySelectorAll('li').length

Solution

1. Step 1: Set input and update template

   Assign the input array to component.items and call detectChanges() to update the rendered list.

2. Step 2: Verify rendered list length

   Check the number of <li> elements in the DOM matches the input array length using querySelectorAll('li').length.

3. Final Answer:

   Set component.items, call detectChanges(), then check li elements count -> Option D

4. Quick Check:

   Input set + detectChanges + DOM check = correct test [OK]

Hint: Always call detectChanges() after input changes before checking DOM [OK]

Common Mistakes:

• Not calling detectChanges() after input change
• Checking component property only without DOM verification
• Calling detectChanges() before setting inputs