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

Testing negative indices fot TiledLayer components.

This commit is contained in:
Eric van der Vlist 2022-10-17 23:04:58 +02:00
parent 0d927c72cd
commit 16097c1e2e
2 changed files with 80 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { render, screen } from '@testing-library/react';
import { render } from '@testing-library/react';
import TiledLayer from './TiledLayer';
import { TileFactory } from './types';
@ -170,4 +170,81 @@ describe('The TiledLayer component ', () => {
</body>
`);
});
test('Also works with negative coordinates', () => {
const { baseElement } = render(
<svg>
<TiledLayer
keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
viewPort={{ topLeft: { x: -3, y: -1 }, bottomRight: { x: -2, y: 2 } }}
tileFactory={fakeTileFactory}
/>
</svg>
);
// screen.debug();
expect(baseElement).toMatchInlineSnapshot(`
<body>
<div>
<svg>
<g
transform="translate(-3, -1)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":2,"y":4}
</text>
</g>
<g
transform="translate(-2, -1)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":3,"y":4}
</text>
</g>
<g
transform="translate(-3, 0)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":2,"y":5}
</text>
</g>
<g
transform="translate(-2, 0)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":3,"y":5}
</text>
</g>
<g
transform="translate(-3, 1)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":2,"y":6}
</text>
</g>
<g
transform="translate(-2, 1)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":3,"y":6}
</text>
</g>
<g
transform="translate(-3, 2)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":2,"y":7}
</text>
</g>
<g
transform="translate(-2, 2)"
>
<text>
{"provider":"osm","zoomLevel":10,"x":3,"y":7}
</text>
</g>
</svg>
</div>
</body>
`);
});
});

2
src/components/map/TiledLayer.tsx
View File

@ -23,6 +23,8 @@ export interface TiledLayerProperties {
*
* This component has no need to know the number nor the size of its tiles: tiles can be added when needed and
* its unit is the tile size (the parent component needs to transform its enclosing SVG group to adapt its units)
*
* TODO: test tiles'X and Y boundaries.
*
*/
export const TiledLayer: react.FC<TiledLayerProperties> = (