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

Testing TiledLayer re-rendering.

This commit is contained in:
Eric van der Vlist 2022-10-17 17:56:03 +02:00
parent 36418a3e3c
commit cf50675077
1 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/map/TiledLayer.test.tsx
View File

@ -2,16 +2,7 @@ import { render, screen } from '@testing-library/react';
import TiledLayer from './TiledLayer'; import TiledLayer from './TiledLayer';
describe('The TiledLayer component ', () => { describe('The TiledLayer component ', () => {
test('', () => { test('exposes the tiles needed per its viewport', () => {
// const tiledLayer = renderer.create(
// <TiledLayer
// keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
// viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
// />
// );
// const tree = tiledLayer.toJSON();
// console.log(JSON.stringify(tree));
const { baseElement } = render( const { baseElement } = render(
<svg> <svg>
<TiledLayer <TiledLayer
@ -20,7 +11,7 @@ describe('The TiledLayer component ', () => {
/> />
</svg> </svg>
); );
// screen.debug(); // screen.debug();
expect(baseElement).toMatchInlineSnapshot(` expect(baseElement).toMatchInlineSnapshot(`
<body> <body>
<div> <div>
@ -37,6 +28,52 @@ describe('The TiledLayer component ', () => {
</svg> </svg>
</div> </div>
</body> </body>
`);
});
test('adds more tiles when its viewport is updated without removing the previous ones', () => {
const { baseElement, rerender } = render(
<svg>
<TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
/>
</svg>
);
rerender(
<svg>
<TiledLayer
keyObject={{ provider: 'osm', 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)"
/>
<g
transform="translate(2, 2)"
/>
<g
transform="translate(3, 2)"
/>
<g
transform="translate(5, 0)"
/>
<g
transform="translate(5, 1)"
/>
<g
transform="translate(5, 2)"
/>
</svg>
</div>
</body>
`); `);
}); });
}); });