question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MatButtonToggle not initialized properly in tests

See original GitHub issue

What is the expected behavior?

MatButtonToggleGroup in a component should be fully initialized when launching Jasmine tests

What is the current behavior?

My component with a MatButtonToggleGroup is not initialized properly in Jasmine tests. Thus, I can not write a test to check that value is initialized properly

What are the steps to reproduce?

Clone this project, and run ng test. The failing test is this one : https://github.com/loriepisicchio/MatButtonToggleInitBug/blob/master/src/app/app.component.spec.ts#L43

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

    "@angular/animations": "^7.2.6",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "typescript": "~3.2.2"

Is there anything else we should know?

I have tried to wait for async changes with fixture.whenStable, tried to run again the change detection, nut nothing fixes the issue. When running app with ng serve, the MatButtonToggleGroup is initialized properly

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
loriepisicchiocommented, Jul 15, 2019

Nope, no real solution so far. I’ve changed my test to check the value of the property bound to the MatSelect instead of testing the control itself but it’s not ideal…

0reactions
angular-automatic-lock-bot[bot]commented, Sep 11, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

v13 Unit tests using Jest are failing - "ReferenceError: Cannot ...
Should import modules successfully. Actual Behavior. Test suite failed to run ReferenceError: Cannot access 'MatButtonToggle' before initialization 6 | 7 | ...
Read more >
Angular 6 'mat-button-toggle' is not a known element
If 'mat-button-toggle' is an Angular component, then verify that it is part of this module. app.module.ts import { BrowserModule } from '@ ...
Read more >
Easy Angular Testing – UI Elements – Button Toggle
The idea here is if the person entering data on the form first selected, for example, the 13 value and then changed to...
Read more >
Testing with component harnesses - Angular Material
Because MatButton is a very simple component, these harness methods might not seem very different from working directly with the DOM. However, more...
Read more >
Mat-button-toggle loses group styling if not a direct child of mat ...
The answer to this was to replace the div element with the ng-container element. The ng-container isn't rendered to the DOM but also...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found