@neo4j-cypher/react-codemirror 2.0.0-alpha.0 → 2.0.0-next.1

package/src/e2e_tests/performance-test.spec.tsx

@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2e-utils';
+import { largeQuery, mockSchema } from './mock-data';
+
+test.use({ viewport: { width: 1000, height: 500 } });
+
+test('performance test session ', async ({ mount, page }) => {
+  test.setTimeout(30 * 1000);
+  const editorPage = new CypherEditorPage(page);
+  const component = await mount(
+    <CypherEditor prompt="neo4j>" theme="dark" lint schema={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={largeQuery} schema={mockSchema} />,
+  );
+  await component.update(<CypherEditor value="" schema={mockSchema} />);
+
+  await component.update(
+    <CypherEditor value={largeQuery} schema={mockSchema} />,
+  );
+  await component.update(<CypherEditor value="" />);
+
+  await component.update(
+    <CypherEditor value={largeQuery} schema={mockSchema} />,
+  );
+  await component.update(<CypherEditor value="" schema={mockSchema} />);
+
+  await component.update(
+    <CypherEditor value={largeQuery} schema={mockSchema} />,
+  );
+  await component.update(<CypherEditor value="" schema={mockSchema} />);
+
+  await component.update(
+    <CypherEditor value={largeQuery} schema={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',
+    'Unexpected token. Did you mean RETURN?',
+  );
+
+  await editorPage
+    .getEditor()
+    .pressSequentially('veryveryveryverylongvariable');
+});

package/src/e2e_tests/sanity-checks.spec.tsx

@@ -0,0 +1,87 @@
+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;" />);
+
+  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 editors 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('RETURN 12');
+
+  expect(editorValueCopy).toBe('RETURN 12');
+
+  await page.keyboard.type('34');
+
+  expect(editorValueCopy).toBe('RETURN 1234');
+});
+
+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');
+});
+
+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');
+});

package/src/e2e_tests/syntax-highlighting.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 './e2e-utils';
+
+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);
+});

package/src/e2e_tests/syntax-validation.spec.tsx

@@ -0,0 +1,157 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2e-utils';
+
+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: 2000,
+  });
+});
+
+// TODO
+test.skip('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: 2000,
+  });
+
+  await component.update(<CypherEditor value={query} lint />);
+
+  await editorPage.getEditor().fill('METCH (n) RETURN n');
+
+  await editorPage.checkErrorMessage(
+    'METCH',
+    'Unrecognized keyword. Did you mean MATCH?',
+  );
+});
+
+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',
+    'Unrecognized keyword. Did you mean MATCH?',
+  );
+});
+
+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 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, 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, 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, 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",
+  );
+});