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

152
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 { Point } from './types';
describe('The Handlers component ', () => {
test('Is just an empty div', () => {
test('is just an empty div', () => {
const transformMap = (
deltaShift: Point | null,
deltaZoom: number | null,
zoomCenter: Point | null
) => {};
const { baseElement } = render(<Handlers transformMap={transformMap} />);
render(<Handlers transformMap={transformMap} />);
// screen.debug();
expect(baseElement).toMatchInlineSnapshot(`
<body>
<div>
<div
class="handler"
/>
</div>
</body>
const handlers = screen.getByRole('presentation');
// screen.debug();
expect(handlers).toMatchInlineSnapshot(`
<div
class="handler"
role="presentation"
/>
`);
});
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();
});
});

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

@ -24,9 +24,9 @@ export const Handlers: react.FC<HandlersProperties> = (
) => {
const genericHandler = (event: any) => {
// console.log(`Log - Event: ${event.type}`);
// if (event.pageX !== undefined) {
// if (event.clientX !== undefined) {
// console.log(
// `Mouse : ${event.pageX}, ${event.pageY}, target: ${event.target}`
// `Mouse : ${event.clientX}, ${event.clientY}, target: ${event.target}`
// );
// console.log(
// `mouseState: ' ${JSON.stringify(mouseState)} (+${
@ -50,7 +50,7 @@ export const Handlers: react.FC<HandlersProperties> = (
genericHandler(event);
setMouseState({
down: true,
starting: { x: event.pageX, y: event.pageY },
starting: { x: event.clientX, y: event.clientY },
});
};
@ -61,27 +61,30 @@ export const Handlers: react.FC<HandlersProperties> = (
const mouseMoveHandler = throttle((event: any) => {
genericHandler(event);
props.transformMap(
{
x: event.pageX - mouseState.starting.x,
y: event.pageY - mouseState.starting.y,
},
null,
null
);
setMouseState({
down: true,
starting: {
x: event.pageX,
y: event.pageY,
},
});
if (mouseState.down) {
props.transformMap(
{
x: event.clientX - mouseState.starting.x,
y: event.clientY - mouseState.starting.y,
},
null,
null
);
setMouseState({
down: true,
starting: {
x: event.clientX,
y: event.clientY,
},
});
}
}, handlersConfig.mouseMoveThrottleDelay);
const [mouseState, setMouseState] = useState(initialMouseState);
return (
<div
className='handler'
role='presentation'
onMouseDown={mouseDownHandler}
onMouseMove={mouseMoveHandler}
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} />
</svg>
);
screen.debug();
// screen.debug();
expect(baseElement).toMatchInlineSnapshot(`
<body>
<div>
@ -25,7 +25,7 @@ describe('The Tile component ', () => {
<Tile href='http://fakeurl' />
</svg>
);
screen.debug();
// screen.debug();
expect(baseElement).toMatchInlineSnapshot(`
<body>
<div>