ManuelDeLeon

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

@Component({
  selector: "app-add-numbers",
  template: `
    <input type="number" [(ngModel)]="num1" /> +
    <input type="number" [(ngModel)]="num2" />&nbsp;
    <button (click)="result = num1 + num2">Add</button>&nbsp;
    <label>{{ result }}</label>
  `,

ManuelDeLeon

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

@Component({
  selector: "app-add-numbers",
  template: `
    <input type="number" [(ngModel)]="num1" /> +
    <input type="number" [(ngModel)]="num2" />&nbsp;
    <button (click)="add()">Add</button>&nbsp;
    <label>{{ result }}</label>
  `,

ManuelDeLeon

describe("Renders correctly", () => {
  beforeEach(() => {
    // Update the UI
    fixture.detectChanges();
  });

  // Check state of the UI?

  describe("Type 2 and 3 in the input boxes", () => {
    beforeEach(() => {

ManuelDeLeon

describe("Renders correctly", () => {
  beforeEach(() => {
    // Update the UI
  });

  // Check state of the UI?

  describe("Type 2 and 3 in the input boxes", () => {
    beforeEach(() => {
      // Set the input boxes to 2 and 3

ManuelDeLeon

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppAddNumbersComponent } from './app-add-numbers.component';

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

  beforeEach(() => {

ManuelDeLeon

it("Displays each message in messages", () => {
  const messagesService = TestBed.get(MessageService);
  messagesService.messages = ["Alan", "Brito"];
  fixture.detectChanges();
  const divs: Array<HTMLDivElement> = fixture.debugElement
    // The first div is the wrapper for the test component (e.g. <div _ngcontent-a-c1>)
    .queryAll(By.css("div div div"))
    .map((e) => e.nativeElement);
  expect(divs.length).toBe(2);
  expect(divs[0].textContent).toContain("Alan");

ManuelDeLeon

it("Clicking the clear button calls clear on the message service", () => {
  const messagesService = TestBed.get(MessageService);
  messagesService.messages = [{}];
  spyOn(messagesService, "clear");
  fixture.detectChanges();
  const button: HTMLButtonElement = fixture.debugElement.query(
    By.css("button")
  ).nativeElement;
  button.click();

ManuelDeLeon

it("Doesn't display anything if messages is empty", () => {
  fixture.detectChanges();
  const div = fixture.debugElement.query(By.css("div"));
  expect(div).toBeFalsy();
});

ManuelDeLeon

beforeEach(() => {
  const messageServiceStub = () => ({
    clear: () => ({}),
    messages: [],
  });
  TestBed.configureTestingModule({
    // ...
  });
  // ...
});

ManuelDeLeon

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { MessageService } from '../message.service';
import { MessagesComponent } from './messages.component';
describe('MessagesComponent', () => {
  let component: MessagesComponent;
  let fixture: ComponentFixture<MessagesComponent>;
  beforeEach(() => {
    const messageServiceStub = () => ({});
    TestBed.configureTestingModule({