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

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

describe('The TiledLayer component', () => {
  beforeEach(() => {
    globalThis.cacheForTileSet = new Map();
  });

  test('generates an empty layer if inactive', () => {
    // const { result } = renderHook(() => useAtom(tiledLayersAtom));
    render(
      <svg data-testid='tiled-layer'>
        <TiledLayer
          keyObject={{ provider: 'fake', zoomLevel: 5, x: 2, y: 3 }}
          shift={{ x: 0.5, y: 0.25 }}
          zoom={4}
        />
      </svg>
    );
    const svg = screen.getByTestId('tiled-layer');
    expect(svg).toMatchInlineSnapshot(`
<svg
  data-testid="tiled-layer"
>
  <g
    transform="scale(4) translate(0.5, 0.25)"
  />
</svg>
`);
  });
  test('generates a populated layer if active', () => {
    // const { result } = renderHook(() => useAtom(tiledLayersAtom));
    render(
      <svg data-testid='tiled-layer'>
        <TiledLayer
          keyObject={{ provider: 'fake', zoomLevel: 5, x: 2, y: 3 }}
          shift={{ x: 0, y: 0 }}
          zoom={1}
        />
      </svg>
    );
    const svg = screen.getByTestId('tiled-layer');
    expect(svg).toMatchInlineSnapshot(`
<svg
  data-testid="tiled-layer"
>
  <g
    transform="scale(1) translate(0, 0)"
  >
    <g
      transform="translate(2, 3)"
    >
      <image
        height="1"
        href="https://fakeurl/5/2/3.png"
        width="1"
      />
    </g>
    <g
      transform="translate(3, 3)"
    >
      <image
        height="1"
        href="https://fakeurl/5/3/3.png"
        width="1"
      />
    </g>
    <g
      transform="translate(4, 3)"
    >
      <image
        height="1"
        href="https://fakeurl/5/4/3.png"
        width="1"
      />
    </g>
    <g
      transform="translate(5, 3)"
    >
      <image
        height="1"
        href="https://fakeurl/5/5/3.png"
        width="1"
      />
    </g>
    <g
      transform="translate(2, 4)"
    >
      <image
        height="1"
        href="https://fakeurl/5/2/4.png"
        width="1"
      />
    </g>
    <g
      transform="translate(3, 4)"
    >
      <image
        height="1"
        href="https://fakeurl/5/3/4.png"
        width="1"
      />
    </g>
    <g
      transform="translate(4, 4)"
    >
      <image
        height="1"
        href="https://fakeurl/5/4/4.png"
        width="1"
      />
    </g>
    <g
      transform="translate(5, 4)"
    >
      <image
        height="1"
        href="https://fakeurl/5/5/4.png"
        width="1"
      />
    </g>
    <g
      transform="translate(2, 5)"
    >
      <image
        height="1"
        href="https://fakeurl/5/2/5.png"
        width="1"
      />
    </g>
    <g
      transform="translate(3, 5)"
    >
      <image
        height="1"
        href="https://fakeurl/5/3/5.png"
        width="1"
      />
    </g>
    <g
      transform="translate(4, 5)"
    >
      <image
        height="1"
        href="https://fakeurl/5/4/5.png"
        width="1"
      />
    </g>
    <g
      transform="translate(5, 5)"
    >
      <image
        height="1"
        href="https://fakeurl/5/5/5.png"
        width="1"
      />
    </g>
  </g>
</svg>
`);
  });
});