react-simple-wheel-picker
Version:
<div align="center"> <h1>react-simple-wheel-picker</h1> <img src="https://raw.githubusercontent.com/keiya01/react-simple-wheel-picker/master/demo.gif" alt="demo"> <br> <p>You can set up simple and flexible wheel picker</p> <br> </div> <hr/>
156 lines • 8.36 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const WheelPicker_1 = __importDefault(require("../WheelPicker"));
const react_2 = require("@testing-library/react");
const pickerData_1 = require("../../constants/mockData/pickerData");
const useScrollAnimation_1 = require("../../hooks/useScrollAnimation");
window.IntersectionObserver = jest.fn();
jest.mock("react", () => (Object.assign(Object.assign({}, jest.requireActual("react")), { useRef: () => ({
current: {
observe: jest.fn(),
disconnect: jest.fn(),
scrollTop: jest.fn()
}
}) })));
jest.mock("../../hooks/useScrollAnimation");
describe("WheelPicker", () => {
describe("Set padding top to WheelPicker", () => {
it("should be 0px when height is 100px and itemHeight is 100px", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: [{ id: "1", value: "test" }], selectedID: "1",
// eslint-disable-next-line no-empty-function
onChange: () => { }, height: 100, itemHeight: 100 }));
const elm = getByTestId("picker-list");
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const spaceItem = elm.children[0];
expect(spaceItem.style.height).toEqual("0px");
});
it("should be 75px when height is 200px and itemHeight is 50px", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: [{ id: "1", value: "test" }], selectedID: "1",
// eslint-disable-next-line no-empty-function
onChange: () => { }, height: 200, itemHeight: 50 }));
const elm = getByTestId("picker-list");
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const spaceItem = elm.children[0];
expect(spaceItem.style.height).toEqual("75px");
});
});
describe("To get ref from WheelPicker", () => {
it("should be focused to WheelPicker when focus function was executed", () => {
const ref = react_1.default.createRef();
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: [{ id: "1", value: "test" }], selectedID: "1", ref: ref,
// eslint-disable-next-line no-empty-function
onChange: () => { }, height: 100, itemHeight: 100 }));
const pickerList = getByTestId("picker-list");
if (ref.current) {
ref.current.focus();
}
expect(document.activeElement).toEqual(pickerList);
});
it("should be unfocused to WheelPicker when blur function was executed", () => {
const ref = react_1.default.createRef();
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: [{ id: "1", value: "test" }], selectedID: "1", ref: ref,
// eslint-disable-next-line no-empty-function
onChange: () => { }, height: 100, itemHeight: 100 }));
const pickerList = getByTestId("picker-list");
if (ref.current) {
ref.current.focus();
ref.current.blur();
}
expect(document.activeElement).not.toEqual(pickerList);
});
});
describe("Keyboard Operation", () => {
let scrollTop = 0;
beforeEach(() => {
jest
.spyOn(window, "requestAnimationFrame")
.mockImplementation((cb) => {
cb(0);
return 0;
});
const _setScrollAnimation = useScrollAnimation_1.setScrollAnimation;
_setScrollAnimation.mockImplementation((_, __, itemHeight) => {
return () => {
scrollTop += itemHeight;
};
});
});
afterEach(() => {
scrollTop = 0;
});
it("should be moved to next option position when tab key was pressed", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: pickerData_1.pickerData, selectedID: "1", onChange: () => { }, height: 100, itemHeight: 100 }));
const listbox = getByTestId("picker-list");
react_2.fireEvent.keyDown(listbox, {
keyCode: 9
});
expect(scrollTop).toEqual(100);
});
it("should be moved to previous option position when tab + shift key was pressed", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: pickerData_1.pickerData, selectedID: "1", onChange: () => { }, height: 100, itemHeight: 100 }));
const listbox = getByTestId("picker-list");
react_2.fireEvent.keyDown(listbox, {
keyCode: 16
});
react_2.fireEvent.keyDown(listbox, {
keyCode: 9
});
expect(scrollTop).toEqual(-100);
});
it("should be moved to next option position when shift key was released before tab key was pressed", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: pickerData_1.pickerData, selectedID: "1", onChange: () => { }, height: 100, itemHeight: 100 }));
const listbox = getByTestId("picker-list");
react_2.fireEvent.keyDown(listbox, {
keyCode: 16
});
react_2.fireEvent.keyUp(listbox, {
keyCode: 16
});
react_2.fireEvent.keyDown(listbox, {
keyCode: 9
});
expect(scrollTop).toEqual(100);
});
it("should be moved to previous option position when up arrow key was pressed", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: pickerData_1.pickerData, selectedID: "1", onChange: () => { }, height: 100, itemHeight: 100 }));
const listbox = getByTestId("picker-list");
react_2.fireEvent.keyDown(listbox, {
keyCode: 40
});
expect(scrollTop).toEqual(100);
});
it("should be moved to next option position when down arrow key was pressed", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: pickerData_1.pickerData, selectedID: "1", onChange: () => { }, height: 100, itemHeight: 100 }));
const listbox = getByTestId("picker-list");
react_2.fireEvent.keyDown(listbox, {
keyCode: 38
});
expect(scrollTop).toEqual(-100);
});
it("should be unfocused from WheelPicker when space key was pressed", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: pickerData_1.pickerData, selectedID: "1", onChange: () => { }, height: 100, itemHeight: 100 }));
const listbox = getByTestId("picker-list");
listbox.focus();
expect(document.activeElement).toEqual(listbox);
react_2.fireEvent.keyDown(listbox, {
keyCode: 32
});
expect(document.activeElement).not.toEqual(listbox);
});
it("should be unfocused from WheelPicker when esc key was pressed", () => {
const { getByTestId } = react_2.render(react_1.default.createElement(WheelPicker_1.default, { data: pickerData_1.pickerData, selectedID: "1", onChange: () => { }, height: 100, itemHeight: 100 }));
const listbox = getByTestId("picker-list");
listbox.focus();
expect(document.activeElement).toEqual(listbox);
react_2.fireEvent.keyDown(listbox, {
keyCode: 27
});
expect(document.activeElement).not.toEqual(listbox);
});
});
});
//# sourceMappingURL=WheelPicker.test.js.map