@neo4j-cypher/react-codemirror 2.0.0-alpha.0 → 2.0.0-canary-e8a1279

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -0,0 +1,309 @@
+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[];
+};
+
+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: 2000,
+      });
+    }),
+  );
+
+  const excluded = Promise.all(
+    excludes.map((text) => {
+      return expect(tooltip).not.toContainText(text, {
+        timeout: 2000,
+      });
+    }),
+  );
+
+  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: 2000,
+  });
+});
+
+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: 2000,
+  });
+});
+
+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: [
+      'nodes :: 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 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: [
+      'nodes :: 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 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: [
+      '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 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: [
+      '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 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: 2000,
+  });
+});
+
+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: 2000,
+  });
+});

package/src/e2e_tests/snippets.spec.tsx

@@ -0,0 +1,94 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+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');
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  // tab out of the snippet
+  await textField.press('Tab');
+
+  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,198 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { darkThemeConstants, lightThemeConstants } from '../themes';
+import { CypherEditorPage } from './e2eUtils';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+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),
+  );
+
+  const labelReltype = await Promise.all(
+    ['Label', 'REL_TYPE'].map((kw) =>
+      editorPage.getHexColorOfLocator(page.getByText(kw)),
+    ),
+  );
+  labelReltype.every((kw) =>
+    expect(kw).toEqual(lightThemeConstants.highlightStyles.label),
+  );
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('parameter')),
+  ).toEqual(lightThemeConstants.highlightStyles.paramValue);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('property')),
+  ).toEqual(lightThemeConstants.highlightStyles.property);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('false')),
+  ).toEqual(lightThemeConstants.highlightStyles.booleanLiteral);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('String')),
+  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('comment')),
+  ).toEqual(lightThemeConstants.highlightStyles.comment);
+
+  expect(
+    await editorPage.getHexColorOfLocator(
+      page.getByText('1234', { exact: true }),
+    ),
+  ).toEqual(lightThemeConstants.highlightStyles.numberLiteral);
+
+  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),
+  );
+
+  const labelReltype = await Promise.all(
+    ['Label', 'REL_TYPE'].map((kw) =>
+      editorPage.getHexColorOfLocator(page.getByText(kw)),
+    ),
+  );
+  labelReltype.every((kw) =>
+    expect(kw).toEqual(darkThemeConstants.highlightStyles.label),
+  );
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('parameter')),
+  ).toEqual(darkThemeConstants.highlightStyles.paramValue);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('property')),
+  ).toEqual(darkThemeConstants.highlightStyles.property);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('false')),
+  ).toEqual(darkThemeConstants.highlightStyles.booleanLiteral);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('String')),
+  ).toEqual(darkThemeConstants.highlightStyles.stringLiteral);
+
+  expect(
+    await editorPage.getHexColorOfLocator(page.getByText('comment')),
+  ).toEqual(darkThemeConstants.highlightStyles.comment);
+
+  expect(
+    await editorPage.getHexColorOfLocator(
+      page.getByText('1234', { exact: true }),
+    ),
+  ).toEqual(darkThemeConstants.highlightStyles.numberLiteral);
+
+  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);
+
+  await component.update(<CypherEditor theme="dark" value="RETURN" />);
+
+  expect(
+    await editorPage.getHexColorOfLocator(
+      page.getByText('RETURN', { exact: true }),
+    ),
+  ).toEqual(darkThemeConstants.highlightStyles.keyword);
+});
+
+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);
+});
+
+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);
+});
+
+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);
+});