Angular - Leveraging Jest and NgMocks to Mock Wrapper Components

Question

Angular - Leveraging Jest and NgMocks to Mock Wrapper Components

Within our project, we have implemented a feature where user roles can be assigned to various elements in the application. These roles determine whether certain elements should be disabled or not. However, due to additional conditions that may also disable some buttons, our component takes control and disables its child if needed. This design allows us to easily display tooltips when an element is disabled.

// app-role-element
<div matTooltip="{{ tooltipMessage | translate }}" [matTooltipDisabled]="!isDisabled">
  <ng-content> </ng-content>
</div>
// .ts
export class AppRoleElement implements AfterConentInit {
  @Input('roles') roles: string[];
  @ContentChild('roleElement') roleElement: MatButton;

  constructor(...){}    

  ngAfterContentInit(): void {
    ...
    this.setDisabled();
  }

  setDisabled(): void {
    if (this.roleElement) {
      if (this.isDisabled) {
        this.roleElement.disabled = true; // disable if no role
      } else {
        this.roleElement.disabled = this.disableCondition; // disable if other condition
      }
    }
  }
}

// usage
<app-role-component
  [role]="['required-role']"
  [disableCondition]= "isRunning || isUnstable"
  [id]="startButtonRoleElem"
>
  <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
</app-role-component>

While this approach works as intended, it poses challenges when it comes to unit testing. In the code snippet above, selecting the Start button by ID may bypass the role-element and trigger the remote service even when it shouldn't. Clicking on the button directly does not pass through the role element.

test('to prevent click on a start btn when form is invalid', () => {
  spectator.component.runEnabled$ = of(false);
  spectator.detectComponentChanges();

  const checkExportFolderSpy = jest.spyOn(spectator.component, 'checkExportFolder');
  spectator.inject(PreferencesService).validateCurrentExportPath.andReturn(of(VALIDATION_RESULT_OK));
  spectator.detectChanges();

  spectator.click('#startBtnId');
  spectator.detectChanges();

  expect(checkExportFolderSpy).not.toHaveBeenCalled();
  expect(dispatchSpy).not.toHaveBeenCalled();
});

We are using JEST with Spectator and NgMocks for testing purposes, and I am looking for a way to effectively mock this component. Any suggestions on how to handle this scenario? Should the click event be passed to the child, or should the child be disabled in some way? Your insights and recommendations would be greatly appreciated.

angular typescript unit-testing jestjs

Answer 1

Answer №1

Your situation is quite complex.

The complexity arises from the following reasons:

The button functionality is disabled using MatButton, making it unmockable
We are required to test AppRoleElement, which also cannot be mocked
triggerEventHandler does not recognize the disabled attribute and always triggers clicks

As a result, our testing approach needs to include the following steps:

Maintain the current structure of AppRoleElement and MatButton
Create a specialized environment for both disabled and enabled scenarios
Manually click the button using nativeElement

This code snippet exclusively utilizes ng-mocks with simplified role detection.

import {AfterContentInit, Component, ContentChild, Input, NgModule,} from '@angular/core';
import {MatButton, MatButtonModule} from '@angular/material/button';
import {MockBuilder, MockRender, ngMocks} from 'ng-mocks';

@Component({
  selector: 'app-role-component',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `,
})
class AppRoleElement implements AfterContentInit {
  @Input() public disable: boolean | null = null;
  @ContentChild(MatButton) public roleElement?: MatButton;

  public ngAfterContentInit(): void {
    this.setDisabled();
  }

  public setDisabled(): void {
    if (this.roleElement) {
      this.roleElement.disabled = this.disable;
    }
  }
}

@NgModule({
  declarations: [AppRoleElement],
  imports: [MatButtonModule],
})
class AppModule {}

fdescribe('ng-mocks-click', () => {
  // Keeping AppRoleElement and MatButton
  beforeEach(() => MockBuilder(AppRoleElement, AppModule).keep(MatButton));

  it('is not able to click the disabled button', () => {
    // specific params for the render
    const params = {
      disabled: true,
      start: jasmine.createSpy('start'),
    };

    // rendering custom template
    MockRender(
      `
      <app-role-component
        [disable]="disabled"
      >
        <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
      </app-role-component>
    `,
      params,
    );

    // clicking on a disabled element should have no effect
    ngMocks.find('button').nativeElement.click();

    // assertion
    expect(params.start).not.toHaveBeenCalled();
  });

  // checking the enabled case
  it('is able to click the button', () => {
    const params = {
      disabled: false,
      start: jasmine.createSpy('start'),
    };

    MockRender(
      `
      <app-role-component
        [disable]="disabled"
      >
        <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
      </app-role-component>
    `,
      params,
    );

    ngMocks.find('button').nativeElement.click();
    expect(params.start).toHaveBeenCalled();
  });
});

Answer 2

Your situation is quite complex.

The complexity arises from the following reasons:

The button functionality is disabled using MatButton, making it unmockable
We are required to test AppRoleElement, which also cannot be mocked
triggerEventHandler does not recognize the disabled attribute and always triggers clicks

As a result, our testing approach needs to include the following steps:

Maintain the current structure of AppRoleElement and MatButton
Create a specialized environment for both disabled and enabled scenarios
Manually click the button using nativeElement

This code snippet exclusively utilizes ng-mocks with simplified role detection.

import {AfterContentInit, Component, ContentChild, Input, NgModule,} from '@angular/core';
import {MatButton, MatButtonModule} from '@angular/material/button';
import {MockBuilder, MockRender, ngMocks} from 'ng-mocks';

@Component({
  selector: 'app-role-component',
  template: `
    <div>
      <ng-content></ng-content>
    </div>
  `,
})
class AppRoleElement implements AfterContentInit {
  @Input() public disable: boolean | null = null;
  @ContentChild(MatButton) public roleElement?: MatButton;

  public ngAfterContentInit(): void {
    this.setDisabled();
  }

  public setDisabled(): void {
    if (this.roleElement) {
      this.roleElement.disabled = this.disable;
    }
  }
}

@NgModule({
  declarations: [AppRoleElement],
  imports: [MatButtonModule],
})
class AppModule {}

fdescribe('ng-mocks-click', () => {
  // Keeping AppRoleElement and MatButton
  beforeEach(() => MockBuilder(AppRoleElement, AppModule).keep(MatButton));

  it('is not able to click the disabled button', () => {
    // specific params for the render
    const params = {
      disabled: true,
      start: jasmine.createSpy('start'),
    };

    // rendering custom template
    MockRender(
      `
      <app-role-component
        [disable]="disabled"
      >
        <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
      </app-role-component>
    `,
      params,
    );

    // clicking on a disabled element should have no effect
    ngMocks.find('button').nativeElement.click();

    // assertion
    expect(params.start).not.toHaveBeenCalled();
  });

  // checking the enabled case
  it('is able to click the button', () => {
    const params = {
      disabled: false,
      start: jasmine.createSpy('start'),
    };

    MockRender(
      `
      <app-role-component
        [disable]="disabled"
      >
        <button mat-raised-button id="startBtnId" (click)="start()">Start</button>
      </app-role-component>
    `,
      params,
    );

    ngMocks.find('button').nativeElement.click();
    expect(params.start).toHaveBeenCalled();
  });
});

Angular - Leveraging Jest and NgMocks to Mock Wrapper Components

Answer №1

Similar questions

When attempting to dispatch an action with switchMap, it fails, while map successfully triggers the

Struggling to Enforce Restricted Imports in TypeScript Project Even After Setting baseUrl and resolve Configuration

Issue with radio button validation not being triggered upon form submission

Tips for utilizing method overload in TypeScript with a basic object?

Troubleshooting ngModel Binding Issue with Sub-Children in CKEditor 5 and Angular 7

Utilizing server-side caching middleware with tRPC version 10

Firestore TimeStamp.fromDate is not based on UTC timing

Challenges Faced with Implementing Active Reports in Angular 9

What is the best way to exceed the capacity of a function in TypeScript by incorporating optional

Labeling src library files with namespaces

Measuring the duration of a unit test, from the setup phase to completion

Using Angular 6 to Share Data Among Components through Services

Angular project is showing a unique error that says '$localize' is undefined according to Eslint

What is the best way to compare two sets of arrays and generate a new one with unique key-value pairs?

Angular 7 flex layout ensures that the table fills its parent container completely without overstretching it

WebStorm lacks support for TypeScript's `enum` and `readonly` features

The successful completion of an Angular2 HTTP request relies on the data obtained from a previous response

Create Office Script calculations with quotations included

What is the best way to set up TypeScript interfaces using predefined string literals to limit the possible data types for shared attributes?

The chai property "matchSnapshot" is not valid