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

package/src/e2e_tests/auto-completion.spec.tsx

@@ -0,0 +1,232 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('hello world end 2 end test', async ({ mount }) => {
+  const component = await mount(<CypherEditor value="hello world" />);
+  await expect(component).toContainText('hello world');
+  await component.update(<CypherEditor value="RETURN 123" />);
+  await expect(component).toContainText('RETURN 123');
+});
+
+test('can complete in the middle of statement', async ({ mount, page }) => {
+  const component = await mount(
+    <CypherEditor
+      value={`MATCH ()
+WHER true
+RETURN n;`}
+    />,
+  );
+
+  // Move into the statement and trigger autocompletion
+  const textField = page.getByRole('textbox');
+
+  await textField.focus();
+  await textField.press('ArrowDown');
+  await textField.press('ArrowRight');
+  await textField.press('ArrowRight');
+  await textField.press('ArrowRight');
+  await textField.press('ArrowRight');
+
+  await textField.press('Control+ ');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+  await page.locator('.cm-tooltip-autocomplete').getByText('WHERE').click();
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('WHERE true');
+});
+
+test('get completions when typing and can accept completions with tab', async ({
+  mount,
+  page,
+}) => {
+  const component = await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETU');
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('RETURN'),
+  ).toBeVisible();
+
+  // We need to wait for the editor to realise there is a completion open
+  // so that it does not just indent with tab key
+  await page.waitForTimeout(500);
+  await textField.press('Tab');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('RETURN');
+});
+
+test('can complete labels', async ({ mount, page }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        labels: ['Pokemon'],
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH (n :P');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('Pokemon').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('MATCH (n :Pokemon');
+});
+
+test('can update dbschema', async ({ mount, page }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        labels: ['Pokemon'],
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH (n :');
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('Pokemon'),
+  ).toBeVisible();
+
+  await textField.press('Escape');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await component.update(
+    <CypherEditor
+      schema={{
+        labels: ['Pokemon', 'Digimon'],
+      }}
+    />,
+  );
+
+  await textField.press('Control+ ');
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('Pokemon'),
+  ).toBeVisible();
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('Digimon'),
+  ).toBeVisible();
+});
+
+test('can complete rel types', async ({ page, mount }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        relationshipTypes: ['KNOWS'],
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH (n)-[:');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('KNOWS').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('MATCH (n)-[:KNOWS');
+});
+
+test('can complete functions', async ({ page, mount }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        functionSignatures: {
+          function123: { label: 'function123', documentation: 'no docs' },
+        },
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETURN func');
+
+  await page
+    .locator('.cm-tooltip-autocomplete')
+    .getByText('function123')
+    .click();
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('RETURN function123');
+});
+
+test('can complete procedures', async ({ page, mount }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        procedureSignatures: {
+          'db.ping': { label: 'db.ping', documentation: 'no docs' },
+        },
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('CALL d');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('db.ping').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('CALL db.ping');
+});
+
+test('can complete parameters', async ({ page, mount }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        parameters: { parameter: { type: 'string' } },
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETURN $p');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('parameter').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('RETURN $parameter');
+});
+
+test('completes allShortestPaths correctly', async ({ page, mount }) => {
+  await mount(
+    <CypherEditor
+      schema={{
+        parameters: { parameter: { type: 'string' } },
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  // The first query contains errors on purpose so the
+  // syntax errors get triggered before the auto-completion
+  await textField.fill('MATCH (n) REURN n; MATCH a');
+
+  await page
+    .locator('.cm-tooltip-autocomplete')
+    .getByText('allShortestPaths')
+    .click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  expect(await textField.textContent()).toEqual(
+    'MATCH (n) REURN n; MATCH allShortestPaths',
+  );
+});

package/src/e2e_tests/e2e-utils.ts

@@ -0,0 +1,75 @@
+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: 2000 },
+    );
+
+    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();
+  }
+}

package/src/e2e_tests/extra-keybindings.spec.tsx

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2e-utils';
+
+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/history-navigation.spec.tsx

@@ -0,0 +1,144 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2e-utils';
+
+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}
+      initialHistory={['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;`;
+
+  let exectutedQueries = 0;
+  const onExecute = () => {
+    exectutedQueries++;
+  };
+
+  await mount(<CypherEditor value={initialValue} onExecute={onExecute} />);
+
+  // Execute initial query
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(exectutedQueries).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(exectutedQueries).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(exectutedQueries).toBe(1);
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(exectutedQueries).toBe(2);
+
+  // 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(exectutedQueries).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}
+      initialHistory={[
+        `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();
+});