angular - Cypress: How can I load the page when there is a condition in the attribute that needed a value?

Question

I am new to cypress and I am having some issues displaying a page in cypress, actually the test halts because of a conditional input variable.

app-component.ts

export class AppComponent implements OnInit, OnDestroy, OnChanges {
  @Input() openFieldId: string | undefined

app-component.html

<loading-container [loading]="(isLoading$ | async) && (error$ | async) === false && openFieldId !== undefined">
  <div *ngIf="openFieldId === undefined || (error$ | async); else continueToForm">
    <ncx-error-message-icon></ncx-error-message-icon>
    <strong class="error-message">{{openFieldId === undefined ? 'No Open Field Id Provided' : 'Failed to Load Open Fields'}}</strong>
  </div>
  <ng-template #continueToForm>

Current Cypress Screen enter image description here

When I -> cy.visit() The screen is not rendering the other elements below because the openFieldId is undefined or not set. I tried several things like

1. defining the openFieldId to a environment variable

2. created a constant js and exported the constant

3. i also tried this.

   cy.visit('/') cy.get('loading-container').invoke('attr', 'openFieldId', 'Something') .should('have.attr', 'openFieldId', 'Something')

For this last one, it passes the test, but the screen has already displayed the 'No Open Field Id Provided' on the screen and what I need is to test the page loaded with data. What am I missing? Any help is greatly appreciated. Thanks

question from:https://stackoverflow.com/questions/65940791/cypress-how-can-i-load-the-page-when-there-is-a-condition-in-the-attribute-that

Answer 1

Waitting for answers