define([
|
'intern!tdd',
|
'intern/chai!assert',
|
'dojo/_base/declare',
|
'dojo/dom-style',
|
'dojo/dom-construct',
|
'dojo/query',
|
'dgrid/Grid',
|
'dgrid/ColumnSet',
|
'dgrid/extensions/ColumnHider',
|
'dgrid/extensions/ColumnResizer',
|
'dgrid/util/misc',
|
'../addCss!'
|
], function (test, assert, declare, domStyle, domConstruct, query,
|
Grid, ColumnSet, ColumnHider, ColumnResizer, miscUtil) {
|
|
var grid;
|
function gridDestroy() {
|
if (grid) {
|
grid.destroy();
|
grid = undefined;
|
}
|
}
|
|
test.suite('addCssRule', function () {
|
var testDiv;
|
|
// Setup / teardown
|
test.before(function () {
|
testDiv = domConstruct.create('div', null, document.body);
|
});
|
|
test.after(function () {
|
domConstruct.destroy(testDiv);
|
});
|
|
test.afterEach(gridDestroy);
|
|
// Tests
|
test.test('addCssRule + remove', function () {
|
testDiv.className = 'foo';
|
// cache original style and update .foo
|
var origStyle = domStyle.getComputedStyle(testDiv).fontSize,
|
rule = miscUtil.addCssRule('.foo', 'font-size: 8px;');
|
// check updated font size was applied
|
assert.strictEqual('8px', domStyle.getComputedStyle(testDiv).fontSize,
|
'Node with matching class has expected font-size');
|
// remove the rule & make sure the computed style is good again
|
rule.remove();
|
assert.strictEqual(origStyle, domStyle.getComputedStyle(testDiv).fontSize,
|
'Node with matching class no longer has font-size from removed rule');
|
testDiv.className = '';
|
});
|
|
test.test('addCssRule get/set/remove', function () {
|
testDiv.className = 'bar';
|
// cache original style and update .foo
|
var origStyle = domStyle.getComputedStyle(testDiv).fontSize,
|
rule = miscUtil.addCssRule('.bar', 'font-size: 8px;');
|
// check updated font size was applied
|
assert.strictEqual('8px', rule.get('fontSize'),
|
'rule.get(\'fontSize\') reports expected value');
|
// update the font size
|
rule.set('fontSize', '9px');
|
// verify that the size updated
|
assert.strictEqual('9px', domStyle.getComputedStyle(testDiv).fontSize,
|
'Node with matching class has expected font-size after set');
|
// make sure rule.get works the same
|
assert.strictEqual('9px', rule.get('fontSize'),
|
'rule.get(\'fontSize\') reports expected value after set');
|
// remove the rule & make sure it updates
|
rule.remove();
|
assert.strictEqual(origStyle, domStyle.getComputedStyle(testDiv).fontSize,
|
'Node with matching class no longer has font-size from removed rule');
|
testDiv.className = '';
|
});
|
|
test.test('add/remove multiple rules in mixed order', function () {
|
var origStyle = domStyle.getComputedStyle(testDiv).fontSize,
|
rules = [],
|
expected = { // hash containing test classes / values
|
foo: '7px',
|
bar: '8px',
|
baz: '9px'
|
},
|
cls;
|
|
function check() {
|
// Test that all expected styles hold
|
var cls;
|
for (cls in expected) {
|
testDiv.className = cls;
|
assert.strictEqual(expected[cls], domStyle.getComputedStyle(testDiv).fontSize,
|
'Node with class ' + cls + ' has expected font-size');
|
}
|
testDiv.className = '';
|
}
|
|
// Create rules and maintain references to returned objects
|
for (cls in expected) {
|
rules.push(miscUtil.addCssRule('.' + cls, 'font-size: ' + expected[cls] + ';'));
|
}
|
|
// Do initial check, then remove rules one by one, out of order,
|
// updating the hash and checking each time along the way
|
check();
|
|
rules[2].remove();
|
expected.baz = origStyle;
|
check();
|
|
rules[0].remove();
|
expected.foo = origStyle;
|
check();
|
|
rules[1].remove();
|
expected.bar = origStyle;
|
check();
|
});
|
|
test.test('addCssRule via dgrid APIs', function () {
|
var values = ['7px', '8px'],
|
origValues;
|
|
function createGrid(cleanAddedRules) {
|
grid = new Grid({
|
id: 'my.grid', // test escaping of CSS identifiers from methods
|
columns: {
|
name: 'Name',
|
value: 'Value',
|
comment: 'Comment' // unstyled buffer
|
},
|
cleanAddedRules: cleanAddedRules
|
});
|
document.body.appendChild(grid.domNode);
|
grid.startup();
|
}
|
|
function addRules() {
|
var rules = [];
|
|
rules.push(grid.addCssRule('.field-value', 'font-size: ' + values[0] + ';'));
|
rules.push(grid.styleColumn('name', 'font-size: ' + values[1] + ';'));
|
|
return rules;
|
}
|
|
function getStyles() {
|
return [
|
domStyle.getComputedStyle(query('.field-value', grid.domNode)[0]).fontSize,
|
domStyle.getComputedStyle(query('.dgrid-column-name', grid.domNode)[0]).fontSize
|
];
|
}
|
|
function checkRules(expected) {
|
var actual = getStyles(grid);
|
assert.strictEqual(expected[0], actual[0],
|
'Style modified via addCssRule has expected value');
|
assert.strictEqual(expected[1], actual[1],
|
'Style modified via styleColumn has expected value');
|
}
|
|
// Create grid for the first time
|
createGrid(true);
|
// Collect original style values for later cleanup check
|
origValues = getStyles();
|
// Add rules and make sure they applied as expected
|
addRules();
|
checkRules(values);
|
// Destroy the grid, which should remove the style rules
|
gridDestroy();
|
|
// Create grid for the second time, with cleanAddedRules: false
|
createGrid(false);
|
// Before adding styles, make sure the ones from last time were removed
|
checkRules(origValues);
|
// Add rules and check again;
|
// store the rules for tearDown since they won't be cleaned up
|
this.rules = addRules();
|
checkRules(values);
|
// Destroy the grid, which should *not* remove the style rules
|
gridDestroy();
|
|
// Create grid for the third time
|
createGrid(true);
|
// Check that styles from last time still exist
|
checkRules(values);
|
// Destroy the grid (which won't remove the styles from last time,
|
// since no handles were added to this exact instance)
|
gridDestroy();
|
|
// Clean up rule litter from cleanAddedRules: false test
|
var i;
|
for (i in this.rules) {
|
this.rules[i].remove();
|
}
|
});
|
|
test.test('Grid columns as array (numeric IDs)', function () {
|
grid = new Grid({
|
columns: [
|
{ field: 'name' },
|
{ field: 'value' }
|
]
|
});
|
document.body.appendChild(grid.domNode);
|
grid.startup();
|
|
assert.doesNotThrow(function () {
|
grid.styleColumn(0, 'font-size: 8px;');
|
}, null, 'styleColumn with numeric column ID should not throw error');
|
assert.strictEqual('8px', domStyle.getComputedStyle(query('.dgrid-cell')[0]).fontSize,
|
'Column cell should have expected style');
|
});
|
});
|
|
test.suite('CSS escaping of column IDs via dgrid APIs', function () {
|
|
test.suite('Grid columns and columnsets', function () {
|
function makeTest(func, id) {
|
return function () {
|
assert.doesNotThrow(function () {
|
grid[func](id, 'font-size: 8px;');
|
}, null, func + ' should escape special characters and not throw error');
|
assert.strictEqual('8px', domStyle.getComputedStyle(query('.dgrid-cell')[0]).fontSize,
|
'Column cell should have expected style');
|
};
|
}
|
|
test.beforeEach(function () {
|
grid = new (declare([Grid, ColumnSet]))({
|
id: 'i:d',
|
columnSets: [[[
|
{ field: 'foo', id: 'col:umn' }
|
]]]
|
});
|
document.body.appendChild(grid.domNode);
|
grid.startup();
|
});
|
|
test.afterEach(gridDestroy);
|
|
test.test('styleColumn', makeTest('styleColumn', 'col:umn'));
|
|
// Currently ColumnSet IDs can't be customized so that isn't really an issue,
|
// but this still tests escaping the grid ID
|
test.test('styleColumnSet', makeTest('styleColumnSet', '0'));
|
});
|
|
test.suite('ColumnHider', function () {
|
var ColumnHiderGrid = declare([Grid, ColumnHider]);
|
|
test.afterEach(gridDestroy);
|
|
test.test('Hiding column after construction', function () {
|
assert.doesNotThrow(function () {
|
grid = new ColumnHiderGrid({
|
id: 'i:d',
|
columns: [
|
{ field: 'foo', id: 'col:umn' }
|
]
|
});
|
}, null, 'ColumnHider should not throw error during construction');
|
document.body.appendChild(grid.domNode);
|
grid.startup();
|
|
assert.doesNotThrow(function () {
|
grid._hideColumn('col:umn');
|
}, null, '_hideColumn should escape special characters and not throw error');
|
assert.strictEqual(query('.dgrid-cell')[0].offsetHeight, 0,
|
'Column should be hidden');
|
});
|
|
test.test('Hiding column during construction', function () {
|
assert.doesNotThrow(function () {
|
grid = new ColumnHiderGrid({
|
id: 'i:d',
|
columns: [
|
{ field: 'foo', id: 'col:umn', hidden: true }
|
]
|
});
|
}, null, 'ColumnHider should not throw error during construction');
|
document.body.appendChild(grid.domNode);
|
grid.startup();
|
assert.strictEqual(query('.dgrid-cell')[0].offsetHeight, 0,
|
'Column should be hidden');
|
});
|
});
|
|
test.suite('ColumnResizer', function () {
|
var ColumnResizerGrid = declare([Grid, ColumnResizer]);
|
|
test.afterEach(gridDestroy);
|
|
test.test('Resizing column after construction', function () {
|
assert.doesNotThrow(function () {
|
grid = new ColumnResizerGrid({
|
id: 'i:d',
|
columns: [
|
{ field: 'foo', id: 'col:umn' },
|
{ field: 'bar' }
|
]
|
});
|
}, null, 'ColumnResizer should not throw error during construction');
|
document.body.appendChild(grid.domNode);
|
grid.startup();
|
|
assert.doesNotThrow(function () {
|
grid.resizeColumnWidth('col:umn', 100);
|
}, null, 'resizeColumnWidth should escape special characters and not throw error');
|
assert.strictEqual(query('.dgrid-cell')[0].offsetWidth, 100,
|
'Column should be the expected width');
|
});
|
|
test.test('Resizing column during construction', function () {
|
assert.doesNotThrow(function () {
|
grid = new ColumnResizerGrid({
|
id: 'i:d',
|
columns: [
|
{ field: 'foo', id: 'col:umn', width: 100 },
|
{ field: 'bar' }
|
]
|
});
|
}, null, 'ColumnResizer should not throw error during construction');
|
document.body.appendChild(grid.domNode);
|
grid.startup();
|
assert.strictEqual(query('.dgrid-cell')[0].offsetWidth, 100,
|
'Column should be the expected width');
|
});
|
});
|
});
|
});
|
