Add basic parsing logic for html markup

Author: sbstjn

.karma.js

@@ -1,9 +1,12 @@
+browsers = [
+  "Chrome"
+  // "PhantomJS"
+];
+
 module.exports = function(config) {
   config.set({
     basePath: '',
-    browsers: [
-      "PhantomJS"
-    ],
+    browsers: browsers,
     frameworks: [
       'browserify',
       'jasmine'

src/bubble.js

@@ -7,4 +7,16 @@ export default class Bubble {
       end: end
     };
   }
+
+  Label() {
+    return this.label;
+  }
+
+  Start() {
+    return this.date.start;
+  }
+
+  End() {
+    return this.date.end;
+  }
 }

src/bubble.spec.js

@@ -4,11 +4,11 @@ describe('Bubble', function () {
   const b = new Bubble(1, 2, "label");
 
   it('should have a start and end value', () => {
-    expect(b.date.start).toEqual(1);
-    expect(b.date.end).toEqual(2);
+    expect(b.Start()).toEqual(1);
+    expect(b.End()).toEqual(2);
   });
 
   it("should have a label", () => {
-    expect(b.label).toEqual("label")
+    expect(b.Label()).toEqual("label")
   })
 });

src/parser.js

@@ -0,0 +1,35 @@
+import Bubble from './bubble.js'
+
+export default class Parser {
+  constructor() {
+
+  }
+
+  parse(list) {
+    if (!list.classList.contains('timesheet')) {
+      return [];
+    }
+
+    var items = list.querySelectorAll('.timesheet-item');
+    if (items.length === 0) {
+      return [];
+    }
+
+    var data = []
+    for (var i = 0, m = items.length; i < m; i++) {
+      var item = items[i];
+
+      var dateStart = item.querySelector('.timesheet-item--date-start')
+        , dateEnd = item.querySelector('.timesheet-item--date-end')
+        , label = item.querySelector('.timesheet-item--label');
+
+      data.push(new Bubble(
+        dateStart ? dateStart.innerHTML : null,
+        dateEnd ? dateEnd.innerHTML : null,
+        label ? label.innerHTML : null
+      ))
+    }
+
+    return data;
+  }
+}

src/parser.spec.js

@@ -0,0 +1,102 @@
+import Parser from '../src/parser.js';
+
+var toDOM = function(text) {
+  var div = document.createElement('div');
+  div.innerHTML = text;
+
+  return div.childNodes[1];
+}
+
+describe('Parser', function () {
+  const p = new Parser();
+
+  it('should return an empty array for empty lists', () => {
+    var input = toDOM(`
+      <ul>
+      </ul>
+    `);
+
+    expect(p.parse(input)).toEqual([]);
+  });
+
+  it('should return an empty array for lists without timesheet class', () => {
+    var input = toDOM(`
+      <ul>
+        <li>example</li>
+      </ul>
+    `);
+
+    expect(p.parse(input)).toEqual([]);
+  });
+
+  it('should return an empty array for lists with timesheet class but without timesheet-item elements', () => {
+    var input = toDOM(`
+      <ul class="timesheet">
+        <li>example</li>
+      </ul>
+    `);
+
+    expect(p.parse(input)).toEqual([]);
+  });
+
+  it('should return an array for lists with timesheet class and timesheet-item elements', () => {
+    var input = toDOM(`
+      <ul class="timesheet">
+        <li class="timesheet-item">
+          <span class="timesheet-item--date-start">2015-01-01</span>
+          <span class="timesheet-item--date-end">2015-01-12</span>
+          <span class="timesheet-item--label">example</span>
+        </li>
+      </ul>
+    `);
+
+    expect(p.parse(input).length).toEqual(1);
+  });
+
+  it('should return an array of bubbles for lists with timesheet class and timesheet-item elements', () => {
+    var input = toDOM(`
+      <ul class="timesheet">
+        <li class="timesheet-item">
+          <span class="timesheet-item--date-start">2015-01-01</span>
+          <span class="timesheet-item--date-end">2015-01-12</span>
+          <span class="timesheet-item--label">example-0</span>
+        </li>
+        <li class="timesheet-item">
+          <span class="timesheet-item--date-end">2015-02-12</span>
+          <span class="timesheet-item--label">example-1</span>
+        </li>
+        <li class="timesheet-item">
+          <span class="timesheet-item--date-start">2015-03-01</span>
+          <span class="timesheet-item--label">example-2</span>
+        </li>
+        <li class="timesheet-item">
+          <span class="timesheet-item--date-start">2015-04-01</span>
+          <span class="timesheet-item--date-end">2015-04-12</span>
+        </li>
+      </ul>
+    `);
+
+    var output = p.parse(input);
+    expect(output.length).toEqual(4);
+
+    var item = output.shift();
+    expect(item.Start()).toEqual('2015-01-01')
+    expect(item.End()).toEqual('2015-01-12')
+    expect(item.Label()).toEqual('example-0')
+
+    var item = output.shift();
+    expect(item.Start()).toEqual(null)
+    expect(item.End()).toEqual('2015-02-12')
+    expect(item.Label()).toEqual("example-1")
+
+    var item = output.shift();
+    expect(item.Start()).toEqual("2015-03-01")
+    expect(item.End()).toEqual(null)
+    expect(item.Label()).toEqual("example-2")
+
+    var item = output.shift();
+    expect(item.Start()).toEqual("2015-04-01")
+    expect(item.End()).toEqual("2015-04-12")
+    expect(item.Label()).toEqual(null)
+  });
+});