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));

    const { baseElement } = render(
      <svg>
        <TiledLayer
          keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
          viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, 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)"
      />
    </svg>
  </div>
</body>
`);
  });
});
