Skip to content

Commit 74b756b

Browse files
jeonghwan-kimjeonghwan-kim
committed
BoarDisplay와 CardDisplay 리팩토링
1 parent 436f3e6 commit 74b756b

File tree

5 files changed

+131
-78
lines changed

5 files changed

+131
-78
lines changed

‎index.spec.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<html>
22
<head>
3+
<meta charset="UTF-8">
4+
35
<link rel="shortcut icon" type="image/png" href="js/jasmine/lib/jasmine-2.6.4/jasmine_favicon.png">
46
<link rel="stylesheet" type="text/css" href="js/jasmine/lib/jasmine-2.6.4/jasmine.css">
57

‎js/BoardDisplay.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,25 @@ var Trelno = Trelno || {};
22

33
Trelno.BoardDisplay = (id, name, cardDisplayList = []) => {
44
let display = {
5-
cardList() {
5+
cardListElement() {
66
return cardDisplayList.reduce((arr, cardDisplay)=> {
77
if (typeof cardDisplay.element !== 'function') return arr;
88
arr.push(cardDisplay.element());
99
return arr;
1010
}, []);
1111
},
1212

13-
html() {
14-
return `
13+
templateElement() {
14+
const template = `
1515
<div class="board">
1616
<h2 class="title font-gray">${name}</h2>
1717
<ul class="card-list"></ul>
1818
<div class="add-card">
1919
<a href="#" class="add-card-link">Add a card...</a>
2020
</div>
2121
</div>`;
22+
23+
return $(template);
2224
},
2325

2426
bindDropEvent(el) {
@@ -40,18 +42,19 @@ Trelno.BoardDisplay = (id, name, cardDisplayList = []) => {
4042
},
4143

4244
element() {
43-
const el = $(display.html());
45+
const $el = display.templateElement();
4446

45-
display.bindDropEvent(el);
47+
display.bindDropEvent($el);
4648

47-
display.cardList().forEach(cardEl => {
49+
display.cardListElement().forEach(cardEl => {
4850
const li = $(`<li id="${cardEl.data('card-id')}" draggable="true"></li>`);
51+
4952
display.bindDragEvent(li)
5053
li.append(cardEl);
51-
el.find('ul.card-list').append(li);
54+
$el.find('ul.card-list').append(li);
5255
});
5356

54-
return el;
57+
return $el;
5558
}
5659
}
5760

‎js/BoardDisplay.spec.js

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,81 @@
1-
describe('Trlno.BoardDisplay', ()=>{
1+
describe('Trlno.BoardDisplay', () => {
22
let display,
33
name,
4-
cardDisplayList,
5-
elementSpy,
6-
spy;
7-
8-
beforeEach(()=>{
9-
name = 'board name';
10-
cardHtml = 'card html';
11-
spy = jasmine.createSpy('html').and.returnValue(cardHtml);
12-
elementSpy = jasmine.createSpy('element');
13-
cardDisplayList = [{
14-
element: elementSpy
15-
}]
16-
display = Trelno.BoardDisplay(1, name, cardDisplayList);
17-
});
18-
19-
describe('cardList', ()=> {
20-
it('CardDisplay.element 메소드를 실행한다', () => {
21-
display.cardList();
22-
expect(elementSpy).toHaveBeenCalled();
23-
})
24-
it('그 결과를 배열로 반환한다', ()=> {
25-
expect(display.cardList() instanceof Array).toBe(true);
4+
cardDisplayList
5+
6+
beforeEach(() => {
7+
name = 'board name'
8+
cardDisplayList = []
9+
10+
display = Trelno.BoardDisplay(1, name, cardDisplayList)
11+
})
12+
13+
describe('cardListElement', () => {
14+
let $elList,
15+
spy
16+
17+
beforeEach(() => {
18+
spy = jasmine.createSpy('CardDisplay.element')
19+
cardDisplayList.push({
20+
element: spy
21+
})
22+
$elList = display.cardListElement()
23+
})
24+
25+
afterEach(() => {
26+
cardDisplayList.pop()
27+
})
28+
29+
it('CardDisplay.element()를 실행한다', () => {
30+
expect(spy).toHaveBeenCalled()
31+
})
32+
33+
it('그 결과를 배열로 반환한다', () => {
34+
expect($elList instanceof Array).toBe(true)
2635
})
2736
})
2837

38+
describe('templateElement', () => {
39+
let $el
40+
41+
beforeEach(() => {
42+
$el = display.templateElement()
43+
})
44+
45+
it('jquery 객체를 반환한다', () => {
46+
expect($el instanceof $).toBe(true)
47+
})
48+
49+
it('.title 클래스가 요소에 name 문자열을 포함한다', () => {
50+
expect($el.find('.title').text()).toBe(name)
51+
})
52+
})
53+
54+
describe('bindDropEvent', ()=> {})
55+
56+
describe('bindDragEvent', ()=> {})
57+
58+
describe('element', () => {
59+
let $el
60+
61+
beforeEach(() => {
62+
spyOn(display, 'templateElement')
63+
spyOn(display, 'bindDropEvent')
64+
spyOn(display, 'cardListElement').and.returnValue([])
65+
66+
$el = display.element()
67+
})
68+
69+
it('templateElement를 호출한다', () => {
70+
expect(display.templateElement).toHaveBeenCalled()
71+
})
72+
73+
it('bindDragEvent를 호출한다', () => {
74+
expect(display.bindDropEvent).toHaveBeenCalled()
75+
})
76+
77+
it('cardListElement를 호출한다', () => {
78+
expect(display.cardListElement).toHaveBeenCalled()
79+
})
80+
})
2981
})

‎js/CardDisplay.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ Trelno.CardDisplay = card => {
88
return html;
99
}, '');
1010
},
11-
html() {
12-
return `
11+
12+
element() {
13+
const template = `
1314
<div class="card" data-card-id="${card.id}">
1415
<div class="label-list">
1516
${display.tagsHtml(card.tags)}
@@ -19,9 +20,8 @@ Trelno.CardDisplay = card => {
1920
<span class="comment-count">1</span>
2021
</div>
2122
</div>`;
22-
},
23-
element() {
24-
return $(display.html());
23+
24+
return $(template);
2525
}
2626
};
2727

‎js/CardDisplay.spec.js

Lines changed: 38 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,63 @@
1-
describe('Trelno.CardDisplay', ()=> {
1+
describe('Trelno.CardDisplay', () => {
22
let display,
3-
card;
3+
card
44

5-
beforeEach(()=> {
5+
beforeEach(() => {
66
card = {
77
name: 'card name'
88
}
9-
display = Trelno.CardDisplay(card);
10-
});
9+
display = Trelno.CardDisplay(card)
10+
})
1111

12-
describe('html', () => {
13-
let html;
12+
describe('tagsHtml', ()=> {
13+
let html,
14+
tags = ['green']
1415

1516
beforeEach(()=> {
16-
html = display.html();
17-
});
18-
19-
it('카드 이름을 출력한다', ()=> {
20-
expect(html).toMatch(card.name)
17+
html = display.tagsHtml(tags)
2118
})
2219

23-
describe('카드에 태그가 있으면', ()=> {
24-
beforeEach(()=> {
25-
card.tags = ['green']
26-
html = display.html();
27-
})
28-
29-
afterEach(()=> {
30-
delete card.tags;
31-
})
32-
33-
it('태그 이름으로 클래스 명을 붙인다', ()=> {
34-
const tags = $(html).find('.label')
35-
expect(tags.attr('class')).toMatch(`label-${card.tags[0]}`);
36-
});
20+
it('태그 이름으로 클래스 명을 붙인 html 문자열을 반환한다', () => {
21+
expect(html).toMatch(`label-${tags[0]}`)
3722
})
3823
})
3924

4025
describe('element', () => {
41-
let el;
26+
let $el
4227

43-
beforeEach(()=> {
44-
el = display.element();
45-
});
28+
beforeEach(() => {
29+
$el = display.element()
30+
})
31+
32+
it('jquery 인스턴스를 반환한다', ()=> {
33+
expect($el instanceof $).toBe(true)
34+
})
4635

47-
it('카드 이름을 출력한다', ()=> {
48-
expect(el.find('.card-title').text()).toMatch(card.name)
36+
it('card-title 클래스에 카드 이름을 출력한다', () => {
37+
expect($el.find('.card-title').text()).toMatch(card.name)
4938
})
5039

51-
describe('카드에 태그가 있으면', ()=> {
52-
beforeEach(()=> {
40+
describe('카드에 태그가 있으면', () => {
41+
let mockResponseOfTagsHtml
42+
43+
beforeEach(() => {
44+
mockResponseOfTagsHtml = '<span></span>'
45+
spyOn(display, 'tagsHtml').and.returnValue(mockResponseOfTagsHtml)
5346
card.tags = ['green']
54-
el = display.element();
47+
$el = display.element()
5548
})
5649

57-
afterEach(()=> {
58-
delete card.tags;
50+
afterEach(() => {
51+
delete card.tags
5952
})
6053

61-
it('태그 이름으로 클래스 명을 붙인다', ()=> {
62-
const tags = el.find('.label')
63-
expect(tags.attr('class')).toMatch(`label-${card.tags[0]}`);
64-
});
65-
})
54+
it('tagsHtml을 호출한다', () => {
55+
expect(display.tagsHtml).toHaveBeenCalled()
56+
})
57+
58+
it('tagsHtml이 반환한 문자열을 돔에 추가한다', ()=> {
59+
expect($el.html()).toMatch(mockResponseOfTagsHtml)
60+
})
61+
})
6662
})
6763
})

0 commit comments

Comments
 (0)