~smagoun/whoopsie/whoopsie-lp1017637

Toggle <code>data</code> from <code>large</code> to <code>small</code> to get a different sized dataset. The <code>ignore</code> object determines which table to load. If testing performance, it is recommended that you only enable 1 table at a time.</p>

<hr>

<hr>

<h3>Test Results</h3>

</div>

<h3>Base Datatable</h3>

<h3>Scrolling XY Datatable (Set columnwidths)</h3>

<P>A general XY scrolling datatable. Column widths are provided for all columns, table width and height is provided.</p>

<h3>Scrolling X Datatable (Auto Columns)</h3>

<p>A X-scrolling datatable. Column A and B have specified widths. The rest of the columns do not have any widths specified. Only a height of 200px is specified.</p>

<h3>Scrolling Y Datatable</h3>

<p>A Y-scrolling datatable. Column widths are provided for all columns, table height is provided. Since all cols have specified width, you may see this table overflowing past its container div (the blue div in the background). </p>

<h3>Scrolling Datatable with no ColumnWidth</h3>

<p>A Y-scrolling datatable, where only the first 2 columns have a specified width. Only the table height is provided.</p>

<h3>Scrolling Datatable with Big Headers</h3>

<p>A XY-scrolling datatable, where only the first 2 columns have a specified width. Table height and width is provided. The table headers are of larger width than the table contents</p>

100

(function() {

101

YUI({

102

filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min',

103

allowRollup: false,

104

useBrowserConsole: true

105

}).use("console", "test", "dump", "datatable","node","json-parse", function(Y) {

106

107

108

// Set up the page

109

var ASSERT = Y.Assert,

110

ARRAYASSERT = Y.ArrayAssert,

111

BTNRUN = Y.one("#btnRun"),

112

TestRunner = Y.Test.Runner;

113

BTNRUN.set("disabled", false);

114

TestRunner.subscribe(TestRunner.TEST_CASE_COMPLETE_EVENT, testCompleted);

115

Y.on("click", function(e){

116

TestRunner.run();

117

BTNRUN.set("value", 'Running...');

118

BTNRUN.set("disabled", true);

119

120

}, BTNRUN);

121

122

function testCompleted() {

123

BTNRUN.set("value", 'Test Completed');

124

Y.log('Test Completed');

125

}

126

var myConsole = new Y.Console().render();

127

128

129

130

131

132

133

//large data set

134

var large = [];

135

for (var i=0; i<500; i++) {

136

large[i] = {a: i+1, b:i+2, c:i+3, d: i+4, e: i+5, f: i+6, g:i+7};

137

}

138

139

//small data set

140

var small = [{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},

141

{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},

142

{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},

143

{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0}];

144

145

var testBasic = new Y.Test.Case({

146

name: "API Tests",

147

nestedcols: [

148

{label:"Grandparent", children:[

149

{key: "a"},

150

{label:"Parent", children: [

151

{key:"b"},

152

{key:"c"}

153

]}

154

]}

155

156

cols: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width: '120px'},{key:"c", width:'75px'},{key:"d", width:'150px'},{key:"3", width:'75px'},{key:"f", width:'150px'},{key:"g", width:'75px'}],

157

158

cols2: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width:'75px'},{key:"c"},{key:"d"},{key:"e"},{key:"f"},{key:"g"}],

159

160

cols3: [{key:"a", field:"a", label:"Lorem Ipsum Dolor SIt Amet", sortable:true, className: ["oneClass", "anotherClass"], width:'5px'},{key:"b", abbr:"Lorem Ipsum Dolor SIt Amet", className:"myClass", width:'75px'},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"}],

161

162

163

//large or small dataset.

164

data: large,

165

166

//---------------------------------------------

167

// Special instructions

168

//---------------------------------------------

169

170

_should: {

171

ignore: {

172

//ignore following tests (good to do if you are doing a large dataset)

173

testBaseDatatable: false,

174

testXYDatatable: true,

175

testXDatatable: true,

176

testYDatatable_FixedCol: true,

177

testYDatatable_AutoCol: true,

178

testXYDatatable_BigHeaders: true

179

}

180

181

182

//---------------------------------------------

183

// Setup and tear down

184

//---------------------------------------------

185

186

setUp : function () {

187

188

//create recordset

189

//this.rs = new Y.Recordset({records:this.initialData});

190

191

//Some Ways to access recordset properties

192

//Y.log(rs.getRecordByIndex(0).getValue('a'));

193

//Y.log(rs.get('records').length);

194

195

196

tearDown : function () {

197

delete this.dt;

198

199

200

201

/////////////////////////////////////////////////////////////////////////////

202

203

// Tests

204

205

/////////////////////////////////////////////////////////////////////////////

206

207

208

209

testBaseDatatable: function() {

210

var sel = "#base";

211

this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, caption:"Base"});

212

this.dt.render(sel);

213

214

215

testXYDatatable: function() {

216

var sel = '#scrolling-xy';

217

this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption: "ScrollingDataTable"});

218

this.dt.plug(Y.Plugin.DataTableScroll, {width:"200px", height:"300px", scroll:"xy"});

219

this.dt.render(sel);

220

221

222

testXDatatable: function() {

223

var sel = "#scrolling-x";

224

225

this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, caption:"ScrollingDataTable"});

226

this.dt.plug(Y.Plugin.DataTableScroll, {width:"150px", scroll:"x"});

227

228

this.dt.render(sel);

229

230

231

232

testYDatatable_FixedCol: function() {

233

var sel = "#scrolling-y";

234

235

this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});

236

this.dt.plug(Y.Plugin.DataTableScroll, {height:"300px", scroll:"y"});

237

this.dt.render(sel);

238

239

240

testYDatatable_AutoCol: function() {

241

var sel = "#scrolling-colwidth";

242

243

this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});

244

this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", scroll:"y"});

245

this.dt.render(sel);

246

247

248

testXYDatatable_BigHeaders: function() {

249

var sel = "#scrolling-bigcols";

250

251

this.dt = new Y.DataTable.Base({columnset:this.cols3, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});

252

this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", width:"400px", scroll:"xy"});

253

this.dt.render(sel);

254

}

255

256

257

258

});

259

260

var suite = new Y.Test.Suite({name:"Datatable Test Suite"});

261

suite.add(testBasic);

262

263

Y.Test.Runner.setName("Datatable Test Runner");

264

Y.Test.Runner.add(suite);

265

//Y.Test.Runner.run();

266

});

267

})();

268

</script>

269

</body>

270

</html>

Older »