Override Default properties with Javascript

Override Default properties with Javascript

You cann’t successfully override all properties with simple statement. Lets use navigator.userAgent.
for example

console.log(navigator.userAgent); 
// > Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

// Try to change property
navigator.userAgent = 'Walshbot';


console.log(navigator.userAgent); 
// > Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Overriding the navigator.userAgent can be useful for the purposes of unit and functional testing, so how can we successfully change that value? With Object.defineProperty:

// Store the original value
var originalUserAgent = navigator.userAgent;

// Override!
Object.defineProperty(navigator, 'userAgent', {
    get: function() {
        return 'WalshBot';
    }
});

// (Run your tests here)

// Set the value back to original
Object.defineProperty(navigator, 'userAgent', {
    get: function() {
        return originalUserAgent;
    }
});

Within the snippet above, we save the original Object.defineProperty value, override it briefly, then set the value back to the original. Object.defineProperty is very useful, especially when you consider that the second argument is a function — you can execute any logic within that function to return the proper value at the time it’s requested!