(Week 13) aborted XHR firebase requests during Cypress tests

[susanBuck]

Hi everyone,

In Part 4 of this week's videos (13), I make note regarding aborted XHR requests to Firebase during Cypress tests:

As noted in the video, you can ignore these messages as they don't actually prevent your tests from passing.

To understand why these messages are appearing, I wanted to share some info I found in this post: cypress-io/cypress#2374. Specifically, this reply:

[guyewhite]

@susanBuck ,

This appears to be having some impact upon my testing.

If I run my test to click my interview form that is reliant upon the firestore, it arrives with ZERO results -- but if I manually click through the same options in my browser without Cypress doing it, I get an entirely different result.

Do you have any ideas? I can naturally leave this out of my testing, but there appears to be some issue keeping me from running this test. See screenshots, please. The first photo is cypress doing the clicking. The second photo is me manually doing it. Notice how results appear when I am doing it -- but not when cypress is in charge.

[susanBuck]

Hi @guyewhite -

Trying to run your tests for e28p3 on my machine to recreate -

I'm seeing a different test file (drGuysStatChooser.js) than the one you referenced above (My test page functionality), and the tests are all passing:

Are you still having the problem on your end/have you updated the tests since you posted?

[guyewhite]

@susanBuck, I just committed all my most recent changes so you can see. The file in e2e file in question is the 02-ChooseAStatisitcalTest.js file. My project is also live at e28p3.guyewhite.com so you can see how you can personally click through and see the tests — but cypress can’t. Thanks.

[guyewhite]

Here are the exact instructions to reproduce the error for convenience:

Manually...

• Visit http://e28p3.guyewhite.com
• Click "Choose a Statistical Test"
• Click "Begin Interview"
• Select "Describe the Scores of One Group"
• Click "Next Step"
• Notice how "Chi Square" appears as a result

Using Cypress...

• Run e2e test 02-ChooseAStatisticalTest.js
• Notice how, while the same clicks are registered, no result appears.

[susanBuck]

Ok checking out now!

[susanBuck]

I was able to get the tests to pass by moving your cypress wait line to right after the page is loaded:

Will write again with more details as to why, but just wanted to get this fix to you asap.

[susanBuck]

Here's code with comments with an explanation:

// Adapted from lecture materials
    it('Descriptive tests are visible', () => {

        cy.visit('/choose/');

        // Added to attempt to fix XHR issues
        cy.wait(20000);

        // This button invokes the method submitQuestion0:
        cy.get('[data-test="begin-interview"]').click();
        // Within this method we see it trying to access tests data:
        // this.tests = this.allTests;
        // Because of this, it's necessary to put the wait before this method
        // invocation, ensuring the test data is loaded from the API
        
        cy.get('[data-test="option4"]').check();

        cy.get('[data-test="submit-question-1"]').click();

        // Here, tests should display -- but appear to have XHR issues
        // Notice on the screen preview that no tests appear
        cy.get('[data-test="test-name"]').should('have.length.at.least', 1)
    })

[guyewhite]

@susanBuck , I appreciate the depth of your response and for taking the time in this final push to get the assignment submitted. I'm happy to see that I was not too far off in my thinking on the "wait" issue -- and your response not only fixed the problem but told me how to think about this as I further modify the application.

It's been an honor to work with you in the course. Thank you! I'm a course assistant next term for Harvard's CS50 and I'll be mentioning your classes when people ask about what further courses to take. Thanks for all you do. I've submitted the final project and completed the course evaluation. Best.

[susanBuck]

@guyewhite It's been a pleasure having you in the course this semester. Best of luck on your continued development with your project!

And thanks for helping spread the word about this course. : )