이벤트 처리기 동작 코드 테스팅

jeonghwan-kim · jeonghwan-kim · commit 6d75e7bbf850 · 2017-07-31T10:12:43.000+09:00
diff --git a/ClickCountDisplay/ClickCountDisplay.js b/ClickCountDisplay/ClickCountDisplay.js
@@ -1,6 +1,7 @@
 var ClickCountDisplay = function(options) {
   var counter = 0
-  return {
+
+  var clickCounter = {
     getClickCount() {
       return counter
     },
@@ -14,4 +15,10 @@ var ClickCountDisplay = function(options) {
       options.updateEl.text(this.getClickCount())
     }
   }
+
+  options.triggerEl.on('click', ()=> {
+    clickCounter.increseCountAndUpdateDisplay()
+  })
+
+  return clickCounter
 }
diff --git a/ClickCountDisplay/ClickCountDisplay.spec.js b/ClickCountDisplay/ClickCountDisplay.spec.js
@@ -1,12 +1,15 @@
 describe('ClickCountDisplay 모듈', () => {
   var display,
-    displayEl
+    displayEl,
+    clickEl
 
   beforeEach(() => {
     displayEl = $('<span></span>')
+    clickEl = $('<button></button>')
 
     var options = {
-      updateEl: displayEl
+      updateEl: displayEl,
+      triggerEl: clickEl
     }
 
     display = ClickCountDisplay(options)
@@ -16,6 +19,12 @@ describe('ClickCountDisplay 모듈', () => {
     expect(display.getClickCount()).toBe(0)
   })
 
+  it('클릭 이벤트가 발생하면 increseCountAndUpdateDisplay를 실행한다', ()=> {
+    spyOn(display, 'increseCountAndUpdateDisplay')
+    clickEl.trigger('click')
+    expect(display.increseCountAndUpdateDisplay).toHaveBeenCalled()
+  })
+
   describe('increseCountAndUpdateDisplay()', () => {
     it('클릭 횟수를 증가한다', () => {
       var initalCount = display.getClickCount()
diff --git a/ClickCountDisplay/index.html b/ClickCountDisplay/index.html
@@ -5,16 +5,23 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <script src="../vendors/jquery/jquery-3.2.1.min.js"></script>
+
+    <script src="ClickCountDisplay.js"></script>
+
     <script>
-      var counter = 0;
+      document.addEventListener('DOMContentLoaded', ()=> {
+        var clickCountDisplay = ClickCountDisplay({
+          triggerEl: $('#btn'),
+          updateEl: $('#counter-display')
+        })
 
-      function countDisplay() {
-        document.getElementById('counter-display').innerHTML = counter;
-      }
+        clickCountDisplay.updateDisplay()
+      })
     </script>
   </head>
 
   <body>
-    <button onclick="counter++; countDisplay()">증가</button><span id="counter-display">0</span>
+    <button id="btn">증가</button><span id="counter-display"></span>
   </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`var ClickCountDisplay = function(options) {`
`2`	`2`	`var counter = 0`
`3`		`- return {`
	`3`	`+`
	`4`	`+ var clickCounter = {`
`4`	`5`	`getClickCount() {`
`5`	`6`	`return counter`
`6`	`7`	`},`
`@@ -14,4 +15,10 @@ var ClickCountDisplay = function(options) {`
`14`	`15`	`options.updateEl.text(this.getClickCount())`
`15`	`16`	`}`
`16`	`17`	`}`
	`18`	`+`
	`19`	`+ options.triggerEl.on('click', ()=> {`
	`20`	`+ clickCounter.increseCountAndUpdateDisplay()`
	`21`	`+ })`
	`22`	`+`
	`23`	`+ return clickCounter`
`17`	`24`	`}`