@neo4j-cypher/react-codemirror 2.0.0-next.3 → 2.0.0-next.30

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -0,0 +1,444 @@
+/* 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',
+            },
+          },
+        },
+      }}
+    />,
+  );
+
+  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],
+  });
+});

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/{syntax-highlighting.spec.tsx → syntaxHighlighting.spec.tsx}

@@ -1,9 +1,7 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 import { darkThemeConstants, lightThemeConstants } from '../themes';
-import { CypherEditorPage } from './e2e-utils';
-
-test.use({ viewport: { width: 500, height: 500 } });
+import { CypherEditorPage } from './e2eUtils';
 
 test('light theme highlighting', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
@@ -23,7 +21,9 @@ RETURN variable;`;
     ),
   );
   keywordcolors.every((kw) =>
-    expect(kw).toEqual(lightThemeConstants.highlightStyles.keyword),
+    expect(kw).toEqual(
+      lightThemeConstants.highlightStyles.keyword.toLowerCase(),
+    ),
   );
 
   const labelReltype = await Promise.all(
@@ -32,34 +32,34 @@ RETURN variable;`;
     ),
   );
   labelReltype.every((kw) =>
-    expect(kw).toEqual(lightThemeConstants.highlightStyles.label),
+    expect(kw).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase()),
   );
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('parameter')),
-  ).toEqual(lightThemeConstants.highlightStyles.paramValue);
+  ).toEqual(lightThemeConstants.highlightStyles.paramValue.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('property')),
-  ).toEqual(lightThemeConstants.highlightStyles.property);
+  ).toEqual(lightThemeConstants.highlightStyles.property.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('false')),
-  ).toEqual(lightThemeConstants.highlightStyles.booleanLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('String')),
-  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('comment')),
-  ).toEqual(lightThemeConstants.highlightStyles.comment);
+  ).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(
       page.getByText('1234', { exact: true }),
     ),
-  ).toEqual(lightThemeConstants.highlightStyles.numberLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.numberLiteral.toLowerCase());
 
   expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
 });
@@ -82,7 +82,9 @@ RETURN variable;`;
     ),
   );
   keywordcolors.every((kw) =>
-    expect(kw).toEqual(darkThemeConstants.highlightStyles.keyword),
+    expect(kw).toEqual(
+      darkThemeConstants.highlightStyles.keyword.toLowerCase(),
+    ),
   );
 
   const labelReltype = await Promise.all(
@@ -91,34 +93,34 @@ RETURN variable;`;
     ),
   );
   labelReltype.every((kw) =>
-    expect(kw).toEqual(darkThemeConstants.highlightStyles.label),
+    expect(kw).toEqual(darkThemeConstants.highlightStyles.label.toLowerCase()),
   );
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('parameter')),
-  ).toEqual(darkThemeConstants.highlightStyles.paramValue);
+  ).toEqual(darkThemeConstants.highlightStyles.paramValue.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('property')),
-  ).toEqual(darkThemeConstants.highlightStyles.property);
+  ).toEqual(darkThemeConstants.highlightStyles.property.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('false')),
-  ).toEqual(darkThemeConstants.highlightStyles.booleanLiteral);
+  ).toEqual(darkThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('String')),
-  ).toEqual(darkThemeConstants.highlightStyles.stringLiteral);
+  ).toEqual(darkThemeConstants.highlightStyles.stringLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('comment')),
-  ).toEqual(darkThemeConstants.highlightStyles.comment);
+  ).toEqual(darkThemeConstants.highlightStyles.comment.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(
       page.getByText('1234', { exact: true }),
     ),
-  ).toEqual(darkThemeConstants.highlightStyles.numberLiteral);
+  ).toEqual(darkThemeConstants.highlightStyles.numberLiteral.toLowerCase());
 
   expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
 });
@@ -131,7 +133,7 @@ test('can live switch theme ', async ({ page, mount }) => {
     await editorPage.getHexColorOfLocator(
       page.getByText('RETURN', { exact: true }),
     ),
-  ).toEqual(lightThemeConstants.highlightStyles.keyword);
+  ).toEqual(lightThemeConstants.highlightStyles.keyword.toLowerCase());
 
   await component.update(<CypherEditor theme="dark" value="RETURN" />);
 
@@ -139,7 +141,7 @@ test('can live switch theme ', async ({ page, mount }) => {
     await editorPage.getHexColorOfLocator(
       page.getByText('RETURN', { exact: true }),
     ),
-  ).toEqual(darkThemeConstants.highlightStyles.keyword);
+  ).toEqual(darkThemeConstants.highlightStyles.keyword.toLowerCase());
 });
 
 test('respects prop to allow overriding bkg color', async ({ page, mount }) => {
@@ -164,7 +166,7 @@ multilinestring";`;
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('multilinestring')),
-  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
 });
 
 test('highlights multiline label correctly', async ({ page, mount }) => {
@@ -179,7 +181,7 @@ Label\`)
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('Label')),
-  ).toEqual(lightThemeConstants.highlightStyles.label);
+  ).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase());
 });
 
 test('highlights multiline comment correctly', async ({ page, mount }) => {
@@ -194,5 +196,5 @@ comment
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('comment')),
-  ).toEqual(lightThemeConstants.highlightStyles.comment);
+  ).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
 });