angular - 如何在有条件的状态下通过角度的笑话单元测试来测试按钮

Question

我试图在我的 html 组件中以角度设置测试按钮，指的是单击它，根据某些参数显示或不显示，但按钮根本无法识别。我正在使用 Angular+Jest，因此首先这是我要模拟的 html 组件：

          <button
            *ngIf="flag"
            (click)="goBackToFormerUrl()"
            js-selector="back-button-link"
            type="button"
          >
          </button>

如果变量（标志）在我的 ts 组件中的某些方法中为真，则会显示此按钮 然后在我的组件上，有一个方法可以触发该标志变量 true 或 false 。稍后在我的测试规范文件中，我开始创建一个通用方法容器，该容器将触发我想要的组件，并创建该 HTML 类的模拟以提取按钮。

describe('The CustomerSupportPageComponent', () => {
  let component: PageComponent;
  let fixture: ComponentFixture<PageComponent>;
  let page: Page;

  beforeEach(
    waitForAsync(() => {
       TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        declarations: [PageComponent],
       
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(PageComponent);
          component = fixture.componentInstance;
          page = new Page();
        });
      })
    );

  test('It is a valid component', () => {
    expect(component).toBeTruthy();
  });

describe('some name of method', () => {
    let button;
    beforeEach(() => {
      component.formerUrlLink = 'block';
      fixture.detectChanges();
      button = page.getBackButton();
    });

    it('Should appear button back', () => {
      expect(button.getBackButton().style.display).toEqual('block');
    });

    it('redirect to the backUrl param content', () => {
      button.click();
     ...other stuffs
  });

  class Page {
    private _el: HTMLElement;

    constructor() {
      this._el = fixture.nativeElement;
     
    }

    getBackButton(): HTMLElement {
      return this._el.querySelector('[js-selector="back-button-link"]');
    }
  }


})

所有以前的公开都是我对那个按钮及其功能的测试。首先，初始化一个通用的 describe 方法，声明测试所针对的组件，以及测试成功所需使用的一些变量和 Mocked 类

此方法将负责访问在分配给变量按钮的模拟类中重新创建的按钮。然后在方法（方法的某个名称）上，我触发两个测试，其中第一个应该评估显示的过程按钮。第二个将在单击该按钮后触发到某个地方的路线。这个按钮是通过启动一个模拟类 Page 来访问的，该类在其构造函数中具有一个 HTMLElement 类型的变量，该变量将表示通过 Componet Fixture 带来的本机元素，以重新创建这些测试的环境；然后在同一个模拟类上，一个检索 js 选择器的按钮标识的方法被初始化为 getBackButton，简而言之，它会将我想要访问的那个按钮的 DOM 带到 test(page.getBackButton)，

console.log(this._el.querySelector('[js-selector="back-button-link"]')).

我怎样才能访问这个按钮？

标签： angularunit-testingtestingjestjsselector