Useful or not, from you.
angular Running Jasmine tests: TypeError: Cannot read property 'nativeElement' of null

I'm submitting a...

<!-- Check one of the following options with "x" --> <pre><code> [ ] Regression (a behavior that used to work and stopped working in a new release) [x ] Bug report <!-- Please search GitHub for a similar issue or PR before submitting --> [ ] Feature request [ ] Documentation issue or request [ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question </code></pre>

Current behavior

If you have an *ngIf on an element, you cannot get the element via -> fixture.debugElement.query(By.css('.welcome'));

I am even setting the value of welcome in the beforeEach() method and it still will not resolve to true on *ngIf="welcome"

Expected behavior

*ngIf should resolve to true and element should be found and not null.

Minimal reproduction of the problem with instructions

I modified the Angular testing sample:

Please see the WelcomeComponent failure. https://plnkr.co/edit/txk3ZCOatFKqoRcjOofL?p=preview

To make it fail I added *ngIf to the H3 in welcome.component.ts. Without *ngIf it will not fail.

@Component({
  selector: 'app-welcome',
  template: '<h3 *ngIf="welcome" class="welcome" ><i>{{welcome}}</i></h3>'
})

In the welcome.component.spec.ts I set the value of welcome so the *ngIf="welcome" shoudl resolve to true.

userService = fixture.debugElement.injector.get(UserService);
componentUserService = userService;
// UserService from the root injector
userService = TestBed.get(UserService);

**comp.welcome = 'test';**

//  get the "welcome" element by CSS selector (e.g., by class name)
de = fixture.debugElement.query(By.css('.welcome'));
el = de.nativeElement;

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

<!-- Describe the motivation or the concrete use case. -->

Environment

<pre><code> @angular/cli: 1.4.1 node: 8.2.1 os: win32 x64 @angular/animations: 4.3.6 @angular/common: 4.3.6 @angular/compiler: 4.3.6 @angular/compiler-cli: 4.3.6 @angular/core: 4.3.6 @angular/forms: 4.3.6 @angular/http: 4.3.6 @angular/platform-browser: 4.3.6 @angular/platform-browser-dynamic: 4.3.6 @angular/platform-server: 4.3.6 @angular/router: 4.3.6 @angular/cli: 1.4.1 : 1.5.0 typescript: 2.4.1

Browser:

  • [x ] Chrome (desktop) version XX
  • [ ] Chrome (Android) version XX
  • [ ] Chrome (iOS) version XX
  • [ ] Firefox version XX
  • [ ] Safari (desktop) version XX
  • [ ] Safari (iOS) version XX
  • [ ] IE version XX
  • [ ] Edge version XX

For Tooling issues: node: 8.2.1 Windows

Others: See the modified Angular testing plunkr I created. </code></pre>

That's a useful answer
Without any help

I have a similar problem and able to solve it by using page object and querySelectorAll

fixture.nativeElement.querySelectorAll('button'); HTML:

 <div *ngIf="isAbbreviationsAvailable(element.description); then caseA else caseB"></div>
  <ng-template #caseA>
    <div>

      <ng-template #popContent class="popover">
       <span id="glossary" >  {{element.description| glossary:glossaryDescription}}</span>
          <button class="close" (click)="p.close()"></button>

      </ng-template>

      <button class="popoverLink" [ngbPopover]="popContent" [autoClose]="false"
              triggers="manual" #p="ngbPopover" (click)="p.open()" placement="top-right bottom-right" container="body"
              html="true" >
        {{split(element.description)[0]}}
      </button>

      /{{split(element.description)[1]}}

    </div>
  </ng-template>
  <ng-template #caseB>{{element.description}}</ng-template>

Test case:

const template: HTMLElement[] = fixture.nativeElement.querySelectorAll('button');
let link: HTMLElement = template[8]

expect(link.textContent.trim()).toEqual('ACC');