-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Test client interface
You want to write tests where user interactions come into play.
Create an instance of the view, use jasmine-ajax to respond to network requests, then use jQuery to trigger various events. Write tests in such a way that someone who does not program can read them and verify that they are true.
When writing tests for an interface, you're not only writing them for other developers, but also designers and QA and anyone else who works with the user-facing part of the site. Write your tests for this broader audience.
Nest your tests such that the tree of possibilities is represented, and the beforeEach calls build on each other. In the example below, the 'submit form' suite branches into 'submit fails' and 'submit succeeds' branches, but all their tests include the view initialization and loading code.
In general, beforeEach
should match describe
, and it
's logic matches it
's test name. Again, in the example below, each beforeEach
builds the context describe
describes.
class FooView extends RootView
template: require 'templates/foo-view'
id: 'foo-view'
events:
'submit form': 'onSubmitForm'
initialize: ->
@bar = new Bar()
@bar.fetch()
onSubmitForm: (e) ->
e.preventDefault()
form = $('form')
@bar.set(forms.formToObject(form))
@bar.save()
FooView = require 'views/FooView'
describe 'FooView', ->
view = null
beforeEach ->
# All tests start with view initialized and @bar loaded.
view = new FooView()
expect(jasmine.Ajax.requests.count()).toBe(1)
jasmine.Ajax.requests.mostRecent().respondWith({status: 200, responseText: '{_id: "abc"}'})
describe 'submit form', ->
it 'saves bar', ->
view.$('input[name="field"]').val('Dummy data')
view.$('form').submit()
expect(jasmine.Ajax.requests.mostRecent().url).toBe('/db/foo')
expect(view.$('button').attr('disabled')).toBe(true)
describe 'submit fails', ->
beforeEach ->
jasmine.Ajax.requests.mostRecent().respondWith({status: 500, responseText: '{errorName: "Server Error"}'})
...
describe 'submit succeeds', ->
beforeEach ->
jasmine.Ajax.requests.mostRecent().respondWith({status: 200, responseText: '{_id: "abc"}'})
...
CodeCombat | Home | Blog | Forum | Teachers | Legal | Contribute
- Home
- Archmage Home
- Artisan Home
- Diplomat Home
- Archmage General
- Mission statement
- Coco Models
- Coding Guidelines
- Cookbook
- File system
- JSON Schema
- Technical overview
- Testing
- Third party software and services
- Artisan General
- Building A Level
- Coding Guidelines for Artisans
- Editing Thang Components
- Important Artisan Concepts
- Keyboard Shortcuts
- Debugging
- Artisan How-To Index
- Diplomat General
- i18n
- i18n Glossary nb
- i18n Glossary ru
- i18n Glossary es-419
- Dev Setup
- Dev Setup: Linux
- Dev Setup: Windows
- Dev Setup: Mac
- Dev Setup: Vagrant
- Dev Setup: Issues
- Game Engine
- Component
- Multiplayer
- Surface
- System
- Thang
- Thang Component System
- Tome
- World
- Artisan Tabs
- Components And Systems
- Scripts
- Settings
- Thangs
- Other
- Aether
- Client models
- Developer organization
- Educational Standards
- Events, subscriptions, shortcuts
- Chat Room
- Chat Room Rules
- Permissions
- Project Ideas List
- Treema
- Versioning
- Views