Specs/Request/Request.HTML.js

   1 /*
   2 ---
   3 name: Request.HTML
   4 requires: ~
   5 provides: ~
   6 ...
   7 */
   8
   9 describe('Request.HTML', function(){
  10
  11         beforeEach(function(){
  12                 this.spy = sinon.spy();
  13                 this.xhr = sinon.useFakeXMLHttpRequest();
  14                 var requests = this.requests = [];
  15                 this.xhr.onCreate = function(xhr){
  16                         requests.push(xhr);
  17                 };
  18         });
  19
  20         afterEach(function(){
  21                 this.xhr.restore();
  22         });
  23
  24         it('should create an ajax request and pass the right arguments to the onComplete event', function(){
  25
  26                 var response = '<body><img><div><span>res&amp;ponsé</span></div><script>___SPEC___=5;</script></body>';
  27
  28                 this.spy.identity = 'Request.HTML onComplete';
  29                 var request = new Request.HTML({
  30                         url: '../Helpers/request.php',
  31                         onComplete: this.spy
  32                 }).send();
  33
  34                 this.requests[0].respond(200, {'Content-Type': 'text/html'}, response);
  35
  36                 expect(this.spy.called).to.equal(true);
  37
  38                 // checks arguments order
  39                 expect(this.spy.calledWith(request.response.tree, request.response.elements, request.response.html, request.response.javascript)).to.equal(true);
  40                 var onCompleteArgs = this.spy.args[0];
  41                 expect(onCompleteArgs[0][0].nodeName).to.equal('IMG');
  42                 expect(onCompleteArgs[0][1].nodeName).to.equal('DIV');
  43                 expect(onCompleteArgs[1][2].nodeName).to.equal('SPAN');
  44                 expect(onCompleteArgs[2]).to.equal('<img><div><span>res&amp;ponsé</span></div>');
  45                 expect(onCompleteArgs[3].trim()).to.equal('___SPEC___=5;');
  46                 expect(___SPEC___).to.equal(5);
  47
  48         });
  49
  50         xdescribe('(async 1)', function(){
  51
  52                 beforeEach(function(done){
  53                         this.onComplete = sinon.spy(function(){ done(); });
  54                         this.request = new Request.HTML({
  55                                 url: '../Helpers/request.php',
  56                                 onComplete: this.onComplete
  57                         }).send({data: {
  58                                 '__response': '<tr><td>text</td></tr>', '__type': 'html'
  59                         }});
  60                 });
  61
  62                 it('should create an ajax request and correctly generate the tree response from a tr', function(){
  63                         expect(this.onComplete.called).to.equal(true);
  64
  65                         var onCompleteArgs = this.onComplete.args[0];
  66
  67                         expect(onCompleteArgs[0][0].nodeName).to.equal('TR');
  68                         expect(onCompleteArgs[1][1].nodeName).to.equal('TD');
  69                         expect(onCompleteArgs[2]).to.equal('<tr><td>text</td></tr>');
  70                 }, 800);
  71
  72         });
  73
  74         xdescribe('(async 2)', function(){
  75
  76                 beforeEach(function(done){
  77                         this.onComplete = sinon.spy(function(){ done(); });
  78                         this.request = new Request.HTML({
  79                                 url: '../Helpers/request.php',
  80                                 onComplete: this.onComplete
  81                         }).send({data: {
  82                                 '__response': '<option>1</option><option>2</option><option>3</option>', '__type': 'html'
  83                         }});
  84                 });
  85
  86                 it('should create an ajax request and correctly generate the tree response from options', function(){
  87                         expect(this.onComplete.called).to.equal(true);
  88
  89                         var onCompleteArgs = this.onComplete.args[0];
  90
  91                         expect(onCompleteArgs[0].length).to.equal(3);
  92                         expect(onCompleteArgs[1].length).to.equal(3);
  93                         expect(onCompleteArgs[2]).to.equal('<option>1</option><option>2</option><option>3</option>');
  94                         expect(onCompleteArgs[3]).to.not.be.ok();
  95
  96                         var firstOption = onCompleteArgs[0][0];
  97                         expect(firstOption.tagName).to.equal('OPTION');
  98                         expect(firstOption.innerHTML).to.equal('1');
  99                 }, 800);
 100
 101         });
 102
 103         it('should create an ajax request and correctly update an element with the response', function(){
 104
 105                 var response = '<span>text</span>';
 106
 107                 this.spy.identity = 'Request.HTML onComplete update element';
 108                 new Element('div', {'id': 'update', 'html': '<div>some</div>'}).inject(document.body);
 109                 this.request = new Request.HTML({
 110                         url: '../Helpers/request.php',
 111                         onComplete: this.spy,
 112                         update: 'update'
 113                 }).send();
 114
 115                 this.requests[0].respond(200, {'Content-Type': 'text/html'}, response);
 116
 117                 expect(this.spy.called).to.equal(true);
 118
 119                 var update = $('update');
 120                 expect(update.getChildren().length).to.equal(1);
 121                 expect(update.getFirst().get('tag')).to.equal('span');
 122                 expect(update.getFirst().get('text')).to.equal('text');
 123                 update.dispose();
 124         });
 125
 126         it('should create an ajax request and correctly append the response to an element', function(){
 127
 128                 var response = '<div><span>text</span><p>paragraph</p></div>';
 129
 130                 new Element('div', {'id': 'update', 'html': '<div>some</div>'}).inject(document.body);
 131                 this.spy.identity = 'Request.HTML onComplete ajax append';
 132                 this.request = new Request.HTML({
 133                         url: '../Helpers/request.php',
 134                         onComplete: this.spy,
 135                         append: 'update'
 136                 }).send();
 137
 138                 this.requests[0].respond(200, {'Content-Type': 'text/html'}, response);
 139
 140                 expect(this.spy.called).to.equal(true);
 141
 142                 var update = $('update');
 143                 expect(update.getChildren().length).to.equal(2);
 144                 expect(update.getFirst().get('tag')).to.equal('div');
 145                 expect(update.getFirst().get('text')).to.equal('some');
 146                 var div = update.getFirst().getNext();
 147                 expect(div.get('tag')).to.equal('div');
 148                 expect(div.getFirst().get('tag')).to.equal('span');
 149                 expect(div.getFirst().get('text')).to.equal('text');
 150                 expect(div.getLast().get('tag')).to.equal('p');
 151                 expect(div.getLast().get('text')).to.equal('paragraph');
 152                 update.dispose();
 153
 154         });
 155
 156         it('should create an ajax request and correctly filter it by the passed selector', function(){
 157
 158                 var response = '<span>text</span><a>aaa</a>';
 159
 160                 this.spy.identity = 'Request.HTML onComplete filter';
 161                 var request = new Request.HTML({
 162                         url: '../Helpers/request.php',
 163                         onComplete: this.spy,
 164                         filter: 'a'
 165                 }).send();
 166
 167                 this.requests[0].respond(200, {'Content-Type': 'text/html'}, response);
 168                 expect(this.spy.called).to.equal(true);
 169
 170                 var onCompleteArgs = this.spy.args[0];
 171                 expect(onCompleteArgs[0].length).to.equal(1);
 172                 expect(onCompleteArgs[0][0].get('tag')).to.equal('a');
 173                 expect(onCompleteArgs[0][0].get('text')).to.equal('aaa');
 174
 175         });
 176
 177         it('should create an ajax request that filters the response and updates the target', function(){
 178
 179                 var response = '<div>text<p><a>a link</a></p></div>';
 180
 181                 this.spy.identity = 'Request.HTML onComplete update and filter';
 182                 new Element('div', {'id': 'update', 'html': '<div>some</div>'}).inject(document.body);
 183                 this.request = new Request.HTML({
 184                         url: '../Helpers/request.php',
 185                         onComplete: this.spy,
 186                         update: 'update',
 187                         filter: 'a'
 188                 }).send();
 189
 190                 this.requests[0].respond(200, {'Content-Type': 'text/html'}, response);
 191                 expect(this.spy.called).to.equal(true);
 192
 193                 var update = $('update');
 194                 expect(update.getChildren().length).to.equal(1);
 195                 expect(update.getFirst().get('tag')).to.equal('a');
 196                 expect(update.getFirst().get('text')).to.equal('a link');
 197                 update.dispose();
 198
 199         });
 200
 201         it('should create an ajax request that filters the response and appends to the target', function(){
 202
 203                 var response = '<div>text<p><a>a link</a></p></div>';
 204
 205                 new Element('div', {'id': 'update', 'html': '<div>some</div>'}).inject(document.body);
 206                 this.spy.identity = 'Request.HTML onComplete append and filter';
 207                 this.request = new Request.HTML({
 208                         url: '../Helpers/request.php',
 209                         onComplete: this.spy,
 210                         append: 'update',
 211                         filter: 'a'
 212                 }).send();
 213
 214                 this.requests[0].respond(200, {'Content-Type': 'text/html'}, response);
 215                 expect(this.spy.called).to.equal(true);
 216
 217                 var update = $('update');
 218                 expect(update.getChildren().length).to.equal(2);
 219                 expect(update.get('html').toLowerCase()).to.equal('<div>some</div><a>a link</a>');
 220                 update.dispose();
 221
 222         });
 223
 224         it('should create an ajax request through Element.load', function(done){
 225
 226                 var element = new Element('div');
 227
 228                 var response = 'hello world!';
 229
 230                 this.spy.identity = 'Request.HTML onComplete load';
 231                 var request = element.set('load', {
 232                         url: '../Helpers/request.php',
 233                         onComplete: this.spy
 234                 }).get('load');
 235
 236                 expect(instanceOf(request, Request.HTML)).to.equal(true);
 237
 238                 element.load({
 239                         '__response': response, '__type': 'html'
 240                 });
 241
 242                 this.requests[0].respond(200, {'Content-Type': 'text/html'}, response);
 243                 expect(this.spy.called).to.equal(true);
 244
 245                 setTimeout(function(){
 246                         expect(element.get('text')).to.equal('hello world!');
 247                         done();
 248                 }, 0);
 249
 250         });
 251
 252 });