Merge pull request #87 from premasagar/feature/tests

Feature/tests

Gruntfile.coffee

@@ -79,8 +79,8 @@ module.exports = (grunt) ->
         tasks: ["build"]
 
       karma:
-        files: ["sqwidget/**", "sqwidget/tests/**"]
-        tasks: ["karma:unit:run"]
+        files: ["sqwidget/**/*.coffee", "sqwidget/tests/**/*.coffee"]
+        tasks: ["build", "karma"]
 
   grunt.loadNpmTasks('grunt-contrib-coffee')
   grunt.loadNpmTasks('grunt-contrib-watch');

bower.json

@@ -8,6 +8,8 @@
     "requirejs-i18n": "",
     "jquery": "",
     "require-css": "",
+    "requirejs-text": "",
+    "requirejs-ractive": "",
     "ractive": "",
     "normalize-css": ""
   }

config/karma.conf.js

@@ -3,49 +3,44 @@
 
 module.exports = function(config) {
   config.set({
-
+    // set pre-processors to empty since karma has stupid defaults
+    preprocessors: { },
     // base path, that will be used to resolve files and exclude
     basePath: '../',
 
-
     // frameworks to use
     frameworks: ['mocha', 'requirejs'],
 
-
     // list of files / patterns to load in the browser
     files: [
       'compiled/tests/js/test-main.js',
+      {pattern: 'node_modules/karma-chai-plugins/node_modules/chai/chai.js', included: false},
+      {pattern: 'compiled/tests/js/spec/**/*.js', included: false},
       {pattern: 'compiled/tests/js/spec/**/*.js', included: false},
       {pattern: 'compiled/sqwidget/js/**/*.js', included: false},
-      {pattern: 'sqwidget/lib/**/*.js', included: false, watched: false}
+      {pattern: 'widgets/**', included: false, watch: true},
+      {pattern: 'sqwidget/lib/**/*.js', included: false, watched: false},
     ],
 
-
     // list of files to exclude
     exclude: [ ],
 
-
     // test results reporter to use
     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
     reporters: ['progress'],
 
-
     // web server port
     port: 9876,
 
-
     // enable / disable colors in the output (reporters and logs)
     colors: true,
 
-
     // level of logging
     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
+    logLevel: config.LOG_ERROR,
 
     // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
+    autoWatch: false,
 
     // Start these browsers, currently available:
     // - Chrome
@@ -55,15 +50,17 @@ module.exports = function(config) {
     // - Safari (only Mac)
     // - PhantomJS
     // - IE (only Windows)
-    browsers: ['Chrome', 'Firefox', 'PhantomJS'],
-
+    browsers: [
+    //'Chrome',
+      //,'Firefox'
+      'PhantomJS'
+    ],
 
     // If browser does not capture in given timeout [ms], kill it
     captureTimeout: 60000,
 
-
     // Continuous Integration mode
     // if true, it capture browsers, run tests and exit
-    singleRun: false
+    singleRun: true,
   });
 };

package.json

@@ -19,15 +19,13 @@
     "karma-script-launcher": "~0.1.0",
     "karma-chrome-launcher": "~0.1.0",
     "karma-firefox-launcher": "~0.1.0",
-    "karma-html2js-preprocessor": "~0.1.0",
     "karma-requirejs": "~0.1.0",
-    "karma-coffee-preprocessor": "~0.1.0",
     "karma-phantomjs-launcher": "~0.1.0",
     "karma": "~0.10.2",
     "grunt-karma": "~0.6.2",
-    "karma-chai": "0.0.1",
     "mocha": "~1.13.0",
     "karma-mocha": "~0.1.0",
-    "karma-sinon": "0.0.1"
+    "karma-sinon": "0.0.1",
+    "karma-chai-plugins": "~0.1.3"
   }
 }

publisher/index.html

@@ -21,5 +21,11 @@ <h2>Publisher Website</h2>
       data-sqwidget-message="The Second Widget!"
       data-sqwidget-background-color="#FFF" data-sqwidget-color="#F00"></div>
 
+    <hr />
+
+    <div data-sqwidget="//localhost:8002/test"
+      data-sqwidget-message="With Ractive"
+      data-sqwidget-background-color="#FFF" data-sqwidget-color="#F00"></div>
+
   </body>
 </html>

sqwidget/app/component/core.coffee

@@ -0,0 +1,46 @@
+define ['underscore','backbone'], (_, Backbone) ->
+
+  class SqwidgetCore
+    constructor: () ->
+      _.extend(@, Backbone.Events)
+
+    registered: []
+
+    register: (el) ->
+      $this = $(el).addClass('sqwidget')
+      opts = @getWidgetParams($this)
+      pkg = el: $this, opts: opts
+      _.extend(pkg, Backbone.Events)
+      @registered.push(pkg)
+
+      throw new Error("No widget source") unless opts.url
+
+      # we're expecting an 'index.js' file inside every widget.
+      require ["#{opts.url}/js/index.js"], (module) =>
+        # 'settings' object defines all the settings that were passed in via the
+        # embed code.
+        widget = new module.Controller({settings: opts, sqwidget: @, el: $this})
+        pkg.instance = widget
+        # fire a 'rendered' method so that the widget can do any post-render
+        # operations that it needs to do.
+        #widget.view.trigger("rendered")
+        pkg.trigger("rendered")
+        @trigger("rendered:#{widget.id || opts.url}")
+      return pkg
+
+    # returns an array of all the custom widget parameters. The new keys are
+    # lowercase concatenated attributes from the embed code with 'data-sqwidget-'
+    # removed.
+    #
+    # eg:
+    #     'data-sqwidget-color="#F00" -> `data['color'] = '#F00'`
+    #     'data-sqwidget-bg-color='#FFF' -> data['bgcolor'] = '#FFF'
+    #
+    getWidgetParams: ($el) ->
+      data = {}
+      for key, val of $el.data()
+        key = key.replace("sqwidget", "").toLowerCase()
+        data[key || "url" ] = val
+      data
+
+

sqwidget/app/widget.coffee

@@ -1,57 +1,24 @@
 requirejs.config
   paths:
-    require: '../../lib/requirejs/require'
     jquery: '../../lib/jquery/jquery'
     underscore: '../../lib/underscore-amd/underscore'
     backbone: '../../lib/backbone-amd/backbone'
-    ractive: '../../lib/ractive/Ractive'
+    Ractive: '../../lib/ractive/Ractive'
+    text: '../../lib/requirejs-text/text',
+    rv: '../../lib/requirejs-ractive/rv',
     normalize: '../../lib/normalize-css/normalize'
     config: '../../config'
 
 # The module that is loaded first
 requirejs [
   'jquery'
-  'underscore'
-  'backbone'
-  'require'
-  'ractive'
-], ($, _, Backbone, require, Ractive) ->
-  # the only global object that we will use.
-  Sqwidget = window.Sqwidget || {}
-
-  # add pub/sub to sqwidget. may be removed for a cleaner implementation
-  _.extend(Sqwidget, Backbone.Events)
+  'component/core'
+], ($, Core) ->
 
-  # Just loads all the widgets
-  # TODO: Remove jQuery.
-  $(document).ready () =>
+  # the only global object that we will use.
+  sqwidget = window.sqwidget = new Core()
+  # Iterate all elements and register
+  $(document).ready ->
     $('div[data-sqwidget]').each (index) ->
-      $this = $(this).addClass('sqwidget')
-      url = $this.data('sqwidget')
-      # we're expecting an 'index.js' file inside every widget.
-      # TODO: Use grunt to concat all the widget JS files into a single index.js
-      # file.
-      require ["#{url}/js/index.js"], (module) ->
-        params = getWidgetParams($this)
-        # 'settings' object defines all the settings that were passed in via the
-        # embed code.
-        widget = new module.Controller({settings: params})
-        $this.html(widget.view.el)
-        # fire a 'rendered' method so that the widget can do any post-render
-        # operations that it needs to do.
-        widget.view.trigger("rendered")
+      sqwidget.register(@)
 
-  # returns an array of all the custom widget parameters. The new keys are
-  # lowercase concatenated attributes from the embed code with 'data-sqwidget-'
-  # removed.
-  #
-  # eg:
-  #     'data-sqwidget-color="#F00" -> `data['color'] = '#F00'`
-  #     'data-sqwidget-bg-color='#FFF' -> data['bgcolor'] = '#FFF'
-  getWidgetParams = ($widget) ->
-    data = []
-    for key, val of $widget.data()
-      key = key.replace("sqwidget", "").toLowerCase()
-      if key != ""
-        data[key] = val
-    data

sqwidget/lib/.gitignore

@@ -1,2 +1,2 @@
-.
 *
+!*.js

sqwidget/tests/spec/core.coffee

@@ -0,0 +1,24 @@
+define ['chai', 'jquery', 'component/core'], (chai, $, Core) ->
+  assert = chai.assert
+  describe 'Core', ->
+    sqwidget = new Core()
+    src = $("<div data-sqwidget-test='moo' data-sqwidget='/base/widgets/test'></div>'")
+
+    describe '#register()', ->
+      widget = sqwidget.register(src)
+
+      it 'should register widget', ->
+        assert.lengthOf(sqwidget.registered, 1, "Registered module")
+
+      it 'should parse params correctly', ->
+        assert.deepEqual( widget.opts, { test: 'moo', url: '/base/widgets/test' } , "params parsed")
+
+      it 'should trigger rendered event', (done) ->
+        widget.on 'rendered', ->
+          assert.ok "Triggered event"
+          assert.equal(src.html(),
+            '<div>TEST</div>'
+            'Rendered Ractive view correctly'
+          )
+          done()
+

sqwidget/tests/test-main.coffee

@@ -1,17 +1,22 @@
 tests = []
+
 for file of window.__karma__.files
   if /spec\//.test(file)
     tests.push(file)
 
+
 requirejs.config
   baseUrl: "/base/compiled/sqwidget/js/"
   paths:
-    require: '../../../sqwidget/lib/requirejs/require'
+    chai: '../../../node_modules/karma-chai-plugins/node_modules/chai/chai'
     jquery: '../../../sqwidget/lib/jquery/jquery'
     underscore: '../../../sqwidget/lib/underscore-amd/underscore'
     backbone: '../../../sqwidget/lib/backbone-amd/backbone'
-    ractive: '../../../sqwidget/lib/ractive/Ractive'
+    Ractive: '../../../sqwidget/lib/ractive/Ractive'
+    text: '../../../sqwidget/lib/requirejs-text/text'
+    rv: '../../../sqwidget/lib/requirejs-ractive/rv'
     normalize: '../../../sqwidget/lib/normalize-css/normalize'
+
   deps: tests
   callback: ->
     #set the URI for the example widgets to the karma server port

widgets/pa-olympics-api/src/index.coffee

@@ -2,7 +2,7 @@ define [
   'jquery'
   'underscore'
   'backbone'
-  'ractive'
+  'Ractive'
   'component/resources'
   'config'
 ], ($, _, Backbone, Ractive, resources, config) ->

widgets/test/js

@@ -0,0 +1 @@
+../../compiled/widgets/js/test/src

widgets/test/src/index.coffee

@@ -0,0 +1,20 @@
+#Example widget using ractive to handle its view
+
+define [
+  'underscore'
+  'backbone'
+  'Ractive'
+  'rv!../templates/test.html'
+  #"css!./css/app.css"
+], (_, Backbone, Ractive, template) ->
+  module = {views: {}}
+
+  class module.Controller
+    constructor: ({@el, @settings} = {}) ->
+      view = new Ractive
+        el: @el,
+        template: template,
+        data:
+          test: "TEST"
+
+  module

widgets/test/templates/test.html

@@ -0,0 +1 @@
+<div>{{test}}</div>