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

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

describe('The LayerStack component', () => {
  test('generates something', () => {
    // 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
      transform="scale(64) translate(0.25, 0.25)"
    />
    <g
      transform="scale(128) translate(0.5, 0.5)"
    />
    <g
      transform="scale(2048) translate(0, 0)"
    />
    <g
      transform="scale(1024) translate(0, 0)"
    />
    <g
      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>
`);
  });
});