Merge pull request #9 from edx/dhm/aside

Add Aside

acid/__init__.py

-from .acid import AcidBlock, AcidParentBlock
+from .acid import AcidBlock, AcidParentBlock, AcidAside

acid/acid.py

@@ -7,8 +7,8 @@ import webob
 from lazy import lazy
 from mako.lookup import TemplateLookup
 
-from xblock.core import XBlock
-from xblock.fields import Scope, Dict, Boolean
+from xblock.core import XBlock, XBlockAside
+from xblock.fields import Scope, Dict
 from xblock.fragment import Fragment
 
 
@@ -52,12 +52,10 @@ class FailureResponse(webob.Response):
 
 
 @generate_fields
-class AcidBlock(XBlock):
+class AcidSharedMixin(object):
     """
     A testing block that checks the behavior of the container.
     """
-    has_children = False
-
     SUCCESS_CLASS = 'fa fa-check-square-o fa-lg pass'
     FAILURE_CLASS = 'fa fa-times fa-lg fail'
     ERROR_CLASS = 'fa fa-exclamation-triangle fa-lg error'
@@ -84,13 +82,6 @@ class AcidBlock(XBlock):
         """
         return self.template_lookup.get_template(path).render_unicode(**kwargs)
 
-    @lazy
-    def parent_value(self):
-        """
-        This value is used to test that AcidBlock are visible to their parents.
-        """
-        return random.randint(0, 9999)
-
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
         data = pkg_resources.resource_string(__name__, path)
@@ -132,43 +123,6 @@ class AcidBlock(XBlock):
             'handler_url': self.runtime.handler_url(self, 'check_storage', suffix, query)
         }
 
-    def fallback_view(self, view_name, context=None):               # pylint: disable=W0613
-        """
-        This view is used by the Acid XBlock to test various features of
-        the runtime it is contained in
-        """
-        scopes = (
-            scope
-            for scope in Scope.scopes()
-            if (view_name not in self.enabled_fields
-                or scope.name in self.enabled_fields[view_name])
-        )
-
-        scope_test_contexts = []
-        for scope in scopes:
-            try:
-                scope_test_contexts.append(self.setup_storage(scope.name))
-            except Exception:
-                logging.warning('Unable to use scope in acid test', exc_info=True)
-
-        frag = Fragment(self.render_template(
-            'html/acid.html.mako',
-            error_class=self.ERROR_CLASS,
-            success_class=self.SUCCESS_CLASS,
-            failure_class=self.FAILURE_CLASS,
-            unknown_class=self.UNKNOWN_CLASS,
-            storage_tests=scope_test_contexts,
-            local_resource_url=self.runtime.local_resource_url(self, 'public/test_data.json'),
-        ))
-
-        frag.add_javascript(self.resource_string("static/js/jquery.ajaxq-0.0.1.js"))
-        frag.add_javascript(self.resource_string('static/js/acid_update_status.js'))
-        frag.add_javascript(self.resource_string('static/js/acid.js'))
-        frag.add_css(self.resource_string("static/css/acid.css"))
-        frag.add_css_url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')
-        frag.initialize_js('AcidBlock')
-        return frag
-
     @XBlock.handler
     def check_storage(self, request, suffix=''):
         """
@@ -227,6 +181,57 @@ class AcidBlock(XBlock):
 
         return SuccessResponse(self.setup_storage(scope))
 
+
+class AcidBlock(XBlock, AcidSharedMixin):
+    """
+    A testing block that checks the behavior of the container. The XBlock specific aspects
+    """
+    has_children = False
+
+    @lazy
+    def parent_value(self):
+        """
+        This value is used to test that AcidBlock are visible to their parents.
+        """
+        return random.randint(0, 9999)
+
+    def fallback_view(self, view_name, context=None):  # pylint: disable=W0613
+        """
+        This view is used by the Acid XBlock to test various features of
+        the runtime it is contained in
+        """
+        scopes = (
+            scope
+            for scope in Scope.scopes()
+            if (view_name not in self.enabled_fields
+                or scope.name in self.enabled_fields[view_name])
+        )
+
+        scope_test_contexts = []
+        for scope in scopes:
+            try:
+                scope_test_contexts.append(self.setup_storage(scope.name))
+            except Exception:
+                logging.warning('Unable to use scope in acid test', exc_info=True)
+
+        frag = Fragment(self.render_template(
+            'html/acid.html.mako',
+            error_class=self.ERROR_CLASS,
+            success_class=self.SUCCESS_CLASS,
+            failure_class=self.FAILURE_CLASS,
+            unknown_class=self.UNKNOWN_CLASS,
+            storage_tests=scope_test_contexts,
+            local_resource_url=self.runtime.local_resource_url(self, 'public/test_data.json'),
+        ))
+
+        frag.add_javascript(self.resource_string("static/js/jquery.ajaxq-0.0.1.js"))
+        frag.add_javascript(self.resource_string('static/js/acid_update_status.js'))
+        frag.add_javascript(self.resource_string('static/js/acid.js'))
+        frag.add_css(self.resource_string("static/css/acid.css"))
+        frag.add_css_url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')
+        frag.initialize_js('AcidBlock')
+        return frag
+
     @staticmethod
     def workbench_scenarios():
         """A canned scenario for display in the workbench."""
@@ -241,6 +246,49 @@ class AcidBlock(XBlock):
         ]
 
 
+class AcidAside(XBlockAside, AcidSharedMixin):
+    """
+    A testing aside
+    """
+    @XBlockAside.aside_for('student_view')
+    def aside_view(self, block, context=None):
+        """
+        This view is used by the Acid Aside to test various features of
+        the runtime it is contained in
+        """
+        scopes = (
+            scope
+            for scope in Scope.scopes()
+            if scope.name in self.enabled_fields['student_view']
+        )
+
+        scope_test_contexts = []
+        for scope in scopes:
+            try:
+                scope_test_contexts.append(self.setup_storage(scope.name))
+            except Exception:
+                logging.warning('Unable to use scope in acid test', exc_info=True)
+
+        frag = Fragment(self.render_template(
+            'html/aside.html.mako',
+            usage_id=block.scope_ids.usage_id,
+            error_class=self.ERROR_CLASS,
+            success_class=self.SUCCESS_CLASS,
+            failure_class=self.FAILURE_CLASS,
+            unknown_class=self.UNKNOWN_CLASS,
+            storage_tests=scope_test_contexts,
+            local_resource_url=self.runtime.local_resource_url(self, 'public/test_data.json'),
+        ))
+
+        frag.add_javascript(self.resource_string("static/js/jquery.ajaxq-0.0.1.js"))
+        frag.add_javascript(self.resource_string('static/js/acid_update_status.js'))
+        frag.add_javascript(self.resource_string('static/js/acid.js'))
+        frag.add_css(self.resource_string("static/css/acid.css"))
+        frag.add_css_url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')
+        frag.initialize_js('AcidAsideBlock', {'test_aside': isinstance(block, AcidBlock)})
+        return frag
+
+
 @generate_fields
 class AcidParentBlock(AcidBlock):
     """

acid/static/css/acid.css

@@ -2,6 +2,11 @@
     padding-left: 30px;
 }
 
+.aside-block {
+    padding-left: 8px;
+    font-size: smaller;
+}
+
 .fail {
     color: red;
 }

acid/static/html/aside.html.mako

+<%! import json %>
+
+<div class="aside-block"
+    data-success-class="${success_class}"
+    data-failure-class="${failure_class}"
+    data-error-class="${error_class}"
+    data-unknown-class="${unknown_class}"
+    data-local-resource-url="${local_resource_url}"
+>
+    <button>Acid Aside for ${usage_id}</button>
+    <div>
+        <p>JS init function run:
+            <span class="js-init-run">
+                <i class="${unknown_class}"></i>
+            </span>
+        </p>
+        <p>Resource Url Test:
+            <span class="local-resource-test">
+                <i class="${unknown_class}"></i>
+            </span>
+        </p>
+        <table class='storage-tests'>
+            <tr>
+                <th>Scope</th>
+                <th>Server-side<br>handler_url<br>returned</th>
+                <th>Server-side<br>handler_url<br>succeeded</th>
+                <th>Client-side<br>handler_url<br>returned</th>
+                <th>Client-side<br>handler_url<br>succeeded</th>
+            </tr>
+            % for test in storage_tests:
+                <tr class="scope-storage-test scope-${test['scope']} ${loop.cycle('', 'alt')}"
+                    data-handler-url="${test['handler_url']}"
+                    data-scope="${test['scope']}"
+                    data-value="${test['value']}"
+                >
+                    <td>${test['scope']}</td>
+                    <td>
+                        <span class="server-storage-test-returned">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                    <td>
+                        <span class="server-storage-test-succeeded">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                    <td>
+                        <span class="client-storage-test-returned">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                    <td>
+                        <span class="client-storage-test-succeeded">
+                            <i class="${unknown_class}"></i>
+                        </span>
+                    </td>
+                </tr>
+            % endfor
+        </table>
+        <p>Sees Acid DOM: <span class="acid-dom"><i class="${unknown_class}"></i></span></p>
+    </div>
+</div>

acid/static/js/acid.js

 /* Javascript for the Acid XBlock. */
-function AcidBlock(runtime, element) {
 
-    function acidData(key) {
-        return $('.acid-block', element).data(key);
+function AcidBlock(runtime, element, fields) {
+    this.runtime = runtime;
+    this.element = element;
+    if (fields && fields.acid_data_ele) {
+        this.acid_data_ele = fields.acid_data_ele;
+    } else {
+        this.acid_data_ele = $(this.element).children('div[data-error-class]')[0];
     }
+    this.type = $(element).data('block-type')
 
-    function mark(result, selector, subelem, msg) {
-        acid_update_status(selector, subelem, element, msg,
-            acidData(result + '-class'), acidData('error-class'));
-    }
+    this.mark('success', '.js-init-run', $(element));
+    this.resourceTests();
+    this.scopeTests();
+}
+
+AcidBlock.prototype = {
+    acidData: function(key) {
+        return $(this.acid_data_ele).data(key);
+    },
+
+    mark: function(result, selector, subelem, msg) {
+        acid_update_status(selector, subelem, this.element, msg,
+            this.acidData(result + '-class'), this.acidData('error-class'));
+    },
 
-    function resourceTests() {
-        $.get(acidData('local-resource-url'))
+    resourceTests: function() {
+        var that = this;
+        $.get(this.acidData('local-resource-url'))
             .fail(function() {
-                mark('failure', '.local-resource-test', element, 'Unable to load local resource');
+                that.mark('failure', '.local-resource-test', that.element, 'Unable to load local resource');
             })
             .done(function(data) {
                 if (data.test_data === 'success') {
-                    mark('success', '.local-resource-test');
+                    that.mark('success', '.local-resource-test', $(that.element));
                 } else {
-                    mark('failure', '.local-resource-test', element, 'Data mismatch');
+                    that.mark('failure', '.local-resource-test', that.element, 'Data mismatch');
                 }
             });
-    }
+    },
 
-    function scopeTests() {
-        $('.scope-storage-test', element).each(function() {
+    scopeTests: function() {
+        var that = this;
+        $('.scope-storage-test', this.acid_data_ele).each(function() {
             var $this = $(this);
             $.ajaxq("acid-queue", {
                 type: "POST",
                 data: {"VALUE": $this.data('value')},
                 url: $this.data('handler-url'),
+                context: that,
                 success: function (ret) {
-                    mark('success', '.server-storage-test-returned', $this);
+                    this.mark('success', '.server-storage-test-returned', $this);
                     if (ret.status === "ok") {
-                        mark('success', '.server-storage-test-succeeded', $this);
+                        this.mark('success', '.server-storage-test-succeeded', $this);
 
                         $.ajaxq("acid-queue", {
                             type: "POST",
                             data: {"VALUE": ret.value},
-                            url: runtime.handlerUrl(element, "check_storage", ret.suffix, ret.query),
+                            url: this.runtime.handlerUrl(this.element, "check_storage", ret.suffix, ret.query),
+                            context: this,
                             success: function (ret) {
-                                mark('success', '.client-storage-test-returned', $this);
+                                this.mark('success', '.client-storage-test-returned', $this);
 
                                 if (ret.status === "ok") {
-                                    mark('success', '.client-storage-test-succeeded', $this);
+                                    this.mark('success', '.client-storage-test-succeeded', $this);
                                 } else {
-                                    mark('failure', '.client-storage-test-succeeded', $this, ret.message);
+                                    this.mark('failure', '.client-storage-test-succeeded', $this, ret.message);
                                 }
                             }
                         });
                     } else {
-                        mark('failure', '.server-storage-test-succeeded', $this, ret.message);
+                        this.mark('failure', '.server-storage-test-succeeded', $this, ret.message);
                     }
                 }
             });
         });
     }
+};
 
-    mark('success', '.js-init-run');
-
-    resourceTests();
-    scopeTests();
 
-    return {parentValue: acidData('parent-value')};
+function AcidAsideBlock(runtime, element, block_element, init_args) {
+    AcidBlock.call(this, runtime, element);
+    this.block_element = block_element;
+    this.test_aside = init_args['test_aside']
+    $(element).find("div > button + div").toggle();
+    $(element).find("div > button").click(
+        function() { $(this).next("div").toggle(); }
+    )
+    this.runTests();
+}
+AcidAsideBlock.prototype = Object.create(AcidBlock.prototype);
+AcidAsideBlock.prototype.runTests = function() {
+    if (this.test_aside) {
+        if (this.block_element.data('block-type') === 'acid') {
+            this.mark('success', '.acid-dom', $(this.element));
+        } else {
+            this.mark('failure', '.acid-dom', $(this.element));
+        }
+    }
 }

acid/static/js/acid_parent.js

 /* Javascript for the Acid XBlock. */
 function AcidParentBlock(runtime, element) {
+    // this looks like but isn't really a subclass of AcidBlock
+    this.runtime = runtime;
+    this.element = element;
+    this.type = $(element).data('block-type');
 
-    function acidData(key) {
-        return $('.acid-parent-block', element).data(key);
-    }
+    var acid_frag_dom = $("> div > .acid-block", element);
+    this.acid_frag = new AcidBlock(runtime, element, {acid_data_ele: acid_frag_dom});
+    this.childTests();
+}
 
-    function mark(result, selector, subelem, msg) {
-        acid_update_status(selector, subelem, element, msg,
-            acidData(result + '-class'), acidData('error-class'));
-    }
+AcidParentBlock.prototype = {
+    acidData: function(key) {
+        return $(this.element).children('div[data-' + key + ']').data(key);
+    },
 
-    function childTests() {
-        var acidChildCount = runtime.children(element).filter(function(child) {
-            return child.type == "acid";
+    mark: function(result, selector, subelem, msg) {
+        acid_update_status(selector, subelem, this.element, msg,
+            this.acidData(result + '-class'), this.acidData('error-class'));
+    },
+    childTests: function(){
+        var acidChildCount = this.runtime.children(this.element).filter(function(child) {
+            return child.type === "acid";
         }).length;
-        if (acidData('acid-child-count') == acidChildCount) {
-            mark('success', '.child-counts-match');
-        }
-
-        var childValues = JSON.parse($('.acid-child-values', element).html());
+        this.mark((this.acidData('acid-child-count') == acidChildCount) ? 'success' : 'failure', '.child-counts-match');
+    
+        var childValues = JSON.parse($('.acid-child-values', this.element).html());
+        var that = this;
         $.each(childValues, function(name, value) {
-            var child_value = runtime.childMap(element, name).parentValue;
+            var child_value = that.runtime.childMap(that.element, name).parentValue;
             if (child_value !== value) {
-                mark(
-                    'failure', '.child-values-match', element,
+                that.mark(
+                    'failure', '.child-values-match', that.element,
                     'Child ' + name + ' had value ' + child_value + ' but expected ' + value
                 );
                 return;
             }
         });
-        mark('success', '.child-values-match');
+        this.mark('success', '.child-values-match');
     }
-
-    AcidBlock(runtime, element);
-    childTests();
-
-    return {parentValue: acidData('parent-value')};
 }

setup.py

@@ -31,6 +31,9 @@ setup(
             'acid = acid:AcidBlock',
             'acid_parent = acid:AcidParentBlock',
         ],
+        'xblock_asides.v1': [
+            'acid_aside = acid:AcidAside',
+        ]
     },
     package_data=package_data("acid", ["static", "public"]),
 )