Testing Front-end testing of your UI Wires using a beautiful test API.
You can easily test your Wires by extending cbwire.models.BaseWireTest
and using our fluent testing API in your TestBox specs.
Test Example
You can invoke your Wires for testing by using wire()
.
Copy 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.
Copy 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.
Copy 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.
Copy wire ( "TaskList" ) .toggle ( "showModal" );
call
Calls an Action . Optional array of parameters can be provided.
Copy wire ( "TaskList" ) .call ( "clearTasks" );
wire ( "TaskList" ) .call ( "clearTasks" , [ param1 , param2 ] );
emit
Emits an Event and fires any Listeners that are defined on the Wire . Optional array of parameters can be provided, which will be passed on to listeners.
Copy 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.
Copy wire ( "TaskList" ) .see ( "<h1>My Tasks</h1>" );
dontSee
Verifies a value is not found in the current Template rendering. Otherwise, test fails.
Copy wire ( "TaskList" ) .dontSee ( "<h1>Someone Else's Tasks</h1> " );
seeData
Verifies a Data Property matches a specified value. Otherwise, test fails.
Copy wire ( "TaskList" ) .seeData ( "tasksRemoved" , true );
dontSeeData
Verifies a Data Property does not match a specified value. Otherwise, test fails.
Copy wire ( "TaskList" ) .dontSeeData ( "tasksRemoved" , true );