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

package/src/e2e_tests/debounce.spec.tsx

@@ -0,0 +1,106 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { DEBOUNCE_TIME } from '../constants';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+const DEBOUNCE_TIME_WITH_MARGIN = DEBOUNCE_TIME + 100;
+// value updates from outside onExecute are overwritten by pending updates
+test.fail(
+  'external updates should override debounced updates',
+  async ({ mount, page }) => {
+    const editorPage = new CypherEditorPage(page);
+    let value = '';
+
+    const onChange = (val: string) => {
+      value = val;
+      void component.update(<CypherEditor value={val} onChange={onChange} />);
+    };
+
+    const component = await mount(
+      <CypherEditor value={value} onChange={onChange} />,
+    );
+
+    await editorPage.getEditor().pressSequentially('RETURN 1');
+    onChange('foo');
+    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+    await expect(component).toContainText('foo');
+  },
+);
+
+// TODO Fix this test
+test.fixme(
+  'onExecute updates should override debounce updates',
+  async ({ mount, page }) => {
+    const editorPage = new CypherEditorPage(page);
+    let value = '';
+
+    const onExecute = () => {
+      value = '';
+      void component.update(
+        <CypherEditor
+          value={value}
+          onChange={onChange}
+          onExecute={onExecute}
+        />,
+      );
+    };
+
+    const onChange = (val: string) => {
+      value = val;
+      void component.update(
+        <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
+      );
+    };
+
+    const component = await mount(
+      <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
+    );
+
+    await editorPage.getEditor().pressSequentially('RETURN 1');
+    await editorPage.getEditor().press('Enter');
+    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+    await expect(component).not.toContainText('RETURN 1');
+
+    await editorPage.getEditor().pressSequentially('RETURN 1');
+    await editorPage.getEditor().pressSequentially('');
+    await editorPage.getEditor().pressSequentially('RETURN 1');
+    await editorPage.getEditor().press('Enter');
+    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+    await expect(component).not.toContainText('RETURN 1');
+  },
+);
+
+test('onExecute should fire after debounced updates', async ({
+  mount,
+  page,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  let value = '';
+  let executedCommand = '';
+
+  const onExecute = (cmd: string) => {
+    executedCommand = cmd;
+    void component.update(
+      <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
+    );
+  };
+
+  const onChange = (val: string) => {
+    value = val;
+    void component.update(
+      <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
+    );
+  };
+
+  const component = await mount(
+    <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
+  );
+
+  await editorPage.getEditor().fill('RETURN 1');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().fill('RETURN 2');
+  await editorPage.getEditor().press('Enter');
+  await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+  await expect(component).toContainText('RETURN 2');
+  expect(executedCommand).toBe('RETURN 2');
+});

package/src/e2e_tests/{e2e-utils.ts → e2eUtils.ts}

@@ -59,17 +59,55 @@ export class CypherEditorPage {
     return this.checkNotificationMessage('warning', queryChunk, expectedMsg);
   }
 
+  async checkNoNotificationMessage(type: 'error' | 'warning') {
+    await this.page.waitForTimeout(10000);
+    await expect(this.page.locator('.cm-lintRange-' + type)).toHaveCount(0, {
+      timeout: 10000,
+    });
+    await expect(this.page.locator('.cm-lintPoint-' + type)).toHaveCount(0, {
+      timeout: 10000,
+    });
+  }
+
   private async checkNotificationMessage(
     type: 'error' | 'warning',
     queryChunk: string,
     expectedMsg: string,
   ) {
     await expect(this.page.locator('.cm-lintRange-' + type).last()).toBeVisible(
-      { timeout: 2000 },
+      { timeout: 10000 },
     );
 
     await this.page.getByText(queryChunk, { exact: true }).hover();
-    await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible();
-    await expect(this.page.getByText(expectedMsg)).toBeVisible();
+    await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible({
+      timeout: 10000,
+    });
+    await this.checkHoverMessage(expectedMsg, type);
+    /* Return the mouse to the beginning of the query and
+       This is because if for example we have an overlay with a 
+       first interaction that covers the element we want to perform
+       the second interaction on, we won't be able to see that second element
+    */
+    await this.page.mouse.move(0, 0);
+    // Make sure the tooltip closed
+    await expect(
+      this.page.locator('.cm-tooltip-hover').last(),
+    ).not.toBeVisible();
+  }
+
+  private async checkHoverMessage(
+    expectedMsg: string,
+    type: 'error' | 'warning',
+  ) {
+    const locator =
+      type === 'error'
+        ? 'li.cm-diagnostic.cm-diagnostic-error'
+        : 'li.cm-diagnostic.cm-diagnostic-warning';
+    const tooltips = await this.page.locator(locator).all();
+
+    const tooltipTexts = await Promise.all(
+      tooltips.map((t) => t.textContent()),
+    );
+    expect(tooltipTexts).toContain(expectedMsg);
   }
 }

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/{history-navigation.spec.tsx → historyNavigation.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('respects preloaded history', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
@@ -27,13 +25,75 @@ test('respects preloaded history', async ({ page, mount }) => {
   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 execute queries and see them in history', async ({ page, mount }) => {
+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)
@@ -49,6 +109,7 @@ RETURN n;`;
       value={initialValue}
       history={history}
       onExecute={onExecute}
+      newLineOnEnter
     />,
   );
 
@@ -63,12 +124,12 @@ RETURN n;`;
   await editorPage.getEditor().press('Meta+Enter');
   expect(history.length).toBe(1);
 
-  // Ensure only enter doesn't execute query
+  // 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('Enter');
+  await editorPage.getEditor().press('Shift+Enter');
   await page.keyboard.type('entry');
   expect(history.length).toBe(1);
 
@@ -102,10 +163,15 @@ RETURN n;`;
   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();
@@ -115,6 +181,59 @@ RETURN n;`;
   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';
@@ -127,11 +246,11 @@ test('can navigate with cmd+up as well', async ({ page, mount }) => {
     <CypherEditor
       value={initialValue}
       history={[
+        'first',
         `one
 multiline
 entry
 .`,
-        'second',
       ]}
       onExecute={() => {
         /* needed to turn on history movements */
@@ -139,24 +258,24 @@ entry
     />,
   );
 
+  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 up moves all the way to top of editor on mac
+  // Single meta down moves all the way to top of editor on mac
   if (isMac) {
-    await editorPage.getEditor().press(metaUp);
+    await editorPage.getEditor().press(metaDown);
   } else {
-    await editorPage.getEditor().press('ArrowUp');
-    await editorPage.getEditor().press('ArrowUp');
-    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');
   }
-  // move in history
-  await editorPage.getEditor().press(metaUp);
-  await expect(page.getByText('second')).toBeVisible();
-
   await editorPage.getEditor().press(metaDown);
-  await expect(page.getByText('multiline')).toBeVisible();
+  await expect(page.getByText('first')).toBeVisible();
 });
 
 test('test onExecute', async ({ page, mount }) => {

package/src/e2e_tests/performanceTest.spec.tsx

@@ -0,0 +1,163 @@
+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 ({
+  browserName,
+  mount,
+  page,
+}) => {
+  test.skip(browserName !== 'chromium');
+  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',
+    `Invalid input 'RETRN': expected a graph pattern, ',', 'ORDER BY', 'CALL', 'CREATE', 'LOAD CSV', 'DELETE', 'DETACH', 'FINISH', 'FOREACH', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REMOVE', 'RETURN', 'SET', 'SKIP', 'UNION', 'UNWIND', 'USE', 'USING', 'WHERE', 'WITH' or <EOF>`,
+  );
+
+  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');
-});