2

I am developing an application with Ionic Angular. While I am testing with @testing-library/angular, the test is not working for ion-button but works for normal button field. What could be the problem?

fireEvent.click() event is not working for the code below (ionic angular):

<ion-button data-testid="button-submit" class="login-submit-btt" type="submit" size="large">Test</ion-button>

And fireEvent.click() event works with the following code:

<button data-testid="button-submit" class="login-submit-btt" type="submit" size="large">Test</button>

The code I am using for testing is below:

import {
  LoginFormData,
  LoginFormPresentationComponent,
} from './login-form.component';
import { fireEvent, render, screen } from '@testing-library/angular';
import { ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

test('Login button should not be disabled', async () => {
  const loginData: LoginFormData = {
    login: 'dev',
    password: 'dev',
    stayLoggedIn: false,
  };
  await render(LoginFormPresentationComponent, {
    componentProperties: {
      loginData: loginData,
      commitChanges: {
        // because the output is an `EventEmitter` we must mock `emit`
        // the component uses `output.emit` to interact with the parent component
        emit: submitAction,
      } as any,
    },
    imports: [ReactiveFormsModule, IonicModule], 
  });

  fireEvent.click(screen.getByTestId('button-submit'));
  expect(submitAction).toHaveBeenCalledWith(loginData);
});

And the Version I am using:

"@angular/cli": "~14.1.1",
 .....
"@testing-library/angular": "12.1.2",
"@testing-library/dom": "^8.17.1",
"@testing-library/user-event": "^14.4.3",
"@ionic/angular": "6.2.5",
"@ionic/core": "6.2.5",
 .....
Faiz Ahmed
  • 396
  • 6
  • 13

1 Answers1

0

I'm not sure how ionic works, but it might be that they're not listening on the native click event. Try using user-event instead of fireEvent. This represents a "real" user, and doesn't only fire a click event, but fires more events.

https://testing-library.com/docs/user-event/intro

timdeschryver
  • 14,415
  • 1
  • 19
  • 32