@neo4j-cypher/react-codemirror 2.0.0-next.0 → 2.0.0-next.10

package/src/e2e_tests/{extra-keybindings.spec.tsx → extraKeybindings.spec.tsx}

@@ -1,8 +1,6 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
-import { CypherEditorPage } from './e2e-utils';
-
-test.use({ viewport: { width: 500, height: 500 } });
+import { CypherEditorPage } from './e2eUtils';
 
 test('can add extra keybinding statically', async ({ mount, page }) => {
   const editorPage = new CypherEditorPage(page);

package/src/e2e_tests/historyNavigation.spec.tsx

@@ -0,0 +1,315 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+test('respects preloaded history', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const initialValue = 'MATCH (n) RETURN n;';
+
+  await mount(
+    <CypherEditor
+      value={initialValue}
+      history={['first', 'second']}
+      onExecute={() => {
+        /* needed to turn on history movements */
+      }}
+    />,
+  );
+
+  await editorPage.getEditor().press('ArrowUp');
+  await expect(page.getByText('first')).toBeVisible();
+
+  // First arrow up is to get to start of line
+  await editorPage.getEditor().press('ArrowUp');
+  await editorPage.getEditor().press('ArrowUp');
+  await expect(page.getByText('second')).toBeVisible();
+
+  // First arrow down is to get to end of line
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+  await expect(page.getByText('first')).toBeVisible();
+  await editorPage.getEditor().press('ArrowDown');
+  await expect(page.getByText(initialValue)).toBeVisible();
+});
+
+test('can add new lines without onExecute', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const editorComponent = await mount(<CypherEditor />);
+
+  // Ctrl-Enter does nothing when onExecute is false
+  await editorPage.getEditor().press('Control+Enter');
+  await expect(editorComponent).toHaveText('1\n', {
+    useInnerText: true,
+  });
+
+  // Enter adds new lines
+  await editorPage.getEditor().fill('Brock');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\nBrock', {
+    useInnerText: true,
+  });
+
+  // Shift-Enter adds new lines
+  await editorPage.getEditor().press('Shift+Enter');
+  await editorPage.getEditor().press('Shift+Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\n4\n5\nBrock', {
+    useInnerText: true,
+  });
+});
+
+test('can add new lines with newLineOnEnter and without onExecute', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const editorComponent = await mount(<CypherEditor newLineOnEnter />);
+
+  // Ctrl-Enter does nothing when onExecute is false
+  await editorPage.getEditor().press('Control+Enter');
+  await expect(editorComponent).toHaveText('1\n', {
+    useInnerText: true,
+  });
+
+  // Enter adds new lines
+  await editorPage.getEditor().fill('Brock');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\nBrock', {
+    useInnerText: true,
+  });
+
+  // Shift-Enter adds new lines
+  await editorPage.getEditor().press('Shift+Enter');
+  await editorPage.getEditor().press('Shift+Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\n4\n5\nBrock', {
+    useInnerText: true,
+  });
+});
+
+test('can execute queries and see them in history with newLineOnEnter', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const initialValue = `MATCH (n)
+RETURN n;`;
+
+  const history: string[] = [];
+  const onExecute = (cmd: string) => {
+    history.unshift(cmd);
+  };
+
+  const editor = await mount(
+    <CypherEditor
+      value={initialValue}
+      history={history}
+      onExecute={onExecute}
+      newLineOnEnter
+    />,
+  );
+
+  // Execute initial query
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(history.length).toBe(1);
+
+  // Ensure query execution doesn't fire if the query is only whitespace
+  await editorPage.getEditor().fill('     ');
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(history.length).toBe(1);
+
+  // Ensure cmd+enter is required in multiline
+  await editorPage.getEditor().fill('multiline');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Shift+Enter');
+  await page.keyboard.type('entry');
+  expect(history.length).toBe(1);
+
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(history.length).toBe(2);
+
+  // rerender with new history
+  await editor.update(
+    <CypherEditor
+      value={initialValue}
+      history={history}
+      onExecute={onExecute}
+    />,
+  );
+
+  // type a new query and make sure it's not lost when navigating history
+  await editorPage.getEditor().fill('draft');
+  await expect(page.getByText('draft')).toBeVisible();
+  expect(history.length).toBe(2);
+
+  // Navigate to the top of the editor before navigating history
+  await editorPage.getEditor().press('ArrowLeft');
+  await editorPage.getEditor().press('ArrowLeft');
+  await editorPage.getEditor().press('ArrowLeft');
+  await editorPage.getEditor().press('ArrowLeft');
+  await editorPage.getEditor().press('ArrowLeft');
+  await editorPage.getEditor().press('ArrowUp');
+
+  // Ensure moving down in the editor doesn't navigate history
+  await expect(page.getByText('multiline')).toBeVisible();
+
+  // arrow movements don't matter until bottom is hit
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowUp');
+  await editorPage.getEditor().press('ArrowUp');
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+
+  // editor still multiline
+  await expect(page.getByText('multiline')).toBeVisible();
+
+  // until you hit the end where have the draft we created earlier
+  await editorPage.getEditor().press('ArrowDown');
+  await expect(page.getByText('draft')).toBeVisible();
+});
+
+test('can execute queries without newLineOnEnter', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const initialValue = 'Brock';
+
+  const history: string[] = [];
+  const onExecute = (cmd: string) => {
+    history.unshift(cmd);
+  };
+
+  const editorComponent = await mount(
+    <CypherEditor value={initialValue} onExecute={onExecute} />,
+  );
+
+  // Cmd/Control still executes initial query
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(history.length).toBe(1);
+
+  // Ensure query execution doesn't fire if the query is only whitespace
+  await editorPage.getEditor().fill('     ');
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  await editorPage.getEditor().press('Enter');
+  expect(history.length).toBe(1);
+
+  // Ensure enter executes query when in single line
+  await editorPage.getEditor().fill('Misty');
+  await editorPage.getEditor().press('Enter');
+  expect(history.length).toBe(2);
+  expect(history).toEqual(['Misty', 'Brock']);
+
+  // Ensure cmd+enter is required in multiline
+  await editorPage.getEditor().fill('multiline');
+  await editorPage.getEditor().press('Shift+Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('A');
+
+  // line numbers and the text
+  await expect(editorComponent).toHaveText('1\n2\n3\nmultiline\nA', {
+    useInnerText: true,
+  });
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  expect(history.length).toBe(2);
+
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(history.length).toBe(3);
+});
+
+test('can navigate with cmd+up as well', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const isMac = process.platform === 'darwin';
+  const metaUp = isMac ? 'Meta+ArrowUp' : 'Control+ArrowUp';
+  const metaDown = isMac ? 'Meta+ArrowDown' : 'Control+ArrowDown';
+
+  const initialValue = 'MATCH (n) RETURN n;';
+
+  await mount(
+    <CypherEditor
+      value={initialValue}
+      history={[
+        'first',
+        `one
+multiline
+entry
+.`,
+      ]}
+      onExecute={() => {
+        /* needed to turn on history movements */
+      }}
+    />,
+  );
+
+  await editorPage.getEditor().press(metaUp);
+  await expect(page.getByText('first')).toBeVisible();
+
+  // move in history
+  await editorPage.getEditor().press(metaUp);
+  await expect(page.getByText('multiline')).toBeVisible();
+
+  // Single meta down moves all the way to top of editor on mac
+  if (isMac) {
+    await editorPage.getEditor().press(metaDown);
+  } else {
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+  }
+  await editorPage.getEditor().press(metaDown);
+  await expect(page.getByText('first')).toBeVisible();
+});
+
+test('test onExecute', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const isMac = process.platform === 'darwin';
+  const execButton = isMac ? 'Meta+Enter' : 'Control+Enter';
+
+  const initialValue = 'MATCH (n) RETURN n;';
+  const history = [];
+
+  const onExecute = (cmd: string) => {
+    history.unshift(cmd);
+  };
+
+  const cypherEditor = await mount(
+    <CypherEditor value={initialValue} onExecute={onExecute} />,
+  );
+  await editorPage.getEditor().press(execButton);
+  expect(history).toEqual([initialValue]);
+
+  await editorPage.getEditor().press(execButton);
+  expect(history).toEqual([initialValue, initialValue]);
+
+  // can update onExecute
+  let newExecRan = false;
+  const newOnExecute = () => {
+    newExecRan = true;
+  };
+  await cypherEditor.update(
+    <CypherEditor value={initialValue} onExecute={newOnExecute} />,
+  );
+
+  await editorPage.getEditor().press(execButton);
+  expect(newExecRan).toEqual(true);
+  // old value should still be only 2
+  expect(history).toEqual([initialValue, initialValue]);
+});

package/src/e2e_tests/performanceTest.spec.tsx

@@ -0,0 +1,158 @@
+import { testData } from '@neo4j-cypher/language-support';
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+test.use({ viewport: { width: 1000, height: 500 } });
+declare global {
+  interface Window {
+    longtasks: number[];
+  }
+}
+
+test('benchmarking & performance test session', async ({ mount, page }) => {
+  const client = await page.context().newCDPSession(page);
+  if (process.env.BENCHMARKING === 'true') {
+    test.setTimeout(1000000);
+    await client.send('Performance.enable');
+    await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
+    await client.send('Overlay.setShowFPSCounter', { show: true });
+
+    await page.evaluate(() => {
+      window.longtasks = [];
+      const observer = new PerformanceObserver((list) => {
+        window.longtasks.push(...list.getEntries().map((e) => e.duration));
+      });
+
+      observer.observe({ entryTypes: ['longtask'] });
+    });
+  } else {
+    test.setTimeout(30 * 1000);
+  }
+  const editorPage = new CypherEditorPage(page);
+  const component = await mount(
+    <CypherEditor
+      prompt="neo4j>"
+      theme="dark"
+      lint
+      schema={testData.mockSchema}
+    />,
+  );
+
+  // pressSequentially is less efficient -> we want to test the performance of the editor
+  await editorPage.getEditor().pressSequentially(`
+   MATCH (n:Person) RETURN m;`);
+
+  await editorPage.checkErrorMessage('m', 'Variable `m` not defined');
+
+  // set and unset large query a few times
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(
+    <CypherEditor value="" schema={testData.mockSchema} />,
+  );
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(<CypherEditor value="" />);
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(
+    <CypherEditor value="" schema={testData.mockSchema} />,
+  );
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(
+    <CypherEditor value="" schema={testData.mockSchema} />,
+  );
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+
+  await editorPage.getEditor().pressSequentially(`
+ MATCH (n:P`);
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('Person'),
+  ).toBeVisible();
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('Person').click();
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('MATCH (n:Person');
+
+  await editorPage.getEditor().pressSequentially(') RETRN my');
+
+  await expect(component).toContainText('MATCH (n:Person) RETRN m');
+
+  await editorPage.checkErrorMessage(
+    'RETRN',
+    'Unexpected token. Did you mean RETURN?',
+  );
+
+  await editorPage
+    .getEditor()
+    .pressSequentially('veryveryveryverylongvariable');
+
+  if (process.env.BENCHMARKING === 'true') {
+    const longtasks = await page.evaluate(() => window.longtasks);
+    const sortedLongTasks = longtasks.sort((a, b) => a - b);
+    const medianLongTask =
+      sortedLongTasks[Math.floor(sortedLongTasks.length / 2)];
+    const averageLongTask =
+      sortedLongTasks.reduce((a, b) => a + b, 0) / sortedLongTasks.length;
+    const over500 = sortedLongTasks.filter((t) => t > 500).length;
+    const nintyninethPercentile =
+      sortedLongTasks[Math.floor(sortedLongTasks.length * 0.99)];
+    const longTaskCount = longtasks.length;
+    const totalLongTaskTime = longtasks.reduce((a, b) => a + b, 0);
+
+    const USER_ID = 1226722;
+    const API_KEY = process.env.GRAFANA_API_KEY;
+    if (!API_KEY) {
+      throw new Error('Missing grafana api key');
+    }
+
+    const metrics = {
+      medianLongTask,
+      averageLongTask,
+      over500,
+      nintyninethPercentile,
+      longTaskCount,
+      totalLongTaskTime,
+    };
+    const body = Object.entries(metrics)
+      .map(
+        ([key, value]) =>
+          `benchmark,bar_label=${key},source=playwright metric=${value}`,
+      )
+      .join('\n');
+
+    await fetch(
+      'https://influx-prod-39-prod-eu-north-0.grafana.net/api/v1/push/influx/write',
+      {
+        method: 'post',
+        body,
+        headers: {
+          Authorization: `Bearer ${USER_ID}:${API_KEY}`,
+          'Content-Type': 'text/plain',
+        },
+      },
+    ).then((res) => {
+      if (res.ok) {
+        // eslint-disable-next-line no-console
+        console.log('Metrics pushed to grafana successfully');
+      } else {
+        throw new Error(`Failed to push metrics to grafana: ${res.statusText}`);
+      }
+    });
+  }
+});

package/src/e2e_tests/{sanity-checks.spec.tsx → sanityChecks.spec.tsx}

@@ -1,8 +1,6 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('can mount the editor with text', async ({ mount }) => {
   const component = await mount(<CypherEditor value="MATCH (n) RETURN n;" />);
 
@@ -22,7 +20,7 @@ test('the editors text can be externally controlled ', async ({ mount }) => {
   await expect(component).toContainText(newValue);
 });
 
-test('the editors can report changes to the text ', async ({ mount, page }) => {
+test('the editor can report changes to the text ', async ({ mount, page }) => {
   const intitialValue = 'MATCH (n) ';
 
   let editorValueCopy = intitialValue;
@@ -34,13 +32,14 @@ test('the editors can report changes to the text ', async ({ mount, page }) => {
 
   const textField = page.getByRole('textbox');
 
+  await textField.fill('');
   await textField.fill('RETURN 12');
+  await expect(textField).toHaveText('RETURN 12');
 
-  expect(editorValueCopy).toBe('RETURN 12');
-
-  await page.keyboard.type('34');
-
-  expect(editorValueCopy).toBe('RETURN 1234');
+  // editor update is debounced, retry wait for debounced
+  await expect(() => {
+    expect(editorValueCopy).toBe('RETURN 12');
+  }).toPass({ intervals: [300, 300, 1000] });
 });
 
 test('can complete RETURN', async ({ page, mount }) => {
@@ -71,17 +70,3 @@ test('can complete CALL/CREATE', async ({ page, mount }) => {
 
   await expect(textField).toHaveText('CALL');
 });
-
-test('prompt shows up', async ({ mount, page }) => {
-  const component = await mount(<CypherEditor prompt="neo4j>" />);
-
-  await expect(component).toContainText('neo4j>');
-
-  await component.update(<CypherEditor prompt="test>" />);
-  await expect(component).toContainText('test>');
-
-  const textField = page.getByRole('textbox');
-  await textField.press('a');
-
-  await expect(textField).toHaveText('a');
-});