134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
import { DayPickerProps } from 'DayPicker';
|
|
|
|
import { customRender } from 'test/render';
|
|
import { getNextButton, getPrevButton } from 'test/selectors';
|
|
import { user } from 'test/user';
|
|
|
|
import { Navigation, NavigationProps } from './Navigation';
|
|
|
|
let root: HTMLElement;
|
|
|
|
function setup(props: NavigationProps, dayPickerProps?: DayPickerProps) {
|
|
const view = customRender(<Navigation {...props} />, dayPickerProps);
|
|
root = view.container.firstChild as HTMLElement;
|
|
}
|
|
|
|
const props: NavigationProps = {
|
|
previousMonth: new Date(2021, 3),
|
|
nextMonth: new Date(2021, 5),
|
|
displayMonth: new Date(2021, 4),
|
|
hidePrevious: false,
|
|
hideNext: false,
|
|
onNextClick: jest.fn(),
|
|
onPreviousClick: jest.fn()
|
|
};
|
|
|
|
const dayPickerProps = {
|
|
classNames: {
|
|
nav: 'foo'
|
|
},
|
|
styles: {
|
|
nav: { color: 'red' }
|
|
},
|
|
components: {
|
|
IconRight: () => <svg>IconRight</svg>,
|
|
IconLeft: () => <svg>IconLeft</svg>
|
|
}
|
|
};
|
|
|
|
describe('when rendered', () => {
|
|
beforeEach(() => {
|
|
setup(props, dayPickerProps);
|
|
});
|
|
test('should add the class name', () => {
|
|
expect(root).toHaveClass(dayPickerProps.classNames.nav);
|
|
});
|
|
test('should apply the style', () => {
|
|
expect(root).toHaveStyle(dayPickerProps.styles.nav);
|
|
});
|
|
test('the previous button should display the left icon', () => {
|
|
const icons = root.getElementsByTagName('svg');
|
|
expect(icons[0]).toHaveTextContent('IconLeft');
|
|
});
|
|
test('the next button should display the right icon', () => {
|
|
const icons = root.getElementsByTagName('svg');
|
|
expect(icons[1]).toHaveTextContent('IconRight');
|
|
});
|
|
test('the previous button should be named "previous-month"', () => {
|
|
expect(getPrevButton()).toHaveAttribute('name', 'previous-month');
|
|
});
|
|
test('the next button should be named "next-month"', () => {
|
|
expect(getNextButton()).toHaveAttribute('name', 'next-month');
|
|
});
|
|
beforeEach(async () => {
|
|
await user.click(getPrevButton());
|
|
});
|
|
test('should call "onPreviousClick"', () => {
|
|
expect(props.onPreviousClick).toHaveBeenCalled();
|
|
});
|
|
|
|
describe('when clicking the next button', () => {
|
|
beforeEach(async () => {
|
|
await user.click(getNextButton());
|
|
});
|
|
test('should call "onNextClick"', () => {
|
|
expect(props.onNextClick).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when in right-to-left direction', () => {
|
|
beforeEach(() => {
|
|
setup(props, { ...dayPickerProps, dir: 'rtl' });
|
|
});
|
|
test('the previous button should display the right icon', () => {
|
|
const icons = root.getElementsByTagName('svg');
|
|
expect(icons[0]).toHaveTextContent('IconRight');
|
|
});
|
|
test('the next button should display the left icon', () => {
|
|
const icons = root.getElementsByTagName('svg');
|
|
expect(icons[1]).toHaveTextContent('IconLeft');
|
|
});
|
|
|
|
describe('when clicking the previous button', () => {
|
|
beforeEach(async () => {
|
|
await user.click(getPrevButton());
|
|
});
|
|
test('should call "onPreviousClick"', () => {
|
|
expect(props.onPreviousClick).toHaveBeenCalled();
|
|
});
|
|
});
|
|
describe('when clicking the next button', () => {
|
|
beforeEach(async () => {
|
|
await user.click(getNextButton());
|
|
});
|
|
test('should call "onNextClick"', () => {
|
|
expect(props.onNextClick).toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('when the previous month is undefined', () => {
|
|
beforeEach(() => {
|
|
setup({ ...props, previousMonth: undefined }, dayPickerProps);
|
|
});
|
|
test('the previous button should be disabled', () => {
|
|
expect(getPrevButton()).toBeDisabled();
|
|
});
|
|
test('the next button should be enabled', () => {
|
|
expect(getNextButton()).toBeEnabled();
|
|
});
|
|
});
|
|
|
|
describe('when the next month is undefined', () => {
|
|
beforeEach(() => {
|
|
setup({ ...props, nextMonth: undefined }, dayPickerProps);
|
|
});
|
|
test('the previous button should be enabled', () => {
|
|
expect(getPrevButton()).toBeEnabled();
|
|
});
|
|
test('the next button should be disabled', () => {
|
|
expect(getNextButton()).toBeDisabled();
|
|
});
|
|
});
|