Jasmine 期望null是真实的。茉莉花/因果报应

我试图测试注入到我创建的模拟类中的组件。虽然当我尝试测试组件的存在性时，该组件可以工作，但它返回null

可注射成分：

import { Injectable, ElementRef, Renderer2, RendererFactory2 } from '@angular/core';

@Injectable()
export class NgBackdropComponent {
  private renderer: Renderer2;
  private appElementRef: ElementRef;

  message: string = 'Carregando...';

  constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
    this.appElementRef = new ElementRef(<Element>document.getElementsByTagName('body').item(0));
  }

  show() {
    const divSpinnerItem1 = this.renderer.createElement('i');
    const divSpinnerItem2 = this.renderer.createElement('i');
    const divSpinnerItem3 = this.renderer.createElement('i');
    const divSpinner = this.renderer.createElement('div');
    this.renderer.addClass(divSpinner, 'spinner');
    this.renderer.appendChild(divSpinner, divSpinnerItem1);
    this.renderer.appendChild(divSpinner, divSpinnerItem2);
    this.renderer.appendChild(divSpinner, divSpinnerItem3);

    const spanMensagem = this.renderer.createElement('span');
    spanMensagem.innerHTML = this.message;

    const div = this.renderer.createElement('div');
    this.renderer.addClass(div, 'lock-content');
    this.renderer.appendChild(div, divSpinner);
    this.renderer.appendChild(div, spanMensagem);

    this.renderer.appendChild(this.appElementRef.nativeElement, div);
  }

  hide() {
    const elemento = this.appElementRef.nativeElement.querySelector('.lock-content');
    if (elemento) {
      elemento.remove();
    }
  }
}

从'@angular/core'导入{Injectable，ElementRef，Renderer2，RendererFactory2}；
@可注射（）
导出类NgBackdropComponent{
私有渲染器：渲染器2；
私人上诉中心：ElementRef；
消息：string='Carregando…'；
构造函数（渲染器工厂：渲染器工厂2）{
this.renderer=rendererFactory.createRenderer（null，null）；
this.appElementRef=newelementref（document.getElementsByTagName（'body'）。项（0））；
}
show（）{
const divSpinnerItem1=this.renderer.createElement（'i'）；
const divSpinnerItem2=this.renderer.createElement（'i'）；
const divSpinnerItem3=this.renderer.createElement（'i'）；
const divSpinner=this.renderer.createElement（'div'）；
addClass（divSpinner，'spinner'）；
appendChild（divSpinner，divSpinnerItem1）；
appendChild（divSpinner，divSpinnerItem2）；
this.renderer.appendChild（divSpinner，divSpinnerItem3）；
const spanmensage=this.renderer.createElement（'span'）；
spanmensage.innerHTML=this.message；
const div=this.renderer.createElement（'div'）；
addClass（div，'lock content'）；
appendChild（div，divSpinner）；
this.renderer.appendChild（div，spanmensage）；
this.renderer.appendChild（this.appElementRef.nativeElement，div）；
}
隐藏（）{
const elemento=this.applementref.nativeElement.querySelector（'.lock content'）；
如果（elemento）{
elemento.remove（）；
}
}
}

我的测试环境：

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

import { NgBackdropComponent } from './ng-backdrop.component';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';


@Component({
  template: `
    <button (click)="clickButton()"></button>
    `
})
class MockNgBackdropComponent {
  constructor(private backdrop: NgBackdropComponent) { }

  clickButton() {
    this.backdrop.message = 'Teste BackDrop aesdas';
    this.backdrop.show();
    console.log('iniciei backdrop');
  }

  closeBackdrop() {
    this.backdrop.hide();
  }
}

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MockNgBackdropComponent],
      providers: [NgBackdropComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MockNgBackdropComponent);
    component = fixture.componentInstance;
  });

  describe('Deve injetar', async () => {

    it('Deve ter uma div principal', function () {
      const btnClick = fixture.nativeElement.querySelector('button');
      btnClick.click();
      fixture.detectChanges();

      const el = fixture.nativeElement.querySelector('.lock-content');
      console.log(el);

      expect(el).toBeTruthy();
    });
  });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“./ng background.component”导入{NgBackdropComponent}；
从'@angular/core'导入{Component}；
从“@angular/platform browser”导入{By}”；
@组成部分({
模板：`
`
})
类MockNgBackdropComponent{
构造函数（私有背景：NgBackdropComponent）{}
单击按钮（）{
this.background.message='Teste background aesdas'；
this.background.show（）；
console.log（'iniciei background'）；
}
关闭背景（）{
this.background.hide（）；
}
}
描述（'NgBackdropComponent'，（）=>{
let组件：MockNgBackdropComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[MockNgBackdropComponent]，
提供者：[NgBackdropComponent]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（MockNgBackdropComponent）；
组件=fixture.componentInstance；
});
描述（'deveinjetar'，async（）=>{
它（'deveter uma div principal'，函数（）{
const btnClick=fixture.nativeElement.querySelector（'button'）；
b单击。单击（）；
fixture.detectChanges（）；
const el=fixture.nativeElement.querySelector（'.lock content'）；
控制台日志（el）；
expect（el.toBeTruthy（）；
});
});
});

在测试中，我创建了一个模拟类，在其中注入我的组件。

---

我不明白为什么它找不到类，因为它存在。

我认为您应该使用DebugElement，例如：

it('Deve ter uma div principal', function () {
  const btnClick = fixture.debugElement.query(By.css('button'));
  btnClick.click();
  fixture.detectChanges();

  const el = fixture.debugElement.query(By.css('.lock-content'));
  console.log(el);

  expect(el).toBeTruthy();
});

---

请跟随以获取更多信息

在组件中找不到它的原因是您没有在组件中创建它。如果您查看构造函数中的这一行：

this.appElementRef = new ElementRef(<Element>document.getElementsByTagName('body').item(0))

注意按钮是如何使用

id=“root0”

在div中创建的？但是，带有

class=“lock content”

的div是在根

元素下创建的，因此不在组件的div内

事实上，当您看到标记名是“div”，它的内部HTML是“code>，并且它有两个属性：

id:“root0”

和

ng version:“7.0.1”

时，您可以非常清楚地看到这一点。把这些放在一起，看起来是这样的：

<div id="root0" ng-version="7.0.1">
    <button></button>
</div>

因此，您可以清楚地看到，您无法在组件中找到创建的div，因为它是在组件外部创建的

---

我希望这能有所帮助。

很乐意帮忙。：）

<body>
    <div class="jasmine_html-reporter">
        <div class="jasmine-banner"><a class="jasmine-title" href="http://jasmine.github.io/" target="_blank"></a><span
                class="jasmine-version">3.3.0</span></div>
        <ul class="jasmine-symbol-summary"></ul>
        <div class="jasmine-alert"></div>
        <div class="jasmine-results">
            <div class="jasmine-failures"></div>
        </div>
    </div>
    <div id="nprogress" style="transition: none 0s ease 0s; opacity: 1;">
        <div class="bar" role="bar" style="transform: translate3d(0%, 0px, 0px); transition: all 200ms ease 0s;">
            <div class="peg"></div>
        </div>
    </div>
    <div id="root0" ng-version="7.0.1">
        <button></button>
    </div>
    <div class="lock-content">
        <div class="spinner">
            <i></i>
            <i></i>
            <i></i>
        </div>
        <span>Teste BackDrop aesdas</span>
    </div>
</body>

<div id="root0" ng-version="7.0.1">
    <button></button>
</div>