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.