title: Make the component test to have a body or mock Renderer2
body: <p>In one of our component, we use <code>Renderer2</code> to add and remove some css classes/styles to the body element. To achieve that, we simply do something like:</p>
  <pre><code>this.renderer.setStyle(document.body, 'padding-left', '10px');
  this.renderer.addClass(document.body, 'modal-container--opened');
  </code></pre>
  <p>As soon as we run the tests, we encounter errors:</p>
  <blockquote>
  <p>Cannot read property 'add' of undefined</p>
  <p>Cannot set property 'padding-left' of undefined</p>
  </blockquote>
  <p>So it seems angular testBed doesn't create any <code>body</code> element.</p>
  <p><strong>In our test configuration, how to create a mocked body element? So we can run our tests against that element and see if style/class was properly applied by renderer.</strong></p>
  <p>It also seems mocking the Renderer2 is not possible.</p>
  <p>We tried to create a spy:</p>
  <pre><code>let renderer: jasmine.SpyObj&lt;Renderer2&gt;;
  renderer = jasmine.createSpyObj('renderer', ['addClass', 'removeClass', 'setStyle']);
  </code></pre>
  <p>then in <code>TestBed.configureTestingModule</code> (also tested in <code>overrideProviders</code> without more success):</p>
  <pre><code>{ provide: Renderer2, useValue: renderer }
  </code></pre>
  <p>But Angular ignores completely this override.</p>
  <p><strong>How to be able to test our component behavior, acting on <code>document.body</code>?</strong></p>