Testing URL Params in Angular Unit Test

Question

I am attempting to test for a string contained within URL parameters. In my typescript file I have the method:

 checkURLParams() {
    if (this.route.parent) {
      this.route.parent.params.subscribe((params) => {
        if (params['view'] === 'view') {
          this.form.disable();
        }
      });
    }
  }

The test should ensure that when the parameters contain the string 'view', the form should be disabled.

Currently in my spec file I have:

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [
        RouterTestingModule,
        ReactiveFormsModule
      ],
   
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
    fixture.detectChanges();
  });

  fit('test', fakeAsync(() => {

    // Arrange


    // Act
    component.checkURLParams();


    // Assert
    expect(component.form.disabled).toBeTruthy();
  }));

I have seen some solutions to different ways of testing URL parameters but cannot find a way to mock the URL parameters in the test to contain 'view' in order to disable the form. What would be the best approach to solving this?

Deunz · Accepted Answer · 2022-03-14 12:39:57Z

2

I had similar case where i needed test URLs and results.


  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  let location: Location;
  let router: Router;

  beforeEach(() => {
    location = TestBed.inject(Location);
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.debugElement.componentInstance;
    router = TestBed.inject(Router);

    fixture.ngZone.run(() => {
      router.initialNavigation();
    });
  });

  it('test', waitForAsync(() => {
      fixture.ngZone.run(async () => {
        await router.navigate(['yourUrl/With/Params']);
        fixture.detectChanges();
        component.checkURLParams();
        expect(component.form.disabled).toBeTruthy();
      });
    })
  );

edited Mar 14, 2022 at 12:39

answered Mar 14, 2022 at 10:40

Deunz

1,9533 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Learning Developer Over a year ago

Thank you for the help! What did you have in your setup beforeEach?

Collectives™ on Stack Overflow

Testing URL Params in Angular Unit Test

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related