This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from "@angular/core"; | |
@Component({ | |
selector: "app-add-numbers", | |
template: ` | |
<input type="number" [(ngModel)]="num1" /> + | |
<input type="number" [(ngModel)]="num2" /> | |
<button (click)="result = num1 + num2">Add</button> | |
<label>{{ result }}</label> | |
`, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from "@angular/core"; | |
@Component({ | |
selector: "app-add-numbers", | |
template: ` | |
<input type="number" [(ngModel)]="num1" /> + | |
<input type="number" [(ngModel)]="num2" /> | |
<button (click)="add()">Add</button> | |
<label>{{ result }}</label> | |
`, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
describe("Renders correctly", () => { | |
beforeEach(() => { | |
// Update the UI | |
fixture.detectChanges(); | |
}); | |
// Check state of the UI? | |
describe("Type 2 and 3 in the input boxes", () => { | |
beforeEach(() => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(() => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
it("Doesn't display anything if messages is empty", () => { | |
fixture.detectChanges(); | |
const div = fixture.debugElement.query(By.css("div")); | |
expect(div).toBeFalsy(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
beforeEach(() => { | |
const messageServiceStub = () => ({ | |
clear: () => ({}), | |
messages: [], | |
}); | |
TestBed.configureTestingModule({ | |
// ... | |
}); | |
// ... | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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({ |
NewerOlder