Angle selectRootElement работает с приложением, а не с тестом - PullRequest
Новая
       34

Angle selectRootElement работает с приложением, а не с тестом

0 голосов
/ 22 мая 2019

Приложение My Angular требует, чтобы данные передавались корневому компоненту на странице следующим образом: 

    <application-root testVar="hello world"></application-root>

После долгих исследований я решил не использовать ElementRef для доступа к атрибуту и ​​вместо этого использовал Renderer2. Мой конструктор для моего AppComponent настроен следующим образом: 

    @Component({
      selector: 'application-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnInit {
      public data: string;
      constructor(private renderer: Renderer2)
      {
        this.data = this.renderer.selectRootElement('application-root', true).getAttribute('testVar');
      }
      ..
    }

Когда я запускаю это в своем приложении, я не получаю ошибок и получаю значение "привет мир". Однако, когда я пытаюсь запустить пример модульного теста, я получаю следующую ошибку: «Селектор« application-root »не соответствует ни одному элементу». Это мой тестовый пример: 

    describe('AppComponent', () => {
      beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [
          RouterTestingModule,
          HttpClientTestingModule
        ],
        declarations: [
          AppComponent
        ],
        providers: [
          {provide: Router, useValue: routerSpy},
          Renderer2
        ]
      }).compileComponents();
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
      }));
      it('should create the app', () => {
        expect(fixture).toBeTruthy();
      });

Теперь, если я переместил мой вызов selectRootElement из функции конструктора и в функцию ngOnInit (), мой тестовый блок проходит, но когда я пытаюсь запустить приложение, я получаю пустой экран.

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

1 Ответ

0 голосов
/ 24 мая 2019

Таким образом, решение, которое я придумал, состояло в том, чтобы переместить все из конструктора в функцию ngOnInit ().Когда я провел повторное тестирование приложения, оно работало, и с экрана ничего не пропало.Однако для того, чтобы это работало с примерами модульного тестирования, я узнал, что мне нужно добавить сам элемент в функцию beforeEach.

Когда Angular выполняет свои примеры модульного теста с AppComponent, шаблон, который отображаетсяэто тег, а не тот селектор, который мы все знаем.Таким образом, чтобы приложение могло получить этот элемент, мы сначала должны создать его, а затем установить атрибуты для этого элемента, чтобы при запуске тестового сценария он распознал этот элемент в шаблоне: 

    let appElement: ElementRef;
    let renderer2: Renderer2;
    describe('AppComponent', () => {
      beforeEach(async(() => {
      TestBed.configureTestingModule({
        imports: [
          RouterTestingModule,
          HttpClientTestingModule
        ],
        declarations: [
          AppComponent
        ],
        providers: [
          {provide: Router, useValue: routerSpy},
          Renderer2
        ]
      }).compileComponents();
      fixture = TestBed.createComponent(AppComponent);
      renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
      appElement = renderer2.createElement('application-root');
      renderer2.appendChild(fixture.nativeElement, appElement);
      component = fixture.componentInstance;
      }));
      it('should create the app', () => {
        expect(fixture).toBeTruthy();
      });

Если есть лучший способ решить эту проблему, я весь в ушах.

...