Input value is an empty string in Jasmine Tests using an combined element, attribute Component Selector

🐞 bug report

Description

I’ve got a component with some inputs. Some of them are optional but the input config is required to use the component. Therefore I defined a component selector that has an element part and an attribute part (e.g. app-my-component[config]). Now I always need to pass a config into the component if I want to use it. Great! I started the app with ng serve and everything works fine. So far so good…

While writing the component tests I’m coming in trouble. I set the config in the beforeEach block where the component fixture is also created. However the required input attribute config is always an empty string when I called fixture.detectChanges().

Here is the Test-File of the minimal Reproduction I wrote that shows exactly the behaviour.

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    component.requiredInput = { anyKey: 'anyValue'};
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should not fail', () => {
    const expectedResult: RequiredInput = { anyKey: 'anyValue' };
    expect(component.requiredInput).toEqual(expectedResult); // <-- this expectation fails
  });
});

Removing the attribute part of the selector solves the problem. But that is no way.

🔬 Minimal Reproduction

I’ve created a minimal GitHub repository with the reproduction of the issue. I used Angular 8 for the reproduction repository because my main project is still using Angular 8, too

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.26
Node: 10.19.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.26
@angular-devkit/build-angular      0.803.26
@angular-devkit/build-ng-packagr   0.803.26
@angular-devkit/build-optimizer    0.803.26
@angular-devkit/build-webpack      0.803.26
@angular-devkit/core               8.3.26
@angular-devkit/schematics         8.3.26
@angular/cli                       8.3.26
@ngtools/webpack                   8.3.26
@schematics/angular                8.3.26
@schematics/update                 0.803.26
ng-packagr                         5.7.1
rxjs                               6.5.5
typescript                         3.5.3
webpack                            4.39.2

[jnizet]

Not sure if it’s a bug or a feature (I’ll let better specialists decide about that).

But the typical way of testing a component that requires inputs is to actually pass inputs the way they’re supposed to be passed, with a test such as this one:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TestComponent, RequiredInput } from './test.component';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';

@Component({
  template: '<app-test [requiredInput]="input"></app-test>'
})
class FixtureComponent {
  input!: RequiredInput;
}

describe('TestComponent', () => {
  let fixtureComponent: FixtureComponent;
  let component: TestComponent;
  let fixture: ComponentFixture<FixtureComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent, FixtureComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FixtureComponent);
    fixtureComponent = fixture.componentInstance;
    component = fixture.debugElement.query(By.directive(TestComponent)).componentInstance;
    fixtureComponent.input = { anyKey: 'anyValue'};
    fixture.detectChanges();
  });

  it('should not fail', () => {
    const expectedResult: RequiredInput = { anyKey: 'anyValue' };
    expect(component.requiredInput).toEqual(expectedResult);
  });
});

[angular-automatic-lock-bot[bot]]

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.}