reactable
Version:
Fast, flexible, simple data tables in React
1,160 lines (974 loc) • 121 kB
JSX
var ReactTestUtils = React.addons.TestUtils;
var expect = chai.expect;
var ReactableTestUtils = {
resetTestEnvironment: function() {
ReactDOM.unmountComponentAtNode($('div#test-node')[0]);
$('div#test-node').remove();
},
// Expect the row specified to have the specified class
expectRowClass: function(rowIndex, className) {
var row = $($('#table tbody.reactable-data tr')[rowIndex]);
expect(row).to.have.class(className);
},
// Expect the columns of a the data row specified to have the values in the array as their text values
expectRowText: function(rowIndex, textArray) {
var row = $($('#table tbody.reactable-data tr')[rowIndex]).find('td');
expect(row.length).to.equal(textArray.length);
for (var i = 0; i < row.length; i++) {
expect($(row[i])).to.have.text(textArray[i]);
}
},
testNode: function() {
var testNode = $('<div>').attr('id', 'test-node');
$('body').append(testNode);
testNode.empty();
return testNode[0];
}
};
describe('Reactable', function() {
describe("with null children", function(){
before(function () {
ReactDOM.render(
<Reactable.Table className="table" id="table">
{null}
{null}
{null}
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
});
describe('directly passing a data array', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{ Name: 'Griffin Smith', Age: '18'},
{ Age: '23', Name: 'Lee Salminen'},
{ Age: '28', Position: 'Developer'},
{ Name: 'Leonor Hyatt', Position: null}
]} />,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql([ 'Name', 'Age', 'Position']);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
it('handles null values', function() {
ReactableTestUtils.expectRowText(3, ['Leonor Hyatt', '', '']);
});
});
describe('adding <Tr>s to the <Table>', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr data={{ Name: 'Griffin Smith', Age: '18'}}/>
<Reactable.Tr data={{ Age: '23', Name: 'Lee Salminen'}}/>
<Reactable.Tr data={{ Age: '28', Position: 'Developer'}}/>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
});
describe('adding <Td>s to the <Tr>s', function() {
context('with only one <Td>', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name">Griffin Smith</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Name">Lee Salminen</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Name">Ian Zhang</Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql(['Name']);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen']);
});
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['Ian Zhang']);
});
});
context('with multiple <Td>s', function () {
context('with plain text', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name">Griffin Smith</Reactable.Td>
<Reactable.Td column="Age">18</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Name">Lee Salminen</Reactable.Td>
<Reactable.Td column="Age">23</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Position">Developer</Reactable.Td>
<Reactable.Td column="Age">28</Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
});
});
context('with React.DOM nodes inside', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name"><b>Griffin Smith</b></Reactable.Td>
<Reactable.Td column="Age"><em>18</em></Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Name"><b>Lee Salminen</b></Reactable.Td>
<Reactable.Td column="Age"><em>23</em></Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Position"><b>Developer</b></Reactable.Td>
<Reactable.Td column="Age"><em>28</em></Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
});
context('with null <Td>s', function(){
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name"><b>Griffin Smith</b></Reactable.Td>
{null}
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Name"><b>Lee Salminen</b></Reactable.Td>
<Reactable.Td column="Age"><em>23</em></Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Position"><b>Developer</b></Reactable.Td>
<Reactable.Td column="Age"><em>28</em></Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
});
context('with null <Tr>s', function(){
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name"><b>Griffin Smith</b></Reactable.Td>
<Reactable.Td column="Age"><em>18</em></Reactable.Td>
</Reactable.Tr>
{null}
<Reactable.Tr>
<Reactable.Td column="Position"><b>Developer</b></Reactable.Td>
<Reactable.Td column="Age"><em>28</em></Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['', '28', 'Developer']);
});
});
context("when one of the <Th>s is null", function(){
before(function () {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Thead>
<Reactable.Th>Test</Reactable.Th>
{null}
</Reactable.Thead>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
});
});
describe('Adding a <Tfoot>', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" sortable={['Name']} filterable={['Name', 'Age']} filterClassName="new-class" >
<Reactable.Tr className="rowClass1" data={{ Name: 'Griffin Smith', Age: '18'}}/>
<Reactable.Tr className="rowClass2" data={{ Age: '23', Name: 'Lee Salminen'}}/>
<Reactable.Tr className="rowClass3" data={{ Age: '28', Position: 'Developer'}}/>
<Reactable.Tfoot id="tfoot">
<tr><td id="tfoot-stuff">Test</td></tr>
</Reactable.Tfoot>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('#table')).to.exist;
});
it('renders the regular data rows', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
it('renders the tfoot', function() {
expect($('#tfoot')).to.exist;
});
it('renders the children of the tfoot', function() {
expect($('#tfoot-stuff')).to.exist;
});
context('when sorting', function() {
before(function() {
ReactTestUtils.Simulate.click($('th')[0]);
});
it('leaves the tfoot alone', function() {
expect($('table :last-child')).to.match('tfoot');
});
});
context('when filtering', function() {
before(function() {
var $filter = $('.reactable-filter-input');
$filter.val('griffin');
ReactTestUtils.Simulate.keyUp($filter[0]);
});
it('adds the filterClassName to the filterer', function() {
expect($('.reactable-filter-input').hasClass('new-class')).to.eq(true)
});
it('leaves the tfoot alone', function() {
expect($('table :last-child')).to.match('tfoot');
});
});
});
describe('passing through HTML props', function() {
describe('adding <Tr>s with className to the <Table>', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr className="rowClass1" data={{ Name: 'Griffin Smith', Age: '18'}}/>
<Reactable.Tr className="rowClass2" data={{ Age: '23', Name: 'Lee Salminen'}}/>
<Reactable.Tr className="rowClass3" data={{ Age: '28', Position: 'Developer'}}/>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});
it('renders the first row with the correct class name', function() {
ReactableTestUtils.expectRowClass(0, 'rowClass1');
});
it('renders the second row with the correct class name', function() {
ReactableTestUtils.expectRowClass(1, 'rowClass2');
});
it('renders the third row with the correct class name', function() {
ReactableTestUtils.expectRowClass(2, 'rowClass3');
});
});
describe('adding <Td>s with classNames to the <Table>', function() {
before(function () {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name" className="name-1">Griffin Smith</Reactable.Td>
<Reactable.Td column="Age">18</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Name" className="name-2">Lee Salminen</Reactable.Td>
<Reactable.Td column="Age">23</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Position" className="position">Developer</Reactable.Td>
<Reactable.Td column="Age">28</Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the first column with the correct class name', function() {
expect($('td.name-1')).to.have.text('Griffin Smith');
});
it('renders the second column with the correct class name', function() {
expect($('td.name-2')).to.have.text('Lee Salminen');
});
it('renders the third column with the correct class name', function() {
expect($('td.position')).to.have.text('Developer');
});
});
});
describe('adding <Td> with style to the <Table>', function() {
before(function () {
var tdStyle = {width:"100px"};
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name" className="name-1" style={tdStyle}>Griffin Smith</Reactable.Td>
<Reactable.Td column="Age">18</Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the first column with the width', function() {
expect($('td.name-1')).to.have.attr('style').match(/width/);
});
});
describe('specifying an array of columns', function() {
describe('as strings', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{ Name: 'Griffin Smith', Age: '18', HideThis: 'one'},
{ Age: '23', Name: 'Lee Salminen', HideThis: 'two'},
{ Age: '28', Position: 'Developer'},
]} columns={['Name', 'Age']}/>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('omits columns not in the list', function() {
var columns = $('tr.reactable-column-header th');
expect(columns.length).to.equal(2);
expect($(columns[0])).to.have.text('Name');
expect($(columns[1])).to.have.text('Age');
});
it('adds class name for each column base on its label', function() {
var columns = $('tr.reactable-column-header th');
expect($(columns[0])).to.have.class('reactable-th-name');
expect($(columns[1])).to.have.class('reactable-th-age');
});
});
describe('as objects', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{ name: 'Griffin Smith', age: '18', HideThis: 'one'},
{ age: '23', name: 'Lee Salminen', HideThis: 'two'},
{ age: '28', Position: 'Developer'},
]} columns={[
{ key: 'name', label: 'Name' },
{ key: 'age', label: 'Age' }
]}/>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('omits columns not in the list', function() {
var columns = $('tr.reactable-column-header th');
expect(columns.length).to.equal(2);
});
it('allows changing the labels of the columns', function() {
var columns = $('tr.reactable-column-header th');
expect($(columns[0])).to.have.text('Name');
expect($(columns[1])).to.have.text('Age');
});
it('adds class name for each column base on its key', function() {
var columns = $('tr.reactable-column-header th');
expect($(columns[0])).to.have.class('reactable-th-name');
expect($(columns[1])).to.have.class('reactable-th-age');
});
});
});
describe('specifying columns using a <Thead>', function() {
describe('and an element for the column title', function() {
before(function() {
ReactDOM.render(
<Reactable.Table id="table" data={[
{ Name: Reactable.unsafe('<span id="griffins-name">Griffin Smith</span>'), Age: '18'},
{ Age: '28', Position: Reactable.unsafe('<span id="who-knows-job">Developer</span>')},
{ Age: '23', Name: Reactable.unsafe('<span id="lees-name">Lee Salminen</span>')},
]}>
<Reactable.Thead>
<Reactable.Th column="Name" id="my-name">
<strong>name</strong>
</Reactable.Th>
</Reactable.Thead>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders only the columns in the Thead', function() {
expect($('#table tbody tr:first td')).to.exist;
expect($('#table thead tr:first th')).to.exist;
});
it('renders the contents of the Th', function() {
expect($('#table>thead>tr>th>strong')).to.exist;
});
it('passes through the properties of the Th', function() {
expect($('#table>thead>tr>th')).to.have.id('my-name')
});
});
describe('and a string for the column title', function() {
before(function() {
ReactDOM.render(
<Reactable.Table id="table" data={[
{ Name: Reactable.unsafe('<span id="griffins-name">Griffin Smith</span>'), Age: '18'},
{ Age: '28', Position: Reactable.unsafe('<span id="who-knows-job">Developer</span>')},
{ Age: '23', Name: Reactable.unsafe('<span id="lees-name">Lee Salminen</span>')},
]}>
<Reactable.Thead>
<Reactable.Th column="Name" id="my-name">
name
</Reactable.Th>
</Reactable.Thead>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders only the columns in the Thead', function() {
expect($('#table tbody tr:first td')).to.exist;
expect($('#table thead tr:first th')).to.exist;
});
it('renders the contents of the Th', function() {
expect($('#table>thead>tr>th')).to.exist;
});
it('passes through the properties of the Th', function() {
expect($('#table>thead>tr>th')).to.have.id('my-name')
});
})
});
describe('table headers', function() {
describe("with hideTableHeader prop on <Table>", function() {
before(function () {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{ Name: 'Griffin Smith', Age: '18'},
{ Age: '23', Name: 'Lee Salminen'},
{ Age: '28', Position: 'Developer'},
{ Name: 'Leonor Hyatt', Position: null}
]} hideTableHeader />,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
it('does not show a <Thead>', function() {
expect($('#table thead')).not.to.exist;
});
});
});
describe('unsafe() strings', function() {
context('in the <Table> directly', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{ Name: Reactable.unsafe('<span id="griffins-name">Griffin Smith</span>'), Age: '18'},
{ Age: '28', Position: Reactable.unsafe('<span id="who-knows-job">Developer</span>')},
{ Age: '23', Name: Reactable.unsafe('<span id="lees-name">Lee Salminen</span>')},
]} sortable={['Name']}/>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the HTML in the table cells', function() {
var griffins_name = $('span#griffins-name');
expect(griffins_name.length).to.equal(1);
expect(griffins_name).to.have.text('Griffin Smith');
var lees_name = $('span#lees-name');
expect(lees_name.length).to.equal(1);
expect(lees_name).to.have.text('Lee Salminen');
var who_knows_job = $('span#who-knows-job');
expect(who_knows_job.length).to.equal(1);
expect(who_knows_job).to.have.text('Developer');
});
it('still allows sorting', function() {
var nameHeader = $('#table thead tr.reactable-column-header th')[0];
ReactTestUtils.Simulate.click(nameHeader);
ReactableTestUtils.expectRowText(0, ['28', 'Developer', '']);
ReactableTestUtils.expectRowText(1, ['18', '', 'Griffin Smith']);
ReactableTestUtils.expectRowText(2, ['23', '', 'Lee Salminen']);
});
});
context('in column labels', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{ Name: 'Griffin Smith', Age: '18'},
{ Age: '23', Name: 'Lee Salminen'},
{ Age: '28', Position: 'Developer'}
]} columns={[
{ key: 'Name', label: Reactable.unsafe('<strong>Name</strong>') },
{ key: 'Age', label: Reactable.unsafe('<em>Age</em>') },
{ key: 'Position', label: Reactable.unsafe('<small>Position</small>') }
]} />,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the HTML in the column headers', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).html());
});
expect(headers).to.eql([
'<strong>Name</strong>',
'<em>Age</em>',
'<small>Position</small>'
]);
});
});
context('in the <Tr>s', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr data={{ Name: Reactable.unsafe('<span id="griffins-name">Griffin Smith</span>'), Age: '18'}} />
<Reactable.Tr data={{ Age: '23', Name: Reactable.unsafe('<span id="lees-name">Lee Salminen</span>')}} />
<Reactable.Tr data={{ Age: '28', Position: Reactable.unsafe('<span id="who-knows-job">Developer</span>')}} />
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the HTML in the table cells', function() {
var griffins_name = $('span#griffins-name');
expect(griffins_name.length).to.equal(1);
expect(griffins_name).to.have.text('Griffin Smith');
var lees_name = $('span#lees-name');
expect(lees_name.length).to.equal(1);
expect(lees_name).to.have.text('Lee Salminen');
var who_knows_job = $('span#who-knows-job');
expect(who_knows_job.length).to.equal(1);
expect(who_knows_job).to.have.text('Developer');
});
});
context('in the <Td>s', function() {
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table">
<Reactable.Tr>
<Reactable.Td column="Name">{Reactable.unsafe('<span id="griffins-name">Griffin Smith</span>')}</Reactable.Td>
<Reactable.Td column="Age">18</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Name">{Reactable.unsafe('<span id="lees-name">Lee Salminen</span>')}</Reactable.Td>
<Reactable.Td column="Age">23</Reactable.Td>
</Reactable.Tr>
<Reactable.Tr>
<Reactable.Td column="Position">{Reactable.unsafe('<span id="who-knows-job">Developer</span>')}</Reactable.Td>
<Reactable.Td column="Age">28</Reactable.Td>
</Reactable.Tr>
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders the HTML in the table cells', function() {
var griffins_name = $('span#griffins-name');
expect(griffins_name.length).to.equal(1);
expect(griffins_name).to.have.text('Griffin Smith');
var lees_name = $('span#lees-name');
expect(lees_name.length).to.equal(1);
expect(lees_name).to.have.text('Lee Salminen');
var who_knows_job = $('span#who-knows-job');
expect(who_knows_job.length).to.equal(1);
expect(who_knows_job).to.have.text('Developer');
});
});
});
describe('pagination', function() {
describe('specifying pageButtonLimit', function(){
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
]} itemsPerPage={2} pageButtonLimit={8}/>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('shows no more page buttons than the pageButtonLimit', function() {
var pageButtons = $('#table tbody.reactable-pagination a.reactable-page-button');
expect(pageButtons.length).to.equal(8);
});
})
describe('specifying itemsPerPage', function(){
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
]} itemsPerPage={4} previousPageLabel={'<<'} nextPageLabel={'>>'}/>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('provides buttons for each page', function() {
var pageButtons = $('#table tbody.reactable-pagination a.reactable-page-button');
expect(pageButtons.length).to.equal(3);
expect($(pageButtons[0])).to.have.text('1')
expect($(pageButtons[1])).to.have.text('2')
expect($(pageButtons[2])).to.have.text('3')
});
it('displays only the first n rows', function() {
expect($('#table tbody.reactable-data tr').length).to.equal(4);
});
it('specifies a class on the currently active page', function() {
var activePage = $('#table tbody.reactable-pagination a.reactable-page-button.reactable-current-page');
expect(activePage.length).to.equal(1);
expect(activePage).to.have.text('1');
});
it('does not show previous button', function(){
var previousButton = $('#table tbody.reactable-pagination a.reactable-previous-page');
expect(previousButton.length).to.equal(0);
});
it('shows next button', function(){
var nextButton = $('#table tbody.reactable-pagination a.reactable-next-page');
expect(nextButton.length).to.equal(1);
expect(nextButton[0].text).to.equal('>>');
});
describe('clicking page buttons', function() {
beforeEach(function() {
var page2 = $('#table tbody.reactable-pagination a.reactable-page-button')[1];
ReactTestUtils.Simulate.click(page2);
});
it('loads the next n rows', function() {
var rows = $('#table tbody.reactable-data tr');
expect($($(rows[0]).find('td')[0])).to.have.text('Test Person');
expect($($(rows[1]).find('td')[0])).to.have.text('Ian Zhang');
expect($($(rows[2]).find('td')[0])).to.have.text('Griffin Smith');
expect($($(rows[3]).find('td')[0])).to.have.text('Lee Salminen');
});
it('puts an active class on the new active page', function() {
var activePage = $('#table tbody.reactable-pagination a.reactable-page-button.reactable-current-page');
expect(activePage.length).to.equal(1);
expect(activePage).to.have.text('2');
});
it('can go back to the original page', function() {
var page1 = $('#table tbody.reactable-pagination a.reactable-page-button')[0];
ReactTestUtils.Simulate.click(page1);
var rows = $('#table tbody.reactable-data tr');
expect($($(rows[0]).find('td')[0])).to.have.text('Griffin Smith');
expect($($(rows[1]).find('td')[0])).to.have.text('Lee Salminen');
expect($($(rows[2]).find('td')[0])).to.have.text('');
expect($($(rows[3]).find('td')[0])).to.have.text('Griffin Smith');
});
it('shows previous button', function(){
var previousButton = $('#table tbody.reactable-pagination a.reactable-previous-page');
expect(previousButton.length).to.equal(1);
expect(previousButton[0].text).to.equal('<<');
});
});
});
describe('specifying more itemsPerPage than items', function(){
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
]} itemsPerPage={20} />,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders all rows', function(){
expect($('#table tbody.reactable-data tr').length).to.equal(9);
});
it('provides buttons for 1 page', function() {
var pageButtons = $('#table tbody.reactable-pagination a.reactable-page-button');
expect(pageButtons.length).to.equal(1);
expect($(pageButtons[0])).to.have.text('1')
});
it('does not show previous and next buttons', function(){
var previousButton = $('#table tbody.reactable-pagination a.reactable-previous-page');
var nextButton = $('#table tbody.reactable-pagination a.reactable-next-page');
expect(previousButton.length + nextButton.length).to.equal(0);
})
});
describe('not specifying itemsPerPage', function(){
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
]} />,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders all rows', function(){
expect($('#table tbody.reactable-data tr').length).to.equal(9);
});
});
describe('specifying 0 itemsPerPage', function(){
before(function() {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
]} itemsPerPage={0} />,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('renders all rows', function(){
expect($('#table tbody.reactable-data tr').length).to.equal(9);
});
});
describe('onPageChange hook', () => {
let currentPage
const callback = page => {
currentPage = page
}
before( () => {
ReactDOM.render(
<Reactable.Table className="table" id="table" data={[
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
]} itemsPerPage={4} onPageChange={callback} />,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);
it('emits the number of the currently selected page (zero based) when onPageChange event is triggered', () => {
const page1 = $('#table tbody.reactable-pagination a.reactable-page-button')[0];
const page2 = $('#table tbody.reactable-pagination a.reactable-page-button')[1];
const page3 = $('#table tbody.reactable-pagination a.reactable-page-button')[2];
ReactTestUtils.Simulate.click(page2);
expect(currentPage).to.equal(1);
ReactTestUtils.Simulate.click(page1);
expect(currentPage).to.equal(0);
ReactTestUtils.Simulate.click(page3);
expect(currentPage).to.equal(2);
});
});
describe('updating the currentPage via a prop passed to the table', function() {
before(function() {
var ParentComponent = React.createClass({
getInitialState: function() {
return {currentPage: 4}
},
render () {
return (
<Reactable.Table className="table" id="table" data={[
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18'},
{'Age': '23', 'Name': 'Test Person'},
{'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
{'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
{'Age': '23', 'Name': 'Lee Salminen'},
{'Age': '28', 'Position': 'Developer'},
]} itemsPerPage={2} currentPage={this.state.currentPage} />