Ожидаемый ноль будет правдой.Жасмин / Карма - PullRequest
Новая
       8

Ожидаемый ноль будет правдой.Жасмин / Карма

0 голосов
/ 14 ноября 2018

Я пытаюсь проверить мой компонент, введенный в фиктивный класс, который я создал. Хотя компонент работает, когда я пытаюсь проверить его существование, он возвращает ноль.

Компонент для инъекций: 

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();
    }
  }
}

моя среда тестирования: 

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();
    });
  });
});

При тестировании я создаю класс Mock, в который я внедряю свой компонент. Я не понимаю, почему он не может найти класс, потому что он существует.

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Причина, по которой вы не можете найти его в компоненте, заключается в том, что вы не создали его в компоненте. Если вы посмотрите на эту строку в конструкторе: 

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

Вы создаете его в документе непосредственно в элементе <body>. Если вы ищете это в своей спецификации, вы найдете его там. Я создал STACKBLITZ , чтобы показать вам, что я имею в виду. Вот спецификация этого стекаблица: 

it('Deve ter uma div principal', () => {
  const btnClick = fixture.nativeElement.querySelector('button');
  console.log(btnClick);
  btnClick.click();
  fixture.detectChanges();
  const appElementRef = new ElementRef(<Element>document.getElementsByTagName('body').item(0));
  const el = appElementRef.nativeElement.querySelector('.lock-content');
  expect(el).toBeTruthy();
});

Добавим немного больше уточнений:

Если вы console.log(appElementRef) заметите, что его tagName равно body, и обратите внимание на содержимое его nativeElement.innerHTML Вот то, что выглядело бы как "prettyfied": 

<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"? Тем не менее, div с class="lock-content" был создан сразу после корневого элемента <body>, и поэтому не входит в div компонента.

На самом деле, вы можете очень четко это увидеть, когда вы console.log(fixture.nativeElement) и видите, что tagName - это "div", его innerHTML - <button></button>, и у него есть два атрибута: id: "root0" и ng-version: "7.0.1". Сложите все это вместе, и это будет выглядеть так: 

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

Таким образом, вы можете ясно видеть, что вы не можете найти созданный вами div в компоненте, потому что вы создали его вне компонента.

Надеюсь, это поможет.

0 голосов
/ 15 ноября 2018

Я думаю, вы должны использовать 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();
});

Следуйте по этой ссылке для получения дополнительной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...