w5grid-rest-node
Version:
w5grid restful sample
333 lines (312 loc) • 16.5 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>W5 - Sync test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;">
<link rel="stylesheet" href="./resources/qunit-1.12.0.css">
<link rel="stylesheet/less" type="text/css" href="./resources/grid.less">
<script src="./resources/less.js" type="text/javascript"></script>
<script type="text/javascript">
less = {
env: "development", // or "production"
async: false, // load imports async
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 1000, // when in watch mode, time in ms between polls
functions: {}, // user functions, keyed by name
dumpLineNumbers: "comments", // or "mediaQuery" or "all"
relativeUrls: false,// whether to adjust url's to be relative
// if false, url's are already relative to the
// entry less file
rootpath: ""// a path to add on to the start of every url
//resource
};
</script>
<link rel="stylesheet" type="text/css" href="./resources/reset.css">
<link rel="stylesheet" type="text/css" href="./resources/bootstrap.min.css">
<script src="./resources/bootstrap.min.js" type="text/javascript"></script>
</head>
<body style="border:0px;margin:0px">
<div id="qunit"></div>
<div id="qunit-fixture" style="margin-bottom:20px;"></div>
<script src="./resources/qunit-1.12.0.js"></script>
<script src="../components/jquery/jquery.min.js"></script>
<script src="../components/underscore/underscore.js"></script>
<script src="../components/backbone/backbone.js"></script>
<script src="../components/w5/dist/js/w5.min.0.5.5.js"></script>
<script type="text/javascript">
test( "sync Server", function () {
$("body").append("<div id='grid5'>");
dataCols = new w5.Collection( null, { url: '/people' } );
grid5 = new w5.Grid({
el : "#grid5",
option: {
width : "650px",
height : "400px",
caption : "TEST",
rowNum : 10
},
collection : dataCols,
colModel : [
{
width: 150,
id: 'first_name',
headerLabel: 'col1'
},
{
width: 150,
id: 'last_name',
headerLabel: 'col2'
},
{
width: 150,
headerLabel: 'company_name'
},
{
width: 150,
headerLabel: 'address'
},
{
width: 150,
id: 'city',
headerLabel: 'col5'
},
{
width: 150,
id: 'county',
headerLabel: 'col6'
},
{
width: 150,
id: 'state',
headerLabel: 'col7'
},
{
width: 150,
headerLabel: 'zip'
},
{
width: 150,
id: 'phone1',
headerLabel: 'col9'
},
{
width: 150,
headerLabel: 'phone2'
},
{
width: 150,
id: 'email',
headerLabel: 'col11'
},
{
width: 150,
headerLabel: 'web'
}
],
defaults : function () {
return {
first_name: '',
last_name: '',
company_name: '',
address: '',
city: '',
county: '',
state: '',
zip: '',
phone1: '',
phone2: '',
email: '',
web: ''
};
}
}).render();
ok( true, 'dummy' );
asyncTest( "request to server", 1, function () {
expect( 1 );
dataCols.fetch( { reset: true, silent: true, success: function () {
ok( grid5.getRowLength() === 500, 'read from server' );
start();
} } );
} );
});
test( "sync Server2", function () {
var model = w5.Model.extend( { idAttribute: "_id" } );
$("body").append("<div id='grid6'>");
dataCols2 = null;
grid6 = new w5.Grid({
el : "#grid6",
option: {
width : "650px",
height : "400px",
caption : "TEST2",
rowNum : 10
},
collection : new w5.Collection( null, { model: model, url: '/people', urlCUD: '/mixed' } ),
colModel : [
{
width: 150,
id: 'first_name',
headerLabel: 'col1'
},
{
width: 150,
id: 'last_name',
headerLabel: 'col2'
},
{
width: 150,
headerLabel: 'company_name'
},
{
width: 150,
headerLabel: 'address'
},
{
width: 150,
id: 'city',
headerLabel: 'col5'
},
{
width: 150,
id: 'county',
headerLabel: 'col6'
},
{
width: 150,
id: 'state',
headerLabel: 'col7'
},
{
width: 150,
headerLabel: 'zip'
},
{
width: 150,
id: 'phone1',
headerLabel: 'col9'
},
{
width: 150,
headerLabel: 'phone2'
},
{
width: 150,
id: 'email',
headerLabel: 'col11'
},
{
width: 150,
headerLabel: 'web'
}
],
defaults : function () {
return {
first_name: '',
last_name: '',
company_name: '',
address: '',
city: '',
county: '',
state: '',
zip: '',
phone1: '',
phone2: '',
email: '',
web: ''
};
}
,
fetch: {
success: function ( collection, response, options ) {
dataCols2 = collection;
test( "request to server2", function () {
ok( grid6.getRowLength() === 500, 'fetch from server' );
ok( grid6.cell(0,0).get('data') === 'James', 'cell(0,0) is James' );
grid6.cell(0,0).set('data', 'Ruud');
ok( grid6.cell(0,0).get('data') === 'Ruud', 'cell(0,0) is Ruud' );
asyncTest( "fetch1", function () {
expect(1);
dataCols2.at(0).fetch( { success: function () {
ok( grid6.cell(0,0).get('data') === 'James', 'restore server data' );
var data = { phone1: '111-111-1111', phone2: '222-222-2222' };
grid6.row(0).set('data', data, { save: true, saved: true } );
start();
asyncTest( "fetch2", function () {
expect(1);
dataCols2.at(0).fetch( { success: function (model, response, options) {
deepEqual( _.pick( response, ['phone1', 'phone2'] ), data, "update was successful");
grid6.cell(0,0).set( 'data', 'Ruud', { save: true, saved: true, pick: true } );
start();
asyncTest( "fetch3", function () {
expect(1);
dataCols2.at(0).fetch( { success: function (model, response, options) {
equal( response.first_name, 'Ruud', data, "patch was successful" );
var data2 = { phone1: '504-621-8927', phone2: '504-845-1427' };
grid6.row(0).set( 'data', data2, { save: true, saved: true, pick: ['phone1', 'phone2'] } );
start();
asyncTest( "fetch4", function () {
expect(2);
dataCols2.at(0).fetch( { success: function (model, response, options) {
deepEqual( _.pick( response, ['phone1', 'phone2'] ), data2, "patch2 was successful");
var data3 = { "first_name": "shye", "last_name": "lee", "company_name": "inswave", "address": "guro", "city": "seoul", "county": "korea", "state": "guro", "zip": "1234", "phone1": "123-456-1234", "phone2": "789-123-4567", "email": "shye0919@inswave.com", "web": "http://www.inswave.com" };
grid6.addRow( 0, data3, { save: true, success: function ( model, response, options ) {
deepEqual( _.omit( response, '_id' ), data3, "create was successful");
start();
}} );
asyncTest( "fetch5", function () {
expect(1);
grid6.removeRow( 0, { destroy: true, success: function ( model, response, options ) {
equal( response.result, 'success', 'remove was successful');
grid6.cell(0,0).set( 'data', 'James', { save: true, saved: true, pick: true } );
start();
asyncTest( "syncData1", function () {
expect(1);
grid6.addRow(0, {first_name: 'A'});
grid6.cell(2,1).set('data', 'BP');
grid6.removeRow(3);
grid6.removeRow(10);
grid6.cell(6,1).set('data', 'TD');
grid6.addRow(4, {first_name: 'B'});
grid6.syncData( { pick: true, saved: true, success: function ( model, response, options ) {
equal( model.message, 'create[2] update[2] delete[2]');
start();
asyncTest( "syncData2", function () {
expect(1);
grid6.addRow(0, {first_name: 'C'});
grid6.removeRow(3);
grid6.syncData( { pick: true, saved: true, excludeCreate: true, excludeUpdate: true, success: function ( model, response, options ) {
equal( model.message, 'create[0] update[0] delete[1]');
start();
asyncTest( "syncData3", function () {
expect(2);
grid6.syncData( { pick: true, saved: true, excludeUpdate: true, afterProcess: true, success: function ( model, response, options ) {
equal( model.message, 'create[1] update[0] delete[0]');
equal( grid6.row(0).get('data').result, 'successServerSync');
start();
}});
});
}});
});
}});
});
}});
});
}});
});
}});
});
}});
});
}});
});
});
}
}
}).render();
ok( true, 'dummy' );
});
</script>
</body>
</html>