Angular Unit Test : Expected 3 arguments, but got 1

Question

I'm currently doing unit testing of an Angular app. I'm new to Angular Unit Testing. I have downloaded the angular app from https://github.com/gothinkster/angular-realworld-example-app for the interest of time. As I'm new to Unit Test I saw some videos related to unit test from https://www.youtube.com/watch?v=ylJUkPlmdAg, and https://www.youtube.com/watch?v=45BuZAfFU0o

I'm trying to unit test of HomeComponent. You can find the HomeComponent code from https://github.com/gothinkster/angular-realworld-example-app/blob/master/src/app/home/home.component.ts. The home.component.spec.ts file code is under:

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ApiService, TagsService, UserService, JwtService } from '../core';
import { HttpClient, HttpErrorResponse, HttpClientModule, HttpHandler } from '@angular/common/http';

import { HomeComponent } from './home.component';
import { of } from 'rxjs';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let TAGS;
  let mockTagsService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [ HomeComponent ],
      providers: [
        TagsService, 
        UserService, 
        ApiService, 
        JwtService, 
        HttpClient, 
        HttpClientModule, 
        HttpHandler
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    // fixture = TestBed.createComponent(HomeComponent);
    // component = fixture.componentInstance;
    // fixture.detectChanges();

    TAGS = [{"tags":["HuManIty","Hu‌Man‌Ity","Gandhi","HITLER","SIDA","BlackLivesMatter","Black‌Lives‌Matter","test","dragons","butt"]}];

    mockTagsService = jasmine.createSpyObj(['getAll']);
    component = new HomeComponent(mockTagsService);
  });

  // it("should create the component", () => {

  //   expect(component).toBeTruthy();

  // });
  
  it("getall tags", () => {
    mockTagsService.getAll.and.returnValue(of(true));
  });
});

The Visual Studio code shows an error message Expected 3 arguments, but got 1 in here: component = new HomeComponent(mockTagsService);. Its also suggesting that - home.component.ts(14, 5): An argument for 'tagsService' was not provided..

How can I rectify the issue?

`HomeComponent` constructor has three arguments: router, tagService and userService. You need to pass a value for each dependency to the constructor. — Matt U, Jun 06 '21 at 04:45
@MattU As I'm new to Un it Test, Can you please provide an answer based on it? — Niladri Banerjee - Uttarpara, Jun 06 '21 at 04:47
This doesn't have anything to do with unit testing Your constructor takes three arguments. You need to pass it three arguments. — Roddy of the Frozen Peas, Jun 06 '21 at 05:29
@RoddyoftheFrozenPeas Can you please provide a solution as an answer? — Niladri Banerjee - Uttarpara, Jun 06 '21 at 05:45
component = new HomeComponent(mockTagsService, routerService, userService); — Niladri Banerjee - Uttarpara, Jun 06 '21 at 05:52
There you go. Three parameters for a three parameter constructor. — Roddy of the Frozen Peas, Jun 06 '21 at 06:23

PushpikaWan · Answer 1 · 2021-06-06T06:35:12.853

Here If u going to mock any service you can do it like below

 const mockTagsService = jasmine.createSpyObj('TagsService', ['<method name to mock>']);

await TestBed.configureTestingModule({
      imports: [...],
      declarations: [... ],
      providers: [
      { provides: TagsService, useClass: mockTagsService }
      ]
    }).compileComponents();

then you can mock the behaviour and provide values for that like below

mockTagsService.<your method name>.and.returnValue(<your return value>)

this is the simple way u can mock and provide data for that. follow this (https://angular.io/guide/testing-services) for more details

Angular Unit Test : Expected 3 arguments, but got 1

1 Answers1