PageRenderTime 47ms CodeModel.GetById 21ms RepoModel.GetById 0ms app.codeStats 0ms

/common/static/common/js/spec/components/list_spec.js

https://gitlab.com/unofficial-mirrors/edx-platform
JavaScript | 90 lines | 83 code | 7 blank | 0 comment | 1 complexity | 4af3680ecf669f03e9e29a6cc6f28b9d MD5 | raw file
  1. define(['jquery', 'backbone', 'underscore', 'common/js/components/views/list'],
  2. function($, Backbone, _, ListView) {
  3. 'use strict';
  4. describe('ListView', function() {
  5. var Model = Backbone.Model.extend({
  6. defaults: {
  7. name: 'default name'
  8. }
  9. }),
  10. View = Backbone.View.extend({
  11. tagName: 'div',
  12. className: 'my-view',
  13. template: _.template('<p>Name: "<%- name %>"</p>'),
  14. render: function() {
  15. this.$el.html(this.template(this.model.attributes));
  16. return this;
  17. }
  18. }),
  19. Collection = Backbone.Collection.extend({
  20. model: Model
  21. }),
  22. expectListNames = function(names) {
  23. expect(listView.$('.my-view').length).toBe(names.length);
  24. _.each(names, function(name, index) {
  25. expect($(listView.$('.my-view')[index]).text()).toContain(name);
  26. });
  27. },
  28. listView;
  29. beforeEach(function() {
  30. setFixtures('<div class="list"></div>');
  31. listView = new ListView({
  32. el: $('.list'),
  33. collection: new Collection(
  34. [{name: 'first model'}, {name: 'second model'}, {name: 'third model'}]
  35. ),
  36. itemViewClass: View
  37. });
  38. listView.render();
  39. });
  40. it('renders itself', function() {
  41. expectListNames(['first model', 'second model', 'third model']);
  42. });
  43. it('does not render subviews for an empty collection', function() {
  44. listView.collection.set([]);
  45. expectListNames([]);
  46. });
  47. it('re-renders itself when the collection changes', function() {
  48. expectListNames(['first model', 'second model', 'third model']);
  49. listView.collection.set([{name: 'foo'}, {name: 'bar'}, {name: 'third model'}]);
  50. expectListNames(['foo', 'bar', 'third model']);
  51. listView.collection.reset([{name: 'baz'}, {name: 'bar'}, {name: 'quux'}]);
  52. expectListNames(['baz', 'bar', 'quux']);
  53. });
  54. it('re-renders itself when items are added to the collection', function() {
  55. expectListNames(['first model', 'second model', 'third model']);
  56. listView.collection.add({name: 'fourth model'});
  57. expectListNames(['first model', 'second model', 'third model', 'fourth model']);
  58. listView.collection.add({name: 'zeroth model'}, {at: 0});
  59. expectListNames(['zeroth model', 'first model', 'second model', 'third model', 'fourth model']);
  60. listView.collection.add({name: 'second-and-a-half model'}, {at: 3});
  61. expectListNames([
  62. 'zeroth model', 'first model', 'second model',
  63. 'second-and-a-half model', 'third model', 'fourth model'
  64. ]);
  65. });
  66. it('re-renders itself when items are removed from the collection', function() {
  67. listView.collection.reset([{name: 'one'}, {name: 'two'}, {name: 'three'}, {name: 'four'}]);
  68. expectListNames(['one', 'two', 'three', 'four']);
  69. listView.collection.remove(listView.collection.at(0));
  70. expectListNames(['two', 'three', 'four']);
  71. listView.collection.remove(listView.collection.at(1));
  72. expectListNames(['two', 'four']);
  73. listView.collection.remove(listView.collection.at(1));
  74. expectListNames(['two']);
  75. listView.collection.remove(listView.collection.at(0));
  76. expectListNames([]);
  77. });
  78. it('removes old views', function() {
  79. listView.collection.reset(null);
  80. expect(listView.itemViews).toEqual([]);
  81. });
  82. });
  83. });