vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

209 lines
5.6 KiB

  1. var assert = require('assert');
  2. var vis = require('../dist/vis');
  3. var moment = vis.moment;
  4. var DataSet = vis.DataSet;
  5. var DataView = vis.DataView;
  6. // TODO: test the source code immediately, but this is ES6
  7. // TODO: improve DataView tests, split up in one test per function
  8. describe('DataView', function () {
  9. it('should work', function () {
  10. var groups = new DataSet();
  11. // add items with different groups
  12. groups.add([
  13. {id: 1, content: 'Item 1', group: 1},
  14. {id: 2, content: 'Item 2', group: 2},
  15. {id: 3, content: 'Item 3', group: 2},
  16. {id: 4, content: 'Item 4', group: 1},
  17. {id: 5, content: 'Item 5', group: 3}
  18. ]);
  19. var group2 = new DataView(groups, {
  20. filter: function (item) {
  21. return item.group == 2;
  22. }
  23. });
  24. // test getting the filtered data
  25. assert.deepEqual(group2.get(), [
  26. {id: 2, content: 'Item 2', group: 2},
  27. {id: 3, content: 'Item 3', group: 2}
  28. ]);
  29. assert.equal(group2.length, 2);
  30. // test filtering the view contents
  31. assert.deepEqual(group2.get({
  32. filter: function (item) {
  33. return item.id > 2;
  34. }
  35. }), [
  36. {id: 3, content: 'Item 3', group: 2}
  37. ]);
  38. // test event subscription
  39. var groupsTriggerCount = 0;
  40. groups.on('*', function () {
  41. groupsTriggerCount++;
  42. });
  43. var group2TriggerCount = 0;
  44. group2.on('*', function () {
  45. group2TriggerCount++;
  46. });
  47. groups.update({id:2, content: 'Item 2 (changed)'});
  48. assert.equal(groupsTriggerCount, 1);
  49. assert.equal(group2TriggerCount, 1);
  50. assert.equal(group2.length, 2);
  51. groups.update({id:5, content: 'Item 5 (changed)'});
  52. assert.equal(groupsTriggerCount, 2);
  53. assert.equal(group2TriggerCount, 1);
  54. assert.equal(group2.length, 2);
  55. // detach the view from groups
  56. group2.setData(null);
  57. assert.equal(groupsTriggerCount, 2);
  58. assert.equal(group2TriggerCount, 2);
  59. assert.equal(group2.length, 0);
  60. groups.update({id:2, content: 'Item 2 (changed again)'});
  61. assert.equal(groupsTriggerCount, 3);
  62. assert.equal(group2TriggerCount, 2);
  63. // test updating of .length property
  64. group2.setData(groups);
  65. assert.equal(group2.length, 2);
  66. // add a new item
  67. groups.add({id: 6, content: 'Item 6', group: 2});
  68. assert.equal(group2.length, 3);
  69. // change an items group to 2
  70. groups.update({id: 4, group: 2});
  71. assert.equal(group2.length, 4);
  72. // change an items group to 1
  73. groups.update({id: 4, group: 1});
  74. assert.equal(group2.length, 3);
  75. // remove an item
  76. groups.remove(2);
  77. assert.equal(group2.length, 2);
  78. // remove all items
  79. groups.clear();
  80. assert.equal(group2.length, 0);
  81. });
  82. it('should refresh a DataView with filter', function () {
  83. var data = new DataSet([
  84. {id:1, value:2},
  85. {id:2, value:4},
  86. {id:3, value:7}
  87. ]);
  88. var threshold = 5;
  89. // create a view. The view has a filter with a dynamic property `threshold`
  90. var view = new DataView(data, {
  91. filter: function (item) {
  92. return item.value < threshold;
  93. }
  94. });
  95. var added, updated, removed;
  96. view.on('add', function (event, props) {added = added.concat(props.items)});
  97. view.on('update', function (event, props) {updated = updated.concat(props.items)});
  98. view.on('remove', function (event, props) {removed = removed.concat(props.items)});
  99. assert.deepEqual(view.get(), [
  100. {id:1, value:2},
  101. {id:2, value:4}
  102. ]);
  103. // change the threshold to 3
  104. added = [];
  105. updated = [];
  106. removed = [];
  107. threshold = 3;
  108. view.refresh();
  109. assert.deepEqual(view.get(), [{id:1, value:2}]);
  110. assert.deepEqual(added, []);
  111. assert.deepEqual(updated, []);
  112. assert.deepEqual(removed, [2]);
  113. // change threshold to 8
  114. added = [];
  115. updated = [];
  116. removed = [];
  117. threshold = 8;
  118. view.refresh();
  119. assert.deepEqual(view.get(), [
  120. {id:1, value:2},
  121. {id:2, value:4},
  122. {id:3, value:7}
  123. ]);
  124. assert.deepEqual(added, [2, 3]);
  125. assert.deepEqual(updated, []);
  126. assert.deepEqual(removed, []);
  127. });
  128. it('should pass data of changed items when updating a DataSet', function () {
  129. var data = new DataSet([
  130. {id: 1, title: 'Item 1', group: 1},
  131. {id: 2, title: 'Item 2', group: 2},
  132. {id: 3, title: 'Item 3', group: 2}
  133. ]);
  134. var view = new DataView(data, {
  135. filter: function (item) {
  136. return item.group === 2;
  137. }
  138. });
  139. var dataUpdates = [];
  140. var viewUpdates = [];
  141. data.on('update', function (event, properties, senderId) {
  142. dataUpdates.push([event, properties]);
  143. });
  144. view.on('update', function (event, properties, senderId) {
  145. viewUpdates.push([event, properties]);
  146. });
  147. // make a change not affecting the DataView
  148. data.update({id: 1, title: 'Item 1 (changed)'});
  149. assert.deepEqual(dataUpdates, [
  150. ['update', {
  151. items: [1],
  152. data: [{id: 1, title: 'Item 1 (changed)'}],
  153. oldData: [{"group": 1, "id": 1, "title": "Item 1"}]
  154. }]
  155. ]);
  156. assert.deepEqual(viewUpdates, []);
  157. // make a change affecting the DataView
  158. data.update({id: 2, title: 'Item 2 (changed)'});
  159. assert.deepEqual(dataUpdates, [
  160. ['update', {
  161. items: [1],
  162. data: [{id: 1, title: 'Item 1 (changed)'}],
  163. oldData: [{"group": 1, "id": 1, "title": "Item 1"}]
  164. }],
  165. ['update', {
  166. items: [2],
  167. data: [{id: 2, title: 'Item 2 (changed)'}],
  168. oldData: [{"group": 2, "id": 2, "title": "Item 2"}]
  169. }]
  170. ]);
  171. assert.deepEqual(viewUpdates, [
  172. ['update', {items: [2], data: [{id: 2, title: 'Item 2 (changed)'}],
  173. oldData: [{"group": 2, "id": 2, "title": "Item 2"}]}]
  174. ]);
  175. });
  176. });