310 lines
6.4 KiB
TypeScript
310 lines
6.4 KiB
TypeScript
|
import { render } from '@testing-library/react';
|
||
|
|
import TileSet from './TileSet';
|
||
|
|
|
||
|
|
describe('The TiledLayer component ', () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
globalThis.cacheForTileSet = new Map();
|
||
|
|
});
|
||
|
|
|
||
|
|
test('exposes the tiles needed per its viewport', () => {
|
||
|
|
const { baseElement } = render(
|
||
|
|
<svg>
|
||
|
|
<TileSet
|
||
|
|
keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
|
||
|
|
viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
// screen.debug();
|
||
|
|
expect(baseElement).toMatchInlineSnapshot(`
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<svg>
|
||
|
|
<g
|
||
|
|
transform="translate(1, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(2, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/2/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(3, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/3/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
`);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('adds more tiles when its viewport is updated without removing the previous ones', () => {
|
||
|
|
const { baseElement, rerender } = render(
|
||
|
|
<svg>
|
||
|
|
<TileSet
|
||
|
|
keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
|
||
|
|
viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
rerender(
|
||
|
|
<svg>
|
||
|
|
<TileSet
|
||
|
|
keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
|
||
|
|
viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
// screen.debug();
|
||
|
|
expect(baseElement).toMatchInlineSnapshot(`
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<svg>
|
||
|
|
<g
|
||
|
|
transform="translate(1, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(2, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/2/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(3, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/3/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(5, 0)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/5/0.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(5, 1)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/5/1.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(5, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/5/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
`);
|
||
|
|
});
|
||
|
|
test('is not reinitialized if its key isObject updated', () => {
|
||
|
|
const { baseElement, rerender } = render(
|
||
|
|
<svg>
|
||
|
|
<TileSet
|
||
|
|
keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
|
||
|
|
viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
rerender(
|
||
|
|
<svg>
|
||
|
|
<TileSet
|
||
|
|
keyObject={{ provider: 'fake', zoomLevel: 10, x: 4, y: 10 }}
|
||
|
|
viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
// screen.debug();
|
||
|
|
expect(baseElement).toMatchInlineSnapshot(`
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<svg>
|
||
|
|
<g
|
||
|
|
transform="translate(1, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(2, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/2/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(3, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/3/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(5, 0)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/5/0.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(5, 1)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/5/1.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(5, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/5/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
`);
|
||
|
|
});
|
||
|
|
test('Also works with negative coordinates', () => {
|
||
|
|
const { baseElement } = render(
|
||
|
|
<svg>
|
||
|
|
<TileSet
|
||
|
|
keyObject={{ provider: 'fake', zoomLevel: 10, x: 5, y: 8 }}
|
||
|
|
viewPort={{ topLeft: { x: -3, y: -1 }, bottomRight: { x: -2, y: 2 } }}
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
// screen.debug();
|
||
|
|
expect(baseElement).toMatchInlineSnapshot(`
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<svg>
|
||
|
|
<g
|
||
|
|
transform="translate(-3, -1)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1021/1023.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(-2, -1)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1022/1023.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(-3, 0)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1021/0.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(-2, 0)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1022/0.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(-3, 1)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1021/1.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(-2, 1)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1022/1.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(-3, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1021/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<g
|
||
|
|
transform="translate(-2, 2)"
|
||
|
|
>
|
||
|
|
<image
|
||
|
|
height="1"
|
||
|
|
href="https://fakeurl/10/1022/2.png"
|
||
|
|
width="1"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
`);
|
||
|
|
});
|
||
|
|
});
|