@neo4j-cypher/react-codemirror 0.0.0-canary-20250423075344

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, 'FOREACH', ',', 'ORDER BY', 'CALL', 'CREATE', 'LOAD CSV', 'DELETE', 'DETACH', 'FINISH', '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/sanityChecks.spec.tsx

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+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('');
+  await textField.fill('RETURN 12');
+  await expect(textField).toHaveText('RETURN 12');
+
+  // 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 }) => {
+  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');
+});

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -0,0 +1,445 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { testData } from '@neo4j-cypher/language-support';
+import { expect, test } from '@playwright/experimental-ct-react';
+import { Locator } from 'playwright/test';
+import { CypherEditor } from '../CypherEditor';
+
+test.use({ viewport: { width: 1000, height: 500 } });
+
+type TooltipExpectations = {
+  includes?: string[];
+  excludes?: string[];
+};
+
+const importCsvProc =
+  testData.mockSchema.procedures['CYPHER 5']['apoc.import.csv'];
+
+function testTooltip(tooltip: Locator, expectations: TooltipExpectations) {
+  const includes = expectations.includes ?? [];
+  const excludes = expectations.excludes ?? [];
+
+  const included = Promise.all(
+    includes.map((text) => {
+      return expect(tooltip).toContainText(text, {
+        timeout: 10000,
+      });
+    }),
+  );
+
+  const excluded = Promise.all(
+    excludes.map((text) => {
+      return expect(tooltip).not.toContainText(text, {
+        timeout: 10000,
+      });
+    }),
+  );
+
+  return Promise.all([included, excluded]);
+}
+
+test('Signature help works for functions', async ({ page, mount }) => {
+  const query = 'RETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(page.locator('.cm-signature-help-panel')).toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Signature help works for procedures', async ({ page, mount }) => {
+  const query = 'CALL apoc.import.csv(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(page.locator('.cm-signature-help-panel')).toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Signature help shows the description for the first argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      testData.mockSchema.procedures['CYPHER 5']['apoc.import.csv']
+        .argumentDescription[0].description,
+      testData.mockSchema.procedures['CYPHER 5']['apoc.import.csv'].description,
+    ],
+  });
+});
+
+test('Signature help shows the description for the first argument when the cursor is at that position', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv()';
+
+  await mount(
+    <CypherEditor value={query} schema={testData.mockSchema} offset={21} />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      importCsvProc.argumentDescription[0].description,
+      importCsvProc.description,
+    ],
+  });
+});
+
+test('Signature help shows the description for the second argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes,';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      importCsvProc.argumentDescription[1].description,
+      importCsvProc.description,
+    ],
+  });
+});
+
+test('Signature help shows the description for the second argument when the cursor is at that position', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes,)';
+
+  await mount(
+    <CypherEditor value={query} schema={testData.mockSchema} offset={27} />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      importCsvProc.argumentDescription[1].description,
+      importCsvProc.description,
+    ],
+  });
+});
+
+test('Signature help shows the description for the second argument when the cursor is at that position, even after whitespaces', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes,  )';
+
+  await mount(
+    <CypherEditor value={query} schema={testData.mockSchema} offset={28} />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      'rels :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows description for arguments with a space following a separator', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, ';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      'rels :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows the description for the third argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, rels,';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      'config :: MAP',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help works on multiline queries', async ({ page, mount }) => {
+  const query = `CALL apoc.import.csv(
+    nodes, 
+    rels,  
+    `;
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      'config :: MAP',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help only shows the description past the last argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, rels, config,';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+  1;
+
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [
+      'apoc.import.csv(nodes :: LIST<MAP>, rels :: LIST<MAP>, config :: MAP)',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file.',
+    ],
+  });
+});
+
+test('Signature help does not show any help when method finished', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, rels, config)';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(page.locator('.cm-signature-help-panel')).not.toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Signature help does not blow up on empty query', async ({
+  page,
+  mount,
+}) => {
+  const query = '';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(page.locator('.cm-signature-help-panel')).not.toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Signature help is shown below the text by default', async ({
+  page,
+  mount,
+}) => {
+  // We need to introduce new lines to make sure there's
+  // enough space to show the tooltip above
+  const query = '\n\n\n\n\n\n\nRETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(
+    page.locator('.cm-signature-help-panel.cm-tooltip-below'),
+  ).toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Setting showSignatureTooltipBelow to true shows the signature help above the text', async ({
+  page,
+  mount,
+}) => {
+  // We need to introduce new lines to make sure there's
+  // enough space to show the tooltip above
+  const query = '\n\n\n\n\n\n\nRETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      showSignatureTooltipBelow={true}
+      autofocus={true}
+    />,
+  );
+
+  await expect(
+    page.locator('.cm-signature-help-panel.cm-tooltip-below'),
+  ).toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Setting showSignatureTooltipBelow to false shows the signature help above the text', async ({
+  page,
+  mount,
+}) => {
+  // We need to introduce new lines to make sure there's
+  // enough space to show the tooltip above
+  const query = '\n\n\n\n\n\n\nRETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      showSignatureTooltipBelow={false}
+      autofocus={true}
+    />,
+  );
+
+  await expect(
+    page.locator('.cm-signature-help-panel.cm-tooltip-above'),
+  ).toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Signature help depends on the Cypher version', async ({
+  page,
+  mount,
+}) => {
+  const cypher5ArgDescription = 'The Cypher 5 statement to run.';
+  const cypher25ArgDescription = 'The Cypher 25 statement to run.';
+
+  await mount(
+    <CypherEditor
+      schema={{
+        functions: {
+          'CYPHER 5': {
+            cypher5Function: {
+              ...testData.emptyFunction,
+              argumentDescription: [
+                {
+                  isDeprecated: false,
+                  description: cypher5ArgDescription,
+                  name: 'statement',
+                  type: 'STRING',
+                },
+              ],
+              name: 'cypher5Function',
+            },
+          },
+          'CYPHER 25': {
+            cypher25Function: {
+              ...testData.emptyFunction,
+              argumentDescription: [
+                {
+                  isDeprecated: false,
+                  description: cypher25ArgDescription,
+                  name: 'statement',
+                  type: 'STRING',
+                },
+              ],
+              name: 'cypher25Function',
+            },
+          },
+        },
+      }}
+      featureFlags={{ cypher25: true }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('CYPHER 5 RETURN cypher5Function(');
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [cypher5ArgDescription],
+  });
+
+  await textField.fill('CYPHER 25 RETURN cypher25Function(');
+
+  await testTooltip(tooltip, {
+    includes: [cypher25ArgDescription],
+  });
+});