Angular and cypress testing | Angular Community | Page 1

quasi sigil May 30, 2023, 9:32 PM

#

Hi there, I just cant get this right. Been stuck testing a view.Encapsulated component (micro frontend) which just made my life hell today. So I am now testing without that. Shadow dom just makes it harder. So now testing as normal. I have manage to test many thing but what I cant get right is to test if a form is visible.

I think if someone can help me, it will push me in the right direction.

I have this as a simple explanation of what I am doing. I have an ngOnInit which fires connectForm function (these are fired off at least once)
Now when connectForm is fired, I do a http request to see if data is good. Then if its good, i need to show the form. How do I test that the form is visible once I have done a fake request?

Angular code is below

isConnected(response){
this.showForm = true;
}

connectForm(dataToBeSent){

const url = `${this.apiUrl}/verify-form`;

const headers = new HttpHeaders({
  'Content-Type': 'application/json'
});

this.http.post(url, dataToBeSent, { headers })
.subscribe(
  {
    next: (response) => {
      this.isConnected(response);
    },
    error: (err: any) => { 
      this.cantConnect(err);
    },
    complete: () => { }
  }
);

}

ngOnInit() {
this.connectForm({data: data})
}

digital axle May 31, 2023, 5:37 AM

#

What is missing from your knowledge: how to wait for the fake request or how to test the visibility itself?

#

Mind for the same reasons as your last question, the angular code is unrelated here as you are testing the rendered UI with Cypress, not your code directly.

quasi sigil May 31, 2023, 11:42 AM

#

Thank you for your reply.
So essentially the UI shows one state ie a div with "Loading Data". Then when I get the data (after a db check), I need to show another state, ie "Success" or "Error". What I want to test is that the next state is visible after the db check is successful. I understand how to traverse and check if elements are visible etc, but what I dont understand is how coerce the test to make the component state change. I have a test that does a cy.intercept with a fixture (which all works) and I see if all values are present, but how do I make the component display the div with "Success" after the intercept via the test. After all that I need to do something like

cy.get('[data-cy-root]')
.find('.Alert')
.find('.isSuccess')
.should('exist')
.contains('div', 'Yay the check passed');

But that Alert isSuccess never gets switched on. Do I need to somehow invoke it? ie cy.mount( and here I get the component and call the function) and then check if isSuccess exists?

digital axle May 31, 2023, 12:36 PM

#

Cypress is to test your application , not running internals.
On Angular side, display the according alert when getting the response from the API.
On Cypress side, after getting the response of the intercept, assert the alert is visible

#Angular and cypress testing