From 9473067cc0eda8b1ba905dc2be18b06b717b8af3 Mon Sep 17 00:00:00 2001
From: Dave Thompson <dthompson@rallydev.com>
Date: Tue, 20 Mar 2012 17:08:02 -0600
Subject: [PATCH] Added DocTest tab to main jsduck page.

---
 Rakefile                                    |  28 +++
 lib/jsduck/app_data.rb                      |   1 +
 lib/jsduck/options.rb                       |   6 +
 template/app/Application.js                 |   3 +-
 template/app/Assert.js                      |  17 ++
 template/app/History.js                     |   5 +-
 template/app/controller/Content.js          |   2 +-
 template/app/controller/DocTests.js         | 148 +++++++++++++
 template/app/controller/InlineExamples.js   |  12 +-
 template/app/controller/Tabs.js             |   7 +-
 template/app/model/DocTest.js               |  15 ++
 template/app/view/Viewport.js               |   7 +-
 template/app/view/doctests/Index.js         | 224 ++++++++++++++++++++
 template/app/view/examples/Inline.js        |  43 +++-
 template/app/view/examples/InlinePreview.js |  77 +++++--
 template/eg-iframe.html                     |   9 +-
 template/resources/sass/_doc_tests.scss     |  24 +++
 template/resources/sass/viewport.scss       |   3 +
 18 files changed, 595 insertions(+), 36 deletions(-)
 create mode 100644 template/app/Assert.js
 create mode 100644 template/app/controller/DocTests.js
 create mode 100644 template/app/model/DocTest.js
 create mode 100644 template/app/view/doctests/Index.js
 create mode 100644 template/resources/sass/_doc_tests.scss

diff --git a/Rakefile b/Rakefile
index fe4a4faa..ff2e121e 100644
--- a/Rakefile
+++ b/Rakefile
@@ -187,6 +187,19 @@ class JsDuckRunner
     ]
   end
 
+  def add_doctest
+    @options += [
+      "--title", "Sencha Docs - Ext JS 4.0",
+      "--footer", "Ext JS 4.0 Docs - Generated with <a href='https://github.com/senchalabs/jsduck'>JSDuck</a> VERSION. <a href='http://www.sencha.com/legal/terms-of-use/'>Terms of Use</a>",
+      "--ignore-global",
+      "--images", "#{OUT_DIR}/docs/doc-resources",
+      "--local-storage-db", "ext-4",
+      "--output", "#{OUT_DIR}",
+      "#{EXT_BUILD}/src",
+      "--doctests"
+    ]
+  end
+
   def add_phone_redirect
     @options += ["--body-html", <<-EOHTML]
       <script type="text/javascript">
@@ -380,6 +393,21 @@ task :ext4, [:mode] => :sass do |t, args|
   runner.run
 end
 
+desc "Run JSDuck with example test hacks\n" +
+     "doctest             - creates debug/development version\n" +
+     "doctest[export]     - creates export/deployable version\n"
+task :doctest, [:mode] => :sass do |t, args|
+  mode = args[:mode] || "debug"
+  throw "Unknown mode #{mode}" unless ["debug", "export"].include?(mode)
+  compress if mode == "export"
+
+  runner = JsDuckRunner.new
+  runner.add_doctest
+  runner.add_debug if mode == "debug"
+  runner.add_seo
+  runner.run
+end
+
 desc "Run JSDuck on official Ext JS 3.4 build\n" +
      "ext3             - creates debug/development version\n" +
      "ext3[export]     - creates export/deployable version\n"
diff --git a/lib/jsduck/app_data.rb b/lib/jsduck/app_data.rb
index bc734812..94345139 100644
--- a/lib/jsduck/app_data.rb
+++ b/lib/jsduck/app_data.rb
@@ -24,6 +24,7 @@ module JsDuck
           :examples => @assets.examples.to_array,
           :search => SearchData.new.create(@relations.classes, @assets),
           :stats => @opts.stats ? Stats.new.create(@relations.classes) : [],
+          :doctests => @relations.classes.collect {|cls| cls[:name]},
           :signatures => MetaTagRegistry.instance.signatures,
           :localStorageDb => @opts.local_storage_db,
           :showPrintButton => @opts.seo,
diff --git a/lib/jsduck/options.rb b/lib/jsduck/options.rb
index 1d929d23..85116c39 100644
--- a/lib/jsduck/options.rb
+++ b/lib/jsduck/options.rb
@@ -33,6 +33,7 @@ module JsDuck
     attr_accessor :seo
     attr_accessor :eg_iframe
     attr_accessor :examples_base_url
+    attr_accessor :doctests
 
     # Debugging
     attr_accessor :processes
@@ -97,6 +98,7 @@ module JsDuck
       @seo = false
       @eg_iframe = nil
       @examples_base_url = "extjs-build/examples/"
+      @doctests = false
 
       # Debugging
       # Turn multiprocessing off by default in Windows
@@ -283,6 +285,10 @@ module JsDuck
           "Base URL for examples with relative URL-s.", " ") do |path|
           @examples_base_url = path
         end
+        
+        opts.on('--doctests', "Creates infrastructure for running tests. Experimental!", " ") do
+          @doctests = true
+        end
 
         opts.separator "Debugging:"
         opts.separator ""
diff --git a/template/app/Application.js b/template/app/Application.js
index c9c8d981..febd7464 100644
--- a/template/app/Application.js
+++ b/template/app/Application.js
@@ -31,7 +31,8 @@ Ext.define('Docs.Application', {
         'Guides',
         'Videos',
         'Stats',
-        'Tabs'
+        'Tabs',
+        'DocTests'
     ],
 
     launch: function() {
diff --git a/template/app/Assert.js b/template/app/Assert.js
new file mode 100644
index 00000000..ed65944e
--- /dev/null
+++ b/template/app/Assert.js
@@ -0,0 +1,17 @@
+/**
+ * Assertions for use by DocTests.
+ */
+Ext.define('Docs.Assert', {
+    singleton: true,
+    
+    assert: function(value, message) {
+        if (!value) {
+            if (Ext.isEmpty(message)) {
+                message = 'value expected to be truthy: ' + value.toString();
+            }
+            var e = new Error(message);
+            e.docAssertFailed = true;
+            throw e;
+        }
+    }
+});
diff --git a/template/app/History.js b/template/app/History.js
index edf5d3ac..21239fc2 100644
--- a/template/app/History.js
+++ b/template/app/History.js
@@ -71,6 +71,9 @@ Ext.define("Docs.History", {
         else if (url.url === "#!/comment") {
             Docs.App.getController('Comments').loadIndex();
         }
+        else if (url.url === "#!/doctests") {
+            Docs.App.getController('DocTests').loadIndex();
+        }
         else {
             if (Docs.App.getController('Welcome').isActive()) {
                 Docs.App.getController('Welcome').loadIndex(noHistory);
@@ -84,7 +87,7 @@ Ext.define("Docs.History", {
 
     // Parses current browser location
     parseToken: function(token) {
-        var matches = token && token.match(/!?(\/(api|guide|example|video|stats|comment)(\/(.*))?)/);
+        var matches = token && token.match(/!?(\/(api|guide|example|video|stats|comment|doctests)(\/(.*))?)/);
         return matches ? {type: matches[2], url: "#!"+matches[1]} : {};
     },
 
diff --git a/template/app/controller/Content.js b/template/app/controller/Content.js
index 22348e15..e5a62be5 100644
--- a/template/app/controller/Content.js
+++ b/template/app/controller/Content.js
@@ -53,7 +53,7 @@ Ext.define('Docs.controller.Content', {
      * @return {String} URL
      */
     getBaseUrl: function() {
-        return document.location.href.replace(/\/?(index.html)?#.*/, "");
+        return document.location.href.replace(/\/?(index.html|template.html)?#.*/, "");
     },
 
     /**
diff --git a/template/app/controller/DocTests.js b/template/app/controller/DocTests.js
new file mode 100644
index 00000000..d18d5f0f
--- /dev/null
+++ b/template/app/controller/DocTests.js
@@ -0,0 +1,148 @@
+/**
+ * Controller for DocTest page.
+ */
+Ext.define('Docs.controller.DocTests', {
+    extend: 'Docs.controller.Content',
+    requires: ['Ext.data.Store', 'Docs.model.DocTest'],
+    baseUrl: "#!/doctests",
+
+    preRegex: /<pre[\s\S]*?>[\s\S]*?<\/pre[\s\S]*?>/gi,
+    preClsRegex: /class=[\s\S]*?inline-example/i,
+    codeRegex: /<code[\s\S]*?>[\s\S]+?<\/code[\s\S]*?>/gi,
+
+    refs: [
+        {
+            ref: 'viewport',
+            selector: '#viewport'
+        },
+        {
+            ref: 'index',
+            selector: '#doctestsindex'
+        },
+        {
+            ref: 'docTestGrid',
+            selector: '#doctestgrid'
+        },
+        {
+            ref: 'testContainer',
+            selector: '#testcontainer'
+        }
+    ],
+    
+    init: function() {
+        this.addEvents('loadIndex');
+
+        this.control({
+            '#doctestgrid': {
+                afterrender: this.onGridAfterRender,
+            }
+        });
+    },
+
+    loadIndex: function() {
+        this.fireEvent('loadIndex');
+        Ext.getCmp('treecontainer').hide();
+        this.callParent([true]);
+    },
+
+    /**
+     * True if welcome page is available.
+     * @return {Boolean}
+     */
+    isActive: function() {
+        return !!this.getIndex().getTab();
+    },
+    
+    /**
+     * Locates all examples.
+     * 
+     * @private
+     * @param {Ext.data.Store}
+     */
+    locateExamples: function(store) {
+        this.clssLeft = Docs.data.doctests.length;
+        this.getTestContainer().setDisabled(true);
+        store.suspendEvents();
+        store.removeAll();
+        Ext.each(Docs.data.doctests, function(cls) {
+            var task = new Ext.util.DelayedTask(function() {
+                this.locateClsExamples(store, cls);
+            }, this);
+            task.delay(0)
+        }, this);
+    },
+
+    /**
+     * Locates all inline examples attached to a class file.
+     * 
+     * @private
+     * @param {Ext.data.Store}
+     * @param {Object}
+     */
+    locateClsExamples: function(store, cls) {
+        var baseUrl = this.getBaseUrl() + '/output/',
+            url = baseUrl + cls + '.js';
+
+        Ext.data.JsonP.request({
+            url: url,
+            callbackName: cls.replace(/\./g, '_'),
+            success: function(json, opts) {
+                var exampleCodes = this.extractExampleCode(json.html),
+                    exampleCodeLength = exampleCodes.length;
+                Ext.each(exampleCodes, function(exampleCode, exampleIdx) {
+                    var name = json.name,
+                        id = name;
+                    if (exampleCodeLength > 1) {
+                        name += ' example #' + (exampleIdx + 1).toString();
+                        id += '-' + exampleIdx.toString();
+                    }
+                    
+                    store.add({
+                        id: id,
+                        name: name,
+                        href: document.location.href.replace(/#.*/, '#!/api/' + json.name),
+                        code: exampleCode,
+                        status: '<span class="doc-test-ready">ready</span>'
+                    });
+                }, this);
+                
+                this.clssLeft--;
+                if (this.clssLeft === 0) {
+                    store.resumeEvents();
+                    store.fireEvent('datachanged', store, {});
+                    this.getTestContainer().setDisabled(false);
+                }
+            },
+            failure: function(response, opts) {
+                console.log('Class load failed', cls, url, response, opts);
+            },
+            scope: this
+        });
+    },
+
+    /**
+     * Extract example code from html.
+     * 
+     * @private
+     * @param {String}
+     */
+    extractExampleCode: function(html) {
+        var exampleCodes = [],
+            preMatches = html.match(this.preRegex);
+        
+        Ext.each(preMatches, function(preMatch) {
+            if (preMatch.match(this.preClsRegex)) {
+                var codeMatches = preMatch.match(this.codeRegex);
+                if (codeMatches) {
+                    exampleCodes.push(codeMatches[0]);
+                }
+            }
+        }, this);
+        return exampleCodes;
+    },
+    
+    onGridAfterRender: function(grid) {
+        var store = grid.getStore();
+        this.locateExamples(store);
+    }
+});
diff --git a/template/app/controller/InlineExamples.js b/template/app/controller/InlineExamples.js
index ed568f77..69151424 100644
--- a/template/app/controller/InlineExamples.js
+++ b/template/app/controller/InlineExamples.js
@@ -8,6 +8,14 @@ Ext.define('Docs.controller.InlineExamples', {
     ],
 
     init: function() {
+        this.addEvents(
+            /**
+             * @event
+             * Fired after example divs have been replaced with InlineWrap components.
+             */
+            'afterreplaceexamples'
+        );
+
         this.control({
             'classoverview': {
                 resize: this.createResizer('.class-overview'),
@@ -33,9 +41,11 @@ Ext.define('Docs.controller.InlineExamples', {
     },
 
     replaceExampleDivs: function() {
+        var inlineWraps = [];
         Ext.Array.each(Ext.query('.inline-example'), function(pre) {
-            Ext.create("Docs.view.examples.InlineWrap", pre);
+            inlineWraps.push(Ext.create("Docs.view.examples.InlineWrap", pre));
         }, this);
+        this.fireEvent('afterreplaceexamples', inlineWraps);
     }
 
 });
diff --git a/template/app/controller/Tabs.js b/template/app/controller/Tabs.js
index 97cd0d0b..fcc3761e 100644
--- a/template/app/controller/Tabs.js
+++ b/template/app/controller/Tabs.js
@@ -33,6 +33,10 @@ Ext.define('Docs.controller.Tabs', {
             ref: 'statsIndex',
             selector: '#statsindex'
         },
+        {
+            ref: 'doctestsIndex',
+            selector: '#doctestsindex'
+        },
         {
             ref: 'commentIndex',
             selector: '#commentindex'
@@ -111,7 +115,8 @@ Ext.define('Docs.controller.Tabs', {
             this.getGuideIndex().getTab(),
             this.getVideoIndex().getTab(),
             this.getExampleIndex().getTab(),
-            this.getStatsIndex().getTab()
+            this.getStatsIndex().getTab(),
+            this.getDoctestsIndex().getTab()
         ], function(x){return x;}));
 
         // just initialize the comments tab.
diff --git a/template/app/model/DocTest.js b/template/app/model/DocTest.js
new file mode 100644
index 00000000..ebc3ea97
--- /dev/null
+++ b/template/app/model/DocTest.js
@@ -0,0 +1,15 @@
+/**
+ * Model for DocTest items
+ */
+Ext.define('Docs.model.DocTest', {
+    extend: 'Ext.data.Model',
+    fields: [
+        'id',
+        'name',
+        'href',
+        'code',
+        'status',
+        'message',
+        'trace'
+    ]
+});
diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js
index 36b3a52c..ed54d3ca 100644
--- a/template/app/view/Viewport.js
+++ b/template/app/view/Viewport.js
@@ -21,7 +21,8 @@ Ext.define('Docs.view.Viewport', {
         'Docs.view.examples.Index',
         'Docs.view.examples.Container',
         'Docs.view.examples.TouchContainer',
-        'Docs.view.stats.Index'
+        'Docs.view.stats.Index',
+        'Docs.view.doctests.Index'
     ],
 
     id: 'viewport',
@@ -148,6 +149,10 @@ Ext.define('Docs.view.Viewport', {
                                     xtype: 'statsindex',
                                     id: 'statsindex'
                                 },
+                                {
+                                    xtype: 'doctestsindex',
+                                    id: 'doctestsindex'
+                                },
                                 {
                                     xtype: 'commentindex',
                                     id: 'commentindex'
diff --git a/template/app/view/doctests/Index.js b/template/app/view/doctests/Index.js
new file mode 100644
index 00000000..e64613bf
--- /dev/null
+++ b/template/app/view/doctests/Index.js
@@ -0,0 +1,224 @@
+/**
+ * The doctests page.
+ */
+Ext.define('Docs.view.doctests.Index', {
+    extend: 'Ext.container.Container',
+    requires: ['Ext.String.format', 'Ext.data.Store', 'Docs.model.DocTest'],
+    alias: 'widget.doctestsindex',
+
+    layout: {
+        type: 'vbox',
+        align: 'stretch',
+        shrinkToFit: true
+    },
+
+    padding: 10,
+
+    items: [
+        {
+            html: '<h1>Doc Tests</h1>'
+        },
+        {
+            itemId: 'testrunner',
+            margin: 5
+        },
+        {
+            itemId: 'testcontainer',
+
+            layout: {
+                type: 'vbox',
+                align: 'stretch',
+                shrinkToFit: true
+            },
+
+            flex: 1,
+            items: [
+                {
+                    itemId: 'testcontrols',
+                    margin: 5,
+                    items: [
+                        {
+                            itemId: 'testResults',
+                            margin: 5
+                        },
+                        {
+                            xtype: 'button',
+                            itemId: 'runallbutton',
+                            text: 'Run All Examples',
+                            margin: 5
+                        }
+                    ]
+                },
+                {
+                    xtype: 'grid',
+                    itemId: 'doctestgrid',
+                    title: 'Doc Tests',
+                    padding: '5 0 5 0',
+                    autoScroll: true,
+                    flex: 1,
+                    columns: [
+                        {
+                            xtype:'templatecolumn',
+                            text: 'Name',
+                            width: 300,
+                            tpl:'<a href="{href}">{name}</a>'
+                        },
+                        {
+                            xtype:'templatecolumn',
+                            text: 'Run',
+                            width: 80,
+                            tpl:'<a href="#" id="run-{id}" class="doc-test-run" onclick="return false;">run example</a>'
+                        },
+                        {
+                            text: 'Status',
+                            width: 80,
+                            dataIndex: 'status'
+                        },
+                        {
+                            text: 'Message',
+                            flex: 1,
+                            dataIndex: 'message'
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+
+    initComponent: function() {
+        var testConfig = this.items[this.items.length - 1];
+        var gridConfig = testConfig.items[testConfig.items.length - 1];
+        gridConfig.store = this.store = Ext.create('Ext.data.Store', {
+            model: 'Docs.model.DocTest',
+            data: []
+        });
+        
+        this.callParent(arguments);
+        
+        var runAllButton = Ext.ComponentQuery.query('#runallbutton', this)[0];
+        runAllButton.on('click', this.onRunAllButtonClick, this);
+        
+        var testGrid = Ext.ComponentQuery.query('#doctestgrid', this)[0];
+        testGrid.on('itemclick', this.onRunLinkClick, this, {
+            delegate: '.doc-test-run',
+            stopEvent: true
+        });
+    },
+
+    /**
+     * Returns tab config for the doctests page.
+     * @return {Object}
+     */
+    getTab: function() {
+        var enabled = !Ext.isEmpty(Docs.data.doctests);
+        return enabled ? {cls: 'doctests', href: '#!/doctests', tooltip: 'DocTests'} : false;
+    },
+
+    /**
+     * Executes an example
+     */
+    runExample: function(tests) {
+        if (!tests.examples || tests.examples.length < 1) {
+            return;
+        }
+        
+        if ((!tests.fail) && (!tests.pass)) {
+            Ext.ComponentQuery.query('#testcontainer', this)[0].setDisabled(true);
+        }
+        
+        this.clearTestRunner();
+        var testRunner = this.getComponent('testrunner');
+        var record = tests.examples.pop();
+        
+        var example = testRunner.add(
+            Ext.create('Docs.view.examples.Inline', {
+                cls: 'doc-test-preview',
+                value: Ext.String.htmlDecode(Ext.util.Format.stripTags(record.get('code'))),
+            })
+        );
+
+        example.on('previewsuccess', Ext.bind(this.onPreviewSuccess, this, [record, tests], true), this);
+        example.on('previewfailure', Ext.bind(this.onPreviewFailure, this, [record, tests], true), this);
+        example.showPreview();
+    },
+
+    clearTestRunner: function() {
+        var testRunner = this.getComponent('testrunner');
+        testRunner.removeAll();
+    },
+
+    showResult: function(tests) {
+        var cls = 'doc-test-success',
+            total = tests.pass + tests.fail,
+            testControls = this.getComponent('testcontainer').getComponent('testcontrols');
+
+        if (tests.fail) {
+            cls = 'doc-test-failure';
+        }
+
+        testControls.remove('testResult');
+        testControls.insert(0, {
+            itemId: 'testResult',
+            html: '<span class="' + cls + '">' + tests.fail.toString() + '/' + total.toString() + ' tests failed</span>'
+        });
+
+        if (tests.examples.length < 1) {
+            Ext.ComponentQuery.query('#testcontainer', this)[0].setDisabled(false);
+        } else {
+            this.runExample(tests);
+        }
+    },
+
+    onRunLinkClick: function(grid, record) {
+        this.runExample({
+            pass: 0,
+            fail: 0,
+            examples: [record],
+        });
+    },
+    
+    onRunAllButtonClick: function() {
+        var examples = [];
+        this.store.each(function(record) {
+            examples.push(record);
+        });
+        this.runExample({
+            pass: 0,
+            fail: 0,
+            examples: examples
+        });
+    },
+
+    onPreviewSuccess: function(preview, obj, record, tests) {
+        this.clearTestRunner();
+        record.set('status', '<span class="doc-test-success">pass</span>');
+        tests.pass++;
+        this.showResult(tests);
+        
+        if (Ext.isDefined(console)) {
+            console.log('Test passed: ', record.get('name'));
+        }
+    },
+
+    onPreviewFailure: function(preview, e, obj, record, tests) {
+        this.clearTestRunner();
+
+        if (e.docAssertFailed) {
+            record.set('status', '<span class="doc-test-failure">fail</span>');
+        } else {
+            record.set('status', '<span class="doc-test-error">error</span>');
+        }
+
+        record.set('message', '(exception logged to console): ' + e.toString());
+        tests.fail++;
+        this.showResult(tests);
+
+        if (Ext.isDefined(console)) {
+            var stack = 'no stack available';
+            if (e.stack) {
+                stack = e.stack;
+            }
+            console.log('Test failure for ' + record.get('name'), e, stack);
+        }
+    }
+});
diff --git a/template/app/view/examples/Inline.js b/template/app/view/examples/Inline.js
index 1df9c5a3..7ea1b10f 100644
--- a/template/app/view/examples/Inline.js
+++ b/template/app/view/examples/Inline.js
@@ -35,7 +35,27 @@ Ext.define('Docs.view.examples.Inline', {
      * @cfg {Docs.view.examples.InlineToolbar} toolbar
      * The toolbar with buttons that controls this component.
      */
-
+    
+    constructor: function() {
+        this.callParent(arguments);
+        
+        this.addEvents([
+            /**
+             * @event previewsuccess
+             * Fired when preview was successfully created.
+             * @param {Ext.Component} this
+             */
+            'previewsuccess',
+            /**
+             * @event previewfailure
+             * Fired when preview contains an error.
+             * @param {Ext.Component} this
+             * @param {Error} exception
+             */
+            'previewfailure',
+        ]);
+    },
+    
     initComponent: function() {
         this.options = Ext.apply({
             device: "phone",
@@ -56,14 +76,19 @@ Ext.define('Docs.view.examples.Inline', {
                 options: this.options
             })
         ];
+        this.relayEvents(this.preview, ['previewsuccess', 'previewfailure']);
 
         if (this.options.preview) {
             this.activeItem = 1;
-            this.toolbar.activateButton("preview");
+            if (this.toolbar) {
+                this.toolbar.activateButton("preview");
+            }
         }
         else {
             this.activeItem = 0;
-            this.toolbar.activateButton("code");
+            if (this.toolbar) {
+                this.toolbar.activateButton("code");
+            }
         }
 
         this.on("afterrender", this.init, this);
@@ -78,7 +103,9 @@ Ext.define('Docs.view.examples.Inline', {
             this.showPreview();
         }
         this.updateHeight();
-        this.initToolbarEvents();
+        if (this.toolbar) {
+            this.initToolbarEvents();
+        }
     },
 
     initToolbarEvents: function() {
@@ -102,7 +129,9 @@ Ext.define('Docs.view.examples.Inline', {
     showCode: function() {
         this.layout.setActiveItem(0);
         this.updateHeight();
-        this.toolbar.activateButton("code");
+        if (this.toolbar) {
+            this.toolbar.activateButton("code");
+        }
         // Weird bug on CodeMirror requires 2 refreshes...
         this.editor.refresh();
         this.editor.refresh();
@@ -115,7 +144,9 @@ Ext.define('Docs.view.examples.Inline', {
         this.preview.update(this.editor.getValue());
         this.layout.setActiveItem(1);
         this.updateHeight();
-        this.toolbar.activateButton("preview");
+        if (this.toolbar) {
+            this.toolbar.activateButton("preview");
+        }
     },
 
     // Syncs the height with number of lines in code example.
diff --git a/template/app/view/examples/InlinePreview.js b/template/app/view/examples/InlinePreview.js
index 598d6b7a..72b29232 100644
--- a/template/app/view/examples/InlinePreview.js
+++ b/template/app/view/examples/InlinePreview.js
@@ -6,11 +6,29 @@ Ext.define('Docs.view.examples.InlinePreview', {
     requires: [
         'Docs.view.examples.Device'
     ],
-
+    
     bodyPadding: '0 10',
-
+    
     statics: {
-        iframeId: 0
+        iframeId: 0,
+        
+        getNextIframeId: function() {
+            return this.iframeId++;
+        },
+        
+        getPreviewByIframeId: function(iframeId) {
+            return Ext.ComponentManager.get('inline-preview-' + iframeId);
+        },
+        
+        previewSuccess: function(iframeId) {
+            var preview = this.getPreviewByIframeId(iframeId);
+            preview.fireEvent('previewsuccess', preview);
+        },
+        
+        previewFailure: function(iframeId, e) {
+            var preview = this.getPreviewByIframeId(iframeId);
+            preview.fireEvent('previewfailure', preview, e);
+        }
     },
 
     /**
@@ -19,11 +37,37 @@ Ext.define('Docs.view.examples.InlinePreview', {
      * See docs of parent component.
      */
     options: {},
-
+    
+    constructor: function(config) {
+        config = config || {};
+        config.iframeId = this.self.getNextIframeId();
+        config.id = 'inline-preview-' + config.iframeId;
+        this.callParent([config]);
+        
+        this.addEvents([
+            /**
+             * @event previewsuccess
+             * Fired when preview was successfully created.
+             * @param {Ext.Component} this
+             */
+            'previewsuccess',
+            /**
+             * @event previewfailure
+             * Fired when preview contains an error.
+             * @param {Ext.Component} this
+             * @param {Error} exception
+             */
+            'previewfailure'
+        ]);
+    },
+    
     initComponent: function() {
         this.html = this.getHtml();
-
+        
         this.callParent(arguments);
+        
+        this.on('success', this.onSuccess, this);
+        this.on('failure', this.onFailure, this);
     },
 
     getHtml: function() {
@@ -40,7 +84,7 @@ Ext.define('Docs.view.examples.InlinePreview', {
                 '<iframe id="{id}" style="width: 100%; height: 100%; border: 0"></iframe>'
             );
             return tpl.apply({
-                id: this.getIframeId()
+                id: this.iframeId
             });
         }
     },
@@ -50,8 +94,9 @@ Ext.define('Docs.view.examples.InlinePreview', {
      * @param {String} code  The code to run inside iframe.
      */
     update: function(code) {
-        var options = this.options;
-        var iframe = document.getElementById(this.getIframeId());
+        var options = this.options,
+            iframeId = this.iframeId,
+            iframe = document.getElementById(iframeId);
 
         if (iframe) {
             // Something is not quite ready when onload fires.
@@ -59,28 +104,18 @@ Ext.define('Docs.view.examples.InlinePreview', {
             // 1 ms works in Chrome, Firefox wants something bigger. Works in IE too.
             iframe.onload = function() {
                 Ext.Function.defer(function() {
-                    iframe.contentWindow.loadInlineExample(code, options);
+                    iframe.contentWindow.loadInlineExample(iframeId, code, options);
                 }, 100);
             };
             iframe.src = "eg-iframe.html";
         }
     },
-
-    // Returns iframe ID for this inline example component.
-    getIframeId: function() {
-        if (!this.iframeId) {
-            this.statics().iframeId += 1;
-            this.iframeId = "eg-iframe" + this.statics().iframeId;
-        }
-        return this.iframeId;
-    },
-
+    
     /**
      * Returns the current height of the preview.
      * @return {Number}
      */
     getHeight: function() {
-        return document.getElementById(this.getIframeId()).parentNode.clientHeight;
+        return document.getElementById(this.iframeId).parentNode.clientHeight;
     }
-
 });
diff --git a/template/eg-iframe.html b/template/eg-iframe.html
index 789e5315..fe19d65f 100644
--- a/template/eg-iframe.html
+++ b/template/eg-iframe.html
@@ -5,16 +5,19 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <title>Sencha Examples</title>
 
-    <script type="text/javascript" src="extjs-build/ext-all.js"></script>
-    <link rel="stylesheet" type="text/css" href="extjs-build/resources/css/ext-all.css">
+    <script type="text/javascript" src="extjs/ext-all.js"></script>
+    <script type="text/javascript" src="app/Assert.js"></script>
+    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
 
     <script type="text/javascript">
-        function loadInlineExample(code, options) {
+        function loadInlineExample(exampleId, code, options) {
             try {
                 document.body.innerHTML = '';
                 eval(code);
+                window.top.Docs.view.examples.InlinePreview.previewSuccess(exampleId);
             } catch (e) {
                 document.body.innerHTML = e;
+                window.top.Docs.view.examples.InlinePreview.previewFailure(exampleId, e);
             }
         }
     </script>
diff --git a/template/resources/sass/_doc_tests.scss b/template/resources/sass/_doc_tests.scss
new file mode 100644
index 00000000..d417920b
--- /dev/null
+++ b/template/resources/sass/_doc_tests.scss
@@ -0,0 +1,24 @@
+// Styles for doc tests
+.doc-test-preview {
+ display: none;
+}
+
+.doc-test-ready {
+ font-weight: bold;
+ color: #333;
+}
+
+.doc-test-error {
+ font-weight: bold;
+ color: orange;
+}
+
+.doc-test-failure {
+ font-weight: bold;
+ color: red;
+}
+
+.doc-test-success {
+ font-weight: bold;
+ color: green;
+}
\ No newline at end of file
diff --git a/template/resources/sass/viewport.scss b/template/resources/sass/viewport.scss
index b47f9d82..43787922 100644
--- a/template/resources/sass/viewport.scss
+++ b/template/resources/sass/viewport.scss
@@ -147,3 +147,6 @@ p.screenshot {
 // Welcome Pages
 @import "extjs_welcome";
 @import "touch_welcome";
+
+// Doc Tests
+@import "doc_tests";
-- 
GitLab