From 68c6e8d7187247b254f2c787bfa0e4b871a580ec Mon Sep 17 00:00:00 2001 From: dodget Date: Wed, 23 Oct 2019 16:17:36 -0400 Subject: [PATCH 1/3] Add a few more tests for methods. --- SpecRunner.html | 2 ++ js/TimeExplorer.js | 82 +++++++++++++++--------------------------- js/TimeExplorerSpec.js | 27 ++++++++++++++ 3 files changed, 58 insertions(+), 53 deletions(-) diff --git a/SpecRunner.html b/SpecRunner.html index 913c327..eecbd0b 100644 --- a/SpecRunner.html +++ b/SpecRunner.html @@ -7,6 +7,8 @@ + + diff --git a/js/TimeExplorer.js b/js/TimeExplorer.js index 0073fee..b0947fb 100644 --- a/js/TimeExplorer.js +++ b/js/TimeExplorer.js @@ -113,9 +113,7 @@ function testFilter(self) { * @param {string} displayDate - String representing date as it should be displayed */ function GetDisplayTitle(row,displayDate) { - var output = "

"+row['Headline']+"

"; - output += "

"+displayDate+"

" - return output; + return "

" + row['Headline'] + "

"+displayDate+"

"; } /** @@ -273,12 +271,7 @@ class TimeExplorer { } get_tag_col() { - var url_params = get_url_params(); - if ('tag_col' in url_params) { - return url_params['tag_col']; - } else { - return 'Tags'; - } + return 'tag_col' in get_url_params() ? url_params['tag_col'] : 'Tags'; } /** @@ -344,9 +337,8 @@ class TimeExplorer { * */ create_timeline(options) { - var container = document.getElementById('ft-visualization'); - var timeline = new vis.Timeline(container,options.timelineOptions); - return timeline; + let container = document.getElementById('ft-visualization'); + return new vis.Timeline(container,options.timelineOptions); } /** @@ -559,12 +551,10 @@ class TimeExplorer { * @uses get_sheet_data */ get_all_sheet_data() { - var self = this; - var promises = []; - for (var i = 0; i < this.sheet_ids.length; i++) { - var sheet_id = this.sheet_ids[i]; - promises.push(this.get_sheet_data(sheet_id)); - }; + let self = this; + const promises = this.sheet_id.map( (id) => { + return this.get_sheet_data(id); + }); return $.when.apply($,promises); }; @@ -764,28 +754,24 @@ class TimeExplorer { * Uses groups from Timeline JS to color the timeline. */ set_groups(self) { - var groups = []; - for (var i = 0; i < self.items.length; i++) { - if (self.items[i]['sheet_group']) { - var group = self.items[i]['sheet_group']; - var slug = self.slugify(group); - if ($.inArray(group,groups) == -1) { - groups.push(group); - } - self.items[i]['className'] = slug; + let groups = self.items.map( (item)=> { + if (item['sheet_group']) { + item['className'] = self.slugify(item['sheet_group']); + return item['sheet_group']; } else { - self.items[i]['className'] = "Ungrouped"; - self.items[i]['group_slug'] = "Ungrouped"; - if ($.inArray('Ungrouped',groups) == -1) { - groups.push("Ungrouped"); - } + item['className'] = "Ungrouped"; + item['group_slug'] = "Ungrouped"; + return "Ungrouped"; } - } + }); + groups.filter(self.onlyUnique); groups.sort(); self.setup_group_ui(self, groups); return groups; } + + /** * Sets up color scheme and filters for groups. */ @@ -834,19 +820,15 @@ class TimeExplorer { * Sets up tags to be used as filters */ set_tags(self) { - var tags = []; - for (var i = 0; i < self.items.length; i++) { - if (self.items[i]['tags']) { - var these_tags = self.items[i]['tags']; - var slugs = these_tags.map(self.slugify); - tags = tags.concat(these_tags); - if (self.items[i]['className']) { - self.items[i]['className'] = self.items[i]['className'] + ' ' + slugs.join(' '); - } else { - self.items[i]['className'] = slugs.join(' '); - } + let tags = []; + self.items.forEach( (item)=> { + if (item['tags']) { + let slugs = item['tags'].map(self.slugify); + let concatter = item['classname'] ? item['classname'] : ''; + item['classname'] = concatter + ' ' + slugs.join(' '); + tags = tags.concat(item['tags']); } - } + }); tags = tags.filter( self.onlyUnique ); tags.sort(); self.setup_filters(self,tags,"Tags"); @@ -1058,14 +1040,8 @@ class TimeExplorer { * @param {string} text - the text to be made into a slug. */ slugify(text) { - if (typeof(text) == "string") { - var output = text.trim() - var pattern = /[\s~!@$%^&*()+=,./';:"?><[\] \\{}|`#]+/g - output = output.replace(pattern,'_') - return output - } else { - return ""; - } + const pattern = /[\s~!@$%^&*()+=,./';:"?><[\] \\{}|`#]+/g; + return typeof(text) == "string" ? text.trim().replace(pattern,'_') : ""; } /** diff --git a/js/TimeExplorerSpec.js b/js/TimeExplorerSpec.js index d57caa0..b34021c 100644 --- a/js/TimeExplorerSpec.js +++ b/js/TimeExplorerSpec.js @@ -38,6 +38,14 @@ describe('Testing the functions of the TimeExplorer file', ()=> { ids.forEach( id => expect(plainId(id)).toEqual("m1id1sgreat")); }) + it('GetDisplayTitle should return html with title', ()=> { + const row1 = { + 'Headline': "HEADLINE", + } + const displayDate = "July 6th"; + expect(GetDisplayTitle(row1, displayDate)).toBe('

HEADLINE

July 6th

'); + }) + it('GetDisplayDate should return a formated timeframe', ()=> { const row1 = { 'Month': 11, @@ -106,5 +114,24 @@ describe('Testing the TimeExplorer class', () => { expect(slug).toEqual("Let_s_make_a_slug"); }) + it('TimeExplorer.set_tags() return all tags', ()=> { + explorer = new_explorer() + explorer.items = [{'tags': ["Joe"]}, {'tags': ["Mary", "Liam"]}]; + const tag_return = explorer.set_tags(explorer) + expect(tag_return).toEqual([ 'Joe', 'Liam', 'Mary' ]); + }) + + it('TimeExplorer.set_groups() return all groups', ()=> { + explorer = new_explorer() + explorer.items = [{'sheet_group': 1}, {'sheet_group': 2}]; + const group_return = explorer.set_groups(explorer) + expect(group_return).toEqual([1,2]); + }) + + + + + + }) From 1ad36738a237bafe2dddc0f0814797c442bbf5ad Mon Sep 17 00:00:00 2001 From: dodget Date: Fri, 25 Oct 2019 08:33:00 -0400 Subject: [PATCH 2/3] Add more testing and refactoring. --- js/TimeExplorer.js | 25 +++++++------------ js/TimeExplorerSpec.js | 56 +++++++++++++++++++++++++++++++++++++++--- 2 files changed, 62 insertions(+), 19 deletions(-) diff --git a/js/TimeExplorer.js b/js/TimeExplorer.js index b0947fb..e9478ba 100644 --- a/js/TimeExplorer.js +++ b/js/TimeExplorer.js @@ -915,23 +915,16 @@ class TimeExplorer { */ set_filters(slug, self) { // Set Group filters - var activeGroups = []; - var groupCheckboxes = $(".Groups input.filter-checkbox"); - for (var i = 0; i < groupCheckboxes.length; i++) { - if (groupCheckboxes[i].checked) { - activeGroups.push(groupCheckboxes[i].value); - } - } - self.filters.activeGroups = activeGroups; + const groupCheckboxes = $(".Groups input.filter-checkbox"); + self.filters.activeGroups = Array.prototype.map.call(groupCheckboxes, (box)=> { + if (box.checked) {return box.value;} + }); // Set Tag filters - var activeTags = []; - var tagCheckboxes = $(".Tags input.filter-checkbox"); - for (var i = 0; i < tagCheckboxes.length; i++) { - if (tagCheckboxes[i].checked) { - activeTags.push(tagCheckboxes[i].value); - } - } - self.filters.activeTags = activeTags; + const tagCheckboxes = $(".Tags input.filter-checkbox"); + self.filters.activeTags = Array.prototype.map.call(tagCheckboxes, (box)=> { + if(box.checked) {return box.value;} + }); + if ($("#tag-options").length > 0) { if ($("#tag-option-any")[0].checked) { self.filters.tagOptions = "any"; diff --git a/js/TimeExplorerSpec.js b/js/TimeExplorerSpec.js index b34021c..66a25ab 100644 --- a/js/TimeExplorerSpec.js +++ b/js/TimeExplorerSpec.js @@ -74,6 +74,7 @@ describe('Testing the functions of the TimeExplorer file', ()=> { }) describe('Testing the TimeExplorer class', () => { + let el; let div; const api_key = "AIzaSyCA8GIsjw-QL-CC1v6fgDWmDyyhRM_ZESE"; const new_explorer = () => { @@ -81,14 +82,18 @@ describe('Testing the TimeExplorer class', () => { } beforeEach( ()=> { + el = document.createElement('html'); div = document.createElement('div'); div.setAttribute("id", "timeline"); - document.body.appendChild(div); + document.body.appendChild(el); + el.appendChild(div); }); afterEach( ()=> { div.remove(); div = null; + el.remove(); + el = null; }); it('TimeExplorer should have options after initialization', ()=> { @@ -128,10 +133,55 @@ describe('Testing the TimeExplorer class', () => { expect(group_return).toEqual([1,2]); }) + it('TimeExplorer.set_filters() set filters some things checked', ()=> { + // groups + group = addTestElement('div', 'Groups'); + inp1 = addTestElement('input', 'filter-checkbox', 'Event', true); + inp2 = addTestElement('input', 'filter-checkbox', 'Thing', true); + group.appendChild(inp1); + group.appendChild(inp2); + + //tags + tag = addTestElement('div', 'Tags'); + inp3 = addTestElement('input', 'filter-checkbox', 'TAG', true); + inp4 = addTestElement('input', 'filter-checkbox', 'Another', true); + tag.appendChild(inp3); + tag.appendChild(inp4); + + // attach them to the html + el.appendChild(group); + el.appendChild(tag); + explorer = new_explorer() + explorer.set_filters('none', explorer) + expect(explorer.filters.tagOptions).toBe('any'); + expect(explorer.filters.activeGroups).toEqual([ 'Event', 'Thing' ]); + expect(explorer.filters.activeTags).toEqual([ 'TAG', 'Another' ]); + + // remove it all + inp1.remove(); + inp2.remove(); + inp3.remove(); + inp4.remove(); + group.remove(); + tag.remove(); + }) +}) - -}) +// Helper function to set up an element to add for testing +const addTestElement = (elem, cls, val, checked) => { + item = document.createElement(elem); + if(cls) { + item.setAttribute("class", cls); + } + if(val) { + item.setAttribute("value", val); + } + if(checked) { + item.setAttribute("checked", true); + } + return item; +} From 08744574690bb4459087389021c2a69d2510fddf Mon Sep 17 00:00:00 2001 From: dodget Date: Fri, 25 Oct 2019 08:42:01 -0400 Subject: [PATCH 3/3] Fix typo. --- js/TimeExplorer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/TimeExplorer.js b/js/TimeExplorer.js index e9478ba..c01f558 100644 --- a/js/TimeExplorer.js +++ b/js/TimeExplorer.js @@ -552,7 +552,7 @@ class TimeExplorer { */ get_all_sheet_data() { let self = this; - const promises = this.sheet_id.map( (id) => { + const promises = this.sheet_ids.map( (id) => { return this.get_sheet_data(id); }); return $.when.apply($,promises);