Testcafe: How to error on 4xx or 5xx response?

Question

I'm working on a legacy app that makes a lot of calls to external sources. I'm trying to refactor this app, and I've written testcafe tests to help inform me when I've made a mistake. I'm NOT running my tests with --skip-js-errors, but when I get 404 errors and the console prints this out:

the test doesn't stop. I'd like errors like these to be something I am informed about. How do I make 4xx and 5xx network responses fail testcafe? I'm using angular 1.2 if that matters. If I could, I would change all the remote calls to throw an exception on 4xx or 5xx, but this is legacy code I don't understand, and I'm sure doing that would break a feature.

Answer 1

I suggest you extend RequestLogger to check a request. You can throw an error based on the request status. For example:

import EventEmitter from 'events';                                                                                                           
import { RequestHook } from 'testcafe';                                                                                                      

fixture `test`                                                                                                                               
    .page('https://testcafe.devexpress.com/Details2/')                                                                                       

class FailedRequestsLogger extends RequestHook {                                                                                             
    constructor (...args) {                                                                                                                  
        super(...args);                                                                                                                      

        this.events = new EventEmitter();                                                                                                    
        this.failedRequestPromise = new Promise(resolve => this.events.once('failed-request', resolve));                                     
    }                                                                                                                                        

    onRequest (request) {                                                                                                                    
    }                                                                                                                                        

    onResponse (response) {                                                                                                                  
        if (response.statusCode >= 400)                                                                                                      
            this.events.emit('failed-request', response.statusCode);                                                                         
    }                                                                                                                                        

    waitForFailedRequest (action) {                                                                                                          
        return Promise.race([                                                                                                                
                action(),                                                                                                                    
                this.failedRequestPromise.then(statusCode => Promise.reject(new Error(`Request failed with the ${statusCode} status code`))) 
        ])                                                                                                                                   
    }                                                                                                                                        
}                                                                                                                                            

const logger = new FailedRequestsLogger();                                                                                                   

test.requestHooks(logger)('test', async t => {                                                                                               
    await logger.waitForFailedRequest(async () => {                                                                                          
        await t.click('body');                                                                                                              
        await t.wait(10000);                                                                                                                
    });                                                                                                                                      
});