Tests for Application (View)

TODO

@@ -1,6 +1,4 @@
 * Tests
-  * Views
-    * Application
   * Models
     * JSExecution
     * KarolExecution

couchapp/static/spec.html

@@ -22,6 +22,7 @@ <h2>Software tests</h2>
 <script src="/f/spec/views/main_toolbar.js"></script>
 <script src="/f/spec/views/couchdb_session.js"></script>
 <script src="/f/spec/views/structogram.js"></script>
+<script src="/f/spec/views/application.js"></script>
 
 <script>
   $('<link rel="stylesheet" href="/f/vendor/jasmine/jasmine.css" />')

couchapp/templates/ide.html

@@ -1,6 +1,6 @@
 <script>
-  $(window).load(function() {
-    var project = new Karel.Models.Project()
+  $(document).ready(function () {
+    var project = window.project = new Karel.Models.Project()
     project.set(project.parse({{{json}}}), { silent: true })
 
     var application = new Karel.Views.Application({ model: project })

lib/views/application.js

@@ -2,11 +2,11 @@ Karel.Views.Application = Skin.extend({
 
   id: 'application',
 
-  onInsert: function() {
+  onInsert: function () {
     this.container.trigger('insert')
   },
 
-  render: function() {
+  render: function () {
     var world = this.model.get('world')
 
     this.container = new Skin.Split({
@@ -27,23 +27,23 @@ Karel.Views.Application = Skin.extend({
       ] })
     }).appendTo(this.el)
 
-    $(window).resize(_.bind(function() {
+    $(window).resize(_.bind(function () {
       this.container.trigger('resize')
     }, this))
 
-    this.editorToolbar.bind('show-structogram', _.bind(function() {
+    this.editorToolbar.bind('show-structogram', _.bind(function () {
       new Skin.Overlay({ childViews: [
         new Karel.Views.Structogram({ model: this.model })
       ] }).appendTo(document.body)
     }, this))
 
-    var changeWorldView = _.bind(function() {
+    var changeWorldView = _.bind(function () {
       this.toggle.show(['2D', '3D'].indexOf(this.mainToolbar.selectedWorldView()))
     }, this)
     this.mainToolbar.bind('select-world-view', changeWorldView)
     changeWorldView()
 
-    this.model.bind('change:world', _.bind(function() {
+    this.model.bind('change:world', _.bind(function () {
       var world = this.model.get('world')
       this.world2D = new Karel.Views.World2D({ model: world })
         .replace(this.world2D)
@@ -55,7 +55,7 @@ Karel.Views.Application = Skin.extend({
       this.world3D.bind('drop-world', onDropWorld)
     }, this))
 
-    var onDropWorld = _.bind(function(textData) {
+    var onDropWorld = _.bind(function (textData) {
       this.world = Karel.Models.World.fromString(textData)
       this.model.set({ world: this.world })
     }, this)

lib/views/editor_toolbar.js

@@ -1,6 +1,10 @@
 Karel.Views.EditorToolbar = Skin.Toolbar.extend({
 
+  className: 'editor-toolbar',
+
   initialize: function() {
+    Skin.Toolbar.prototype.initialize.call(this)
+
     this.languageSelection = Skin.select([
       { text: "JavaScript", value: 'javascript',
         selected: this.model.get('language') === 'javascript' },

lib/views/main_toolbar.js

@@ -1,6 +1,10 @@
 Karel.Views.MainToolbar = Skin.Toolbar.extend({
 
+  className: 'main-toolbar',
+
   initialize: function() {
+    Skin.Toolbar.prototype.initialize.call(this)
+
     var self = this
     this
       .add(Skin.button("Run",   function () { self.model.run()   }).addClass('run-button'))

lib/views/world_2d.js

@@ -1,5 +1,7 @@
 Karel.Views.World2D = Karel.Views.WorldBase.extend({
 
+  className: 'world-2d',
+
   initialize: function() {
     this.model.bind('change', _.bind(this.delayRender, this))
 

lib/views/world_3d.js

@@ -3,6 +3,8 @@ Skin.hasCanvasSupport =
 
 Karel.Views.World3D = Karel.Views.WorldBase.extend(!Skin.hasCanvasSupport ? {} : {
 
+  className: 'world-3d',
+
   initialize: function() {
     _(this).bindAll('updateRobot', 'updateField', 'delayRender')
 

lib/views/world_toolbar.js

@@ -1,6 +1,10 @@
 Karel.Views.WorldToolbar = Skin.Toolbar.extend({
 
+  className: 'world-toolbar',
+
   initialize: function() {
+    Skin.Toolbar.prototype.initialize.call(this)
+
     var robot = this.model.getRobot()
     var keymap = {}
 

test/spec/views/application.js

@@ -0,0 +1,93 @@
+(function () {
+
+var Application = Karel.Views.Application
+,   Project = Karel.Models.Project
+,   World = Karel.Models.World
+
+describe("Application (View)", function () {
+
+  var project, application
+
+  beforeEach(function () {
+    project = new Project({
+      language: 'karol',
+      code: 'solange nicht istwand tue schritt *solange'
+    })
+    application = new Application({ model: project })
+    application.appendTo(document.body)
+  })
+
+  afterEach(function () {
+    application.remove()
+  })
+
+  it("should contain all subviews that make up the application", function () {
+    expect(application.$('h1').length).toBe(1)
+    expect(application.$('.editor').length).toBe(1)
+    expect(application.$('.editor-toolbar').length).toBe(1)
+    expect(application.$('.main-toolbar').length).toBe(1)
+    expect(application.$('.world-3d').length).toBe(1)
+    expect(application.$('.error-bar').length).toBe(1)
+    expect(application.$('.world-toolbar').length).toBe(1)
+  })
+
+  it("should resize itself when the window resizes", function () {
+    var spy = jasmine.createSpy()
+    application.container.bind('resize', spy)
+    $(window).resize()
+    expect(spy).toHaveBeenCalled()
+  })
+
+  it("should show the structogram", function () {
+    expect($('.structogram').length).toBe(0)
+    application.editorToolbar.trigger('show-structogram')
+    var structogramEl = $('.structogram')
+    expect(structogramEl.length).toBe(1)
+    expect($('> ul > li > .loop-body > ul > li', structogramEl).length).toBe(1)
+    structogramEl.parent().remove()
+  })
+
+  it("should change the world view", function () {
+    var toolbar = application.mainToolbar
+    expect(application.$('.world-3d').length).toBe(1)
+    expect(application.$('.world-2d').length).toBe(0)
+    toolbar.$('.world-view-selection').val('2D')
+    toolbar.trigger('select-world-view')
+    expect(application.$('.world-3d').length).toBe(0)
+    expect(application.$('.world-2d').length).toBe(1)
+    toolbar.$('.world-view-selection').val('3D')
+    toolbar.trigger('select-world-view')
+    expect(application.$('.world-3d').length).toBe(1)
+    expect(application.$('.world-2d').length).toBe(0)
+  })
+
+  it("should replace the old views for the world when the world is replaced by a new one", function () {
+    var oldWorld2D = application.world2D
+    ,   oldWorld3D = application.world3D
+    ,   oldWorldToolbar = application.worldToolbar
+    expect(oldWorld2D).not.toBeFalsy()
+    expect(oldWorld3D).not.toBeFalsy()
+    expect(oldWorldToolbar).not.toBeFalsy()
+    project.set({ world: new World() })
+    expect(application.world2D).not.toBe(oldWorld2D)
+    expect(application.world3D).not.toBe(oldWorld3D)
+    expect(application.worldToolbar).not.toBe(oldWorldToolbar)
+    expect($(oldWorld2D.el).parent().length).toBe(0)
+    expect($(oldWorld3D.el).parent().length).toBe(0)
+    expect($(oldWorldToolbar.el).parent().length).toBe(0)
+  })
+
+  it("should replace the world with a new when the user drops it on a world view", function () {
+    expect(project.get('world').get('width')).not.toBe(2)
+    expect(project.get('world').get('depth')).not.toBe(2)
+    application.world2D.trigger('drop-world', 'KarolVersion2Deutsch 2 2 5 0 0 0 n n n n n o n n n n n o n n n n n o n n n n n o ')
+    expect(project.get('world').get('width')).toBe(2)
+    expect(project.get('world').get('depth')).toBe(2)
+    application.world3D.trigger('drop-world', 'KarolVersion2Deutsch 1 1 5 0 0 0 n n n n n o ')
+    expect(project.get('world').get('width')).toBe(1)
+    expect(project.get('world').get('depth')).toBe(1)
+  })
+
+})
+
+})()