Test that onChange:prop works

tests/lib/Map.test.jsx

@@ -1,14 +1,18 @@
 import Map from '../../lib/Map.js';
 import OLMap from 'ol/Map.js';
 import React from 'react';
-import {describe, expect, it} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {afterEach, describe, expect, it} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+
+afterEach(() => {
+  cleanup();
+});
 
 // shared style for map target
 const style = {width: 512, height: 256};
 
 describe('<Map>', () => {
-  it('renders a map', async () => {
+  it('renders a map', () => {
     render(
       <div data-testid="test" style={style}>
         <Map />
@@ -18,7 +22,7 @@ describe('<Map>', () => {
     expect(screen.getByTestId('test').childNodes.length).toBe(1);
   });
 
-  it('accepts a ref for accessing the map', async () => {
+  it('accepts a ref for accessing the map', () => {
     let mapRef;
     render(
       <div style={style}>

tests/lib/View.test.jsx

@@ -2,14 +2,19 @@ import Map from '../../lib/Map.js';
 import OLView from 'ol/View.js';
 import React from 'react';
 import View from '../../lib/View.js';
-import {describe, expect, it} from 'vitest';
-import {render} from '@testing-library/react';
+import {afterEach, describe, expect, it} from 'vitest';
+import {callback} from './util.js';
+import {cleanup, render} from '@testing-library/react';
+
+afterEach(() => {
+  cleanup();
+});
 
 // shared style for map target
 const style = {width: 512, height: 256};
 
 describe('<View>', () => {
-  it('adds a view to a map', async () => {
+  it('adds a view to a map', () => {
     let map;
     render(
       <div style={style}>
@@ -25,7 +30,7 @@ describe('<View>', () => {
     expect(view.getZoom()).toEqual(3);
   });
 
-  it('accepts center, zoom, and rotation props', async () => {
+  it('accepts center, zoom, and rotation props', () => {
     let map;
     render(
       <div style={style}>
@@ -41,4 +46,31 @@ describe('<View>', () => {
     expect(view.getZoom()).toEqual(3);
     expect(view.getRotation()).toEqual(4);
   });
+
+  it('accepts a change listener', async () => {
+    const onChangeCenter = callback(event => {
+      const view = event.target;
+      return view.getCenter();
+    });
+
+    let map;
+    render(
+      <div style={style}>
+        <Map ref={r => (map = r)}>
+          <View
+            center={[1, 2]}
+            zoom={3}
+            rotation={4}
+            onChange:center={onChangeCenter.handler}
+          />
+        </Map>
+      </div>,
+    );
+
+    const view = map.getView();
+    view.setCenter([10, 20]);
+
+    const center = await onChangeCenter.called;
+    expect(center).toEqual([10, 20]);
+  });
 });

tests/lib/util.js

@@ -0,0 +1,21 @@
+export function callback(func) {
+  let onComplete;
+  let onError;
+
+  function handler(...args) {
+    let result;
+    try {
+      result = func(...args);
+    } catch (error) {
+      onError(error);
+    }
+    onComplete(result);
+  }
+
+  const called = new Promise((resolve, reject) => {
+    onComplete = resolve;
+    onError = reject;
+  });
+
+  return {handler, called};
+}