Cypress is a nice JavaScript end-to-end testing framework.
It could also spy into what http requests have been sent, wait for their response and assert the response. The documentation for this functionality can be found on the Network Requests doc page.

For me it was very useful as my machine is really slow hosting the server in the docker, and I have to allow a waiting time before going to the next step. cy.wait(8000) is an easy walk around but is neither reliable nor elegant. So instead, I spied on the requests and wait for it to get a response, and proceed to the next step when I get the response wanted.

Here is the code I used to spy on requests:

1
2
3
4
5
6
7
8
9
10
11
12
13
cy.server()
        .route({
        method: 'GET',
        url: 'http://localhost:8080/api/user',
      })
        .as('getUser')
        .route({
          method: 'POST',
          url: 'http://localhost:8080/api/login',
        })
        .as('logIn')
        .route({method: 'POST', url: 'http://localhost:8080/api/trips'})
        .as('newTrip')

.as() gives the request an alias that could be referred to later.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
cy.visit('http://localhost:3000')
        .wait('@getUser') // wait for the request for user to get a response
        .should('have.property', 'status', 401) // user is not log in, should be 401
        .get('header') // now the top bar knows that the user is not logged in
        .contains('Log In') // and renders the log in link
        .click()
        .get("[value='Log in']")
        .get("[type='email']")
        .type('test@test.com')
        .get("[type='password']")
        .type('testtest')
        .get("[type='submit']")
        .click()
        .wait('@logIn') // wait for the request to log in to get a response
        .should('have.property', 'status', 200) // response success
        .wait('@getUser') // get current user info
        .should('have.property', 'status', 200) // success
        .get('header') //now the header renders for an existing user
        .get("[href='/newtrip']") // the link for new trip is available
         .click()