@neo4j-cypher/react-codemirror 2.0.0-next.1 → 2.0.0-next.11

package/src/e2e_tests/autoCompletion.spec.tsx

@@ -0,0 +1,472 @@
+import { testData } from '@neo4j-cypher/language-support';
+import { expect, test } from '@playwright/experimental-ct-react';
+import type { Page } from '@playwright/test';
+import { CypherEditor } from '../CypherEditor';
+
+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('get completions when typing in controlled component', async ({
+  mount,
+  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} />,
+  );
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETU');
+  await page.waitForTimeout(500); // wait for debounce
+
+  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={{
+        functions: {
+          function123: {
+            ...testData.emptyFunction,
+            name: 'function123',
+          },
+        },
+      }}
+    />,
+  );
+
+  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={{
+        procedures: {
+          'db.ping': { ...testData.emptyProcedure, name: 'db.ping' },
+        },
+      }}
+    />,
+  );
+
+  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',
+  );
+});
+
+async function getInfoTooltip(page: Page, methodName: string) {
+  const infoTooltip = page.locator('.cm-completionInfo');
+  const firstOption = page.locator('li[aria-selected="true"]');
+  let selectedOption = firstOption;
+
+  while (!(await infoTooltip.textContent()).includes(methodName)) {
+    await page.keyboard.press('ArrowDown');
+    const currentSelected = page.locator('li[aria-selected="true"]');
+    expect(currentSelected).not.toBe(selectedOption);
+    expect(currentSelected).not.toBe(firstOption);
+    selectedOption = currentSelected;
+  }
+
+  return infoTooltip;
+}
+
+test('shows signature help information on auto-completion for procedures', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={testData.mockSchema}
+      featureFlags={{
+        signatureInfoOnAutoCompletions: true,
+      }}
+    />,
+  );
+  const procName = 'apoc.periodic.iterate';
+  const procedure = testData.mockSchema.procedures[procName];
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('CALL apoc.periodic.');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+
+  const infoTooltip = await getInfoTooltip(page, procName);
+  await expect(infoTooltip).toContainText(procedure.signature);
+  await expect(infoTooltip).toContainText(procedure.description);
+});
+
+test('shows signature help information on auto-completion for functions', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={testData.mockSchema}
+      featureFlags={{
+        signatureInfoOnAutoCompletions: true,
+      }}
+    />,
+  );
+  const fnName = 'apoc.coll.combinations';
+  const fn = testData.mockSchema.functions[fnName];
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('RETURN apoc.coll.');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+
+  const infoTooltip = await getInfoTooltip(page, fnName);
+  await expect(infoTooltip).toContainText(fn.signature);
+  await expect(infoTooltip).toContainText(fn.description);
+});
+
+test('shows deprecated procedures as strikethrough on auto-completion', async ({
+  page,
+  mount,
+}) => {
+  const procName = 'apoc.trigger.resume';
+
+  await mount(
+    <CypherEditor
+      schema={{
+        procedures: { [procName]: testData.mockSchema.procedures[procName] },
+      }}
+      featureFlags={{
+        signatureInfoOnAutoCompletions: true,
+      }}
+    />,
+  );
+  const textField = page.getByRole('textbox');
+  await textField.fill('CALL apoc.trigger.');
+
+  // We need to assert on the element having the right class
+  // and trusting the CSS is making this truly strikethrough
+  await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+});
+
+test('shows deprecated function as strikethrough on auto-completion', async ({
+  page,
+  mount,
+}) => {
+  const fnName = 'apoc.create.uuid';
+
+  await mount(
+    <CypherEditor
+      schema={{
+        functions: { [fnName]: testData.mockSchema.functions[fnName] },
+      }}
+      featureFlags={{
+        signatureInfoOnAutoCompletions: true,
+      }}
+    />,
+  );
+  const textField = page.getByRole('textbox');
+  await textField.fill('RETURN apoc.create.');
+
+  // We need to assert on the element having the right class
+  // and trusting the CSS is making this truly strikethrough
+  await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+});
+
+test('does not signature help information on auto-completion if flag not enabled explicitly', async ({
+  page,
+  mount,
+}) => {
+  await mount(<CypherEditor schema={testData.mockSchema} />);
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('CALL apoc.periodic.');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+  await expect(page.locator('.cm-completionInfo')).not.toBeVisible();
+});
+
+test('does not signature help information on auto-completion if docs and signature are empty', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={testData.mockSchema}
+      featureFlags={{
+        signatureInfoOnAutoCompletions: true,
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('C');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+  await expect(page.locator('.cm-completionInfo')).not.toBeVisible();
+});
+
+test('shows signature help information on auto-completion if description is not empty, signature is', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={{
+        procedures: {
+          'db.ping': {
+            ...testData.emptyProcedure,
+            description: 'foo',
+            signature: '',
+            name: 'db.ping',
+          },
+        },
+      }}
+      featureFlags={{
+        signatureInfoOnAutoCompletions: true,
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('CALL db.');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+  await expect(page.locator('.cm-completionInfo')).toBeVisible();
+});
+
+test('shows signature help information on auto-completion if signature is not empty, description is', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={{
+        procedures: {
+          'db.ping': {
+            ...testData.emptyProcedure,
+            description: '',
+            signature: 'foo',
+            name: 'db.ping',
+          },
+        },
+      }}
+      featureFlags={{
+        signatureInfoOnAutoCompletions: true,
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('CALL db.');
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+  await expect(page.locator('.cm-completionInfo')).toBeVisible();
+});

package/src/e2e_tests/configuration.spec.tsx

@@ -0,0 +1,111 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+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();
+});
+
+test('aria-label is not set by default', async ({ mount, page }) => {
+  await mount(<CypherEditor />);
+
+  const textField = page.getByRole('textbox');
+  expect(await textField.getAttribute('aria-label')).toBeNull();
+});
+
+test('can set aria-label', async ({ mount, page }) => {
+  const ariaLabel = 'Cypher Editor';
+
+  await mount(<CypherEditor ariaLabel={ariaLabel} />);
+
+  const textField = page.getByRole('textbox');
+  expect(await textField.getAttribute('aria-label')).toEqual(ariaLabel);
+});

package/src/e2e_tests/debounce.spec.tsx

@@ -0,0 +1,101 @@
+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');
+  },
+);
+
+test('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}

@@ -65,11 +65,21 @@ export class CypherEditorPage {
     expectedMsg: string,
   ) {
     await expect(this.page.locator('.cm-lintRange-' + type).last()).toBeVisible(
-      { timeout: 2000 },
+      { 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();
   }
 }