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

package/src/e2e_tests/snippets.spec.tsx

@@ -0,0 +1,92 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+test('can complete pattern snippet', async ({ page, mount }) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH ()-[]->()');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('-[]->()').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await textField.press('Tab');
+  await textField.press('Tab');
+
+  await expect(textField).toHaveText('MATCH ()-[]->()-[ ]->( )');
+});
+
+test('can navigate snippet', async ({ page, mount }) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('CREATE INDEX abc FOR ()');
+
+  await page
+    .locator('.cm-tooltip-autocomplete')
+    .getByText('-[]-()', { exact: true })
+    .click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+  await expect(page.locator('.cm-snippetField')).toHaveCount(2);
+
+  await textField.press('Tab');
+  await textField.press('Shift+Tab');
+
+  await expect(textField).toHaveText('CREATE INDEX abc FOR ()-[ ]-( )');
+
+  await textField.press('a');
+  await expect(textField).toHaveText('CREATE INDEX abc FOR ()-[a]-( )');
+
+  await textField.press('Escape');
+  await textField.press('Escape');
+  await expect(page.locator('.cm-snippetField')).toHaveCount(0);
+  await textField.press('Tab');
+  await expect(textField).toHaveText('CREATE INDEX abc FOR ()-[a  ]-( )');
+});
+
+test('can accept completion inside pattern snippet', async ({
+  page,
+  mount,
+}) => {
+  await mount(<CypherEditor schema={{ labels: ['City'] }} />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH ()-[]->()');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('-[]->()').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  // move to node
+  await textField.press('Tab');
+
+  // get & accept completion
+  await textField.press(':');
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('City'),
+  ).toBeVisible();
+
+  await textField.press('Tab', { delay: 300 });
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  // tab out of the snippet
+  await textField.press('Tab', { delay: 300 });
+
+  await expect(textField).toHaveText('MATCH ()-[]->()-[ ]->(:City)');
+});
+
+test('does not automatically open completion panel for expressions after snippet trigger char', async ({
+  page,
+  mount,
+}) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETURN (1)');
+
+  // expect the panel to not show up
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  // unless manually triggered
+  await textField.press('Control+ ');
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+});

package/src/e2e_tests/syntaxHighlighting.spec.tsx

@@ -0,0 +1,200 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { darkThemeConstants, lightThemeConstants } from '../themes';
+import { CypherEditorPage } from './e2eUtils';
+
+test('light theme highlighting', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `
+  MATCH (variable :Label)-[:REL_TYPE]->() 
+WHERE variable.property = "String" 
+    OR namespaced.function() = false
+    // comment
+    OR $parameter > 1234 
+RETURN variable;`;
+
+  await mount(<CypherEditor value={query} theme="light" />);
+
+  const keywordcolors = await Promise.all(
+    ['MATCH', 'WHERE', 'RETURN'].map((kw) =>
+      editorPage.getHexColorOfLocator(page.getByText(kw)),
+    ),
+  );
+  keywordcolors.every((kw) =>
+    expect(kw).toEqual(
+      lightThemeConstants.highlightStyles.keyword.toLowerCase(),
+    ),
+  );
+
+  const labelReltype = await Promise.all(
+    ['Label', 'REL_TYPE'].map((kw) =>
+      editorPage.getHexColorOfLocator(page.getByText(kw)),
+    ),
+  );
+  labelReltype.every((kw) =>
+    expect(kw).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase()),
+  );
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('parameter')),
+  ).toEqual(lightThemeConstants.highlightStyles.paramValue.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('property')),
+  ).toEqual(lightThemeConstants.highlightStyles.property.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('false')),
+  ).toEqual(lightThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('String')),
+  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('comment')),
+  ).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(
+      page.getByText('1234', { exact: true }),
+    ),
+  ).toEqual(lightThemeConstants.highlightStyles.numberLiteral.toLowerCase());
+
+  expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
+});
+
+test('dark theme highlighting', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `
+  MATCH (variable :Label)-[:REL_TYPE]->() 
+WHERE variable.property = "String" 
+    OR namespaced.function() = false
+    // comment
+    OR $parameter > 1234 
+RETURN variable;`;
+
+  await mount(<CypherEditor value={query} theme="dark" />);
+
+  const keywordcolors = await Promise.all(
+    ['MATCH', 'WHERE', 'RETURN'].map((kw) =>
+      editorPage.getHexColorOfLocator(page.getByText(kw)),
+    ),
+  );
+  keywordcolors.every((kw) =>
+    expect(kw).toEqual(
+      darkThemeConstants.highlightStyles.keyword.toLowerCase(),
+    ),
+  );
+
+  const labelReltype = await Promise.all(
+    ['Label', 'REL_TYPE'].map((kw) =>
+      editorPage.getHexColorOfLocator(page.getByText(kw)),
+    ),
+  );
+  labelReltype.every((kw) =>
+    expect(kw).toEqual(darkThemeConstants.highlightStyles.label.toLowerCase()),
+  );
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('parameter')),
+  ).toEqual(darkThemeConstants.highlightStyles.paramValue.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('property')),
+  ).toEqual(darkThemeConstants.highlightStyles.property.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('false')),
+  ).toEqual(darkThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('String')),
+  ).toEqual(darkThemeConstants.highlightStyles.stringLiteral.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('comment')),
+  ).toEqual(darkThemeConstants.highlightStyles.comment.toLowerCase());
+
+  expect(
+    await editorPage.getHexColorOfLocator(
+      page.getByText('1234', { exact: true }),
+    ),
+  ).toEqual(darkThemeConstants.highlightStyles.numberLiteral.toLowerCase());
+
+  expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
+});
+
+test('can live switch theme ', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const component = await mount(<CypherEditor theme="light" value="RETURN" />);
+
+  expect(
+    await editorPage.getHexColorOfLocator(
+      page.getByText('RETURN', { exact: true }),
+    ),
+  ).toEqual(lightThemeConstants.highlightStyles.keyword.toLowerCase());
+
+  await component.update(<CypherEditor theme="dark" value="RETURN" />);
+
+  expect(
+    await editorPage.getHexColorOfLocator(
+      page.getByText('RETURN', { exact: true }),
+    ),
+  ).toEqual(darkThemeConstants.highlightStyles.keyword.toLowerCase());
+});
+
+test('respects prop to allow overriding bkg color', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  await mount(
+    <CypherEditor theme="light" value="text" overrideThemeBackgroundColor />,
+  );
+
+  expect(await editorPage.editorBackgroundIsUnset()).toEqual(true);
+});
+
+test('highlights multiline string literal correctly', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `
+RETURN "
+multilinestring";`;
+
+  await mount(<CypherEditor theme="light" value={query} />);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('multilinestring')),
+  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
+});
+
+test('highlights multiline label correctly', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `
+MATCH (v:\`
+
+Label\`)
+`;
+
+  await mount(<CypherEditor theme="light" value={query} />);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('Label')),
+  ).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase());
+});
+
+test('highlights multiline comment correctly', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `
+/*
+
+comment
+*/";`;
+
+  await mount(<CypherEditor theme="light" value={query} />);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('comment')),
+  ).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
+});

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -0,0 +1,243 @@
+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 } });
+test('Prop lint set to false disables syntax validation', async ({
+  page,
+  mount,
+}) => {
+  const query = 'METCH (n) RETURN n';
+
+  await mount(<CypherEditor value={query} lint={false} />);
+
+  await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Can turn linting back on', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'METCH (n) RETURN n';
+
+  const component = await mount(<CypherEditor value={query} lint={false} />);
+
+  await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
+    timeout: 10000,
+  });
+
+  await component.update(<CypherEditor value={query} lint={true} />);
+
+  await editorPage.getEditor().fill('METCH (n) RETURN n');
+
+  await editorPage.checkErrorMessage(
+    'METCH',
+    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+  );
+});
+
+test('Syntactic errors are surfaced', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'METCH (n) RETURN n';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'METCH',
+    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+  );
+});
+
+test('Does not trigger syntax errors for backticked parameters in parameter creation', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const query = ':param x => "abc"';
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkNoNotificationMessage('error');
+});
+
+test('Errors for undefined labels are surfaced', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n: Person) RETURN n';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={{ labels: ['Movie'], relationshipTypes: [] }}
+    />,
+  );
+
+  await editorPage.checkWarningMessage(
+    'Person',
+    "Label Person is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application",
+  );
+});
+
+test('Errors for multiline undefined labels are highlighted correctly', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `MATCH (n:\`Foo
+    Bar\`) RETURN n`;
+  const expectedMsg = `Label \`Foo
+    Bar\` is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application`;
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={{ labels: ['Movie'], relationshipTypes: [] }}
+    />,
+  );
+
+  await editorPage.checkWarningMessage('`Foo', expectedMsg);
+  await editorPage.checkWarningMessage('Bar`', expectedMsg);
+});
+
+test('Semantic errors work in firefox', async ({
+  browserName,
+  page,
+  mount,
+}) => {
+  test.skip(browserName !== 'firefox');
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n:OperationalPoint)--(m:OperationalPoint) RETURN s,m,n';
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+
+  await editorPage.checkErrorMessage('s,m,n', 'Variable `s` not defined');
+});
+
+test('Semantic errors are surfaced when there are no syntactic errors', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n) RETURN m';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage('m', 'Variable `m` not defined');
+});
+
+test('Semantic errors are correctly accumulated', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'CALL { MATCH (n) } IN TRANSACTIONS OF -1 ROWS';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'MATCH (n)',
+    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
+  );
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+  );
+});
+
+test('Multiline errors are correctly placed', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL { 
+    MATCH (n) 
+  } IN TRANSACTIONS 
+  OF -1 ROWS`;
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'MATCH (n)',
+    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD)',
+  );
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+  );
+});
+
+test('Validation errors are correctly overlapped', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL { MATCH (n)
+    RETURN n
+  } IN TRANSACTIONS 
+  OF -1 ROWS`;
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    'Query cannot conclude with CALL (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
+  );
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+  );
+});
+
+test('Strikethroughs are shown for deprecated functions', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `RETURN id()`;
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+  await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
+});
+
+test('Strikethroughs are shown for deprecated procedures', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL apoc.create.uuids()`;
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+
+  await editorPage.checkWarningMessage(
+    'apoc.create.uuids',
+    'Procedure apoc.create.uuids is deprecated.',
+  );
+});
+
+test('Syntax validation depends on the Cypher version', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={testData.mockSchema}
+      featureFlags={{ cypher25: true }}
+    />,
+  );
+
+  const editorPage = new CypherEditorPage(page);
+  const textField = page.getByRole('textbox');
+  await textField.fill('CYPHER 5 CALL apoc.create.uuids(5)');
+
+  await editorPage.checkWarningMessage(
+    'apoc.create.uuids',
+    'Procedure apoc.create.uuids is deprecated.',
+  );
+
+  await textField.fill('CYPHER 25 CALL apoc.create.uuids(5)');
+
+  await editorPage.checkErrorMessage(
+    'apoc.create.uuids',
+    'Procedure apoc.create.uuids is not present in the database.',
+  );
+});