Skip to content

Commit

Permalink
Adding more tests for Carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
@leandrowd
leandrowd committed Sep 16, 2016
1 parent 4a2ea12 commit 087a6d6
Show file tree
Hide file tree
Showing 2 changed files with 242 additions and 57 deletions.
291 changes: 238 additions & 53 deletions src/__tests__/Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ describe("Slider", function() {
jest.autoMockOff();

var Carousel = require('../components/Carousel');

var component, componentInstance;

function renderComponent (props) {
componentInstance = TestUtils.renderIntoDocument(
<Carousel {...props} showArrows={true}>
<Carousel {...props}>
<img src="assets/1.jpeg" />
<img src="assets/2.jpeg" />
<img src="assets/3.jpeg" />
Expand All @@ -38,52 +38,237 @@ describe("Slider", function() {
});

describe("Basics", function () {
describe("changeItem", function () {
beforeEach(function () {
componentInstance.selectItem = jest.genMockFunction();
componentInstance.getFirstItem = jest.genMockFunction().mockReturnValue(2);
componentInstance.changeItem({
target: {
value: 1
}
});
});

it("Should call selectItem sending selectedItem as 1", function () {
expect(componentInstance.selectItem.mock.calls[0][0]).toEqual({
selectedItem: 1
});
});
});

describe("selectItem", function () {
beforeEach(function () {
componentInstance.setState = jest.genMockFunction();
componentInstance.handleOnChange = jest.genMockFunction();
componentInstance.selectItem({
selectedItem: 1,
ramdomNumber: 2
});
});

it("Should call setState sending the argument received", function () {
expect(componentInstance.setState.mock.calls[0][0]).toEqual({
selectedItem: 1,
ramdomNumber: 2
});
});

it("Should call handleOnChange sending only selectedItem", function () {
console.log(componentInstance.handleOnChange.mock.calls[0][0]);
expect(componentInstance.handleOnChange.mock.calls[0][0]).toBe(1);
});
});
describe("DisplayName", () => {
it('Should be Slider', function () {
expect(Carousel.displayName).toBe('Slider');
});
});

describe("Default Props", () => {
var props = {
showIndicators: true,
showArrows: true,
showStatus:true,
showThumbs:true,
selectedItem: 0,
axis: 'horizontal',
useKeyboardArrows: false
};

Object.keys(props).forEach(prop => {
it(`Should have ${props} as ${props[prop]}`, function () {
expect(componentInstance.props[prop]).toBe(props[prop]);
});
});
});

describe("Initial State", () => {
var props = {
selectedItem: 0,
hasMount: false
};

Object.keys(props).forEach(prop => {
it(`Should have ${props} as ${props[prop]}`, function () {
expect(componentInstance.state.selectedItem).toBe(0);
expect(componentInstance.state.hasMount).toBe(false);
});
});
});
});

it("Should have the right state at the begin", function () {
expect(componentInstance.state.selectedItem).toBe(0);
expect(componentInstance.state.hasMount).toBe(false);
});
describe("componentDidMount", () => {
beforeEach(() => {
componentInstance.bindEvents = jest.genMockFunction();
componentInstance.componentDidMount();

});
it("Should bind the events", () => {
expect(componentInstance.bindEvents.mock.calls.length).toBe(1);
});
});

describe("componentWillUnmount", () => {
beforeEach(() => {
componentInstance.unbindEvents = jest.genMockFunction();
componentInstance.componentWillUnmount();

});
it("Should unbind the events", () => {
expect(componentInstance.unbindEvents.mock.calls.length).toBe(1);
});
});

describe("bindEvents", () => {
describe("when useKeyboardArrows is false", () => {
beforeEach(() => {
window.addEventListener = jest.genMockFunction();
document.addEventListener = jest.genMockFunction();
componentInstance.bindEvents();
});

it("Should bind resize to updateSizes", () => {
expect(window.addEventListener.mock.calls[0]).toEqual(['resize', componentInstance.updateSizes]);
});

it("Should bind DOMContentLoaded to updateSizes", () => {
expect(window.addEventListener.mock.calls[1]).toEqual(['DOMContentLoaded', componentInstance.updateSizes]);
});

it("Should not bind keydown to navigateWithKeyboard", () => {
expect(document.addEventListener.mock.calls.length).toBe(0);
});
});

describe("when useKeyboardArrows is true", () => {
beforeEach(() => {
renderComponent({
useKeyboardArrows: true
});

window.addEventListener = jest.genMockFunction();
document.addEventListener = jest.genMockFunction();
componentInstance.bindEvents();
});

it("Should bind resize to updateSizes", () => {
expect(window.addEventListener.mock.calls[0]).toEqual(['resize', componentInstance.updateSizes]);
});

it("Should bind DOMContentLoaded to updateSizes", () => {
expect(window.addEventListener.mock.calls[1]).toEqual(['DOMContentLoaded', componentInstance.updateSizes]);
});

it("Should bind keydown to navigateWithKeyboard", () => {
expect(document.addEventListener.mock.calls[0]).toEqual(['keydown', componentInstance.navigateWithKeyboard]);
});
})
});

describe("unbindEvents", () => {
describe("when useKeyboardArrows is false", () => {
beforeEach(() => {
window.removeEventListener = jest.genMockFunction();
document.removeEventListener = jest.genMockFunction();
componentInstance.unbindEvents();
});

it("Should unbind resize to updateSizes", () => {
expect(window.removeEventListener.mock.calls[0]).toEqual(['resize', componentInstance.updateSizes]);
});

it("Should unbind DOMContentLoaded to updateSizes", () => {
expect(window.removeEventListener.mock.calls[1]).toEqual(['DOMContentLoaded', componentInstance.updateSizes]);
});

it("Should not unbind keydown to navigateWithKeyboard", () => {
expect(document.removeEventListener.mock.calls.length).toBe(0);
});
});

describe("when useKeyboardArrows is true", () => {
beforeEach(() => {
renderComponent({
useKeyboardArrows: true
});

window.removeEventListener = jest.genMockFunction();
document.removeEventListener = jest.genMockFunction();
componentInstance.unbindEvents();
});

it("Should unbind resize to updateSizes", () => {
expect(window.removeEventListener.mock.calls[0]).toEqual(['resize', componentInstance.updateSizes]);
});

it("Should unbind DOMContentLoaded to updateSizes", () => {
expect(window.removeEventListener.mock.calls[1]).toEqual(['DOMContentLoaded', componentInstance.updateSizes]);
});

it("Should unbind keydown to navigateWithKeyboard", () => {
expect(document.removeEventListener.mock.calls[0]).toEqual(['keydown', componentInstance.navigateWithKeyboard]);
});
})
});

describe("navigateWithKeyboard", () => {
beforeEach(() => {
renderComponent({
useKeyboardArrows: true
});

componentInstance.increment = jest.genMockFunction();
componentInstance.decrement = jest.genMockFunction();
});

it('should call only increment on ArrowDown', () => {
componentInstance.navigateWithKeyboard({key: 'ArrowDown'});

expect(componentInstance.increment.mock.calls.length).toBe(1);
expect(componentInstance.decrement.mock.calls.length).toBe(0);
});

it('should call only increment on ArrowRight', () => {
componentInstance.navigateWithKeyboard({key: 'ArrowRight'});

expect(componentInstance.increment.mock.calls.length).toBe(1);
expect(componentInstance.decrement.mock.calls.length).toBe(0);
});

it('should call only decrement on ArrowUp', () => {
componentInstance.navigateWithKeyboard({key: 'ArrowUp'});

expect(componentInstance.decrement.mock.calls.length).toBe(1);
expect(componentInstance.increment.mock.calls.length).toBe(0);
});

it('should call only decrement on ArrowLeft', () => {
componentInstance.navigateWithKeyboard({key: 'ArrowLeft'});

expect(componentInstance.decrement.mock.calls.length).toBe(1);
expect(componentInstance.increment.mock.calls.length).toBe(0);
});
});

describe("changeItem", function () {
beforeEach(function () {
componentInstance.selectItem = jest.genMockFunction();
componentInstance.getFirstItem = jest.genMockFunction().mockReturnValue(2);
componentInstance.changeItem({
target: {
value: 1
}
});
});

it("Should call selectItem sending selectedItem as 1", function () {
expect(componentInstance.selectItem.mock.calls[0][0]).toEqual({
selectedItem: 1
});
});
});

describe("selectItem", function () {
beforeEach(function () {
componentInstance.setState = jest.genMockFunction();
componentInstance.handleOnChange = jest.genMockFunction();
componentInstance.selectItem({
selectedItem: 1,
ramdomNumber: 2
});
});

it("Should call setState sending the argument received", function () {
expect(componentInstance.setState.mock.calls[0][0]).toEqual({
selectedItem: 1,
ramdomNumber: 2
});
});

it("Should call handleOnChange sending only selectedItem", function () {
expect(componentInstance.handleOnChange.mock.calls[0][0]).toBe(1);
});
});

it("Should add a thumb-wrapper container", function () {
expect(findByClass(componentInstance, 'thumbs-wrapper').length).toBe(1);
Expand Down Expand Up @@ -113,7 +298,7 @@ describe("Slider", function() {
describe("Selecting", function () {
it("Should set the index as selectedItem when clicked", function () {
expect(componentInstance.state.selectedItem).toBe(0);

TestUtils.Simulate.click(componentInstance['item1']);
expect(componentInstance.state.selectedItem).toBe(1);

Expand All @@ -123,7 +308,7 @@ describe("Slider", function() {

it("Should call a given onSelectItem function when an item is clicked", function () {
var mockedFunction = jest.genMockFunction();

renderComponent({onClickItem: mockedFunction});

TestUtils.Simulate.click(componentInstance['item1']);
Expand All @@ -139,21 +324,21 @@ describe("Slider", function() {
it("Should disable the left arrow if we are showing the first item", function () {
TestUtils.Simulate.click(componentInstance['item0']);
expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-prev.control-disabled').length).toBe(1);
});
});

it("Should enable the left arrow if we are showing other than the first item", function () {
TestUtils.Simulate.click(componentInstance['item1']);
expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-prev.control-disabled').length).toBe(0);
});
});

it("Should disable the right arrow if we reach the lastPosition", function () {
TestUtils.Simulate.click(componentInstance['item1']);
expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-next.control-disabled').length).toBe(0);

TestUtils.Simulate.click(componentInstance['item6']);
expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-next.control-disabled').length).toBe(1);
});
})
});
})

jest.autoMockOn();
});
Expand Down
8 changes: 4 additions & 4 deletions src/components/Carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,6 @@ module.exports = React.createClass({
}
},

componentWillUnmount() {
this.unbindEvents();
},

componentDidMount (nextProps) {
this.bindEvents();

Expand All @@ -73,6 +69,10 @@ module.exports = React.createClass({
}
},

componentWillUnmount() {
this.unbindEvents();
},

bindEvents () {
// as the widths are calculated, we need to resize
// the carousel when the window is resized
Expand Down

0 comments on commit 087a6d6

Please sign in to comment.