Angular: получение данных из внешнего интерфейса в модульном тесте

Question

Я новичок в Angular и пытаюсь выполнить определенную задачу, которая включает получение значения из div из внешнего интерфейса в файле ts.Сценарий выглядит следующим образом: -

У меня есть два выпадающих на передней панели и одна кнопка dropdownToggle.После вставки и выбора желаемой операции содержимое отображается в виде span / div.В рамках модульного теста мне нужно проверить, появилось ли значение в div или нет.Также для выполнения других операций я сохраняю это значение в массиве в файле *. Component.ts.Я пробовал несколько способов вызвать этот массив в * .component.spec.ts (файл тестового примера), но не смог этого сделать.

Было бы замечательно, если бы кто-то мог предложить возможное решение для полученияЭто решение.

Фрагмент кода

1. Front End

   <div class="col">
         <div class="btn-group" dropdown >
           <button type="button" class="btn" (click)="peformSearch(searchOp)" [disabled]="loading">Search </button>
           <button  type="button" dropdownToggle class="btn dropdown-toggle " aria-controls="dropdown-split">
   
           </button>
           <ul id="dropdown-split" *dropdownMenu class="dropdown-menu"  aria-labelledby="button-split">
             <li role="menuitem"><a class="dropdown-item" >Add</a></li>
             <li role="menuitem"><a class="dropdown-item" >Sub</a></li>
           </ul>
         </div>
       </div>
   
     </div>
     <div class="form-group row">
         <span class="btn" *ngFor="let e of searchTerms" >{{ e.key }}: {{ e.value }}</span>
     </div>
   

2.Файл тестового примера (***. Component.spec.ts)

const component = fixture.componentInstance;
component.ngOnInit();
fixture.detectChanges();
const one = component.searchForm.controls['one'];
const two = component.searchForm.controls['two'];              
 // print div or selected value here

Answer 1

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

    let fixture: ComponentFixture<ComponentName>;

    beforeEach(() => {
        fixture = TestBed.createComponent(ComponentName);
    })

    de = fixture.debugElement.query(By.css('.classname-of-the-tag-whose-value-is-to-be-fetched'));

console.log(de);
de.textContent on innerHtml should return the required value.

внутри набора тестов доступны различные опции By.css ('. Class'), By.id ('# id'), By.tagName ('div') и т. Д.

Answer 2

Вы можете получить доступ к таким элементам, как

// print div or selected value here
const div = fixture.nativeElement.querySelector('div.form-group');
console.log(div.innerHTML);

. Возможно, было бы полезно дать элементам более специфичные css-классы, например, search-term-list