帶有條件的li標記在開玩笑的角度測驗中總是不可見-有解無憂

美好的一天開發者。我試圖<li/>根據特定變數測驗標簽的顯示隱藏行為。

為此，此<li/>標簽有一個*ngIf界限：

      <ul  js-selector="tab-list">
        <li  js-selector="tab"
          *ngIf="isTabEnabled"
          ...
        >
        </li>
      </ul>

然后在我的組件 tha 變數上，這個 li 標簽系結將是這樣的：

@Component({
  templateUrl: '',
})
export class Component implements OnInit{
    public isTabEnabled: boolean;

  constructor() {
        this.isTabEnabled = false;
  }

  public ngOnInit(): void {
     this.isTabEnabled = true/false =======> boolean value of a feature flag
  }


}

因此在我的測驗中：

describe('The Component', () => {
  
  let page: Page;

  beforeEach(
    waitForAsync(() => {
     
      TestBed.configureTestingModule({
        imports: [
          ...
        ],
        declarations: [
          Component,
          ComponentStub,
        ],
       
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(Component);
          component = fixture.componentInstance;

          page = new Page();
        });
    })
  );

   describe('When test ....',()=>{
     it('Should show  Tab if feature flag  is enabled', () => {
        const  tab = page.getTab();
       
        fixture.detectChanges();
  
        component.isTabEnabled=true
      
        expect(tab).toBeVisible();
      });

      it('Should not show  Tab if feature flag  is not enabled', () => {
        const  tab = page.getTab();
       
        fixture.detectChanges();
  
        component.isTabEnabled=false
      
        expect(tab).not.toBeVisible();
      });
   
   }

   class Page {
    private _el: HTMLElement;

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

    getTab(): HTMLElement {
      return this._el.querySelector('[js-selector="tab"]');
    } }
});

但我一直收到這個錯誤


 Received element is not visible:
      <li  js-selector="tab"  />

你能幫我做這個簡單的測驗嗎……找出它失敗的問題。提前致謝！！！

uj5u.com熱心網友回復：

我認為您fixture.detectChanges在更改isTabEnabled并過早地獲取對 HTML 元素的參考后會丟失 a 。

嘗試這個：

it('Should show  Tab if feature flag  is enabled', () => {
        // !! first fixture.detectChanges() calls ngOnInit
        fixture.detectChanges();
  
        component.isTabEnabled=true;
        // !! call fixture.detectChanges() again so the view updates with the
        // new value of isTabEnabled
        fixture.detectChanges();
        !! get the value of the HTML element now
        const  tab = page.getTab();
        expect(tab).toBeVisible();
      });
       // !! same thing here
      it('Should not show  Tab if feature flag  is not enabled', () => {
       
        fixture.detectChanges();
  
        component.isTabEnabled=false
        
        fixture.detectChanges();

        const tab = page.getTab();

        expect(tab).not.toBeVisible();
      });

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490953.html

標籤：有角度的单元测试测试开玩笑的角度ng-if

上一篇：從ICollection繼承的介面的最小起訂量回傳null

下一篇：ReferenceError:Vue未定義|vuejs3、jest、@testing-library/vue和jest-environment-jsdom