describe('jquery-impromptu', function() { // ==================================================================================== // ==================================================================================== describe('base structure', function(){ // ==================================================================================== describe('basic initialization', function() { beforeEach(function() { $.fx.off = true; // for our testing lets turn off fx }); afterEach(function() { $.prompt.close(); }); it('should be defined', function() { expect($.prompt).not.toBeUndefined(); }); it('should generate markup', function() { var expectedTitle = 'This is a title', expectedText = 'This is a test'; $.prompt(expectedText, { title: expectedTitle }); expect($('.jqibox')).toExist(); expect($('.jqifade')).toExist(); expect($('.jqi')).toExist(); expect($('.jqi .jqititle')).toHaveText(expectedTitle); expect($('.jqi .jqimessage')).toHaveText(expectedText); }); }); // ==================================================================================== describe('button creation', function() { beforeEach(function() { $.fx.off = true; // for our testing lets turn off fx }); afterEach(function() { $.prompt.close(); }); it('should generate buttons from hash', function() { $.prompt('This is a test', { buttons: { Ok:true, Cancel:false } }); var okBtn = $('#jqi_state0_buttonOk'), cancelBtn = $('#jqi_state0_buttonCancel'); expect($('.jqibutton')).toHaveLength(2); expect(okBtn).toExist(); expect(cancelBtn).toExist(); expect(okBtn).toHaveText('Ok'); expect(cancelBtn).toHaveText('Cancel'); expect(okBtn).toHaveValue('true'); expect(cancelBtn).toHaveValue('false'); }); it('should generate buttons from array', function() { $.prompt('This is a test', { buttons: [ { title: 'Ok', value: true }, { title: 'Cancel', value: false } ] }); var okBtn = $('#jqi_state0_buttonOk'), cancelBtn = $('#jqi_state0_buttonCancel'); expect($('.jqibutton')).toHaveLength(2); expect(okBtn).toExist(); expect(cancelBtn).toExist(); expect(okBtn).toHaveText('Ok'); expect(cancelBtn).toHaveText('Cancel'); expect(okBtn.val()).toBe('true'); expect(cancelBtn.val()).toBe('false'); }); it('should add classes to buttons', function() { $.prompt('This is a test', { buttons: [ { title: 'Ok', value: true, classes: ['ok1','ok2'] }, { title: 'Cancel', value: false, classes: 'cancel1 cancel2' } ] }); var okBtn = $('#jqi_state0_buttonOk'), cancelBtn = $('#jqi_state0_buttonCancel'); expect(okBtn).toHaveClass('ok1'); expect(okBtn).toHaveClass('ok2'); expect(cancelBtn).toHaveClass('cancel1'); expect(cancelBtn).toHaveClass('cancel2'); }); it('should add classes to buttons from classes obj', function() { $.prompt('This is a test', { buttons: [ { title: 'Ok', value: true, classes: ['ok1','ok2'] }, { title: 'Cancel', value: false, classes: 'cancel1 cancel2' } ], classes: { button: 'testclass' } }); var okBtn = $('#jqi_state0_buttonOk'), cancelBtn = $('#jqi_state0_buttonCancel'); expect(okBtn).toHaveClass('testclass'); expect(cancelBtn).toHaveClass('testclass'); }); it('should default correct button', function() { $.prompt('This is a test', { buttons: [ { title: 'Ok', value: 1 }, { title: 'Cancel', value: 2 }, { title: 'Another', value: 3 } ], focus: 1 }); var okBtn = $('#jqi_state0_buttonOk'), cancelBtn = $('#jqi_state0_buttonCancel'), anotherBtn = $('#jqi_state0_buttonAnother'); expect(okBtn).not.toHaveClass('jqidefaultbutton'); expect(cancelBtn).toHaveClass('jqidefaultbutton'); expect(anotherBtn).not.toHaveClass('jqidefaultbutton'); }); it('should default correct button when focus on an input', function() { $.prompt('This is a test ', { buttons: [ { title: 'Ok', value: 1 }, { title: 'Cancel', value: 2 }, { title: 'Another', value: 3 } ], focus: '#testInput', defaultButton: 1 }); var okBtn = $('#jqi_state0_buttonOk'), cancelBtn = $('#jqi_state0_buttonCancel'), anotherBtn = $('#jqi_state0_buttonAnother'); expect(okBtn).not.toHaveClass('jqidefaultbutton'); expect(cancelBtn).toHaveClass('jqidefaultbutton'); expect(anotherBtn).not.toHaveClass('jqidefaultbutton'); }); }); // ==================================================================================== describe('state creation', function() { beforeEach(function() { $.fx.off = true; // for our testing lets turn off fx }); afterEach(function() { $.prompt.close(); }); it('should create a single state from string', function() { $.prompt('This is a test'); expect($('.jqistate')).toExist(); }); it('should create states from hash', function() { var states = { s1: { html: 'state 1' }, s2: { html: 'state 2' }, s3: { html: 'state 3' } }; $.prompt(states); expect($('.jqistate')).toHaveLength(3); expect($('#jqistate_s1 .jqimessage')).toHaveText(states.s1.html); expect($('#jqistate_s2 .jqimessage')).toHaveText(states.s2.html); expect($('#jqistate_s3 .jqimessage')).toHaveText(states.s3.html); }); it('should create states from array', function() { var states = [ { html: 'state 1' }, { html: 'state 2' }, { html: 'state 3' } ]; $.prompt(states); expect($('.jqistate')).toHaveLength(3); expect($('#jqistate_0 .jqimessage')).toHaveText(states[0].html); expect($('#jqistate_1 .jqimessage')).toHaveText(states[1].html); expect($('#jqistate_2 .jqimessage')).toHaveText(states[2].html); }); it('should show the first state automatically', function() { // we can't reliably determine which entry is the first with a hash, js doesn't preserve order var states = [ { html: 'state 1' }, { html: 'state 2' }, { html: 'state 3' } ]; $.prompt(states); expect($('#jqistate_0')).toHaveCss({display:'block'}); expect($('#jqistate_1')).toHaveCss({display:'none'}); expect($('#jqistate_2')).toHaveCss({display:'none'}); }); it('should name states properly when name specified', function() { var states = [ { name: 's1', html: 'state 1' }, { name: 's2', html: 'state 2' }, { name: 's3', html: 'state 3' } ]; $.prompt(states); expect($('#jqistate_s1')).toExist(); expect($('#jqistate_s2')).toExist(); expect($('#jqistate_s3')).toExist(); }); }); }); // base structure // ==================================================================================== // ==================================================================================== describe('api methods', function() { var states = [ { name: 's1', html: 'state 1' }, { name: 's2', html: 'state 2' }, { name: 's3', html: 'state 3' } ]; beforeEach(function() { $.fx.off = true; // for our testing lets turn off fx }); afterEach(function() { $.prompt.close(); }); // ==================================================================================== describe('$.prompt.setDefaults()', function() { it('should change the default values', function() { var origDefs = $.extend(true, {}, $.prompt.defaults), overrides = { prefix: 'myjqi', classes: { box: 'boxclass' } }; $.prompt.setDefaults(overrides); expect($.prompt.defaults.prefix).toBe(overrides.prefix); expect($.prompt.defaults.classes.box).toBe(overrides.classes.box); expect($.prompt.defaults.speed).toBe(origDefs.speed); $.prompt.defaults = origDefs; }); }); // ==================================================================================== describe('$.prompt.setStateDefaults()', function() { it('should change the default state values', function() { var origDefs = $.extend(true, {}, $.prompt.defaults), overrides = { title: 'My Title', position: { width: 123 } }; $.prompt.setStateDefaults(overrides); expect($.prompt.defaults.state.title).toBe(overrides.title); expect($.prompt.defaults.state.position.width).toBe(overrides.position.width); expect($.prompt.defaults.state.focus).toBe(origDefs.state.focus); $.prompt.defaults = origDefs; }); }); // ==================================================================================== describe('$.prompt.get()', function() { it('should return the prompt jquery object', function() { $.prompt('This is a test'); var actualResult = $.prompt.get(), expectedResult = $('.jqi'); expect(actualResult[0]).toBe(expectedResult[0]); }); }); // ==================================================================================== describe('$.prompt.getState()', function() { it('should return the state jquery object', function() { $.prompt(states); var actualResult = $.prompt.getState('s2'), expectedResult = $('#jqistate_s2'); expect(actualResult[0]).toBe(expectedResult[0]); }); }); // ==================================================================================== describe('$.prompt.getCurrentState()', function() { it('should return the current state jquery object', function() { $.prompt(states); var actualResult = $.prompt.getCurrentState(), expectedResult = $('#jqistate_s1'); expect(actualResult[0]).toBe(expectedResult[0]); }); it('should return the current state jquery object after a state change', function() { $.prompt(states); $.prompt.goToState('s2'); var actualResult = $.prompt.getCurrentState(), expectedResult = $('#jqistate_s2'); expect(actualResult[0]).toBe(expectedResult[0]); }); }); // ==================================================================================== describe('$.prompt.getCurrentStateName()', function() { it('should return the current state name', function() { $.prompt(states); var actualResult = $.prompt.getCurrentStateName(), expectedResult = 's1'; expect(actualResult).toBe(expectedResult); }); it('should return the current state name after a state change', function() { $.prompt(states); $.prompt.goToState('s2'); var actualResult = $.prompt.getCurrentStateName(), expectedResult = 's2'; expect(actualResult).toBe(expectedResult); }); }); // ==================================================================================== describe('$.prompt.goToState()', function() { it('should make the requested state visible', function() { $.prompt(states); $.prompt.goToState('s3'); expect($('#jqistate_s1')).toHaveCss({display:'none'}); expect($('#jqistate_s2')).toHaveCss({display:'none'}); expect($('#jqistate_s3')).toHaveCss({display:'block'}); }); it('should do nothing if the state is not available', function() { $.prompt(states); $.prompt.goToState('s4'); expect($('#jqistate_s1')).toHaveCss({display:'block'}); expect($('#jqistate_s2')).toHaveCss({display:'none'}); expect($('#jqistate_s3')).toHaveCss({display:'none'}); }); it('should handle substate option', function() { $.prompt(states); $.prompt.goToState('s2',true); expect($('#jqistate_s1')).toHaveCss({display:'block'}); expect($('#jqistate_s2')).toHaveCss({display:'block'}); expect($('#jqistate_s3')).toHaveCss({display:'none'}); expect($('#jqistate_s2')).toHaveClass('jqisubstate'); }); }); // ==================================================================================== describe('$.prompt.nextState()', function() { it('should make the next state visible', function() { $.prompt(states); $.prompt.nextState(); expect($('#jqistate_s1')).toHaveCss({display:'none'}); expect($('#jqistate_s2')).toHaveCss({display:'block'}); expect($('#jqistate_s3')).toHaveCss({display:'none'}); }); it('should do nothing if the state is not available', function() { $.prompt(states); $.prompt.goToState('s3'); $.prompt.nextState(); expect($('#jqistate_s1')).toHaveCss({display:'none'}); expect($('#jqistate_s2')).toHaveCss({display:'none'}); expect($('#jqistate_s3')).toHaveCss({display:'block'}); }); }); // ==================================================================================== describe('$.prompt.prevState()', function() { it('should make the previous state visible', function() { $.prompt(states); $.prompt.goToState('s3'); $.prompt.prevState(); expect($('#jqistate_s1')).toHaveCss({display:'none'}); expect($('#jqistate_s2')).toHaveCss({display:'block'}); expect($('#jqistate_s3')).toHaveCss({display:'none'}); }); it('should do nothing if the state is not available', function() { $.prompt(states); $.prompt.prevState(); expect($('#jqistate_s1')).toHaveCss({display:'block'}); expect($('#jqistate_s2')).toHaveCss({display:'none'}); expect($('#jqistate_s3')).toHaveCss({display:'none'}); }); }); // ==================================================================================== describe('$.prompt.addState()', function() { it('should add a new state as the last state', function() { var newState = { name: 's4', title: 's4', html: 'testing s4', buttons: { Ok:true,Cancel:false} }; $.prompt(states); var $stateobj = $.prompt.addState(newState.name, newState); // element created? expect($stateobj).toExist(); // element in the right place? expect($stateobj.prev()).toHaveId('jqistate_s3'); // element visibility correct? expect($('#jqistate_s1')).toHaveCss({display:'block'}); expect($stateobj).toHaveCss({display:'none'}); // content generated ok? expect($stateobj.find('.jqimessage')).toHaveText(newState.html); expect($stateobj.find('.jqititle')).toHaveText(newState.title); expect($stateobj.find('.jqibutton')).toHaveLength(2); }); it('should add a new state after specified state', function() { var newState = { name: 's4', title: 's4', html: 'testing s4', buttons: { Ok:true,Cancel:false} }, afterState = 's2'; $.prompt(states); var $stateobj = $.prompt.addState(newState.name, newState, afterState); expect($stateobj.prev()).toHaveId('jqistate_'+afterState); }); }); // ==================================================================================== describe('$.prompt.removeState()', function() { it('should remove the specified state', function() { $.prompt(states); $.prompt.removeState('s2'); expect($('#jqistate_s2')).not.toExist(); }); it('should display requested state', function() { $.prompt(states); $.prompt.removeState('s1','s3'); expect($('#jqistate_s2')).toHaveCss({display:'none'}); expect($('#jqistate_s3')).toHaveCss({display:'block'}); }); it('should display next state', function() { $.prompt(states); $.prompt.removeState('s1'); expect($('#jqistate_s2')).toHaveCss({display:'block'}); expect($('#jqistate_s3')).toHaveCss({display:'none'}); }); it('should display previous state', function() { $.prompt(states); $.prompt.goToState('s3'); $.prompt.removeState('s3'); expect($('#jqistate_s1')).toHaveCss({display:'none'}); expect($('#jqistate_s2')).toHaveCss({display:'block'}); }); }); // ==================================================================================== describe('$.prompt.close()', function() { it('should close the prompt', function() { $.prompt(states); $.prompt.close(); expect($('.jqibox')).not.toExist(); }); }); }); // end api methods // ==================================================================================== // ==================================================================================== describe('api events', function() { var states = [ { name: 's1', html: 'state 1', buttons: { next: true, cancel: false } }, { name: 's2', html: 'state 2', buttons: { back: -1, cancel: 0, next: 1 } }, { name: 's3', html: 'state 3', buttons: { done: true} } ], maxWaitTime = 100; beforeEach(function() { $.fx.off = true; // for our testing lets turn off fx }); afterEach(function() { $.prompt.close(); }); // ==================================================================================== describe('impromptu:loaded', function(){ describe('running through jquery event binding', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $('body').on('impromptu:loaded', '.jqibox', function(){ spyEventCalled=true; done() }); $.prompt(states); }); it('should fire event', function(){ expect(spyEventCalled).toBe(true); }); }); describe('passing loaded event through as option', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $.prompt(states, { loaded: function(){ spyEventCalled = true; done(); } }); }); it('should allow event function as option parameter', function(){ expect(spyEventCalled).toBe(true); }); }); }); // ==================================================================================== describe('impromptu:close', function(){ describe('running through jquery event binding', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $('body').on('impromptu:close', '.jqibox', function(){ spyEventCalled=true; done() }); $.prompt(states, { loaded: function(){ $.prompt.close(); } }); }); it('should fire event', function(){ expect(spyEventCalled).toBe(true); }); }); describe('passing loaded event through as option', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $.prompt(states, { loaded: function(){ $.prompt.close(); }, close: function(){ spyEventCalled = true; done(); } }); }); it('should allow event function as option parameter', function(){ expect(spyEventCalled).toBe(true); }); }); }); // ==================================================================================== describe('impromptu:statechanging', function(){ describe('running through jquery event binding', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $('body').on('impromptu:statechanging', '.jqibox', function(){ spyEventCalled = true; done(); }); $.prompt(states, { loaded: function(){ $.prompt.goToState('s2'); } }); }); it('should fire event', function(){ expect(spyEventCalled).toBe(true); }); }); describe('passing loaded event through as option', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $.prompt(states, { loaded: function(){ $.prompt.goToState('s2'); }, statechanging: function(){ spyEventCalled = true; done(); } }); }); it('should allow event function as option parameter', function(){ expect(spyEventCalled).toBe(true); }); }); it('should allow preventDefault', function(){ var spyEvent = spyOnEvent('body', 'impromptu:statechanging'); $.prompt(states, { loaded: function(){ $.prompt.goToState('s2'); }, statechanging: function(e){ e.preventDefault(); } }); expect(spyEvent).toHaveBeenTriggered(); expect(spyEvent).toHaveBeenPrevented(); }); }); // ==================================================================================== describe('impromptu:statechanged', function(){ describe('running through jquery event binding', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $('body').on('impromptu:statechanged', '.jqibox', function(){ spyEventCalled = true; done(); }); $.prompt(states, { loaded: function(){ $.prompt.goToState('s2'); } }); }); it('should fire event', function(){ expect(spyEventCalled).toBe(true); }); }); describe('passing loaded event through as option', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $.prompt(states, { loaded: function(){ $.prompt.goToState('s2'); }, statechanged: function(){ spyEventCalled = true; done(); } }); }); it('should allow event function as option parameter', function(){ expect(spyEventCalled).toBe(true); }); }); }); // ==================================================================================== describe('impromptu:submit', function(){ describe('running through jquery event binding', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $('body').on('impromptu:submit', '.jqibox', function(){ spyEventCalled = true; done(); }); $.prompt(states, { loaded: function(){ $.prompt.getState('s1').find('.jqibutton:first').click(); } }); }); it('should fire event', function(){ expect(spyEventCalled).toBe(true); }); }); describe('passing submit event through as option if string message', function(){ var spyEventCalled; beforeEach(function(done){ spyEventCalled = false; $.prompt('Test message', { loaded: function(){ $('.jqibutton:first').click(); }, submit: function(){ spyEventCalled = true; done(); } }); }); it('should allow event function as option parameter', function(){ expect(spyEventCalled).toBe(true); }); }); describe('should detect button clicked', function(){ var btnClicked, msgReturned, formVals; beforeEach(function(done){ $('body').on('impromptu:submit', '.jqibox', function(e,v,m,f){ btnClicked = v; msgReturned = m; formVals = f; done(); }); $.prompt(states, { loaded: function(){ $.prompt.getState('s1').find('#jqi_s1_buttoncancel').click(); } }); }); it('should detect button', function(){ expect(btnClicked).toBe(false); }); it('should pass the state message', function(){ expect(msgReturned.is('.jqimessage')).toBe(true); }); }); describe('verifying form values', function(){ var tmpStates = [], btnClicked, msgReturned, formVals, expectedValues = { textInput: 'my text input', selectSingle: 'select single 3', selectMulti: ['select multi 2', 'select multi 3'], radioInput: 'my radio yes', chkInput: ['my chk no', 'my chk maybe'], textareaInput: 'my textarea val' }; tmpStates[0] = $.extend({}, states[0]); tmpStates[0].html = ''+ ''+ ''; tmpStates[1] = $.extend({}, states[1]); tmpStates[1].html = ''+ ''+ ''+ ''+ ''; tmpStates[3] = $.extend({}, states[3]); tmpStates[3].html = ''; beforeEach(function(done){ spyEventCalled = false; $('body').on('impromptu:submit', '.jqibox', function(e,v,m,f){ btnClicked = v; msgReturned = m; formVals = f; done(); }); $.prompt(tmpStates, { loaded: function(){ $.prompt.getState('s1').find('#jqi_s1_buttonnext').click(); } }); }); it('should pass the correct form values', function(){ expect(formVals).toEqual(expectedValues); }); }); }); }); // end api events // ==================================================================================== // ==================================================================================== describe('native events', function() { var states = [ { name: 's1', html: 'state 1', buttons: [{ title:'One', value: 1}, { title:'Two', value: 2}, { title:'Three', value: 3 }], focus: 1 }, { name: 's2', html: 'state 2', buttons: { back: -1, cancel: 0, next: 1 } }, { name: 's3', html: 'state 3', buttons: { done: true} } ], maxWaitTime = 100; beforeEach(function() { $.fx.off = true; // for our testing lets turn off fx }); afterEach(function() { $.prompt.close(); }); // ==================================================================================== describe('keydown', function(){ describe('persistent option on', function(){ beforeEach(function(done){ $.prompt(states, { loaded: function(){ var e = $.Event('keydown'); e.keyCode = 27; $.prompt.jqib.trigger(e); done(); }, persistent: true }); }); it('should not close when persistent is true', function(){ expect($('.jqi')).toExist(); }); }); describe('persistent option off', function(){ beforeEach(function(done){ $.prompt(states, { loaded: function(){ var e = $.Event('keydown'); e.keyCode = 27; $.prompt.jqib.trigger(e); done(); }, persistent: false }); }); it('should close when persistent is false', function(){console.log($('.jqi').length); expect($('.jqi')).not.toExist(); }); }); describe('enter key', function(){ var buttonTriggered = null; beforeEach(function(done){ $('body').on('impromptu:submit', function(e,v){ buttonTriggered = v; done(); }); $.prompt(states, { loaded: function(){ var e = $.Event('keydown'); e.keyCode = 13; $.prompt.jqi.trigger(e); } }); }); it('should trigger click on the correct button', function(){ expect(buttonTriggered).toBe(2); }); }); }); // ==================================================================================== describe('click', function(){ describe('fade click', function(){ beforeEach(function(done){ $.prompt(states, { loaded: function(){ var e = $.Event('click'); $.prompt.jqib.trigger(e); done(); }, persistent: true }); }); it('should not close fade if persistent option true',function(){ expect($('.jqi')).toExist(); }); }); }); });// end native events });