CODEWITHSUNDEEP
angularunit-testingjasmine
lambk
lambk

Reputation: 118

Angular unit test failing due to query() call in animation

I have an entry component that contains both a login form and register form (each of these are their own component). The entry component contains a variable stating whether to show the login or register component, and this is toggled using an element within the template.

When this variable is toggled, the container that wraps the child components animates as it changes from login => register (or vice versa).

When I click this element to switch to the register form within a unit test, the test fails as I need to call fixture.detectChanges() after clicking on the toggle in order to then interact with the register form instance. This call to fixture.detectChanges() results in the following error.

Error: Unable to process animations due to the following failed trigger transitions @entryModeTransition has failed due to: 

- `query("app-login-form > form")` returned zero elements. (Use `query("app-login-form > form", { optional: true })` if you wish to allow this.)

There is also a fixture.detectChanges() call in the beforeEach() block.

I've made sure to include the NoopAnimationsModule in the test setup, however that doesn't seem to prevent the animation from firing (which I thought NoopAnimationsModule would do).

I could simply add the { optional: true } option to the query() calls within the animation definition, however I don't like the idea of adding this throughout animations when they are only there to prevent tests failing.

In case it's relevant, the login and register form components are mocked using ng-mocks.

Is there any way I can prevent the animation running within unit tests?

Upvotes: 4

Views: 2403

Answers (1)

lambk
lambk

Reputation: 118

In case anyone else runs into this problem, I ended up getting around it by overriding the animation when building the component in the spec setup.

This way I can still mock child components as I have throughout existing tests, and don't need to adjust the animation definition either.

Overriding was done by setting the animations meta option to an array containing an empty trigger definition with the same name as the animation causing the error.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [EntryComponent, MockComponents(LoginFormComponent, RegisterFormComponent)],
      imports: [NoopAnimationsModule, ...other imports omitted],
      providers: [...providers omitted]
    })
      .overrideComponent(EntryComponent, {
        set: {
          animations: [trigger('entryModeTransition', [])]
        }
      })
      .compileComponents();
  }));

The creation of an empty trigger could even be moved to a utility function if this workaround is needed for many tests, which could tidy up the overrides:

.overrideComponent(EntryComponent, {
  set: {
    animations: mockAnimations(['entryFormTransition, 'someOtherTransition'])
  }
})

Upvotes: 5

Related Questions