Test your unit by providing feedback to the personalized modal pop-up

Question

Test your unit by providing feedback to the personalized modal pop-up

Currently, I am working on a unit test within Angular where I need to evaluate the functionality of the save button. My goal is to have the 'save' option automatically selected when the user clicks on the button, and then proceed to execute the subsequent lines of code.

beforeEach(async () => {

    fixture = TestBed.createComponent(component);
    component = fixture.componentInstance;
    fixture.detectChanges();
    component.isPrivate = true;
    component.qtsval= 7.0;
    component.changeval= "";
    await component.save();
    //let ConfirmationDialogService = fixture.debugElement.injector.get(ConfirmationDialogComponent);
    spyOn(window,'confirm').and.returnValue(true);
    var displayValuationChangeDriverWarning = component.displayValuationChangeDriverWarning;
    expect(displayValuationChangeDriverWarning).toBeTruthy();
    component.isPrivate = true;
    component.qtsval= 4.0;
  });

I tried using "spyOn(window,'confirm').and.returnValue(true);" but unfortunately, it did not solve my issue. Any suggestions on how to address this problem would be greatly appreciated.

The popup window I am dealing with looks like this:

this.confirmationDialogService
      .confirm(
        this._messageService.areYouSure,
        this._messageService.wouldYouSave,
        this._messageService.save,
        this._messageService.cancel,
        true,
        false
      )
      .then(async confirmed => {});

typescript angular8

Answer 1

Answer №1

Hey there, I've got a solution ready for you to check out. The main focus is on separating presentation testing from business logic. By verifying the contracts between components/providers, I ensure that the correct methods are being called internally.

This approach is applied to all relevant components specifically targeting the logic behind buttons.

During end-to-end testing, I confirm that the modal appears and the buttons are visible. While it's important to also verify that the modal disappears and the buttons become disabled, I haven't included those examples here.

This practice of separating concerns helps keep logic distinct from the UI. In my opinion, unit tests should focus solely on logic while e2e tests can target the UI components (ensuring that actions trigger the intended processes).

Enough talk, let's dive into some code examples. Below are snippets for both unit and e2e testing situations:

  it('.reject() should call activeModal with false', async () => {
    spyOn(activeModal, 'close').and.returnValue(null);

    expect(component.decline()).toBeUndefined();

    expect(activeModal.close).toHaveBeenCalledTimes(1);
    expect(activeModal.close).toHaveBeenCalledWith(false);
  });

  it('should return the correct result of a Modal (object is correct, calls internal modal)', async () => {
    const mock = {
      componentInstance: {
        title: 'Are you sure?',
        message: 'Are you actually sure though?',
        btnOkText: 'OK',
        btnCancelText: 'Cancel',
      },
      result: true,
    };

    spyOn(modal, 'open').and.returnValue(mock as any);

    const result = await service.confirm(
      mock.componentInstance.title,
      mock.componentInstance.message
    );

    expect(result).toBe(mock.result);

    expect(modal.open).toHaveBeenCalledTimes(1);
    expect(modal.open).toHaveBeenCalledWith(ModalComponent, { size: 'sm' });
  });

  it('should have an Open button on the home page, the button should open a modal with an OK option (returning TRUE)', async () => {
    page.navigateTo();

    const button = await page.getButton();
    expect(button.getText()).toBe('Open');
    await button.click();

    const modal = await page.getConfirmationModal();
    expect(await modal.isEnabled()).toBeTruthy();

    const acceptBtn = await page.getAcceptButton();

    expect(await acceptBtn.isDisplayed()).toBeTruthy();
    expect(await acceptBtn.isEnabled()).toBeTruthy();
    expect(await acceptBtn.getText()).toBe('OK');
    await acceptBtn.click();
  });

This testing method may not be perfect, but technology isn't always about right or wrong approaches. If you have suggestions for improvement or need clarification, feel free to reach out!

Visit this GitHub link for more details and examples.

I hope this information helps address your concerns. Let me know if there's anything else I can assist with!

Answer 2

Hey there, I've got a solution ready for you to check out. The main focus is on separating presentation testing from business logic. By verifying the contracts between components/providers, I ensure that the correct methods are being called internally.

This approach is applied to all relevant components specifically targeting the logic behind buttons.

During end-to-end testing, I confirm that the modal appears and the buttons are visible. While it's important to also verify that the modal disappears and the buttons become disabled, I haven't included those examples here.

This practice of separating concerns helps keep logic distinct from the UI. In my opinion, unit tests should focus solely on logic while e2e tests can target the UI components (ensuring that actions trigger the intended processes).

Enough talk, let's dive into some code examples. Below are snippets for both unit and e2e testing situations:

  it('.reject() should call activeModal with false', async () => {
    spyOn(activeModal, 'close').and.returnValue(null);

    expect(component.decline()).toBeUndefined();

    expect(activeModal.close).toHaveBeenCalledTimes(1);
    expect(activeModal.close).toHaveBeenCalledWith(false);
  });

  it('should return the correct result of a Modal (object is correct, calls internal modal)', async () => {
    const mock = {
      componentInstance: {
        title: 'Are you sure?',
        message: 'Are you actually sure though?',
        btnOkText: 'OK',
        btnCancelText: 'Cancel',
      },
      result: true,
    };

    spyOn(modal, 'open').and.returnValue(mock as any);

    const result = await service.confirm(
      mock.componentInstance.title,
      mock.componentInstance.message
    );

    expect(result).toBe(mock.result);

    expect(modal.open).toHaveBeenCalledTimes(1);
    expect(modal.open).toHaveBeenCalledWith(ModalComponent, { size: 'sm' });
  });

  it('should have an Open button on the home page, the button should open a modal with an OK option (returning TRUE)', async () => {
    page.navigateTo();

    const button = await page.getButton();
    expect(button.getText()).toBe('Open');
    await button.click();

    const modal = await page.getConfirmationModal();
    expect(await modal.isEnabled()).toBeTruthy();

    const acceptBtn = await page.getAcceptButton();

    expect(await acceptBtn.isDisplayed()).toBeTruthy();
    expect(await acceptBtn.isEnabled()).toBeTruthy();
    expect(await acceptBtn.getText()).toBe('OK');
    await acceptBtn.click();
  });

This testing method may not be perfect, but technology isn't always about right or wrong approaches. If you have suggestions for improvement or need clarification, feel free to reach out!

Visit this GitHub link for more details and examples.

I hope this information helps address your concerns. Let me know if there's anything else I can assist with!

Test your unit by providing feedback to the personalized modal pop-up

Answer №1

Similar questions

Creating a JSON object from two arrays is a simple process

Troubleshooting the issue of process.nextTick not being recognized in Calgolia places.js

Having issues with NGXS subscription not functioning properly when selecting a variable

Debugging with Typescript in Visual Studio Code

What is the best way to shift focus to the next input field once the character limit has been reached, especially when the input is contained

Implementing a new field in a Node.js model using MongoDB

Is it possible to utilize a React component within the DataGrid cell instead of the standard cell types like 'string', 'number', 'date', and 'dateTime' in Material UI?

Confounding Typescript Type Bindings

Step-by-step guide on invoking an asynchronous method in canActivate for Ionic and Angular

Idea fails to detect imports

Issue with NextJS Image Optimization in Vercel's production environment

Exploring Typescript and Clean Architecture with an In-Memory Database/Repository

What is the best way to reproduce the appearance of a div from a web page when printing using typescript in Angular 4?

Using typescript for Gnome shell extension development. Guidelines on importing .ts files

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

Sveltekit: Troubleshooting problem of refreshing when utilizing store and localStorage

Error encountered when dispatching action in ngOnInit: ExpressionChangedAfterItHasBeenCheckedError

Include a new module in the declarations NgModule utilizing ts-morph

Transforming an ordinary JavaScript object into a class instance

Tips for adding a new property to an array object in TypeScript using a condition