New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

100doc/day012 #5

Merged
merged 2 commits into from Jan 30, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+252 −16
Diff settings

Always

Just for now

@@ -2,7 +2,7 @@
<input
type="text"
[(ngModel)]="todo.task"
(keydown)="keyDownCode = $event.which"
(keydown)="handleKeyDown($event)"
(keyup.enter)="handleKeyUp($event)"
autofocus
placeholder="add todo">
@@ -1,6 +1,9 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TodoDetailComponent } from './todo-detail.component';
import { Todo } from 'src/app/models/todo';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

describe('TodoDetailComponent', () => {
@@ -11,8 +14,7 @@ describe('TodoDetailComponent', () => {
TestBed.configureTestingModule({
declarations: [TodoDetailComponent],
imports: [FormsModule]
})
.compileComponents();
}).compileComponents();
}));

beforeEach(() => {
@@ -21,7 +23,155 @@ describe('TodoDetailComponent', () => {
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
it('should create', () => { expect(component).toBeTruthy(); });

describe('template', () => {
let debugEl: DebugElement;
let el: HTMLInputElement;

describe('task', () => {
beforeEach(() => {
debugEl = fixture.debugElement.query(By.css('input[type="text"]'));
el = debugEl.nativeElement;
});

it('attribute', () => {
expect(el.autofocus).toBeTruthy();
expect(el.placeholder).toBe('add todo');
});

it('binding to Todo\'s property', () => {
el.value = 'task';
el.dispatchEvent(new Event('input'));
expect(component.todo.task).toBe('task');
});

describe('event', () => {
beforeEach(() => {
spyOn(component, 'handleKeyDown');
spyOn(component, 'handleKeyUp');
});

it('keydown: handleKeyDown()がKeyboardEventを引数に呼ばれること', () => {
// MEMO: とりあえずKeyboardEventとするがEventでも動く
el.dispatchEvent(new Event('keydown'));
expect(component.handleKeyDown).toHaveBeenCalledWith(new Event('dummy'));
});

it('keyup.enter: handleKeyUp()がKeyboardEventを引数に呼ばれること', () => {
// MEMO: dispatchEventではkeyup.enterが呼べないし
// かといってkeyupではhandleKeyUpが呼ばれない
// よってtriggerEventHandlerを使用する
// el.dispatchEvent(new KeyboardEvent('keyup.enter'));
debugEl.triggerEventHandler('keyup.enter', new KeyboardEvent(''));
expect(component.handleKeyUp).toHaveBeenCalledWith(new KeyboardEvent(''));
});
});
});

describe('done', () => {
beforeEach(() => {
debugEl = fixture.debugElement.query(By.css('input[type="checkbox"]'));
el = debugEl.nativeElement;
});

it('binding to Todo\'s property', () => {
el.checked = true;
el.dispatchEvent(new Event('change'));
expect(component.todo.done).toBeTruthy();
});
});

describe('button', () => {
beforeEach(() => {
debugEl = fixture.debugElement.query(By.css('button'));
el = debugEl.nativeElement;
});

it('attribute', () => {
expect(el.textContent).toBe('add');
});

describe('event', () => {
it('click: 引数なしでadd()が呼ばれること', () => {
spyOn(component, 'add');
el.click();
expect(component.add).toHaveBeenCalledWith();
});
});
});
});

describe('component', () => {
it('#clikckAdd: component.todoがemitされること', () => {
const result = new Todo;
result.id = 42;
result.task = 'new todo';
result.done = true;
component.todo = result;

component.clickAdd.subscribe(r => expect(r).toBe(result));

component.add();
});

it('#handleKeyDown: keyDownCodeに値が設定されること', () => {
const debugElement = fixture.debugElement.query(By.css('input[type="text"]'));
const which = 13;
spyOn(component, 'handleKeyDown').and.callThrough();

// MEMO: KeyboardEventのwhichの値が設定されることをテストしたいが
// KeyboardEventはwhichが設定できないためtriggerEventHandler()を使用
// component.handleKeyDown(new KeyboardEvent('keydown', { which }));
debugElement.triggerEventHandler('keydown', { which });

expect(component.handleKeyDown).toHaveBeenCalled();
expect(component.keyDownCode).toBe(which);
});

describe('#handleKeyUp', () => {
it('keyDownCode = 13の場合: add()が呼ばれること', () => {
const debugElement = fixture.debugElement.query(By.css('input[type="text"]'));
const which = 13;
spyOn(component, 'handleKeyUp').and.callThrough();
spyOn(component, 'add');

component.keyDownCode = which;
// MEMO: KeyboardEventのwhichの値が設定されることをテストしたいが
// KeyboardEventはwhichが設定できないためtriggerEventHandler()を使用
// component.handleKeyDown(new KeyboardEvent('keydown', { which }));
debugElement.triggerEventHandler('keyup.enter', { which });

expect(component.handleKeyUp).toHaveBeenCalled();
expect(component.add).toHaveBeenCalled();
});

it('keyDownCode = 13ではない場合: add()が呼ばれないこと', () => {
const debugElement = fixture.debugElement.query(By.css('input[type="text"]'));
const which = 13;
spyOn(component, 'handleKeyUp').and.callThrough();
spyOn(component, 'add');

component.keyDownCode = 0;
debugElement.triggerEventHandler('keyup.enter', { which });

expect(component.handleKeyUp).toHaveBeenCalled();
expect(component.add).not.toHaveBeenCalled();
});
});

it('#add: clickAdd.emit()が呼ばれ、this.todoはnew Todoとなること', () => {
spyOn(component.clickAdd, 'emit');
const result = new Todo;
result.id = 42;
result.task = 'hello';
result.done = true;
component.todo = result;

component.add();

expect(component.clickAdd.emit).toHaveBeenCalledWith(result);
expect(component.todo).toEqual(new Todo);
});
});
});
@@ -6,17 +6,16 @@ import { Todo } from 'src/app/models/todo';
templateUrl: './todo-detail.component.html',
styleUrls: ['./todo-detail.component.scss']
})
export class TodoDetailComponent implements OnInit {
export class TodoDetailComponent {

todo: Todo = new Todo;

keyDownCode: number;

@Output() clickAdd = new EventEmitter<Todo>();

constructor() { }

ngOnInit() {
handleKeyDown(e: KeyboardEvent) {
this.keyDownCode = e.which;
}

handleKeyUp(e: KeyboardEvent) {
@@ -1,15 +1,102 @@
import { TestBed } from '@angular/core/testing';

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpErrorResponse } from '@angular/common/http';
import { Todo } from '../models/todo';
import { TodoService } from './todo.service';
import { HttpClientTestingModule } from '@angular/common/http/testing';

describe('TodoService', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [HttpClientTestingModule]
}));
let httpTestingController: HttpTestingController;
let service: TodoService;
const expectError = (status = 404, statusText = '') => {
return (e: HttpErrorResponse) => {
expect(e.status).toEqual(status, 'status');
expect(e.statusText).toBe(statusText, 'statusText');
};
};

it('should be created', () => {
const service: TodoService = TestBed.get(TodoService);
expect(service).toBeTruthy();
beforeEach(() => {
TestBed.configureTestingModule({ imports: [HttpClientTestingModule] });
httpTestingController = TestBed.get(HttpTestingController);
service = TestBed.get(TodoService);
});

afterEach(() => { httpTestingController.verify(); });

it('should be created', () => { expect(service).toBeTruthy(); });

describe('#get', () => {
it('status 200', () => {
const result: Todo[] = [new Todo, new Todo];
service.get().subscribe(r => expect(r).toBe(result), fail);
const req = httpTestingController.expectOne(service.url);
expect(req.request.method).toBe('GET');
req.flush(result);
});

it('status 404', () => {
service.get().subscribe(fail, expectError(404, 'not found'));
const req = httpTestingController.expectOne(service.url);
expect(req.request.method).toBe('GET');
req.flush('error', { status: 404, statusText: 'not found' });
});
});

describe('#add', () => {
let result: Todo;
beforeEach(() => { result = { id: 42, task: 'new todo', done: true }; });

it('status OK', () => {
service.add(result).subscribe(r => expect(r).toBe(result), fail);
const req = httpTestingController.expectOne(service.url);
expect(req.request.method).toBe('POST');
req.flush(result);
});

it('status NG', () => {
service.add(result).subscribe(fail, expectError(404, 'not found'));
const req = httpTestingController.expectOne(service.url);
expect(req.request.method).toBe('POST');
req.flush('error', { status: 404, statusText: 'not found' });
});
});

describe('#upd', () => {
let result: Todo;
beforeEach(() => { result = { id: 42, task: 'new todo', done: true }; });

it('status OK', () => {
service.upd(result).subscribe(r => expect(r).toBe(result), fail);
const req = httpTestingController.expectOne(`${service.url}/${result.id}`);
expect(req.request.method).toBe('PUT');
req.flush(result);
});

it('status NG', () => {
service.upd(result).subscribe(fail, expectError(404, 'not found'));
const req = httpTestingController.expectOne(`${service.url}/${result.id}`);
expect(req.request.method).toBe('PUT');
req.flush('error', { status: 404, statusText: 'not found' });
});
});

describe('#del', () => {
let result: Todo;
beforeEach(() => { result = { id: 42, task: 'new todo', done: true }; });

it('status OK', () => {
service.del(result).subscribe(r => expect(r).toBe(result), fail);
const req = httpTestingController.expectOne(`${service.url}/${result.id}`);
expect(req.request.method).toBe('DELETE');
req.flush(result);
});

it('status NG', () => {
service.del(result).subscribe(fail, expectError(404, 'not found'));
const req = httpTestingController.expectOne(`${service.url}/${result.id}`);
expect(req.request.method).toBe('DELETE');
req.flush('error', { status: 404, statusText: 'not found' });
});
});

});
ProTip! Use n and p to navigate between commits in a pull request.