MD History: Refactored design for displaying history information

chrome/test/data/webui/md_history/history_item_test.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.define('md_history.history_card_test', function() {
+cr.define('md_history.history_item_test', function() {
+  var TEST_HISTORY_RESULTS = [
+    {"time": "1000000000"},
+    {"time": "100000000"},
+    {"time": "9000020"},
+    {"time": "9000000"},
+    {"time": "1"}
+  ];
+
   function registerTests() {
-    suite('history-card', function() {
+    suite('history-item', function() {
       var element;
 
       suiteSetup(function() {
-        element = document.createElement('history-card');
-        element.historyItems = [
-          {"time": "1000000000"},
-          {"time": "10000000"},
-          {"time": "900000"}
-        ];
-      })
+        element = $('history-list');
+      });
+
+      setup(function() {
+        element.addNewResults(TEST_HISTORY_RESULTS);
+      });
 
       test('basic separator insertion', function(done) {
         flush(function() {
-          // Check that the correct number of time gaps are inserted.
-          var spacers =
-              Polymer.dom(element.root).querySelectorAll('#time-gap-separator');
-          assertEquals(2, spacers.length);
+          // Check that the correct numbegitr of time gaps are inserted.
+          var items =
+              Polymer.dom(element.root).querySelectorAll('history-item');
+
+          assertTrue(items[0].hasTimeGap);
+          assertTrue(items[1].hasTimeGap);
+          assertFalse(items[2].hasTimeGap);
+          assertTrue(items[3].hasTimeGap);
+          assertFalse(items[4].hasTimeGap);
+
           done();
         });
       });
 
-      test('separator insertion when items change but item list length stays ' +
-          'the same', function(done) {
-        element.set('historyItems', [{"time": "900000"},
-                                     {"time": "900000"},
-                                     {"time": "900000"}]);
+      test('separator insertion after deletion', function(done) {
+        flush(function() {
+          items = Polymer.dom(element.root).querySelectorAll('history-item');
 
-        flush(function() {
-          var items =
-            Polymer.dom(element.root).querySelectorAll('history-item');
-          var spacers =
-            Polymer.dom(element.root).querySelectorAll('#time-gap-separator');
+          element.set('historyData.3.selected', true);
+          items[3].onCheckboxSelected_();
 
-          assertEquals('900000', items[0].timestamp_);
-          assertEquals('900000', items[1].timestamp_);
-          assertEquals('900000', items[2].timestamp_);
+          element.removeDeletedHistory(1);
+          assertEquals(element.historyData.length, 4);
 
-          // Note that the spacers aren't actually removed, are just set to:
-          // display: none;
-          for (var i = 0; i < spacers.length; i++) {
-            assertEquals(spacers[i].style.display, 'none');
-          }
+          // Checks that a new time gap separator has been inserted.
+          assertTrue(element.historyData[2].needsTimeGap);
+          assertTrue(items[2].hasTimeGap);
+
+          element.set('historyData.3.selected', true);
+          items[3].onCheckboxSelected_();
+          element.removeDeletedHistory(1);
+
+          // Checks time gap separator is removed.
+          assertFalse(element.historyData[2].needsTimeGap);
+          assertFalse(items[2].hasTimeGap);
           done();
         });
       });
+
+      teardown(function() {
+        element.historyData = [];
+      });
     });
   }
   return {
     registerTests: registerTests
   };
 });