View Full Version : Quick and Dirty Theme Tester

14 Jun 2009, 7:31 AM
Hey folks. I've been (slowly) working on converting the Slate theme from 2.2.1 to 3.0. This morning, frustrated with my testing process, I whipped up the attached code that might serve as a pattern to help other theme converters. It's not pretty, but it works, and I'll refine as I go. With some tweaking, it might also help out people building brand new themes.

The premise is: load up two iframes, one with Ext2.2.1 and one with Ext3, and then run the same (or as same as they can be with the 3.0 code changes) tests in each. The attached zip file has the files I'm using for testing the Slate theme:

SlateTest.html - the main test file that you load in your browser that contains the iframes.
SlateTest2.html - Boot html to run the 2.2.1 examples.
SlateTest3.html - Boot html to run the 3.0 examples.
tester.js - base tester class that holds most of the "guts" of the test harness
tester2.js - specific test functions for Ext 2.2.1.
tester3.js - specific test functions for Ext 3.0.

You would only put test functions in tester2 and tester3 if there are differences in how you write the code for those tests due to API changes between the versions. (See the files for a couple specific cases.)

You will also need to create a folder structure to include both ext2 and ext3, along with your theme's individual resources. See my attached image of my textmate project to see how I have it laid out.

As you add new tests, you have to add a reference to them in the dropdown list. The dropdown list is an array at the top of tester.js and you can just tack on new tests as you develop them. The first value in the item array is the function that will be called (by eval) when you select the test from the list. So if you add in a function called test5, you'd add ['test5', 'This is my 5th test'] to the array.

Finally, there is a third attachment showing it in action. Basically, you just select the test from the dropdown and it runs. Select the same test in both frames and you see them side by side in one browser window.

For theme designers just concentrating on a single version, you should be able to use the same basic pattern. Just change your SlateTest2.html to include version 3 ext libraries and change your CSS references.

Hope it helps someone and if anyone cleans it up or adds features, please post them up.

15 Jun 2009, 12:38 PM
Good to hear that slate theme is being converted (: Nice work dude

16 Jun 2009, 12:56 PM
Thanks Dave. Can't wait to get my hands on Slate for 3.0. Keep us posted!