dev-test: UI events, getComputedStyle and the observers in the browser env

react-tooltip, on hover, called getComputedStyle, MutationObserver and
ResizeObserver, none of which the browser env exposed. The env now
also carries the UI event constructors (MouseEvent, KeyboardEvent,
FocusEvent and the rest), DOMRect, MutationObserver and a bound
getComputedStyle from JSDOM, grouped by kind.

JSDOM has no ResizeObserver. It does no layout either, so no element
ever changes size; the env's ResizeObserver accepts observe() and never
calls back, which is what a real one would do on a page that never
resizes.

packages/dev-test/src/env/browser.spec.ts

@@ -36,6 +36,27 @@ describe('browser', () => {
     expect(document).toBeInstanceOf(Document);
   });
 
+  it('contains the UI event constructors', () => {
+    const div = document.createElement('div');
+
+    expect(() => div.dispatchEvent(new MouseEvent('click'))).not.toThrow();
+    expect(() => div.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))).not.toThrow();
+    expect(new FocusEvent('focus')).toBeInstanceOf(UIEvent);
+  });
+
+  it('contains getComputedStyle and the observers', () => {
+    const div = document.createElement('div');
+
+    div.style.display = 'none';
+    document.body.appendChild(div);
+
+    expect(getComputedStyle(div).display).toBe('none');
+    expect(() => new MutationObserver(() => undefined).observe(div, { childList: true })).not.toThrow();
+    expect(() => new ResizeObserver(() => undefined).observe(div)).not.toThrow();
+
+    div.remove();
+  });
+
   it('dispatches the global CustomEvent and Event on window', () => {
     expect(() => window.dispatchEvent(new CustomEvent('custom', { detail: 1 }))).not.toThrow();
     expect(() => window.dispatchEvent(new Event('plain'))).not.toThrow();