Resolved - ActivatedRoute angular unit test

Question

I am facing an issue when testing this code:

constructor(
    private valuePairService: ValuePairService,
    private sanitizer: DomSanitizer,
    private service: Service,
    private router: Router,
    private route: ActivatedRoute
  ) {}

ngOnInit(): void {
    this.route.data.subscribe(({ result }) => {
      this.video =
        result.value === undefined
          ? '//player.vimeo.com/video/65498532'
          : result.value;
    });
  }

In my test I have this provider added:

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ value: 'test'}) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

Any idea about how to test it? I am having this error when executing the test:

error properties: Object({ longStack: 'TypeError: Cannot read property 'value' of undefined

UPDATE:

The problem was that I was testing the observable in the wrong way. I was using "value" instead of "result". The solution in the unit test is as follows:

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ result: 'test'}) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

Your test double for the activated route doesn't have the same structure as the thing it's replacing, which makes it less than useful. — jonrsharpe, Aug 17 '21 at 19:04
Think about what the code you're testing actually expects to receive in that subscription. Where does result come from, and why is it undefined when it should be an object with a value property? — jonrsharpe, Aug 17 '21 at 19:10
Please note this isn't a helpdesk, if you have deadlines you need to manage that yourself: https://meta.stackoverflow.com/questions/326569/under-what-circumstances-may-i-add-urgent-or-other-similar-phrases-to-my-quest. — jonrsharpe, Aug 17 '21 at 19:36
You are injecting mocked `ActivatedRoute` but you are using `Router` to get it, so it will not work. — Antoniossss, Aug 17 '21 at 19:36
Please include `constructor` code. How do you expect people to know what your component properties are and how are they set. We can guess, but that is just waste of the time most of the times. — Antoniossss, Aug 17 '21 at 19:40
Is that a typo? `this.route.data.subscribe(({ result })` should be `this.route.data.subscribe(result=>...)` — Antoniossss, Aug 17 '21 at 20:00
https://stackoverflow.com/questions/68821142/angular-6-resolver-doesnt-load-video-url/68821248#68821248 — beanic, Aug 17 '21 at 20:02
You probably don't want to destructure.. Also did you try debugging your test? — Gaël J, Aug 17 '21 at 20:26
Don't edit your post with the answer but rather accept the actual answer that helped you ;) — Gaël J, Aug 17 '21 at 20:33
@jonrsharpe thanks to your hints I found the solution. I was desperate and I had the solution in front of me. — beanic, Aug 17 '21 at 20:53

score 1 · Answer 1 · answered Aug 17 '21 at 20:27

I dont understand why you want to use destruct there, but it will not work for you

Even compiler says it is invalid since result is missing
it will yeld undefined

https://stackblitz.com/edit/rxjs-alzyr4?file=index.ts

Code

of({ value: 'test'})
  .pipe(map(name => `Hello, ${name}!`))
  .subscribe(v=>console.log("normal lambda",v));

  of({ value: 'test'})
  .pipe(map(name => `Hello, ${name}!`))
  .subscribe(({result})=>console.log("descruct",result));

results in

So yeah, since result is undefined, therfore you cannot get .value from it.

Use this.route.data.subscribe(result => actions) and it will work. Turn on strict mode, so typechecking will prevent you from making such mistakes in the future. and noImplicitAny

PS. subscribe(({value})=> actions) could work.

thank you for your interest @Antoniossss. I have found the solution. — beanic, Aug 17 '21 at 20:44

score 0 · Answer 2 · answered Aug 17 '21 at 20:35

I found the solution.

The problem was that I was testing the observable in the wrong way. I was using "value" instead of "result". The solution in the unit test is as follows:

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ result: 'test'}) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

Resolved - ActivatedRoute angular unit test

2 Answers2