title: How do I mock or fake behavior of a website to allow unit testing for certain JS functions
body: <p><strong>Situation:</strong>
  I just started to learn unit testing my JavaScript code and I am wondering if there is a way to fake the behavior of the application in order to test certain cases. I read about sinon.js spy/stub/mock. However, as usual for JS there are plenty of further scripts and combinations (i.e. with mocha, chai, karma-jasmine) and I hope that somebody can tell me about a best practice.  </p>
  
  <p><strong>Let´s take an example:</strong> 
  If I want to test a function in a test runner, which changes the background-size in dependence of the window size, it is complicated to trigger different window sizes (not element sizes) in order to see the background-size adjustment working in multiple dimensions.   </p>
  
  <p>I already tested a few things, such as</p>
  
  <pre><code>var resizeW = sinon.stub($.prototype, 'width').returns(600);
  var resizeH = sinon.stub($.prototype, 'height').returns(1600);
  
  // no effect - always takes the original view.height/width
  viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0"); 
  
  // new window is not testable in the root testrunner window
  window.open + window.resizeTo() / window.resizeBy() 
  
  // shows no effect
  window.innerHeight = '120'; window.innerWidth = '500';
  
  // provides no possibility to assume different dimensions
  $(window).trigger('resize');
  
  // provides no possibility to assume different dimensions
  $(document).trigger('resize');
  
  // provides no possibility to assume different dimensions
  window.dispatchEvent(new Event('resize'));
  </code></pre>
  
  <p>Using an iframe will be tedious, i.e. through conflicts with the CSS and jQuery between original HTML and testrunner HTML.</p>
  
  <p>I hope somebody can suggest a convenient way to achieve this. </p>