@neo4j-cypher/react-codemirror 2.0.0-next.7 → 2.0.0-next.9

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,100 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+const DEBOUNCE_TIMER = 200;
+
+test('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_TIMER);
+  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('Control+Enter');
+  await page.waitForTimeout(DEBOUNCE_TIMER);
+  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('Control+Enter');
+  await page.waitForTimeout(DEBOUNCE_TIMER);
+  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('Control+Enter');
+  await editorPage.getEditor().fill('RETURN 2');
+  await editorPage.getEditor().press('Control+Enter');
+  await page.waitForTimeout(DEBOUNCE_TIMER);
+  await expect(component).toContainText('RETURN 2');
+  expect(executedCommand).toBe('RETURN 2');
+});

package/src/e2e_tests/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();
   }
 }

package/src/e2e_tests/extraKeybindings.spec.tsx

@@ -2,8 +2,6 @@ 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;

package/src/e2e_tests/historyNavigation.spec.tsx

@@ -2,8 +2,6 @@ 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);
 
@@ -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/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;" />);
 
@@ -76,17 +74,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');
-});