title: Testing nested $http requests in Angular
body: <p>I have some lines of code I can't manage to test. All provided <code>API</code> methods are wrappers around <code>$http</code>. <code>API.getAll</code> returns me a basic information about panels and <code>API.getPanel</code> returns full information about each requested panel. So this kind of loop will exist anyway.</p>
  
  <p>I'm wondering how can I test those nested requests. This is my draft test which doesn't work:</p>
  
  <pre><code>describe('static', function() {
      describe('method `getAll`', function() {
          ...
          beforeEach(function() {
              $httpBackend.whenPOST(url, getPanelsForCategory)
                  .respond(mockPanelsForCategory);
              $httpBackend.whenPOST(url, getPanelDetails)
                  .respond(mockPanel);
          });
  
          it('should work... Please...', function() {                
              $httpBackend.expectPOST(url, getPanelsForCategory);
  
              Panel.getAll(1).then(function(panels) {
                  // Here everything falls down.
              });
  
              $httpBackend.flush();
          });
      });
  });
  </code></pre>
  
  <p>And this is a source code I want to test: </p>
  
  <pre><code>    Panel.get = function(id) {
          return API.getPanel(id).then(function(panel) {
              return new Panel(panel);
          });
      };
  
      Panel.getAll = function(id) {
          var handleResponse = function(data) {
              var promise = $q.all(
                  data.map(function(panelRaw) {
                      var panel = Panel.get(panelRaw.PANEL_ID);
                      return panel;
                  })
              );
  
              return promise;
          };
  
          return API.getPanelsForCategory(id).then(handleResponse);
      };
  </code></pre>
  
  <p>Thanks in advance for any help.</p>