title: Angular How to test a Component which requires a Location
body: <p><strong>Hello and thank you for your time!</strong></p>
  
  <p>I am learning how to use Angular and I am interested in learning how to test its Components.</p>
  
  <p>Currently I am struggling because I have done the Tour of Heroes tutorial of the Angular page and I am testing the code to understand it better.</p>
  
  <p>The point is that I am testing <em>hero-details component which code is:</em></p>
  
  <pre><code>import {Component, OnInit, Input} from '@angular/core';
  import {ActivatedRoute} from '@angular/router';
  import {MyHeroService} from '../hero-service/my-hero.service';
  import {Location} from '@angular/common';
  import {Hero} from '../Hero';
  
  @Component({
    selector: 'app-hero-details',
    templateUrl: './hero-details.component.html',
    styleUrls: ['./hero-details.component.css']
  })
  export class HeroDetailsComponent implements OnInit {
    @Input() hero: Hero;
  
    constructor(private route: ActivatedRoute,
                private myHeroService: MyHeroService,
                private location: Location) {
    }
  
    ngOnInit(): void {
      this.getHero();
    }
  
    getHero(): void {
      const id = +this.route.snapshot.paramMap.get('id');
      this.myHeroService.getHero(id)
        .subscribe(hero =&gt; this.hero = hero);
    }
  
    goBack(): void {
      this.location.back();
    }
  }
  </code></pre>
  
  <p>And my test tries to prove that getHero() is called after creating the hero-details component:</p>
  
  <pre><code> import {HeroDetailsComponent} from './hero-details.component';
      import {ActivatedRoute} from '@angular/router';
      import {MyHeroService} from '../hero-service/my-hero.service';
      import {MessageService} from '../message.service';
      import {Location} from '@angular/common';
      import {provideLocationStrategy} from '@angular/router/src/router_module';
      import {BrowserPlatformLocation} from '@angular/platform-browser/src/browser/location/browser_platform_location';
  
  
      describe('heroDetails', () =&gt; {
        it('should call getHero after being created', () =&gt; {
          const heroDetailsComponent = new HeroDetailsComponent(new ActivatedRoute(),
            new MyHeroService(new MessageService([])),
            new Location(provideLocationStrategy(new BrowserPlatformLocation(['anyParameter']), '/')));
          spyOn(heroDetailsComponent, 'getHero');
  
          heroDetailsComponent.ngOnInit();
  
          expect(heroDetailsComponent.getHero()).toHaveBeenCalled();
  
  
  
        });
      });
  </code></pre>
  
  <p><strong>The difficulty I am facing</strong> is when I try to create a new Location which is a required parameter for the Hero-datail component's constructor.</p>
  
  <p>The first Location's parameter is a PlatformStrategy, so then I used the provider to build it. Also, the provider needs a PlatformLocation() which looks like is abstract so then I chose the only implementation I could find which is BrowserPlatformLocation.</p>
  
  <p>After all that process, the test execution says:
  <a href="https://i.stack.imgur.com/j5udg.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/j5udg.jpg" alt="enter image description here"></a></p>
  
  <p>And the browser never ends loading the suite:
  <a href="https://i.stack.imgur.com/ShwBU.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ShwBU.jpg" alt="enter image description here"></a></p>
  
  <p>The strange thing here is that the IDE indeed finds those modules because I can navigate to them.</p>
  
  <p>Also if I comment out that test, the suite works well:</p>
  
  <p><a href="https://i.stack.imgur.com/pwQrJ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/pwQrJ.jpg" alt="enter image description here"></a></p>
  
  <p>Additionaly I have also read:</p>
  
  <ul>
  <li><ol>
  <li><a href="https://angular.io/api/common/Location" rel="noreferrer">https://angular.io/api/common/Location</a></li>
  <li><a href="https://www.tektutorialshub.com/location-strategies-angular/" rel="noreferrer">https://www.tektutorialshub.com/location-strategies-angular/</a></li>
  <li><a href="https://angular.io/tutorial/toh-pt5" rel="noreferrer">https://angular.io/tutorial/toh-pt5</a></li>
  </ol></li>
  </ul>
  
  <p>How could I test it in a correct way? Where could I find more information about doing this type of tests properly? How could do this test to mock easily that Location parameter?</p>
  
  <p><em>Thank you for reading this</em></p>