@neo4j-cypher/react-codemirror 2.0.0-next.3 → 2.0.0-next.30

package/src/CypherEditor.test.tsx

@@ -0,0 +1,204 @@
+// @vitest-environment jsdom
+
+import { EditorView } from '@codemirror/view';
+import { createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
+import { DEBOUNCE_TIME } from './constants';
+import { CypherEditor } from './CypherEditor';
+
+const container = document.createElement('div');
+let root: ReturnType<typeof createRoot>;
+
+const ref = createRef<CypherEditor>();
+let value = '';
+const onChange = vi.fn((v: string) => {
+  value = v;
+  rerender();
+});
+
+global.IS_REACT_ACT_ENVIRONMENT = true;
+const DEBOUNCE_TIME_WITH_MARGIN = DEBOUNCE_TIME + 100;
+
+/** Avoids crash in test environment */
+function mockEditorView(editorView: EditorView) {
+  editorView.coordsAtPos = vi.fn().mockReturnValue({
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  });
+}
+
+async function debounce() {
+  await new Promise((resolve) =>
+    setTimeout(resolve, DEBOUNCE_TIME_WITH_MARGIN),
+  );
+}
+
+function getEditorValue() {
+  return ref.current.editorView.current.state.doc.toString();
+}
+
+function rerender() {
+  act(() => {
+    root.render(<CypherEditor value={value} onChange={onChange} ref={ref} />);
+  });
+}
+
+beforeEach(() => {
+  root = createRoot(container);
+  act(() => {
+    root.render(<CypherEditor value={value} onChange={onChange} ref={ref} />);
+  });
+  mockEditorView(ref.current.editorView.current);
+});
+
+afterEach(() => {
+  act(() => {
+    root.unmount();
+  });
+  value = '';
+  vi.clearAllMocks();
+});
+
+test('editorValue updates props.value after debounce', async () => {
+  ref.current.setValueAndFocus('new value');
+  expect(onChange).not.toHaveBeenCalled();
+  expect(getEditorValue()).toBe('new value');
+  expect(value).toBe('');
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledOnce();
+  expect(getEditorValue()).toBe('new value');
+  expect(value).toBe('new value');
+});
+
+test('editorValue updates should not be applied twice', async () => {
+  const dispatch = vi.spyOn(ref.current.editorView.current, 'dispatch');
+
+  ref.current.setValueAndFocus('new value');
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledOnce();
+  expect(dispatch).toHaveBeenCalledOnce(); // it gets called once for the initial setValueAndFocus
+});
+
+test('props.value updates editorValue', () => {
+  value = 'external value';
+  rerender();
+
+  expect(getEditorValue()).toBe('external value');
+  expect(value).toBe('external value');
+});
+
+test('props.value set to undefined preserves editorValue', () => {
+  // 1. value is set initially
+  value = 'initial';
+  rerender();
+
+  // 2. value is set to undefined
+  value = undefined;
+  rerender();
+
+  expect(onChange).not.toHaveBeenCalled();
+  expect(value).toBeUndefined();
+  expect(getEditorValue()).toBe('initial');
+});
+
+// value updates from outside onExecute are overwritten by pending updates
+test.fails('new props.value should cancel onChange', async () => {
+  // 1. value is updated internally
+  ref.current.setValueAndFocus('update');
+
+  // 2. editor is rerendered with a new value while a value update is still pending
+  value = 'new external value';
+  rerender();
+
+  await debounce();
+
+  // expect(onChange).not.toHaveBeenCalled();
+  expect(getEditorValue()).toBe('new external value');
+  expect(value).toBe('new external value');
+});
+
+// value updates from outside onExecute are overwritten by pending updates
+test.fails(
+  'new props.value set to same value should cancel onChange',
+  async () => {
+    // 1. value is set initially
+    value = 'same value';
+    rerender();
+
+    // 2. value is updated internally
+    ref.current.setValueAndFocus('update');
+
+    // 3. editor is rerendered with a new value while a value update is still pending
+    value = 'same value';
+    rerender();
+
+    await debounce();
+
+    // expect(onChange).not.toHaveBeenCalled();
+    expect(getEditorValue()).toBe('same value');
+    expect(value).toBe('same value');
+  },
+);
+
+test('rerender should not cancel onChange', async () => {
+  // 1. value is updated internally
+  ref.current.setValueAndFocus('changed');
+
+  // 2. editor is rerendered while a value update is still pending
+  rerender();
+
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledOnce();
+  expect(getEditorValue()).toBe('changed');
+  expect(value).toBe('changed');
+});
+
+test('rerender with a previous update should not cancel onChange', async () => {
+  // 1. value is updated internally
+  ref.current.setValueAndFocus('changed');
+  await debounce();
+
+  // 2. value is updated internally again
+  ref.current.setValueAndFocus('new change');
+
+  // 3. editor is rerendered while a value update is still pending
+  rerender();
+
+  await debounce();
+
+  expect(onChange).toHaveBeenCalledTimes(2);
+  expect(getEditorValue()).toBe('new change');
+  expect(value).toBe('new change');
+});
+
+test('rerender with prior external update should not cancel onChange', async () => {
+  // 1. value is set initially
+  ref.current.setValueAndFocus('initial');
+  await debounce();
+
+  // 2. value is updated externally
+  value = 'external update';
+  rerender();
+
+  // 3. value is updated internally
+  ref.current.setValueAndFocus('internal update');
+
+  // 4. editor is rerendered while a value update is still pending
+  rerender();
+
+  await debounce();
+
+  expect(getEditorValue()).toBe('internal update');
+  expect(value).toBe('internal update');
+});
+
+test('setValueAndFocus should handle CRLF newline characters', () => {
+  expect(() => ref.current.setValueAndFocus('new value\r\nnew line')).not.toThrow();
+});