Add tests for pagination

master
Hasan Genc 4 years ago
parent edbd72a679
commit b001238d65
  1. 42
      __tests__/carousel.spec.tsx
  2. 48
      __tests__/helpers.spec.tsx

@ -5,6 +5,7 @@ import { defaultProps } from '../src/components/carousel/defaultProps';
import { carouselItemNodes, dynamicCarouselItemNodes } from './__fixtures__/nodes'; import { carouselItemNodes, dynamicCarouselItemNodes } from './__fixtures__/nodes';
import * as helpers from '../src/helpers'; import * as helpers from '../src/helpers';
import { SlideDirection } from '../src/types/carousel'; import { SlideDirection } from '../src/types/carousel';
import * as hooks from '../src/hooks';
describe('<Carousel />', () => { describe('<Carousel />', () => {
let mockGetPageX: jest.SpyInstance< let mockGetPageX: jest.SpyInstance<
@ -303,51 +304,30 @@ describe('<Carousel />', () => {
expect(button!.innerHTML).toEqual('1'); expect(button!.innerHTML).toEqual('1');
}); });
it('should invoke beforeChange when beforeChange prop is defined on slide', async () => { it('should slide to right when click right button', async () => {
const onBeforeChange = (_: SlideDirection) => { const paginationCallback = jest.fn();
return; const mockUsePrevious = jest
}; .spyOn(hooks, 'usePrevious')
const stub = jest.fn(onBeforeChange); .mockImplementation(() => carouselItemNodes(2));
const { getByTestId } = render(
<Carousel
{...defaultProps}
infinite={true}
children={carouselItemNodes(4)}
beforeChange={stub}
/>,
);
const carousel = getByTestId('carousel');
const button = carousel.querySelector('button');
expect(button).not.toBeNull();
fireEvent.click(button!);
jest.runAllTimers();
expect(stub).toHaveBeenCalledTimes(1);
});
it('should invoke afterChange when afterChange prop is defined on slide', async () => {
const onAfterChange = (_: SlideDirection) => {
return;
};
const stub = jest.fn(onAfterChange);
const { getByTestId } = render( const { getByTestId } = render(
<Carousel <Carousel
{...defaultProps} {...defaultProps}
infinite={true} infinite={true}
children={carouselItemNodes(4)} children={carouselItemNodes(4)}
afterChange={stub} pageCount={2}
paginationCallback={paginationCallback}
/>, />,
); );
const carousel = getByTestId('carousel'); const carousel = getByTestId('carousel');
const button = carousel.querySelector('button'); const button = carousel.querySelectorAll('button')[1];
expect(button).not.toBeNull(); expect(button).not.toBeNull();
fireEvent.click(button!); fireEvent.click(button!);
jest.runAllTimers(); jest.runAllTimers();
expect(stub).toHaveBeenCalledTimes(1); expect(paginationCallback).toHaveBeenCalledTimes(1);
expect(mockUsePrevious).toBeCalled();
}); });
}); });

@ -82,10 +82,17 @@ describe('helpers', () => {
const oldNodes = reactNodes('old', 5) as Item[]; const oldNodes = reactNodes('old', 5) as Item[];
const newNodes = reactNodes('new', 6) as Item[]; const newNodes = reactNodes('new', 6) as Item[];
const expected = reactNodes('new', 5) as Item[]; const expected = reactNodes('new', 5) as Item[];
const prevChildren = undefined;
const infinite = true; const infinite = true;
const slide = 5; const slide = 5;
const result = helpers.updateNodes(oldNodes, newNodes, slide, infinite); const result = helpers.updateNodes(
oldNodes,
newNodes,
prevChildren,
slide,
infinite,
);
expect(result).toEqual(expected); expect(result).toEqual(expected);
}); });
@ -94,6 +101,7 @@ describe('helpers', () => {
const oldNodes = reactNodes('old', 5) as Item[]; const oldNodes = reactNodes('old', 5) as Item[];
const infinite = true; const infinite = true;
const slide = 2; const slide = 2;
const prevChildren = undefined;
const newNodes = ([ const newNodes = ([
{ {
key: 14, key: 14,
@ -123,8 +131,44 @@ describe('helpers', () => {
}, },
] as unknown) as Item[]; ] as unknown) as Item[];
const result = helpers.updateNodes(oldNodes, newNodes, slide, infinite); const result = helpers.updateNodes(
oldNodes,
newNodes,
prevChildren,
slide,
infinite,
);
expect(result).toEqual(expectedNodes); expect(result).toEqual(expectedNodes);
}); });
it('should update nodes when previous children length is less than new children', async () => {
const oldNodes = reactNodes('old', 5) as Item[];
const newNodes = reactNodes('new', 6) as Item[];
const prevChildren = newNodes.slice(0, 5);
const expected = newNodes.slice(1, 6).concat(newNodes);
const infinite = true;
const slide = 5;
const result = helpers.updateNodes(
oldNodes,
newNodes,
prevChildren,
slide,
infinite,
);
expect(result).toEqual(expected);
});
it('should get corre transform amount', async () => {
const width = 100;
const slideCount = 2;
const direction = SlideDirection.Left;
const expected = 200;
const result = helpers.getTransformAmount(width, slideCount, direction);
expect(result).toEqual(expected);
});
}); });

Loading…
Cancel
Save