Testing
Front-end testing of your UI components using a beautiful test API.
You can easily test your Components by extending cbwire.models.BaseWireTest and using our fluent testing API in your TestBox specs.

Test Example

You can invoke your Components for testing by using wire().
component extends="cbwire.models.BaseWireTest" {
function run(){
describe( "TaskList.cfc", function(){
it( "calling 'clearTasks' removes the tasks", function() {
wire( "TaskList" )
// Sets our data properties
.data( "tasks", [ "task1" ] )
// Verifies output in our template rendering
.see( "<li>task 1</li>" )
// Runs the 'clearTasks' action
.call( "clearTasks" )
// Verifies updated template rendering
.dontSee( "<li>task 1</li>" );
} );
} );
}
}

Test Methods

data

Set a Data Property to the specified value.
wire( "TaskList" )
.data( "tasks", [ "task1", "task2" ] ) // one property at a time
.data( { "tasks" : [ "task1", "task2" ] } ); // struct of properties

computed

Set a Computed Property to the specified closure.
wire( "TaskList" )
.computed( "count", function() { return 3; } ) // one property at a time
.computed( { "count" : function() { return 3; } } ); // struct of properties

toggle

Toggles a Data Property between true and false.
wire( "TaskList" ).toggle( "showModal" );

call

Calls an Action. Optional array of parameters can be provided.
wire( "TaskList" ).call( "clearTasks" );
wire( "TaskList" ).call( "clearTasks", [ param1, param2 ] );

emit

Emits an Event and fires any listeners that are defined on the component. Optional array of parameters can be provided, which will be passed on to listeners.
wire( "TaskList" ).emit( "addedTask" );
wire( "TaskList" ).emit( "addedTask", [ param1, param2 ] );

see

Verifies a value can be found in the current Template rendering. Otherwise, test fails.
wire( "TaskList" ).see( "<h1>My Tasks</h1>" );

dontSee

Verifies a value is not found in the current Template rendering. Otherwise, test fails.
wire( "TaskList" ).dontSee( "<h1>Someone Else's Tasks</h1> ");

seeData

Verifies a Data Property matches a specified value. Otherwise, test fails.
wire( "TaskList" ).seeData( "tasksRemoved", true );

dontSeeData

Verifies a Data Property does not match a specified value. Otherwise, test fails.
wire( "TaskList" ).dontSeeData( "tasksRemoved", true );
Export as PDF
Copy link
On this page
Test Example
Test Methods
data
computed
toggle
call
emit
see
dontSee
seeData
dontSeeData