dyomedea/src/components/map/TileSet.test.tsx

310 lines
6.4 KiB
TypeScript
Raw Normal View History

2022-10-30 19:18:21 +00:00
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>
`);
});
});