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( ); const svg = screen.getByTestId('layer-stack'); expect(svg).toMatchInlineSnapshot(` `); }); test('generates two empty layers and a populated one', () => { // const { result } = renderHook(() => useAtom(tiledLayersAtom)); render( ); const svg = screen.getByTestId('layer-stack'); expect(svg).toMatchInlineSnapshot(` `); }); test('populates a new layer when zoomed in', () => { // const { result } = renderHook(() => useAtom(tiledLayersAtom)); render( ); 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(` `); }); });