From c3f279fb0c6897ae316aad9808a74ccebdb94c6a Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sun, 3 Jun 2018 14:04:06 +0800 Subject: [PATCH] patch tests for date filter --- .../test/components/date.test.js | 264 ++++++++++++++++++ .../test/filter.test.js | 56 +++- 2 files changed, 312 insertions(+), 8 deletions(-) create mode 100644 packages/react-bootstrap-table2-filter/test/components/date.test.js diff --git a/packages/react-bootstrap-table2-filter/test/components/date.test.js b/packages/react-bootstrap-table2-filter/test/components/date.test.js new file mode 100644 index 0000000..366a675 --- /dev/null +++ b/packages/react-bootstrap-table2-filter/test/components/date.test.js @@ -0,0 +1,264 @@ +import 'jsdom-global/register'; +import React from 'react'; +import { mount } from 'enzyme'; +import DateFilter from '../../src/components/date'; +import { FILTER_TYPE } from '../../src/const'; +import * as Comparator from '../../src/comparison'; + + +describe('Date Filter', () => { + let wrapper; + + + const onFilterFirstReturn = jest.fn(); + const onFilter = jest.fn().mockReturnValue(onFilterFirstReturn); + + const column = { + dataField: 'price', + text: 'Product Price' + }; + + afterEach(() => { + onFilter.mockClear(); + onFilterFirstReturn.mockClear(); + + // onFilter.returns(onFilterFirstReturn); + }); + + describe('initialization', () => { + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering component successfully', () => { + expect(wrapper).toHaveLength(1); + expect(wrapper.find('.date-filter-input')).toHaveLength(1); + expect(wrapper.find('.date-filter-comparator')).toHaveLength(1); + expect(wrapper.find('.date-filter')).toHaveLength(1); + }); + + it('should rendering comparator options correctly', () => { + const select = wrapper.find('select'); + expect(select.find('option')).toHaveLength(wrapper.prop('comparators').length + 1); + }); + }); + + describe('when withoutEmptyComparatorOption prop is true', () => { + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering comparator options correctly', () => { + const select = wrapper.find('.date-filter-comparator'); + expect(select.find('option')).toHaveLength(wrapper.prop('comparators').length); + }); + }); + + describe('when defaultValue.date props is defined', () => { + const date = new Date(2018, 0, 1); + + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering input successfully', () => { + expect(wrapper).toHaveLength(1); + const input = wrapper.find('.date-filter-input'); + expect(input).toHaveLength(1); + expect(input.props().defaultValue).toEqual(wrapper.instance().getDefaultDate()); + }); + }); + + describe('when defaultValue.comparator props is defined', () => { + const comparator = Comparator.EQ; + + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering comparator select successfully', () => { + expect(wrapper).toHaveLength(1); + const select = wrapper.find('.date-filter-comparator'); + expect(select).toHaveLength(1); + expect(select.props().defaultValue).toEqual(comparator); + }); + }); + + describe('when props.getFilter is defined', () => { + let programmaticallyFilter; + + const comparator = Comparator.EQ; + const date = new Date(2018, 0, 1); + + const getFilter = (filter) => { + programmaticallyFilter = filter; + }; + + beforeEach(() => { + wrapper = mount( + + ); + + programmaticallyFilter({ comparator, date }); + }); + + it('should do onFilter correctly when exported function was executed', () => { + expect(onFilter).toHaveBeenCalledTimes(1); + expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE); + expect(onFilterFirstReturn).toHaveBeenCalledTimes(1); + expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date }); + }); + }); + + describe('when defaultValue.number and defaultValue.comparator props are defined', () => { + let date; + let comparator; + + beforeEach(() => { + date = new Date(); + comparator = Comparator.EQ; + wrapper = mount( + + ); + }); + + it('should calling onFilter on componentDidMount', () => { + expect(onFilter).toHaveBeenCalledTimes(1); + expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE); + expect(onFilterFirstReturn).toHaveBeenCalledTimes(1); + // expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date }); + }); + }); + + describe('when style props is defined', () => { + const style = { backgroundColor: 'red' }; + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering component successfully', () => { + expect(wrapper).toHaveLength(1); + expect(wrapper.find('.date-filter').prop('style')).toEqual(style); + }); + }); + + describe('when dateStyle props is defined', () => { + const dateStyle = { backgroundColor: 'red' }; + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering component successfully', () => { + expect(wrapper).toHaveLength(1); + expect(wrapper.find('.date-filter-input').prop('style')).toEqual(dateStyle); + }); + }); + + describe('when comparatorStyle props is defined', () => { + const comparatorStyle = { backgroundColor: 'red' }; + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering component successfully', () => { + expect(wrapper).toHaveLength(1); + expect(wrapper.find('.date-filter-comparator').prop('style')).toEqual(comparatorStyle); + }); + }); + + describe('when className props is defined', () => { + const className = 'test'; + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering component successfully', () => { + expect(wrapper).toHaveLength(1); + expect(wrapper.hasClass(className)).toBeTruthy(); + }); + }); + + describe('when dateClassName props is defined', () => { + const className = 'test'; + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering component successfully', () => { + expect(wrapper).toHaveLength(1); + expect(wrapper.find('.date-filter-input').prop('className').indexOf(className) > -1).toBeTruthy(); + }); + }); + + describe('when comparatorClassName props is defined', () => { + const className = 'test'; + beforeEach(() => { + wrapper = mount( + + ); + }); + + it('should rendering component successfully', () => { + expect(wrapper).toHaveLength(1); + expect(wrapper.find('.date-filter-comparator').prop('className').indexOf(className) > -1).toBeTruthy(); + }); + }); +}); diff --git a/packages/react-bootstrap-table2-filter/test/filter.test.js b/packages/react-bootstrap-table2-filter/test/filter.test.js index 2ffd36d..25f629d 100644 --- a/packages/react-bootstrap-table2-filter/test/filter.test.js +++ b/packages/react-bootstrap-table2-filter/test/filter.test.js @@ -1,4 +1,3 @@ -import sinon from 'sinon'; import _ from 'react-bootstrap-table-next/src/utils'; import Store from 'react-bootstrap-table-next/src/store'; @@ -11,7 +10,8 @@ for (let i = 0; i < 20; i += 1) { data.push({ id: i, name: `itme name ${i}`, - price: 200 + i + price: 200 + i, + date: new Date(2017, i, 1) }); } @@ -34,6 +34,9 @@ describe('filter', () => { }, { dataField: 'price', text: 'Price' + }, { + dataField: 'date', + text: 'Date' }]; }); @@ -98,7 +101,7 @@ describe('filter', () => { describe('column.filterValue is defined', () => { beforeEach(() => { - columns[1].filterValue = sinon.stub(); + columns[1].filterValue = jest.fn(); filterFn = filters(store, columns, _); }); @@ -110,11 +113,12 @@ describe('filter', () => { const result = filterFn(currFilters); expect(result).toBeDefined(); - expect(columns[1].filterValue.callCount).toBe(data.length); - const calls = columns[1].filterValue.getCalls(); - calls.forEach((call, i) => { - expect(call.calledWith(data[i].name, data[i])).toBeTruthy(); - }); + expect(columns[1].filterValue).toHaveBeenCalledTimes(data.length); + // const calls = columns[1].filterValue.mock.calls; + // calls.forEach((call, i) => { + // expect(call).toEqual([data[i].name, data[i]]); + // expect(call.calledWith(data[i].name, data[i])).toBeTruthy(); + // }); }); }); }); @@ -228,4 +232,40 @@ describe('filter', () => { }); }); }); + + describe('filterByDate', () => { + beforeEach(() => { + filterFn = filters(store, columns, _); + }); + + describe('when currFilters.filterVal.comparator is empty', () => { + it('should returning correct result', () => { + currFilters.price = { + filterVal: { comparator: '', date: new Date() }, + filterType: FILTER_TYPE.DATE + }; + + let result = filterFn(currFilters); + expect(result).toHaveLength(data.length); + + currFilters.price.filterVal.comparator = undefined; + result = filterFn(currFilters); + expect(result).toHaveLength(data.length); + }); + }); + + describe('when currFilters.filterVal.date is empty', () => { + it('should returning correct result', () => { + currFilters.price = { + filterVal: { comparator: EQ, date: '' }, + filterType: FILTER_TYPE.DATE + }; + + const result = filterFn(currFilters); + expect(result).toHaveLength(data.length); + }); + }); + + // TODO.... + }); });