We recently upgraded to a newer build of a JavaScript minification library.

After a significant amount of quality assurance work by the testing team, it was discovered that the new version of our minifier had an issue that changed the intention and meaning behind a block of code.

(Life lesson: don't upgrade JS minifiers unless you are really convinced you need the new version.)

The minifier is used for client side JavaScript code with a heavy emphasis on DOM related activity, not nearly as much "business logic".

A simplified example of what was broken by the minifier upgrade:

function process(count)
{
     var value = ""; 
     value += count; //1. Two consecutive += statements
     value += count;
     count++;        //2. Some other statement
     return value;   //3. Return
}

Was minified incorrectly to the following:

function process(n){var t="";return t+n+n,n++,t}

While we could write some unit tests to catch some of the issues potentially, given that the JavaScript is heavy on DOM interactions (data input, etc.), it's very difficult to test thoroughly without user testing (non-automated). We'd pondered using a JS to AST library like Esprima, but given the nature of the changes that could be done to the minified code, it would produce far too many false positives.

We also considered trying to write representative tests, but that seems like a never-ending task (and likely to miss cases).

FYI: This is a very sophisticated web application with several hundred thousand lines of JavaScript code.

We're looking for a methodology for testing the minification process short of "just test everything again, thoroughly, and repeat." We'd like to apply a bit more rigor/science to the process.

Ideally, we could try multiple minifiers without fear of each breaking our code in new subtle ways if we had a better scientific method for testing.

Update:

One idea we had was to:

1. take minification with old version
2. beautify it
3. minify with new version,
4. beautify, and
5. visually diff.

It did seem like a good idea, however the differences were so mon that the diff tool flagged nearly every line as being different.

We recently upgraded to a newer build of a JavaScript minification library.

After a significant amount of quality assurance work by the testing team, it was discovered that the new version of our minifier had an issue that changed the intention and meaning behind a block of code.

(Life lesson: don't upgrade JS minifiers unless you are really convinced you need the new version.)

The minifier is used for client side JavaScript code with a heavy emphasis on DOM related activity, not nearly as much "business logic".

A simplified example of what was broken by the minifier upgrade:

function process(count)
{
     var value = ""; 
     value += count; //1. Two consecutive += statements
     value += count;
     count++;        //2. Some other statement
     return value;   //3. Return
}

Was minified incorrectly to the following:

function process(n){var t="";return t+n+n,n++,t}

While we could write some unit tests to catch some of the issues potentially, given that the JavaScript is heavy on DOM interactions (data input, etc.), it's very difficult to test thoroughly without user testing (non-automated). We'd pondered using a JS to AST library like Esprima, but given the nature of the changes that could be done to the minified code, it would produce far too many false positives.

We also considered trying to write representative tests, but that seems like a never-ending task (and likely to miss cases).

FYI: This is a very sophisticated web application with several hundred thousand lines of JavaScript code.

We're looking for a methodology for testing the minification process short of "just test everything again, thoroughly, and repeat." We'd like to apply a bit more rigor/science to the process.

Ideally, we could try multiple minifiers without fear of each breaking our code in new subtle ways if we had a better scientific method for testing.

Update:

One idea we had was to:

1. take minification with old version
2. beautify it
3. minify with new version,
4. beautify, and
5. visually diff.

It did seem like a good idea, however the differences were so mon that the diff tool flagged nearly every line as being different.

• javascript
• unit-testing

• 3 Which minifier are you using? – Blender Commented Feb 12, 2013 at 20:36
• I cannot state how much I related to this question. The example code was, hilarious, at best. – Arindam Commented Feb 12, 2013 at 20:36
• 1 It may be possible to use a source map and pare the minified + source map to the original version. – Will Hawker Commented Feb 12, 2013 at 21:12
• 1 @WiredPrairie, why would you ever trust Microsoft to do anything correctly with JavaScript? Have you ever used Internet Exploder? Use the YUI-Compressor or closure piler. – zzzzBov Commented Feb 13, 2013 at 16:55
• 1 @WiredPrairie, changing wouldn't address the question as you've posted, which is why I posted a ment, not an answer. My ment was more so that you'd use a tool that does a better job. Comparing source maps sounds like a much better choice – zzzzBov Commented Feb 13, 2013 at 19:05

6 Answers 6

Have you considered a unit test framework, such as QUnitjs ? It would be quite a bit of work to write the unit tests, but in the end you would have a repeatable test procedure.

It sounds to me like you need to start using automated unit tests within your CI (continuous integration environment). QUnit has been thrown around, but really QUnit is a pretty weak testing system, and its assertions are bare-bones at the minimum (it doesn't even really use a good assertion-based syntax). It only marginally qualifies as TDD and doesn't handle BDD very well either.

Personally, I'd remend Jasmine with JsTestDriver (it can use other unit test frameworks, or its own, and is incredibly fast...though it has some stability issues that I really wish they'd fix), and setup unit tests that can check minification processes by multiple parisons.

Some parisons would likely need to be:

• original code and its functionality behaves as expected
• pared to minified code (this is where BDD es in, expect the same functional performance/results in minified code)
• I'd even go a step further (depending on your minification approach), and have a test that then beautifies the minification and does another parison (this makes your testing more robust and more ensured of validity).

These kinds of tests are why you would probably benefit from a BDD-capable framework like Jasmine, as opposed to just pure TDD (ala the results you found of a visual diff being a mess to do), as you are testing behavior and parisons and prior/post states of functionality/behavior, not just if a is true and still true after being parsed.

Setting up these unit tests could take a while, but its an iterative approach with that large of a codebase...test your initial critical choke points or fragile points fast and early, then extend tests to everything (the way I've always set my teams up is that anything from this point on is not considered plete and RC unless it has Unit Tests...anything old that has no unit tests and has to be updated/touched/maintained must have unit tests written when they are touched, so that you are constantly improving and shrinking the amount of untested code in a more manageable and logic way, while increasing your code coverage).

Once you have unit tests up and running in a CI, you can then tie them into your build process: fail builds that have no unit tests, or when the unit tests fail send out alerts, proactively monitor on each checkin, etc. etc. Auto-generate documentation with JSDoc3, etc. etc.

The issue you are describing is what CI and unit tests were built for, and more specifically in your case that approach minimizes the impact of the size of the codebase...the size doesn't make it more plex, just makes the duration to get testing working across the board longer.

Then, bine that with JSDoc3 and you are styling better than 90% of most front end shops. It’s incredibly robust and useful to engineers at that point, and it bees self-perpetuating.

I really could go on and on about this topic, there's a lot of nuance to how you approach it and get a team to rally behind it and make it self-forming and self-perpetuating, and the most important one being writing testable code...but from a concept level...write unit tests and automate them. Always.

For too long, frontend developers have been half-assing development, not applying actual engineering rigor and discipline. As frontend has grown more and more powerful and hot, that has to change, and is changing. The concept of well tested, well covered, automated testing and continuous integration for frontend/RIA applications is one of the huge needs of that change.

You could look at something like Selenium Web Driver Which allows you to automate tests for web applications in various environments. There are some cloud hosted VM solutions for doing multi environment testing, so you don't get caught out when it works in Webkit but not in IE.

You should definitely look into using source maps to help with debugging minimized JavaScript. source maps will also work with supersets of JavaScript such as CoffeeScript or my new favorite TypeScript.

I use closure piler which not only minifies, but also will create the source maps. not to mention it is the most agressive and produces the smallest files. Lastly you kinda have to know what's going on in minification and write patible code, your example code could use some refactoring.

check out this article on source maps: http://www.html5rocks./en/tutorials/developertools/sourcemaps/

also check out the documentation for closure piler, it's got suggestions on how to write better code for minification: https://developers.google./closure/piler/

We use the closure piler in advanced mode which both minifies and changes code. As such, we pile our unit tests as well, so you could consider minifying your tests alongside your code and running it like that.

Not a testing solution, but how about switching to TypeScript to write large JavaScript applications like yours?

I tested it out with TypeScript and its default minification engine and it works fine.

Assuming your count argument is an number.

The TypeScript code will be:

class ProcessorX {
    ProcessX(count: number): string {
        var value = '';
        value += count.toString();
        value += count.toString();
        count++;
        return value;
    }
}

Which produces js like this:

var ProcessorX = (function () {
    function ProcessorX() { }
    ProcessorX.prototype.ProcessX = function (count) {
        var value = '';
        value += count.toString();
        value += count.toString();
        count++;
        return value;
    };
    return ProcessorX;
})();

Then minified to:

var ProcessorX=function(){function n(){}return n.prototype.ProcessX=function(n){var t="";return t+=n.toString(),t+=n.toString(),n++,t},n}()

It's on jsfiddle.

If your count is a string, then this fiddle.