From a212986ce861e0caabc352b42f41f0cf557432c1 Mon Sep 17 00:00:00 2001 From: catLee Date: Mon, 26 Oct 2015 22:07:20 +0800 Subject: [PATCH 1/2] Complete Tier1 part of HW3 --- homework/content.js | 66 +++++++++-------- homework/karma.conf.js | 78 ++++++++++--------- homework/list.js | 148 +++++++++++++++++++------------------ homework/test/test-list.js | 33 ++++++++- 4 files changed, 178 insertions(+), 147 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..92d85eb 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,37 +1,39 @@ 'use strict'; -(function() { - var _wrapper = document.querySelector('#note-content-wrapper'); +function ToDoItemReader() { + this._wrapper = document.querySelector('#note-content-wrapper'); +} +ToDoItemReader.prototype = { + start: function() { + window.addEventListener('note-open', function(event) { + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + }.bind(this)); + }, - function start() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }); - } + resetWrapper: function() { + this._wrapper.innerHTML = ''; + }, - function resetWrapper() { - _wrapper.innerHTML = ''; - } + drawNote: function(note) { + var title = note.title; + var h = document.createElement('h2'); + h.textContent = title; + var passages = note.passages; + var buff = document.createDocumentFragment(); + passages.forEach(function(passage) { + var p = document.createElement('p'); + p.classList.add('note-passage'); + p.textContent = passage; + buff.appendChild(p); + }.bind(this)); + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); + } +} +document.addEventListener('DOMContentLoaded', function(event) { + var toDoItemReader = new ToDoItemReader(); + toDoItemReader.start(); +}); - function drawNote(note) { - var title = note.title; - var h = document.createElement('h2'); - h.textContent = title; - var passages = note.passages; - var buff = document.createDocumentFragment(); - passages.forEach(function(passage) { - var p = document.createElement('p'); - p.classList.add('note-passage'); - p.textContent = passage; - buff.appendChild(p); - }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); - } - - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); -})(); diff --git a/homework/karma.conf.js b/homework/karma.conf.js index f669cd0..41083db 100644 --- a/homework/karma.conf.js +++ b/homework/karma.conf.js @@ -2,65 +2,63 @@ // Generated on Mon Sep 28 2015 19:56:05 GMT+0800 (CST) module.exports = function(config) { - config.set({ + config.set({ - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: '', + // base path that will be used to resolve all patterns (eg. files, exclude) + basePath: '', + // frameworks to use + // available frameworks: https://npmjs.org/browse/keyword/karma-adapter + frameworks: ['mocha', 'chai', 'sinon'], - // frameworks to use - // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['mocha', 'chai', 'sinon'], + // list of files / patterns to load in the browser + files: [ + '*.js', + 'test/test-*.js', + ], - // list of files / patterns to load in the browser - files: [ - '*.js', - 'test/test-*.js' - ], + // list of files to exclude + exclude: [ + ], - // list of files to exclude - exclude: [ - ], + // preprocess matching files before serving them to the browser + // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor + preprocessors: { + }, - // preprocess matching files before serving them to the browser - // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor - preprocessors: { - }, + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['progress'], - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['progress'], + // web server port + port: 9876, - // web server port - port: 9876, + // enable / disable colors in the output (reporters and logs) + colors: true, - // enable / disable colors in the output (reporters and logs) - colors: true, + // level of logging + // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG + logLevel: config.LOG_DEBUG, - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, + // enable / disable watching file and executing tests whenever any file changes + autoWatch: true, - // enable / disable watching file and executing tests whenever any file changes - autoWatch: true, + // start these browsers + // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher + browsers: ['Firefox'], - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['Firefox'], - - - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: false - }) + // Continuous Integration mode + // if true, Karma captures browsers, runs the tests and exits + singleRun: false, + }) } diff --git a/homework/list.js b/homework/list.js index 21eddbc..6980b95 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,79 +1,83 @@ 'use strict'; +function ToDoList(){ + this._listNoteContent = []; + this._wrapper = document.querySelector('#note-list-wrapper'); +} +ToDoList.prototype = { + start: function() { + this.fetchList(function(data) { + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); + }.bind(this)); + window.addEventListener('click', function(event) { + this.onNoteOpen(event); + }.bind(this)); + }, -(function() { + onNoteOpen: function(event) { + if (event.target.classList.contains('note-title')) { + var id = event.target.dataset.noteId; + var content = this._listNoteContent[id]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + }; + }, - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); + preloadFirstNote: function() { + if (this._listNoteContent.length !== 0) { + var content = this._listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + } + }, - function start() { - fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); - }); - } + updateList: function(list) { + this._listNoteContent = list; + }, - function onNoteOpen(event) { - if (event.target.classList.contains('note-title')) { - var id = event.target.dataset.noteId; - var content = _listNoteContent[id]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - }; - } + drawList: function() { + var list = this._listNoteContent; + var ul = document.createElement('ul'); + ul.id = 'note-title-list'; + var buff = document.createDocumentFragment(); + list.forEach(function(note, i) { + var li = document.createElement('li'); + li.dataset.noteId = i; + li.classList.add('note-title'); + li.textContent = note.title; + // Note: buff is captured, so we now have a + // little closure naturally. + buff.appendChild(li); + }); + ul.appendChild(buff); + this._wrapper.appendChild(ul); + }, - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); + fetchList: function(afterFetch) { + var xhr = new XMLHttpRequest(); + new Promise(function(resolve, reject){ + xhr.open('GET', '/demo-list-notes.json', true); + xhr.responseType = 'json'; + xhr.onreadystatechange = function(e) { + // Watch out: we have a mysterious unknown 'this'. + if (this.readyState === 4 && this.status === 200) { + // The flow ends here. + resolve(); + } else if (this.status !== 200 ){ + // Ignore error in this case. + reject(); + } + }; + xhr.send(); + }).then(function(){ + afterFetch(xhr.response); + }).catch(function(){ + console.log("fetchList failed.") + }) } - } - - function updateList(list) { - _listNoteContent = list; - } - - function drawList() { - var list = _listNoteContent; - var ul = document.createElement('ul'); - ul.id = 'note-title-list'; - var buff = document.createDocumentFragment(); - list.forEach(function(note, i) { - var li = document.createElement('li'); - li.dataset.noteId = i; - li.classList.add('note-title'); - li.textContent = note.title; - // Note: buff is captured, so we now have a - // little closure naturally. - buff.appendChild(li); - }); - ul.appendChild(buff); - _wrapper.appendChild(ul); - } - - function fetchList(afterFetch) { - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); - xhr.responseType = 'json'; - xhr.onreadystatechange = function(e) { - // Watch out: we have a mysterious unknown 'this'. - if (this.readyState === 4 && this.status === 200) { - var listData = this.response; - // The flow ends here. - afterFetch(listData); - } else if (this.status !== 200 ){ - // Ignore error in this case. - } - }; - xhr.send(); - } - - document.addEventListener('DOMContentLoaded', function(event) { - start(); - }); - -})(); +}; +document.addEventListener('DOMContentLoaded', function(event) { + var toDoList = new ToDoList(); + toDoList.start(); +}); diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..c1817ba 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,8 +1,35 @@ +'use strict'; describe('Test > ', function() { - beforeEach(function() { + var toDoList, toDoItemReader; + beforeEach(function() { + toDoList = new ToDoList(); + toDoItemReader = new ToDoItemReader(); + toDoList._wrapper = document.createElement('div'); + toDoItemReader._wrapper = document.createElement('div'); }); it('will test some pure functions', function() { - // Write any pure function assertion here. - }); + toDoItemReader.start(); + toDoList._listNoteContent[0] = { + title: "This is an pen", + passages: [ + "This is a pencil", + "That is a book" + ] + }; + var onNoteOpenEvent = { + target: { + dataset: { + noteId: 0, + }, + classList: { + contains: function(input){ + return true; + } + } + } + } + toDoList.onNoteOpen(onNoteOpenEvent); + assert.isNotNull(toDoItemReader._wrapper); + }.bind(this)); }); From 27e919c50ba351056186338285fac7c5545de3f7 Mon Sep 17 00:00:00 2001 From: catLee Date: Mon, 9 Nov 2015 18:48:06 +0800 Subject: [PATCH 2/2] 1st modify after HW submit --- homework/content.js | 12 +++++--- homework/list.js | 62 +++++++++++++++++++------------------- homework/test/test-list.js | 5 +-- 3 files changed, 41 insertions(+), 38 deletions(-) diff --git a/homework/content.js b/homework/content.js index 92d85eb..a80c240 100644 --- a/homework/content.js +++ b/homework/content.js @@ -5,11 +5,7 @@ function ToDoItemReader() { } ToDoItemReader.prototype = { start: function() { - window.addEventListener('note-open', function(event) { - var note = event.detail; - this.resetWrapper(); - this.drawNote(note); - }.bind(this)); + window.addEventListener('note-open', this); }, resetWrapper: function() { @@ -30,6 +26,12 @@ ToDoItemReader.prototype = { }.bind(this)); this._wrapper.appendChild(h); this._wrapper.appendChild(buff); + }, + + handleEvent: function(event) { + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); } } document.addEventListener('DOMContentLoaded', function(event) { diff --git a/homework/list.js b/homework/list.js index 6980b95..fcd29f0 100644 --- a/homework/list.js +++ b/homework/list.js @@ -4,32 +4,28 @@ function ToDoList(){ this._wrapper = document.querySelector('#note-list-wrapper'); } ToDoList.prototype = { - start: function() { - this.fetchList(function(data) { - this.updateList(data); - this.drawList(); - this.preloadFirstNote(); - }.bind(this)); - window.addEventListener('click', function(event) { - this.onNoteOpen(event); - }.bind(this)); - }, - - onNoteOpen: function(event) { - if (event.target.classList.contains('note-title')) { - var id = event.target.dataset.noteId; - var content = this._listNoteContent[id]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - }; + start: function(){ + var promise = this.fetchList(); + promise.then( + (data) => { + this.updateList(data); + this.drawList(); + if (this._listNoteContent.length !== 0){ + this.preloadFirstNote(); + } + }); + promise.catch( + (reason) => { + throw reason; + } + ); + window.addEventListener('click',this); }, - + preloadFirstNote: function() { - if (this._listNoteContent.length !== 0) { var content = this._listNoteContent[0]; window.dispatchEvent(new CustomEvent('note-open', { detail: content })); - } }, updateList: function(list) { @@ -54,27 +50,31 @@ ToDoList.prototype = { this._wrapper.appendChild(ul); }, - fetchList: function(afterFetch) { - var xhr = new XMLHttpRequest(); - new Promise(function(resolve, reject){ + fetchList: function() { + return new Promise(function(resolve, reject){ + var xhr = new XMLHttpRequest(); xhr.open('GET', '/demo-list-notes.json', true); xhr.responseType = 'json'; xhr.onreadystatechange = function(e) { // Watch out: we have a mysterious unknown 'this'. if (this.readyState === 4 && this.status === 200) { // The flow ends here. - resolve(); + resolve(this.response); } else if (this.status !== 200 ){ // Ignore error in this case. - reject(); + reject('Status Error: '+this.status); } }; xhr.send(); - }).then(function(){ - afterFetch(xhr.response); - }).catch(function(){ - console.log("fetchList failed.") - }) + }); + }, + + handleEvent: function(event){ + if (event.target.classList.contains('note-title')) { + var id = event.target.dataset.noteId; + var content = this._listNoteContent[id]; + window.dispatchEvent(new CustomEvent('note-open',{ detail: content })); + }; } }; document.addEventListener('DOMContentLoaded', function(event) { diff --git a/homework/test/test-list.js b/homework/test/test-list.js index c1817ba..47c84ca 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -29,7 +29,8 @@ describe('Test > ', function() { } } } - toDoList.onNoteOpen(onNoteOpenEvent); - assert.isNotNull(toDoItemReader._wrapper); + toDoItemReader._wrapper.innerHTML = ""; + toDoList.handleEvent(onNoteOpenEvent); + assert.notEqual(toDoItemReader._wrapper.innerHTML, ""); }.bind(this)); });