Testing TiledLayer re-rendering.
This commit is contained in:
parent
36418a3e3c
commit
cf50675077
|
@ -2,16 +2,7 @@ import { render, screen } from '@testing-library/react';
|
|||
import TiledLayer from './TiledLayer';
|
||||
|
||||
describe('The TiledLayer component ', () => {
|
||||
test('', () => {
|
||||
// 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));
|
||||
|
||||
test('exposes the tiles needed per its viewport', () => {
|
||||
const { baseElement } = render(
|
||||
<svg>
|
||||
<TiledLayer
|
||||
|
@ -20,7 +11,7 @@ describe('The TiledLayer component ', () => {
|
|||
/>
|
||||
</svg>
|
||||
);
|
||||
// screen.debug();
|
||||
// screen.debug();
|
||||
expect(baseElement).toMatchInlineSnapshot(`
|
||||
<body>
|
||||
<div>
|
||||
|
@ -37,6 +28,52 @@ describe('The TiledLayer component ', () => {
|
|||
</svg>
|
||||
</div>
|
||||
</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>
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue