netzke-testing 0.9.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: f6a8e145a80cbd76fe5872a58d199b5c0c3f6002
+  data.tar.gz: e7bef8a910494ec36fc1d4979f01f990bb1baac7
+SHA512:
+  metadata.gz: ecb548ed750a7cdaa03b3a8eb517524c220de8f4a0bc8f845a5a34ad8425773afdb3c8c595633d5d5d240752d2d827b8f3c825ebe06dfe972ed906b622acc3a2
+  data.tar.gz: 8db04d54ff7ebbd9c731297c783dc02ff7a2faea022512bdef617b49b01ef339ea22dc99cd23528c40641e2693db5b4c422a53bfdd105eefafcb1fc6e086d422

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in netzke-testing.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Max Gorin
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,106 @@
+# Netzke Testing
+
+This gem helps with development and testing of Netzke components. In parcticular, it helps you with:
+
+  * isolated component development
+  * client-side testing of components with Mocha and Expect.js
+
+Usage:
+
+    gem 'netzke_testing'
+
+## Isolated component development
+
+The gem implements a Rails engine, which (in development and test environments only) adds a route to load your
+application's Netzke components individually, which can be useful for isolated development.  Example (say, we have a
+UserGrid component defined):
+
+    http://localhost:3000/netzke/components/UserGrid
+
+This will load a view with UserGrid occupying the available window width, with default height of 400px. You can change
+the height by providing the `height` parameter in the URL:
+
+    http://localhost:3000/netzke/components/UserGrid?height=600
+
+## Testing components with Mocha and Expect.js
+
+Place the Mocha specs (written in Coffeescript) for your components inside `spec/javascripts` folder. An example spec
+may look like this (in `spec/javascripts/user_grid.js.coffee`):
+
+    describe 'UserGrid', ->
+      it 'shows proper title', ->
+        grid = Ext.ComponentQuery.query('panel[id="user_grid"]')[0]
+        expect(grid.getHeader().title).to.eql 'Test component'
+
+This spec can be run by appending the `spec` parameter to the url:
+
+    http://localhost:3000/netzke/components/UserGrid?spec=user_grid
+
+Specs can be structured into directories. For example, let's say we have a namescope for admin components:
+
+    class Admin::UserGrid < Netzke::Basepack::Grid
+    end
+
+It makes sense to put the corresponding specs in `spec/javascripts/admin/user_grid.js.coffee`. In this case, the URL
+to run the Mocha specs will be:
+
+    http://localhost:3000/netzke/components/UserGrid?spec=admin/user_grid
+
+## Mocha spec helpers
+
+The gem provides a number of helpers that may help you writing less code and make your specs look something like this:
+
+    describe 'UserGrid', ->
+      it 'allows instant removing of all users with a single button click', (done) ->
+        click button 'Remove all'
+        wait ->
+          expectToSee header 'Empty'
+          done()
+
+Keep in mind the following:
+
+  * the current set of helpers is in flux, and may be drastically changed sooner than you may expect
+  * the helpers directly pollute the `window` namespace; if you decide you're better off without provided helpers,
+  specify 'no-helpers=true' as an extra URL parameter
+
+See the [source code](TODO) for currently implemented helpers. Also, refer to other Netzke gems source code (like
+netzke-core and netzke-basepack) to see examples using the helpers.
+
+## Testing with selenium webdriver
+
+Generate the `netzke_mocha_spec.rb` file that will automatically run the specs that follow a certain naming convention:
+
+    rails g netzke_testing
+
+This spec will pick up all the `*_spec.js.coffee` files from `spec/javascripts` folder and generate an `it` clause for
+each of them. Let's say we want to create the spec for UserGrid. For this we name the spec file
+`spec/javascripts/user_grid_spec.js.coffee`. And the other way around: when `netzke_mocha_spec.rb` finds a file called
+`spec/javascripts/order_grid_spec.js.coffee`, it'll assume existance of `OrderGrid` component that should be tested.
+
+## Mixing client- and server-side testing code
+
+Often we want to run some Ruby code before running the Mocha spec (e.g. to seed some test data using factories), or
+after (e.g. to assert changes in the database). In this case you can create a RSpec spec that uses the `run_mocha_spec`
+helper provided by the `netzke_testing` gem. Here's an example (in `spec/user_grid_spec.rb`):
+
+    require 'spec_helper'
+    feature GridWithDestructiveButton do
+      it 'allows instant removing of all records with a single button click', js: true do
+        10.times { FactoryGirl.create :user }
+        User.count.should == 10
+        run_mocha_spec 'grid_with_destructive_button'
+        User.count.should == 0
+      end
+    end
+
+The `run_mocha_spec` here will run a Mocha spec from `spec/grid_with_destructive_button.js.coffee`.
+
+You can explicitely specify a component to run the spec on (in order to override the convention):
+
+    run_mocha_spec 'grid_with_destructive_button', component: 'UserGrid'
+
+---
+Copyright (c) 2008-2013 [Max Gorin](https://twitter.com/uptomax), released under the MIT license (see LICENSE).
+
+**Note** that Ext JS is licensed [differently](http://www.sencha.com/products/extjs/license/), and you may need to
+purchase a commercial license in order to use it in your projects!

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/javascripts/netzke/testing/helpers/actions.js.coffee

@@ -0,0 +1,74 @@
+Ext.Ajax.on 'beforerequest', ->
+  Netzke.ajaxCount = window.ajaxCount || 0
+  Netzke.ajaxCount += 1
+
+Ext.Ajax.on 'requestcomplete', ->
+  Netzke.ajaxCount -= 1
+
+Ext.apply window,
+  # Examples:
+  #
+  #   wait ->
+  #     afterAllAjaxActivityIsStopped()
+  #
+  #   wait 2000, ->
+  #     afterTwoSeconds()
+  wait: () ->
+    if typeof arguments[0] == 'function'
+      callback = arguments[0]
+      i = 0
+      id = setInterval ->
+        i += 1
+        if i >= 100
+          clearInterval(id)
+          callback.call()
+
+        # this way we ensure another 20ms cycle before we issue a callback
+        i = 100 if Netzke.ajaxCount == 0
+      , 100
+    else
+      delay = arguments[0]
+      callback = arguments[1]
+      setInterval ->
+        callback.call()
+      , delay
+
+  click: (cmp) ->
+    if Ext.isString(cmp)
+      throw "Could not locate " + cmp
+    else if (cmp.isXType) # is Ext component
+      if (cmp.isXType('tool'))
+        # a hack needed for tools
+        el = cmp.toolEl
+      else
+        el = cmp.getEl()
+
+      el.dom.click()
+    else if Ext.isElement(cmp)
+      cmp.click()
+
+  # Closes the first found window
+  closeWindow: ->
+    Ext.ComponentQuery.query("window[hidden=false]")[0].close()
+
+  select: (value, params, callback) ->
+    params ?= params
+    combo = params.in
+    if combo.isExpanded
+      combo.setValue combo.findRecordByDisplay value
+      combo.collapse()
+    else
+      combo.onTriggerClick()
+      if callback
+        wait ->
+          rec = combo.findRecordByDisplay value
+          combo.select rec
+          combo.fireEvent('select', combo, rec )
+          combo.collapse()
+          callback.call()
+      else
+        rec = combo.findRecordByDisplay value
+        combo.select rec
+        combo.fireEvent('select', combo, rec )
+        combo.collapse()
+

data/app/assets/javascripts/netzke/testing/helpers/expectations.js.coffee

@@ -0,0 +1,14 @@
+Ext.apply window,
+  expectToSee: (el) ->
+    expect(Ext.isObject(el) || Ext.isElement(el)).to.be.ok()
+
+  expectToNotSee: (el) ->
+    expect(Ext.isString(el)).to.be.ok()
+
+  expectDisabled: (cmp) ->
+    throw cmp + " not found" if Ext.isString(cmp)
+    expect(cmp.isDisabled()).to.be(true)
+
+  expectInvisibleBodyOf: (cmp) ->
+    throw cmp + " not found" if Ext.isString(cmp)
+    expect(cmp.body.isVisible()).to.be false

data/app/assets/javascripts/netzke/testing/helpers/form.js.coffee

@@ -0,0 +1,7 @@
+Ext.apply window,
+  fill: (field, params) ->
+    field.setValue(params.with)
+
+  expandCombo: (combo) ->
+    combo = Ext.ComponentQuery.query("combo{isVisible(true)}[name="+combo+"]")[0]
+    combo.onTriggerClick()

data/app/assets/javascripts/netzke/testing/helpers/grid.js.coffee

@@ -0,0 +1,107 @@
+Ext.apply window,
+  grid: (title) ->
+    if title
+      Ext.ComponentQuery.query('grid[title="'+title+'"]')[0]
+    else
+      Ext.ComponentQuery.query('grid{isVisible(true)}')[0]
+
+  expandRowCombo: (field, params) ->
+    g = g || this.grid()
+    editor = g.getPlugin('celleditor')
+    column = g.headerCt.items.findIndex('name', field) - 1
+    window.editor = editor
+    editor.startEditByPosition({row: g.getSelectionModel().getCurrentPosition().row, column: column})
+    editor.activeEditor.field.onTriggerClick()
+
+  # Example:
+  # addRecords {title: 'Foo'}, {title: 'Bar'}, to: grid('Books'), submit: true
+  addRecords: ->
+    params = arguments[arguments.length - 1]
+    for record in arguments
+      if (record != params)
+        record = params.to.getStore().add(record)[0]
+        record.isNew = true
+    click button 'Apply' if params.submit
+
+  addRecord: (recordData, params) ->
+    params = params || []
+    grid = params.to || this.grid()
+    record = grid.getStore().add(recordData)
+    grid.getSelectionModel().select(grid.getStore().last())
+
+  updateRecord: (recordData, params) ->
+    params = params || []
+    grid = params.to || this.grid()
+    record = grid.getSelectionModel().getSelection()[0]
+    for key,value of recordData
+      record.set(key, value)
+
+  selectAssociation: (attr, value, callback) ->
+    expandRowCombo attr
+    wait ->
+      select value, in: combobox(attr)
+      # wait ->
+      callback.call()
+
+  valuesInColumn: (name, params) ->
+    params ?= {}
+    grid = params.in || this.grid()
+    out = []
+    grid.getStore().each (r) ->
+      assocValue = r.get('meta').associationValues[name]
+      out.push(if assocValue then assocValue else r.get(name))
+    out
+
+  selectAllRows: (params) ->
+    params ?= {}
+    grid = params.in || this.grid()
+    grid.getSelectionModel().selectAll()
+
+  # rowDisplayValues in: grid('Books'), of: grid('Books').getStore().last()
+  # Without parameters, assumes the first found grid and the selected row
+  rowDisplayValues: (params) ->
+    params ?= {}
+    grid = params.in || this.grid()
+    record = params.of || grid.getSelectionModel().getSelection()[0]
+
+    visibleColumns = []
+    Ext.each grid.columns, (c) ->
+      visibleColumns.push(c) if c.isVisible()
+
+    i = -1
+    return Ext.Array.map(Ext.DomQuery.select('tr[data-recordid="'+record.internalId+'"] td div'), (cell) ->
+      i++
+      if visibleColumns[i].attrType == 'boolean'
+        record.get(visibleColumns[i].name)
+      else
+        cell.innerHTML
+    )
+
+  # selectLastRow()
+  # selectLastRow in: grid('Book')
+  selectLastRow: (params) ->
+    params ?= {}
+    grid = params.in || this.grid()
+    grid.getSelectionModel().select(grid.getStore().last())
+
+  # selectFirstRow()
+  # selectFirstRow in: grid('Book')
+  selectFirstRow: (params) ->
+    params ?= {}
+    grid = params.in || this.grid()
+    grid.getSelectionModel().select(grid.getStore().first())
+
+  # Example:
+  # editLastRow {title: 'Foo', exemplars: 10}
+  editLastRow: ->
+    data = arguments[0]
+    grid = Ext.ComponentQuery.query("grid")[0]
+    store = grid.getStore()
+    record = store.last()
+    for key of data
+      record.set(key, data[key])
+
+  completeEditing: (g) ->
+    g = g || this.grid()
+    e = g.getPlugin('celleditor')
+    e.completeEdit()

data/app/assets/javascripts/netzke/testing/helpers/queries.js.coffee

@@ -0,0 +1,88 @@
+# Query helpers will return a string denoting what was searched for, when a component/element itself could not be found. This can be used by other helpers to display a more informative error.
+# KNOWN ISSUE: if the passed parameter contains symbols like "():,.", it results in an invalid query.
+Ext.apply window,
+  header: (title) ->
+    Ext.ComponentQuery.query('header{isVisible(true)}[title="'+title+'"]')[0] || 'header ' + title
+
+  tab: (title) ->
+    Ext.ComponentQuery.query('tab[text="'+title+'"]')[0] || 'tab ' + title
+
+  panelWithContent: (text) ->
+    Ext.DomQuery.select("div.x-panel-body:contains(" + text + ")")[0] || 'panel with content ' + text
+
+  button: (text) ->
+    Ext.ComponentQuery.query("button{isVisible(true)}[text='"+text+"']")[0] || "button " + text
+
+  tool: (type) ->
+    Ext.ComponentQuery.query("tool{isVisible(true)}[type='"+type+"']")[0] || 'tool ' + type
+
+  component: (id) ->
+    Ext.ComponentQuery.query("panel{isVisible(true)}[id='"+id+"']")[0] || 'component ' + id
+
+  somewhere: (text) ->
+    Ext.DomQuery.select("*:contains(" + text + ")")[0] || 'anywhere ' + text
+
+  # used as work-around for the invalid query problem
+  currentPanelTitle: ->
+    panel = Ext.ComponentQuery.query('panel[hidden=false]')[0]
+    throw "Panel not found" if !panel
+    panel.getHeader().title
+
+  combobox: (name) ->
+    Ext.ComponentQuery.query("combo{isVisible(true)}[name='"+name+"']")[0] ||
+      'combobox ' + name
+
+  icon: (tooltip) ->
+    Ext.DomQuery.select('img[data-qtip="'+tooltip+'"]')[0] || 'icon ' + tooltip
+
+  textfield: (name) ->
+    Ext.ComponentQuery.query("textfield{isVisible(true)}[name='"+name+"']")[0] ||
+      'textfield ' + name
+
+  numberfield: (name) ->
+    Ext.ComponentQuery.query("numberfield{isVisible(true)}[name='"+name+"']")[0] ||
+      'numberfield ' + name
+
+  datefield: (name) ->
+    Ext.ComponentQuery.query("datefield{isVisible(true)}[name='"+name+"']")[0] ||
+      'datefield ' + name
+
+  xdatetime: (name) ->
+    Ext.ComponentQuery.query("xdatetime{isVisible(true)}[name='"+name+"']")[0] ||
+      'xdatetime ' + name
+
+  textFieldWith: (text) ->
+    _componentLike "textfield", "value", text
+
+  comboboxWith: (text) ->
+    _componentLike "combo", "rawValue", text
+
+  textAreaWith: (text) ->
+    _componentLike "textareafield", "value", text
+
+  numberFieldWith: (value) ->
+    _componentLike "numberfield", "value", value
+
+  activeWindow: ->
+    Ext.WindowMgr.getActive()
+
+  dateTimeFieldWith: (value) ->
+    res = 'xdatetime with value ' + value
+    Ext.each Ext.ComponentQuery.query('xdatetime'), (item) ->
+      if item.getValue().toString() == (new Date(value)).toString()
+        res = item
+        return
+    res
+
+  dateFieldWith: (value) ->
+    res = 'datefield with value ' + value
+    Ext.each Ext.ComponentQuery.query('datefield'), (item) ->
+      if item.getValue().toString() == (new Date(value)).toString()
+        res = item
+        return
+    res
+
+  _componentLike:(type,attr,value)->
+    Ext.ComponentQuery.query(type+'['+attr+'='+value+']')[0] || type + " with " + attr + " '" + value + "'"
+# alias
+window.anywhere = window.somewhere