test(components): add component tests, use ts for e2e tests

examples/nextjs/tests/useOnViewportChange.cy.tsx

@@ -0,0 +1,76 @@
+import { ReactFlow, useOnViewportChange, Viewport } from '@react-flow/bundle';
+
+describe('useOnViewportChange.cy.js', () => {
+  it('listen to viewport drag', () => {
+    let startViewport = {};
+    let changeViewport = {};
+    let endViewport = {};
+
+    const onStart = (viewport: Viewport) => {
+      startViewport = viewport;
+    };
+    const onChange = (viewport: Viewport) => {
+      changeViewport = viewport;
+    };
+    const onEnd = (viewport: Viewport) => {
+      endViewport = viewport;
+    };
+
+    cy.mount(
+      <ReactFlow>
+        <OnViewportChange onStart={onStart} onChange={onChange} onEnd={onEnd} />
+      </ReactFlow>
+    );
+
+    cy.window().then((win: any) => {
+      cy.get('.react-flow__pane')
+        .trigger('mousedown', 50, 50, { which: 1, view: win })
+        .trigger('mousemove', 50, 100)
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          expect(startViewport).to.eql({ x: 0, y: 0, zoom: 1 });
+          expect(changeViewport).to.not.eql({ x: 0, y: 0, zoom: 1 });
+          expect(endViewport).to.eql({ x: 0, y: 50, zoom: 1 });
+        });
+    });
+  });
+
+  it('handles default viewport', () => {
+    const defaultViewport = { x: 100, y: 100, zoom: 0.5 };
+    let startViewport = {};
+
+    const onStart = (viewport: Viewport) => {
+      startViewport = viewport;
+    };
+
+    cy.mount(
+      <ReactFlow defaultViewport={defaultViewport}>
+        <OnViewportChange onStart={onStart} />
+      </ReactFlow>
+    );
+
+    cy.window().then((win: any) => {
+      cy.get('.react-flow__pane')
+        .trigger('mousedown', 50, 50, { which: 1, view: win })
+        .trigger('mousemove', 50, 100)
+        .trigger('mouseup', { force: true, view: win })
+        .then(() => {
+          expect(startViewport).to.eql(defaultViewport);
+        });
+    });
+  });
+});
+
+function OnViewportChange({
+  onStart,
+  onChange,
+  onEnd,
+}: {
+  onStart?: (viewport: Viewport) => void;
+  onChange?: (viewport: Viewport) => void;
+  onEnd?: (viewport: Viewport) => void;
+}) {
+  useOnViewportChange({ onStart, onChange, onEnd });
+
+  return null;
+}