Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: update tests to use new Angular Material test harnesses #2767

Open
SuperITMan opened this issue May 26, 2021 · 0 comments
Open

ui: update tests to use new Angular Material test harnesses #2767

SuperITMan opened this issue May 26, 2021 · 0 comments

Comments

@SuperITMan
Copy link
Member

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[X] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#got-a-question-or-problem

Current behavior

Stark UI components are tested in an old way.

Expected behavior

Take benefit of new testing methods provided by Angular, with Angular Material test harnesses.

As mentioned in Angular Material CHANGELOG:

New @angular/cdk/testing infrastructure and Angular Material test harnesses

Testing components has historically relied on using implementation details such as CSS selectors to
find components and to trigger events. This meant that whenever a component library changed its
implementation, all of the tests relying on those components would need to be updated.

In version 9, we are introducing component harnesses, which offer an alternative way to test
components. By abstracting away the implementation details, you can make sure your unit tests are
correctly scoped and less brittle.

Most of Angular Material's components can now be tested via harnesses, and we are making harnesses
available to any component author as part of the Component Dev Kit (CDK).

Here's an example test before harnesses:

it('should switch to bug report template', async () => {
expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const selectTrigger = fixture.debugElement.query(By.css('.mat-select-trigger'));
    selectTrigger.triggerEventHandler('click', {});
    fixture.detectChanges();
    await fixture.whenStable();
    const options = document.querySelectorAll('.mat-select-panel mat-option');
    options[1].click(); // Click the second option, "Bug".
    fixture.detectChanges();
    await fixture.whenStable();
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });

And the same test with harnesses:

 it('should switch to bug report template', async () => {
    expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const select = await loader.getHarness(MatSelect);
    await select.clickOptions({text: 'Bug'});
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });

Learn more about
Angular Material's component harnesses
or building your own with the CDK.

What is the motivation / use case for changing the behavior?

Testing improvements

Environment


Angular version: > 9.x


Others:

@SuperITMan SuperITMan added this to the 11.0.0 milestone May 26, 2021
@SuperITMan SuperITMan added this to To do in 12.0.0 via automation May 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
12.0.0
  
To do
Development

No branches or pull requests

1 participant