Question

我是Angular的新手，正在尝试执行某些任务，包括从ts文件的前端从div检索值。情况如下：-

我在前端有两个下拉菜单，一个有dropdownToggle按钮。插入并选择所需的操作后，内容以span / div显示。作为单元测试用例的一部分，我需要检查value是否出现在div中。另外，要执行其他操作，我将该值保存在 *。component.ts文件中的数组中。我尝试了几种方法来在* .component.spec.ts（测试用例文件）中调用该数组，但无法实现。

如果有人可以提出解决方案的建议，那就太好了。

代码段

前端

<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

您可以访问类似

的元素

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

为元素提供更具体的CSS类可能会有所帮助，例如search-term-list

Answer 2

    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'）等各种选项

Angular：在单元测试中从前端检索数据

2 个答案: