diff --git a/client/src/app-components/__tests__/ticket-list-test.js b/client/src/app-components/__tests__/ticket-list-test.js new file mode 100644 index 00000000..8e591a48 --- /dev/null +++ b/client/src/app-components/__tests__/ticket-list-test.js @@ -0,0 +1,188 @@ +const _ = require('lodash'); +const TicketInfo = ReactMock(); +const Table = ReactMock(); +const Button = ReactMock(); +const Tooltip = ReactMock(); +const Dropdown = ReactMock(); +const i18n = stub().returnsArg(0); + +const TicketList = requireUnit('app-components/ticket-list', { + 'app-components/ticket-info': TicketInfo, + 'core-components/table': Table, + 'core-components/button': Button, + 'core-components/tooltip': Tooltip, + 'core-components/drop-down': Dropdown, + 'lib-app/i18n': i18n +}); + +describe('TicketList component', function () { + let ticketList, table, dropdown; + let tickets = (function() { + let ticket = { + unread: false, + closed: false, + title: 'This is not working', + ticketNumber: 123124, + date: '20160215', + department: { + id: 1, + name: 'Sales Support' + }, + priority: 'low', + author: { + id: 3, + name: 'Francisco Villegas' + } + }; + let list = _.range(5).map(() => ticket); + + list = list.concat(_.range(5).map(() => { + return _.extend({}, ticket, { + department: { + id: 2, + name: 'Tech Help' + } + }) + })); + + return list; + })(); + + function renderTicketList(props = {}) { + ticketList = TestUtils.renderIntoDocument( + + ); + + table = TestUtils.scryRenderedComponentsWithType(ticketList, Table); + dropdown = TestUtils.scryRenderedComponentsWithType(ticketList, Dropdown); + } + + it('should pass correct props to Table', function () { + renderTicketList(); + expect(table[0].props.loading).to.equal(false); + expect(table[0].props.pageSize).to.equal(10); + expect(table[0].props.headers).to.deep.equal([ + { + key: 'number', + value: i18n('NUMBER'), + className: 'ticket-list__number col-md-1' + }, + { + key: 'title', + value: i18n('TITLE'), + className: 'ticket-list__title col-md-6' + }, + { + key: 'department', + value: i18n('DEPARTMENT'), + className: 'ticket-list__department col-md-3' + }, + { + key: 'date', + value: i18n('DATE'), + className: 'ticket-list__date col-md-2' + } + ]); + }); + + it('should pass loading to Table', function () { + renderTicketList({loading: true}); + expect(table[0].props.loading).to.equal(true); + }); + + it('should pass correct compare function to Table', function () { + let minCompare = table[0].props.comp; + + let row1 = { + closed: false, + unread: false, + date: '20160405' + }; + let row2 = { + closed: false, + unread: false, + date: '20160406' + }; + expect(minCompare(row1, row2)).to.equal(1); + + row1.unread = true; + expect(minCompare(row1, row2)).to.equal(-1); + + row2.unread = true; + expect(minCompare(row1, row2)).to.equal(1); + + row2.date = '20160401'; + expect(minCompare(row1, row2)).to.equal(-1); + }); + + describe('when using secondary type', function () { + beforeEach(function () { + renderTicketList({ + type: 'secondary', + departments: [ + {id: 1, name: 'Sales Support'}, + {id: 2, name: 'Tech Help'} + ] + }); + }); + + it('should pass correct props to Table', function () { + expect(table[0].props.headers).to.deep.equal([ + { + key: 'number', + value: i18n('NUMBER'), + className: 'ticket-list__number col-md-1' + }, + { + key: 'title', + value: i18n('TITLE'), + className: 'ticket-list__title col-md-4' + }, + { + key: 'priority', + value: i18n('PRIORITY'), + className: 'ticket-list__priority col-md-1' + }, + { + key: 'department', + value: i18n('DEPARTMENT'), + className: 'ticket-list__department col-md-2' + }, + { + key: 'author', + value: i18n('AUTHOR'), + className: 'ticket-list__author col-md-2' + }, + { + key: 'date', + value: i18n('DATE'), + className: 'ticket-list__date col-md-2' + } + ]); + }); + + it('should pass correct props to dropdown', function () { + expect(dropdown[0].props.items).to.deep.equal([ + {content: i18n('ALL_DEPARTMENTS')}, + {content: 'Sales Support'}, + {content: 'Tech Help'} + ]); + expect(dropdown[0].props.size).to.equal('medium'); + }); + + it('should filter tickets by department when DropDown changes', function () { + dropdown[0].props.onChange({index: 1}); + _.forEach(table[0].props.rows, function (row) { + expect(row.department).to.equal('Sales Support'); + }); + + dropdown[0].props.onChange({index: 2}); + _.forEach(table[0].props.rows, function (row) { + expect(row.department).to.equal('Tech Help'); + }); + + dropdown[0].props.onChange({index: 0}); + expect(table[0].props.rows.length).to.equal(10); + }); + }); +}); \ No newline at end of file diff --git a/client/src/app-components/ticket-list.js b/client/src/app-components/ticket-list.js index e80d0c6b..3f9b2e61 100644 --- a/client/src/app-components/ticket-list.js +++ b/client/src/app-components/ticket-list.js @@ -25,6 +25,7 @@ class TicketList extends React.Component { static defaultProps = { loading: false, tickets: [], + departments: [], ticketPath: '/dashboard/ticket/', type: 'primary' };