@neo4j-cypher/react-codemirror 2.0.0-alpha.0 → 2.0.0-canary-a1ed8f3

package/src/e2e_tests/configuration.spec.tsx

@@ -0,0 +1,97 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+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');
+});
+
+test('line numbers can be turned on/off', async ({ mount }) => {
+  const component = await mount(<CypherEditor lineNumbers />);
+
+  await expect(component).toContainText('1');
+
+  await component.update(<CypherEditor lineNumbers={false} />);
+  await expect(component).not.toContainText('1');
+});
+
+test('can configure readonly', async ({ mount, page }) => {
+  const component = await mount(<CypherEditor readonly />);
+
+  const textField = page.getByRole('textbox');
+  await textField.press('a');
+  await expect(textField).not.toHaveText('a');
+
+  await component.update(<CypherEditor readonly={false} />);
+  await textField.press('b');
+  await expect(textField).toHaveText('b');
+});
+
+test('can set placeholder ', async ({ mount, page }) => {
+  const component = await mount(<CypherEditor placeholder="bulbasaur" />);
+
+  const textField = page.getByRole('textbox');
+  await expect(textField).toHaveText('bulbasaur');
+
+  await component.update(<CypherEditor placeholder="venusaur" />);
+  await expect(textField).not.toHaveText('bulbasaur');
+  await expect(textField).toHaveText('venusaur');
+
+  await textField.fill('abc');
+  await expect(textField).not.toHaveText('venusaur');
+  await expect(textField).toHaveText('abc');
+});
+
+test('can set/unset onFocus/onBlur', async ({ mount, page }) => {
+  const component = await mount(<CypherEditor />);
+
+  let focusFireCount = 0;
+  let blurFireCount = 0;
+
+  const focus = () => {
+    focusFireCount += 1;
+  };
+  const blur = () => {
+    blurFireCount += 1;
+  };
+
+  await component.update(<CypherEditor domEventHandlers={{ blur, focus }} />);
+
+  const textField = page.getByRole('textbox');
+  await textField.click();
+  await expect(textField).toBeFocused();
+
+  // this is to give the events time to fire
+  await expect(() => {
+    expect(focusFireCount).toBe(1);
+    expect(blurFireCount).toBe(0);
+  }).toPass();
+
+  await textField.blur();
+
+  await expect(() => {
+    expect(focusFireCount).toBe(1);
+    expect(blurFireCount).toBe(1);
+  }).toPass();
+
+  await component.update(<CypherEditor />);
+  await textField.click();
+  await expect(textField).toBeFocused();
+  await textField.blur();
+
+  await expect(() => {
+    expect(focusFireCount).toBe(1);
+    expect(blurFireCount).toBe(1);
+  }).toPass();
+});

package/src/e2e_tests/e2eUtils.ts

@@ -0,0 +1,85 @@
+import { expect } from '@playwright/experimental-ct-react';
+import type { Locator, Page } from 'playwright/test';
+
+export class CypherEditorPage {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  getEditor() {
+    return this.page.getByRole('textbox');
+  }
+
+  async focusEditor() {
+    await this.getEditor().focus();
+  }
+
+  editorBackgroundIsUnset() {
+    return this.page.locator('.cm-editor').evaluate((e: Element) => {
+      const browserDefaultBackgroundColor = 'rgba(0, 0, 0, 0)';
+      return (
+        window.getComputedStyle(e).getPropertyValue('background-color') ===
+        browserDefaultBackgroundColor
+      );
+    });
+  }
+
+  getHexColorOfLocator(locator: Locator) {
+    return locator.evaluate((e: Element) => {
+      // https://stackoverflow.com/questions/49974145/how-to-convert-rgba-to-hex-color-code-using-javascript
+      function RGBAToHexA(rgba: string, forceRemoveAlpha = false) {
+        return (
+          '#' +
+          rgba
+            .replace(/^rgba?\(|\s+|\)$/g, '')
+            .split(',')
+            .filter((string, index) => !forceRemoveAlpha || index !== 3)
+            .map((string) => parseFloat(string))
+            .map((number, index) =>
+              index === 3 ? Math.round(number * 255) : number,
+            )
+            .map((number) => number.toString(16))
+            .map((string) => (string.length === 1 ? '0' + string : string))
+            .join('')
+        );
+      }
+
+      const color = window.getComputedStyle(e).getPropertyValue('color');
+      return RGBAToHexA(color);
+    });
+  }
+
+  async checkErrorMessage(queryChunk: string, expectedMsg: string) {
+    return this.checkNotificationMessage('error', queryChunk, expectedMsg);
+  }
+
+  async checkWarningMessage(queryChunk: string, expectedMsg: string) {
+    return this.checkNotificationMessage('warning', queryChunk, expectedMsg);
+  }
+
+  private async checkNotificationMessage(
+    type: 'error' | 'warning',
+    queryChunk: string,
+    expectedMsg: string,
+  ) {
+    await expect(this.page.locator('.cm-lintRange-' + type).last()).toBeVisible(
+      { timeout: 3000 },
+    );
+
+    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();
+    /* 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 the sure the tooltip closed
+    await expect(
+      this.page.locator('.cm-tooltip-hover').last(),
+    ).not.toBeVisible();
+  }
+}

package/src/e2e_tests/extraKeybindings.spec.tsx

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('can add extra keybinding statically', async ({ mount, page }) => {
+  const editorPage = new CypherEditorPage(page);
+  let hasRun = false;
+  const component = await mount(
+    <CypherEditor
+      extraKeybindings={[
+        {
+          key: 'a',
+          preventDefault: true,
+          run: () => {
+            hasRun = true;
+            return true;
+          },
+        },
+      ]}
+    />,
+  );
+
+  await editorPage.getEditor().press('a');
+
+  await expect(component).not.toHaveText('a');
+  expect(hasRun).toBe(true);
+});
+
+test('can add extra keybinding dymanically', async ({ mount, page }) => {
+  const editorPage = new CypherEditorPage(page);
+  let hasRun = false;
+  const component = await mount(<CypherEditor />);
+  await editorPage.getEditor().press('a');
+  await editorPage.getEditor().press('Escape');
+  await expect(component).toContainText('a');
+
+  await component.update(
+    <CypherEditor
+      extraKeybindings={[
+        {
+          key: 'a',
+          preventDefault: true,
+          run: () => {
+            hasRun = true;
+            return true;
+          },
+        },
+      ]}
+    />,
+  );
+
+  await editorPage.getEditor().press('a');
+  await expect(component).not.toContainText('aa');
+  expect(hasRun).toBe(true);
+});

package/src/e2e_tests/historyNavigation.spec.tsx

@@ -0,0 +1,196 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+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();
+
+  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 }) => {
+  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}
+    />,
+  );
+
+  // 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 only enter doesn't execute query
+  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 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('ArrowUp');
+  await editorPage.getEditor().press('ArrowUp');
+  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 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={[
+        `one
+multiline
+entry
+.`,
+        'second',
+      ]}
+      onExecute={() => {
+        /* needed to turn on history movements */
+      }}
+    />,
+  );
+
+  await editorPage.getEditor().press(metaUp);
+  await expect(page.getByText('multiline')).toBeVisible();
+
+  // Single meta up moves all the way to top of editor on mac
+  if (isMac) {
+    await editorPage.getEditor().press(metaUp);
+  } else {
+    await editorPage.getEditor().press('ArrowUp');
+    await editorPage.getEditor().press('ArrowUp');
+    await editorPage.getEditor().press('ArrowUp');
+    await editorPage.getEditor().press('ArrowUp');
+  }
+  // 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();
+});
+
+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/sanityChecks.spec.tsx

@@ -0,0 +1,78 @@
+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;" />);
+
+  await expect(component).toContainText('MATCH (n) RETURN n;');
+});
+
+test('the editors text can be externally controlled ', async ({ mount }) => {
+  const intitialValue = 'MATCH (n) RETURN n;';
+
+  const component = await mount(<CypherEditor value={intitialValue} />);
+
+  await expect(component).toContainText(intitialValue);
+
+  const newValue = 'RETURN 123';
+  await component.update(<CypherEditor value={newValue} />);
+
+  await expect(component).toContainText(newValue);
+});
+
+test('the editor can report changes to the text ', async ({ mount, page }) => {
+  const intitialValue = 'MATCH (n) ';
+
+  let editorValueCopy = intitialValue;
+  const onChange = (val: string) => {
+    editorValueCopy = val;
+  };
+
+  await mount(<CypherEditor value={intitialValue} onChange={onChange} />);
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETURN 12');
+
+  // editor update is debounced, retry wait for debounced
+  await expect(() => {
+    expect(editorValueCopy).toBe('RETURN 12');
+  }).toPass({ intervals: [300, 300, 1000] });
+
+  await page.keyboard.type('34');
+
+  await expect(() => {
+    expect(editorValueCopy).toBe('RETURN 12');
+  }).toPass({ intervals: [300, 300, 1000] });
+});
+
+test('can complete RETURN', async ({ page, mount }) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETU');
+
+  await page.getByText('RETURN').click();
+  await expect(textField).toHaveText('RETURN');
+});
+
+test('can complete CALL/CREATE', async ({ page, mount }) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('C');
+  await expect(page.getByText('CALL')).toBeVisible();
+  await expect(page.getByText('CREATE')).toBeVisible();
+
+  await textField.fill('CA');
+  await expect(page.getByText('CALL')).toBeVisible();
+  await expect(page.getByText('CREATE')).not.toBeVisible();
+
+  // wait for the autocomplete interactivity
+  await page.waitForTimeout(500);
+  await textField.press('Enter');
+
+  await expect(textField).toHaveText('CALL');
+});