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

import { renderHook, act, render, screen } from '@testing-library/react';
import { useAtom } from 'jotai';
import LayerStack from './LayerStack';
import { coordinateSystemAtom, relativeCoordinateSystemAtom } from './Map';

describe('The LayerStack component', () => {
  test('generates four empty layers and a populated one', () => {
    // const { result } = renderHook(() => useAtom(tiledLayersAtom));
    render(
      <LayerStack
        numberOfTiledLayers={5}
        keyObject={{ provider: 'xxx', zoomLevel: 9, x: 777, y: 333 }}
      />
    );
    const svg = screen.getByTestId('layer-stack');
    expect(svg).toMatchInlineSnapshot(`
<svg
  data-testid="layer-stack"
  height="768"
  width="1024"
>
  <g
    transform="translate(0, 0) scale(1)"
  >
    <g
      data-testid="tile/xxx/7//"
      transform="scale(1024) translate(0.25, 0.25)"
    />
    <g
      data-testid="tile/xxx/8//"
      transform="scale(512) translate(0.5, 0.5)"
    />
    <g
      data-testid="tile/xxx/11//"
      transform="scale(64) translate(0, 0)"
    />
    <g
      data-testid="tile/xxx/10//"
      transform="scale(128) translate(0, 0)"
    />
    <g
      data-testid="tile/xxx/9//"
      transform="scale(256) translate(0, 0)"
    >
      <g
        transform="translate(0, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/336.png"
            width="1"
          />
        </g>
      </g>
    </g>
  </g>
</svg>
`);
  });

  test('generates two empty layers and a populated one', () => {
    // const { result } = renderHook(() => useAtom(tiledLayersAtom));
    render(
      <LayerStack
        numberOfTiledLayers={3}
        keyObject={{ provider: 'xxx', zoomLevel: 9, x: 777, y: 333 }}
      />
    );
    const svg = screen.getByTestId('layer-stack');
    expect(svg).toMatchInlineSnapshot(`
<svg
  data-testid="layer-stack"
  height="768"
  width="1024"
>
  <g
    transform="translate(0, 0) scale(1)"
  >
    <g
      data-testid="tile/xxx/8//"
      transform="scale(512) translate(0.5, 0.5)"
    />
    <g
      data-testid="tile/xxx/10//"
      transform="scale(128) translate(0, 0)"
    />
    <g
      data-testid="tile/xxx/9//"
      transform="scale(256) translate(0, 0)"
    >
      <g
        transform="translate(0, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/336.png"
            width="1"
          />
        </g>
      </g>
    </g>
  </g>
</svg>
`);
  });

  test('populates a new layer when zoomed in', () => {
    // const { result } = renderHook(() => useAtom(tiledLayersAtom));
    render(
      <LayerStack
        numberOfTiledLayers={3}
        keyObject={{ provider: 'xxx', zoomLevel: 9, x: 777, y: 333 }}
      />
    );
    const { result } = renderHook(() => [
      useAtom(coordinateSystemAtom),
      useAtom(relativeCoordinateSystemAtom),
    ]);
    act(() => {
      result.current[0][1]({
        shift: {
          x: 0,
          y: 0,
        },
        zoom: 1,
      } as any);
      result.current[1][1]({
        deltaShift: null,
        zoomCenter: { x: 0, y: 0 },
        deltaZoom: 2,
      } as any);
    });
    const svg = screen.getByTestId('layer-stack');
    expect(svg).toMatchInlineSnapshot(`
<svg
  data-testid="layer-stack"
  height="768"
  width="1024"
>
  <g
    transform="translate(0, 0) scale(2)"
  >
    <g
      data-testid="tile/xxx/8//"
      transform="scale(512) translate(0.5, 0.5)"
    />
    <g
      data-testid="tile/xxx/9//"
      transform="scale(256) translate(0, 0)"
    >
      <g
        transform="translate(0, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/333.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/334.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/335.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/777/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/778/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/779/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(3, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/780/336.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(4, 3)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/9/781/336.png"
            width="1"
          />
        </g>
      </g>
    </g>
    <g
      data-testid="tile/xxx/10//"
      transform="scale(128) translate(0, 0)"
    >
      <g
        transform="translate(0, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1554/666.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1555/666.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 0)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1556/666.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1554/667.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1555/667.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 1)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1556/667.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(0, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1554/668.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(1, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1555/668.png"
            width="1"
          />
        </g>
      </g>
      <g
        transform="translate(2, 2)"
      >
        <g>
          <image
            height="1"
            href="https://tile.openstreetmap.org/10/1556/668.png"
            width="1"
          />
        </g>
      </g>
    </g>
  </g>
</svg>
`);
  });
});