~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>

<h3>Scrolling Datatable with no width or height set</h3>

<p>A scrolling datatable with no width or height values passed in will result in a base datatable being created with auto width and height.</p>

100

101

102

103

104

(function() {

105

YUI({

106

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

107

allowRollup: false,

108

useBrowserConsole: false

109

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

110

111

112

// Set up the page

113

var ASSERT = Y.Assert,

114

ARRAYASSERT = Y.ArrayAssert,

115

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

116

TestRunner = Y.Test.Runner;

117

BTNRUN.set("disabled", false);

118

TestRunner.subscribe(TestRunner.TEST_CASE_COMPLETE_EVENT, testCompleted);

119

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

120

TestRunner.run();

121

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

122

BTNRUN.set("disabled", true);

123

124

}, BTNRUN);

125

126

function testCompleted() {

127

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

128

Y.log('Test Completed');

129

}

130

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

131

132

133

134

135

136

137

//large data set

138

var large = [];

139

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

140

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

141

}

142

143

//small data set

144

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},

145

{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},

146

{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},

147

{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}];

148

149

var testBasic = new Y.Test.Case({

150

name: "API Tests",

151

nestedcols: [

152

{label:"Grandparent", children:[

153

{key: "a"},

154

{label:"Parent", children: [

155

{key:"b"},

156

{key:"c"}

157

]}

158

]}

159

160

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'}],

161

162

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"}],

163

164

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"}],

165

166

167

//large or small dataset.

168

data: small,

169

170

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

171

// Special instructions

172

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

173

174

_should: {

175

ignore: {

176

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

177

testBaseDatatable: true,

178

testXYDatatable: false,

179

testXDatatable: false,

180

testYDatatable_FixedCol: false,

181

testYDatatable_AutoCol: false,

182

testXYDatatable_BigHeaders: false,

183

testNoScrollDatatablekey: false

184

}

185

186

187

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

188

// Setup and tear down

189

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

190

191

setUp : function () {

192

193

//create recordset

194

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

195

196

//Some Ways to access recordset properties

197

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

198

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

199

200

201

tearDown : function () {

202

delete this.dt;

203

204

205

206

207

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

208

209

// Displaying Report

210

211

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

212

213

displayReport: function(data) {

214

215

var dl = Y.Node.create('<dl></dl>'),

216

results = Y.one('#results');

217

218

Y.each(data, function(v,k,o) {

219

var dt = Y.Node.create('<dt>'+k+'</dt>');

220

var dd = Y.Node.create('<dd>' + v.calls + ' call(s) at ' + v.avg + ' ms/call = <span>' + Math.round(v.avg*v.calls) + '</span> ms total</dd>');

221

222

dt.appendChild(dd);

223

dl.appendChild(dt);

224

});

225

results.appendChild(dl);

226

227

228

reportParser: function(report) {

229

return (report.calls > 0 && report.avg > 0.2);

230

231

232

233

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

234

235

// Tests

236

237

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

238

239

240

241

testBaseDatatable: function() {

242

var sel = "#base";

243

Y.Profiler.start('dtBase');

244

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

245

Y.Profiler.registerObject('dt', this.dt);

246

this.dt.render(sel);

247

Y.Profiler.stop('dtBase');

248

var msg = Y.Profiler.getAverage('dtBase') + 'ms taken to display';

249

var report = Y.Profiler.getFullReport(this.reportParser);

250

this.displayReport(report);

251

Y.Profiler.unregisterObject('dt');

252

Y.log(msg, "time");

253

Y.one(sel).appendChild('<p class="message">'+msg+'</p>');

254

255

256

testXYDatatable: function() {

257

var sel = '#scrolling-xy';

258

Y.Profiler.start('dtXY');

259

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

260

Y.Profiler.registerObject('dt', this.dt);

261

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

262

this.dt.render(sel);

263

Y.Profiler.stop('dtXY');

264

var msg = Y.Profiler.getAverage('dtXY') + 'ms taken to display';

265

266

var report = Y.Profiler.getFullReport(this.reportParser);

267

this.displayReport(report);

268

Y.Profiler.unregisterObject('dt');

269

Y.log(msg, "time");

270

Y.one(sel).appendChild('<p class="message">'+msg+'</p>');

271

272

273

274

testXDatatable: function() {

275

var sel = "#scrolling-x";

276

277

Y.Profiler.start('dtX');

278

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

279

Y.Profiler.registerObject('dt', this.dt);

280

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

281

282

this.dt.render(sel);

283

Y.Profiler.stop('dtX');

284

285

var msg = Y.Profiler.getAverage('dtX') + 'ms taken to display';

286

var report = Y.Profiler.getFullReport(this.reportParser);

287

this.displayReport(report);

288

Y.Profiler.unregisterObject('dt');

289

Y.log(msg, "time");

290

Y.one(sel).appendChild('<p class="message">'+msg+'</p>');

291

292

293

294

testYDatatable_FixedCol: function() {

295

var sel = "#scrolling-y";

296

297

Y.Profiler.start('dtY1');

298

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

299

Y.Profiler.registerObject('dt', this.dt);

300

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

301

this.dt.render(sel);

302

303

304

Y.Profiler.stop('dtY1');

305

var msg = Y.Profiler.getAverage('dtY1') + 'ms taken to display';

306

307

308

var report = Y.Profiler.getFullReport(this.reportParser);

309

310

this.displayReport(report);

311

Y.Profiler.unregisterObject('dt');

312

313

Y.log(msg, 'time');

314

Y.one(sel).appendChild('<p class="message">'+msg+'</p>');

315

316

317

testYDatatable_AutoCol: function() {

318

var sel = "#scrolling-colwidth";

319

320

Y.Profiler.start('dtY2');

321

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

322

Y.Profiler.registerObject('dt', this.dt);

323

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

324

this.dt.render(sel);

325

Y.Profiler.stop('dtY2');

326

327

var msg = Y.Profiler.getAverage('dtY2') + 'ms taken to display';

328

var report = Y.Profiler.getFullReport(this.reportParser);

329

330

this.displayReport(report);

331

Y.Profiler.unregisterObject('dt');

332

Y.log(msg, 'time');

333

Y.one(sel).appendChild('<p class="message">'+msg+'</p>');

334

335

336

testXYDatatable_BigHeaders: function() {

337

var sel = "#scrolling-bigcols";

338

339

Y.Profiler.start('dtHeaders');

340

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

341

Y.Profiler.registerObject('dt', this.dt);

342

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

343

this.dt.render(sel);

344

Y.Profiler.stop('dtHeaders');

345

346

var msg = Y.Profiler.getAverage('dtHeaders') + 'ms taken to display';

347

var report = Y.Profiler.getFullReport(this.reportParser);

348

349

this.displayReport(report);

350

Y.Profiler.unregisterObject('dt');

351

Y.log(msg, 'time');

352

Y.one(sel).appendChild('<p class="message">'+msg+'</p>');

353

354

355

testNoScrollDatatable: function() {

356

var sel = "#scrolling-noscroll";

357

358

Y.Profiler.start('dtNoScroll');

359

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

360

Y.Profiler.registerObject('dt', this.dt);

361

this.dt.plug(Y.Plugin.DataTableScroll);

362

this.dt.render(sel);

363

Y.Profiler.stop('dtNoScroll');

364

365

var msg = Y.Profiler.getAverage('dtNoScroll') + 'ms taken to display';

366

var report = Y.Profiler.getFullReport(this.reportParser);

367

368

this.displayReport(report);

369

Y.Profiler.unregisterObject('dt');

370

Y.log(msg, 'time');

371

Y.one(sel).appendChild('<p class="message">'+msg+'</p>');

372

373

this.dt.scroll.set('width', '200px');

374

375

376

test_uniqueRecordset: function () {

377

// Ticket #2529980

378

var a = new Y.DataTable.Base(),

379

b = new Y.DataTable.Base(),

380

aRS = a.get('recordset'),

381

bRS = b.get('recordset');

382

383

Y.Assert.isTrue(aRS instanceof Y.Recordset);

384

Y.Assert.isTrue(bRS instanceof Y.Recordset);

385

Y.Assert.areNotSame(aRS, bRS);

386

387

388

"caption should not be added to the DOM unless set": function () {

389

var container = Y.one("#base"),

390

table, caption;

391

392

table = new Y.DataTable.Base({

393

columnset: this.cols,

394

recordset: this.data,

395

caption: "Caption set"

396

});

397

table.render(container);

398

399

caption = table.get('boundingBox').one('caption');

400

Y.Assert.isNotNull(caption);

401

Y.Assert.areSame("Caption set", caption.get('text'));

402

403

table.destroy();

404

container.empty(true);

405

406

table = new Y.DataTable.Base({

407

columnset: this.cols,

408

recordset: this.data

409

});

410

table.render(container);

411

412

caption = table.get('boundingBox').one('caption');

413

Y.Assert.isNull(caption);

414

415

table.set('caption', 'Caption set');

416

caption = table.get('boundingBox').one('caption');

417

Y.Assert.isNotNull(caption);

418

Y.Assert.areSame('Caption set', caption.get('text'));

419

420

421

"test table.datasource.load() updates UI": function () {

422

var data = [ {a:1,b:1,c:1}, {a:2,b:2,c:2}, {a:3,b:3,c:3} ],

423

container = Y.one('#base'),

424

recordset,

425

source, table;

426

427

container.empty(true);

428

429

source = new Y.DataSource.Local({ source: data });

430

source.plug(Y.Plugin.DataSourceArraySchema, {

431

resultFields: ['a','b','c']

432

});

433

434

table = new Y.DataTable.Base({

435

columnset: [ { key: 'a', sortable: true }, 'b', 'c' ]

436

});

437

table.plug(Y.Plugin.DataTableDataSource, {

438

datasource: source

439

});

440

441

table.render(container);

442

443

Y.Assert.areSame(0, container.all('tbody tr').size());

444

445

table.datasource.load();

446

447

Y.Assert.areSame(3, container.all('tbody tr').size());

448

Y.Assert.areSame('1', container.one('tbody td').get('text'));

449

450

data[0].a = 'NEW';

451

452

table.datasource.load();

453

454

Y.Assert.areSame(3, container.all('tbody tr').size());

455

Y.Assert.areSame('NEW', container.one('tbody td').get('text'));

456

457

458

"test Recordset does not lose plugins on load": function () {

459

var data = [ {a:1,b:1,c:1}, {a:2,b:2,c:2}, {a:3,b:3,c:3} ],

460

container = Y.one('#base'),

461

recordset,

462

source, table;

463

464

container.empty(true);

465

466

source = new Y.DataSource.Local({ source: data });

467

source.plug(Y.Plugin.DataSourceArraySchema, {

468

resultFields: ['a','b','c']

469

});

470

471

table = new Y.DataTable.Base({

472

columnset: [ { key: 'a', sortable: true }, 'b', 'c' ]

473

});

474

table.plug(Y.Plugin.DataTableDataSource, {

475

datasource: source

476

});

477

table.plug(Y.Plugin.DataTableSort);

478

479

table.render(container);

480

481

table.datasource.load();

482

483

recordset = table.get("recordset");

484

Y.Assert.isObject(recordset);

485

Y.Assert.isObject(recordset.sort);

486

487

488

"header rows should not have {placeholders}": function () {

489

// Ticket #2530026

490

var data = [ {a:1,b:1,c:1}, {a:2,b:2,c:2}, {a:3,b:3,c:3} ],

491

container = Y.one('#base'),

492

recordset,

493

source, table, html;

494

495

container.empty(true);

496

497

table = new Y.DataTable.Base({

498

recordset: data,

499

columnset: [ 'a', 'b', 'c' ]

500

});

501

502

table.render(container);

503

504

html = table._theadNode.getContent();

505

Y.Assert.isNull(html.match(/\{\s*\w+\s*\}/));

506

507

508

"cells should default content from column.emptyCellValue": function () {

509

// Ticket #2529921

510

var data = [ {b:1,c:1,d:1},

511

{a:2,c:2,d:2},

512

{a:3,b:3,d:3},

513

{a:4,b:4,c:4} ],

514

container = Y.one('#base'),

515

recordset,

516

source, table;

517

518

container.empty(true);

519

520

table = new Y.DataTable.Base({

521

recordset: data,

522

columnset: [

523

'a',

524

{ key: 'b', emptyCellValue: "(NO B)" },

525

{ key: 'c', formatter: "<em>C: {value}</em>",

526

emptyCellValue: "(NO C)" },

527

{ key: 'd', formatter: function (o) {

528

return o.value && (o.value + .5);

529

530

emptyCellValue: "(NO D)" }]

531

});

532

533

table.render(container);

534

535

Y.Assert.isNull(table._tbodyNode

536

.getContent().match(/\{\s*\w+\s*\}/));

537

538

Y.Assert.areSame('', table._tbodyNode.all('tr').item(0)

539

.all('.yui3-datatable-liner').item(0).getContent());

540

541

Y.Assert.areSame('(NO B)', table._tbodyNode.all('tr').item(1)

542

.all('.yui3-datatable-liner').item(1).getContent());

543

544

Y.Assert.areSame('<EM>C: (NO C)</EM>',

545

table._tbodyNode.all('tr').item(2)

546

.all('.yui3-datatable-liner').item(2).getContent()

547

.toUpperCase()); // <-- account for IE UC tags

548

549

Y.Assert.areSame('(NO D)', table._tbodyNode.all('tr').item(3)

550

.all('.yui3-datatable-liner').item(3).getContent());

551

552

553

554

"setting the recordset should update the UI": function () {

555

// Ticket #2529920 (comment 18)

556

// http://yuilibrary.com/projects/yui3/ticket/2529920#comment:18

557

var data = [ {a:1,b:1,c:1}, {a:2,b:2,c:2}, {a:3,b:3,c:3} ],

558

container = Y.one('#base'),

559

table, cell;

560

561

container.empty(true);

562

563

table = new Y.DataTable.Base({

564

recordset: data,

565

columnset: [ 'a', 'b', 'c' ]

566

});

567

568

table.render(container);

569

570

cell = table._tbodyNode.one('.yui3-datatable-liner');

571

Y.Assert.areSame('1', cell.get('text'));

572

573

table.set('recordset', [

574

{ a: 10,b: 10,c: 10 },

575

{ a: 20,b: 20,c: 20 },

576

{ a: 30,b: 30,c: 30 }

577

]);

578

579

cell = table._tbodyNode.one('.yui3-datatable-liner');

580

Y.Assert.areSame('10', cell.get('text'));

581

582

583

"formatters should not have access to o.td by default": function () {

584

var table, cells;

585

586

table = new Y.DataTable.Base({

587

columnset: [

588

{

589

key: 'a',

590

formatter: function (o) {

591

Y.Assert.isUndefined(o.td);

592

return o.value.toUpperCase();

593

}

594

595

'b',

596

{ key: 'c', formatter: "({value})" }

597

598

recordset: [

599

{ a: "a1", b: 53, c: "c1" },

600

{ a: "a2", b: 35, c: "c2" },

601

{ a: "a3", b: 42, c: "c3" }

602

]

603

});

604

605

Y.one('#base').empty();

606

607

table.render('#base');

608

609

cells = table._tbodyNode.one('tr').all('td');

610

Y.ArrayAssert.itemsAreSame(

611

['A1', '53', '(c1)'],

612

cells.get('text'));

613

614

615

"createCell should populate o.td in formatters": function () {

616

var table, cells, i = 0;

617

618

table = new Y.DataTable.Base({

619

columnset: [

620

{

621

key: 'a',

622

formatter: function (o) {

623

Y.Assert.isUndefined(o.td);

624

this.createCell(o)

625

.setContent(

626

"<strong>???" + (++i) + "</strong>");

627

628

Y.Assert.isObject(o.td);

629

}

630

}

631

632

recordset: [{ a: "a1" }, { a: "a2" }, { a: "a3" }]

633

});

634

635

Y.one('#base').empty();

636

637

table.render('#base');

638

639

cells = table._tbodyNode.all('td');

640

641

Y.ArrayAssert.itemsAreSame(

642

['???1', '???2', '???3'],

643

cells.get('text'));

644

}

645

});

646

647

var suite = new Y.Test.Suite("Datatable Test Suite");

648

suite.add(testBasic);

649

650

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

651

Y.Test.Runner.add(suite);

652

Y.Test.Runner.run();

653

});

654

})();

655

</script>

656

</body>

657

</html>

Older »