Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Adding some tests for <Handlers/>

This commit is contained in:
Eric van der Vlist 2022-10-18 11:44:50 +02:00
parent da50441abc
commit 90e2c833a2
3 changed files with 164 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/map/Handlers.test.tsx
View File

@ -1,23 +1,153 @@
import { render, screen } from '@testing-library/react'; import { createEvent, fireEvent, render, screen } from '@testing-library/react';
import { Handlers } from './Handlers'; import { Handlers } from './Handlers';
import { Point } from './types'; import { Point } from './types';
describe('The Handlers component ', () => { describe('The Handlers component ', () => {
test('Is just an empty div', () => { test('is just an empty div', () => {
const transformMap = ( const transformMap = (
deltaShift: Point | null, deltaShift: Point | null,
deltaZoom: number | null, deltaZoom: number | null,
zoomCenter: Point | null zoomCenter: Point | null
) => {}; ) => {};
const { baseElement } = render(<Handlers transformMap={transformMap} />); render(<Handlers transformMap={transformMap} />);
// screen.debug(); // screen.debug();
expect(baseElement).toMatchInlineSnapshot(` const handlers = screen.getByRole('presentation');
<body> // screen.debug();
<div> expect(handlers).toMatchInlineSnapshot(`
<div <div
class="handler" class="handler"
role="presentation"
/> />
</div>
</body>
`); `);
}); });
test('handle mouseDown / mouseMove events', () => {
var transformMapParams: any;
function transformMap(
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) {
console.log(`transformMap${JSON.stringify(arguments)}`);
transformMapParams = arguments;
}
render(<Handlers transformMap={transformMap} />);
const handlers = screen.getByRole('presentation');
fireEvent(
handlers,
createEvent.mouseDown(handlers, {
clientX: 10,
clientY: 20,
})
);
fireEvent(
handlers,
createEvent.mouseMove(handlers, {
clientX: 20,
clientY: 50,
})
);
// screen.debug();
expect(transformMapParams).toMatchInlineSnapshot(`
Arguments [
Object {
"x": 10,
"y": 30,
},
null,
null,
]
`);
});
test('does *not* handle mouseMove events not preceded by a mouseDown', () => {
var transformMapParams: any;
function transformMap(
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) {
console.log(`transformMap${JSON.stringify(arguments)}`);
transformMapParams = arguments;
}
render(<Handlers transformMap={transformMap} />);
const handlers = screen.getByRole('presentation');
fireEvent(
handlers,
createEvent.mouseMove(handlers, {
clientX: 20,
clientY: 50,
})
);
// screen.debug();
expect(transformMapParams).toBeUndefined();
});
test('A mouseUp event disable further mouseMove events', () => {
var transformMapParams: any;
function transformMap(
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) {
console.log(`transformMap${JSON.stringify(arguments)}`);
transformMapParams = arguments;
}
render(<Handlers transformMap={transformMap} />);
const handlers = screen.getByRole('presentation');
fireEvent(
handlers,
createEvent.mouseDown(handlers, {
clientX: 10,
clientY: 20,
})
);
fireEvent(
handlers,
createEvent.mouseUp(handlers, {
clientX: 20,
clientY: 50,
})
);
fireEvent(
handlers,
createEvent.mouseMove(handlers, {
clientX: 20,
clientY: 50,
})
);
// screen.debug();
expect(transformMapParams).toBeUndefined();
});
test('A mouseLeave event disable further mouseMove events', () => {
var transformMapParams: any;
function transformMap(
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) {
console.log(`transformMap${JSON.stringify(arguments)}`);
transformMapParams = arguments;
}
render(<Handlers transformMap={transformMap} />);
const handlers = screen.getByRole('presentation');
fireEvent(handlers, createEvent.mouseOver(handlers));
fireEvent(handlers, createEvent.mouseEnter(handlers));
fireEvent(
handlers,
createEvent.mouseDown(handlers, {
clientX: 10,
clientY: 20,
})
);
fireEvent(handlers, createEvent.mouseOut(handlers));
fireEvent(handlers, createEvent.mouseLeave(handlers));
fireEvent(
handlers,
createEvent.mouseMove(handlers, {
clientX: 20,
clientY: 50,
})
);
// screen.debug();
expect(transformMapParams).toBeUndefined();
});
}); });

17
src/components/map/Handlers.tsx
View File

@ -24,9 +24,9 @@ export const Handlers: react.FC<HandlersProperties> = (
) => { ) => {
const genericHandler = (event: any) => { const genericHandler = (event: any) => {
// console.log(`Log - Event: ${event.type}`); // console.log(`Log - Event: ${event.type}`);
// if (event.pageX !== undefined) { // if (event.clientX !== undefined) {
// console.log( // console.log(
// `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}` // `Mouse : ${event.clientX}, ${event.clientY}, target: ${event.target}`
// ); // );
// console.log( // console.log(
// `mouseState: ' ${JSON.stringify(mouseState)} (+${ // `mouseState: ' ${JSON.stringify(mouseState)} (+${
@ -50,7 +50,7 @@ export const Handlers: react.FC<HandlersProperties> = (
genericHandler(event); genericHandler(event);
setMouseState({ setMouseState({
down: true, down: true,
starting: { x: event.pageX, y: event.pageY }, starting: { x: event.clientX, y: event.clientY },
}); });
}; };
@ -61,10 +61,11 @@ export const Handlers: react.FC<HandlersProperties> = (
const mouseMoveHandler = throttle((event: any) => { const mouseMoveHandler = throttle((event: any) => {
genericHandler(event); genericHandler(event);
if (mouseState.down) {
props.transformMap( props.transformMap(
{ {
x: event.pageX - mouseState.starting.x, x: event.clientX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y, y: event.clientY - mouseState.starting.y,
}, },
null, null,
null null
@ -72,16 +73,18 @@ export const Handlers: react.FC<HandlersProperties> = (
setMouseState({ setMouseState({
down: true, down: true,
starting: { starting: {
x: event.pageX, x: event.clientX,
y: event.pageY, y: event.clientY,
}, },
}); });
}
}, handlersConfig.mouseMoveThrottleDelay); }, handlersConfig.mouseMoveThrottleDelay);
const [mouseState, setMouseState] = useState(initialMouseState); const [mouseState, setMouseState] = useState(initialMouseState);
return ( return (
<div <div
className='handler' className='handler'
role='presentation'
onMouseDown={mouseDownHandler} onMouseDown={mouseDownHandler}
onMouseMove={mouseMoveHandler} onMouseMove={mouseMoveHandler}
onMouseUp={mouseUpHandler} onMouseUp={mouseUpHandler}

4
src/components/map/Tile.test.tsx
View File

@ -8,7 +8,7 @@ describe('The Tile component ', () => {
<Tile href='http://fakeurl' delay={10000} /> <Tile href='http://fakeurl' delay={10000} />
</svg> </svg>
); );
screen.debug(); // screen.debug();
expect(baseElement).toMatchInlineSnapshot(` expect(baseElement).toMatchInlineSnapshot(`
<body> <body>
<div> <div>
@ -25,7 +25,7 @@ describe('The Tile component ', () => {
<Tile href='http://fakeurl' /> <Tile href='http://fakeurl' />
</svg> </svg>
); );
screen.debug(); // screen.debug();
expect(baseElement).toMatchInlineSnapshot(` expect(baseElement).toMatchInlineSnapshot(`
<body> <body>
<div> <div>