Guest Blog Post
As we prepare for Ext JS 5 GA, it’s time for all of us to start reviewing our codebases as well as our test coverage to make sure our applications are well tested before the upgrade. Even if you have no tests, you can start today and write a few Siesta smoke tests to help you get some assurance that your applications are working on the new version of Ext JS.
At Bryntum, we’re really excited to start using the new faster grid as well as other features like the new touch event support which will come in really handy for all of our components. Internally, we use Siesta to test all of our Ext JS components, and now we have started our upgrade process to Ext JS 5. Here’s how we have approached the upgrade.
How to approach a major version upgrade of a platform
In any software project, upgrading the underlying platform to a new major version can cause issues. APIs could’ve changed, old bugs might have been fixed and likely some new ones will appear. In platforms such as Java and .NET, you benefit a lot from the compile step which helps you find such breaking upgrade errors much easier and faster. With JavaScript, there is no way to know if your code works without running it. That’s why decent test coverage actually matters more for JavaScript code more than for other compiled languages.
If you have a test suite, you can expect a much shorter upgrade path than if you don’t. Without a test suite, you’ll have to test the entire application manually in the browsers and OSes you support.
Before we start testing
So, you’ve downloaded the latest Ext JS 5 build – now what? Here’s a list of the steps that we used to better prepare ourselves and our products for the upgrade, and ideally you should go through such a list each time you upgrade Ext JS:
Read the Ext JS 5 Upgrade Guide to find breaking changes that will affect your application. Also note that you may need to update your test sources too to run on the new Ext JS version. Review hacks and parts of your codebase that check for the Ext JS version, as well as the browser version (remember IE 8 and previous versions are no longer supported). Always question if such hacks or workarounds are still required.
Review your old overrides. Hopefully, you have documented your override to explain why it is needed, and what it is doing. The code itself should ideally also contain a link to a bug report in the Sencha forums, this way you can easily see if it has been fixed. If you have overrides for private Ext JS methods to fix bugs, these need to be reviewed. The private method might have changed, or it may not even exist anymore. If you’re lucky, the override may not be needed if the bug has been fixed in the updated framework version.
Review your third party components. If you rely on some third party component, contact the author in advance to hear about their plans to support Ext JS 5. Decide if you want to upgrade the components yourself to have better control.
Run your test suite. Focus on getting all tests green, one by one. Starting with your core unit tests is usually a good idea. Once the core is green, continue with your integration or application tests until all tests pass.
At this point, if your test suite is green, you should test the application manually to ensure it works and looks the same as before the upgrade. Some parts of an application are very hard to test, such as the appearance and CSS. Some CSS rules might have changed in the Ext JS framework which could make your application look strange. If you find crashes or errors during this phase, you should consider writing additional tests to cover these cases too.
What if I don’t have a test suite?
If you don’t currently have any tests, no better time to start writing tests than right now. As part of the latest Siesta release, you’ll be glad to know that we have added a powerful event recorder which helps you generate test stubs very quickly. The recorder has intimate knowledge of Ext JS and its various components, and the generated test scripts will save you lots of time. All you need to know is a bit of basic CSS and Component Query, because that’s the heart of the Siesta UI engine. Below is a video showing the recorder in action.
Let’s say you have a simple user management application where the details of your users can be edited.
For the rare occasion that you want to change the name of a user, the application should show a confirmation prompt before saving to prevent accidental changes to this field. Let’s say a naive check is made in the Save button handler code, which looks like this:
A simple smoke test verifying this flow would look something like this:
Change the name of a test user
Click “Save” button
Verify prompt shown
Click prompt “Yes” button
Verify prompt hidden
Verify model has been updated
In Siesta code, this translates to the following test which you can run yourself online here:
When you run the test in Ext JS 4, it passes as expected. When you double click and run on the same test using Ext JS 5, there is an exception thrown.
The root of this exception is a breaking change in Ext JS 5, and such changes are expected in major version upgrades. The Ext.data.Model “modified” property is now undefined by default, previously it was an empty object. You’ve now found a small upgrade issue without any manual search effort.This definitely proves the value of having tests assist you during your upgrade process. Without this test, you would have to remember to test this scenario yourself before releasing your upgraded application.
If you don’t want to update your source code to keep your application working, a simple fix to the problem above is to use this override:
The test above is just the starting point. You should have many more tests, and don’t forget about adding good unit test coverage for your core model and business logic. It’s a good idea to generate a code coverage report in Siesta to make sure all of the critical parts of your codebase are tested.
Summing it up
We’re really looking forward to showing off our updated components running on Ext JS 5. Our users can expect a faster experience, touch event support and the new Crisp theme will also add a clean modern look to our components.
In the past, we’ve found that upgrading to a new Ext JS version is so much easier with a test suite in place. We expect our tests to greatly reduce the time spent upgrading and doing manual testing. In general, a test suite is a great asset anytime you need to make such major changes to the underlying platform, or when you want to refactor parts of your own code.
We hope you found the tips and tricks in this post useful for your own upgrade process. If you have any tricks of your own to share, please help your fellow Sencha community members by posting them in the comments or in the Ext JS 5 forums.
Additional resources:
Test the Siesta example of this blog post
Official Ext JS 5 Upgrade Guide
Download Siesta
Siesta Community forums