From 1b84570b24dc6f3b336cf47680135479228dffe0 Mon Sep 17 00:00:00 2001 From: Basit Chonka Date: Wed, 2 Jul 2025 16:03:44 +0200 Subject: [PATCH 1/2] add inline editor tests --- package-lock.json | 2 + packages/compass-editor/package.json | 1 + packages/compass-editor/src/editor.spec.tsx | 51 +++++++++++++++++++++ 3 files changed, 54 insertions(+) create mode 100644 packages/compass-editor/src/editor.spec.tsx diff --git a/package-lock.json b/package-lock.json index d3f2218d3f2..0496d3a9b61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -44966,6 +44966,7 @@ "@mongodb-js/eslint-config-compass": "^1.4.0", "@mongodb-js/mocha-config-compass": "^1.6.8", "@mongodb-js/prettier-config-compass": "^1.2.8", + "@mongodb-js/testing-library-compass": "^1.3.3", "@mongodb-js/tsconfig-compass": "^1.2.8", "@types/chai": "^4.2.21", "@types/mocha": "^9.0.0", @@ -57094,6 +57095,7 @@ "@mongodb-js/mocha-config-compass": "^1.6.8", "@mongodb-js/mongodb-constants": "^0.12.0", "@mongodb-js/prettier-config-compass": "^1.2.8", + "@mongodb-js/testing-library-compass": "^1.3.3", "@mongodb-js/tsconfig-compass": "^1.2.8", "@types/chai": "^4.2.21", "@types/mocha": "^9.0.0", diff --git a/packages/compass-editor/package.json b/packages/compass-editor/package.json index 0f6e920aff5..3d26791beb1 100644 --- a/packages/compass-editor/package.json +++ b/packages/compass-editor/package.json @@ -49,6 +49,7 @@ "@mongodb-js/eslint-config-compass": "^1.4.0", "@mongodb-js/mocha-config-compass": "^1.6.8", "@mongodb-js/prettier-config-compass": "^1.2.8", + "@mongodb-js/testing-library-compass": "^1.3.3", "@mongodb-js/tsconfig-compass": "^1.2.8", "@types/chai": "^4.2.21", "@types/mocha": "^9.0.0", diff --git a/packages/compass-editor/src/editor.spec.tsx b/packages/compass-editor/src/editor.spec.tsx new file mode 100644 index 00000000000..ffeb5373a76 --- /dev/null +++ b/packages/compass-editor/src/editor.spec.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { render, userEvent } from '@mongodb-js/testing-library-compass'; +import { CodemirrorInlineEditor } from './editor'; +import type { EditorRef } from './types'; +import { expect } from 'chai'; + +function renderEditor(text: string) { + const editorRef = React.createRef(); + render(); + return editorRef; +} + +describe('Editor', function () { + context('CodemirrorInlineEditor', function () { + let editorRef: React.RefObject; + beforeEach(function () { + editorRef = renderEditor('{}'); + + const lines = document.querySelectorAll('.cm-line'); + expect(lines.length).to.equal(1); + expect(lines[0].textContent).to.equal('{}'); + editorRef.current?.focus(); + }); + + it('renders multi lines on {enter}', function () { + userEvent.keyboard('{arrowright}'); + userEvent.keyboard('{enter}'); + + const lines = document.querySelectorAll('.cm-line'); + // On enter, the editor is split into three lines: + // 1. The opening brace + // 2. An empty line - to allow for new content + // 3. The closing brace + expect(lines.length).to.equal(3); + expect(lines[0].textContent).to.equal('{'); + expect(lines[1].textContent?.trim()).to.equal(''); + expect(lines[2].textContent).to.equal('}'); + }); + + it('renders multi lines on {shift}+{enter}', function () { + userEvent.keyboard('{arrowright}'); + userEvent.keyboard('{shift}{enter}'); + + const lines = document.querySelectorAll('.cm-line'); + expect(lines.length).to.equal(3); + expect(lines[0].textContent).to.equal('{'); + expect(lines[1].textContent?.trim()).to.equal(''); + expect(lines[2].textContent).to.equal('}'); + }); + }); +}); From c4593fb0051651ec15a957936463ba1dcd24d198 Mon Sep 17 00:00:00 2001 From: Basit Chonka Date: Wed, 2 Jul 2025 16:22:37 +0200 Subject: [PATCH 2/2] cr fixes --- packages/compass-editor/src/editor.spec.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/compass-editor/src/editor.spec.tsx b/packages/compass-editor/src/editor.spec.tsx index ffeb5373a76..f6000e7aff3 100644 --- a/packages/compass-editor/src/editor.spec.tsx +++ b/packages/compass-editor/src/editor.spec.tsx @@ -4,7 +4,7 @@ import { CodemirrorInlineEditor } from './editor'; import type { EditorRef } from './types'; import { expect } from 'chai'; -function renderEditor(text: string) { +function renderCodemirrorInlineEditor(text: string) { const editorRef = React.createRef(); render(); return editorRef; @@ -14,7 +14,7 @@ describe('Editor', function () { context('CodemirrorInlineEditor', function () { let editorRef: React.RefObject; beforeEach(function () { - editorRef = renderEditor('{}'); + editorRef = renderCodemirrorInlineEditor('{}'); const lines = document.querySelectorAll('.cm-line'); expect(lines.length).to.equal(1); @@ -35,6 +35,11 @@ describe('Editor', function () { expect(lines[0].textContent).to.equal('{'); expect(lines[1].textContent?.trim()).to.equal(''); expect(lines[2].textContent).to.equal('}'); + + // 2 new line characters as it it allows for new content to be added + // between the opening and closing braces. and it also correctly + // indents the cursor position with (2) spaces. + expect(editorRef.current?.editorContents).to.equal('{\n \n}'); }); it('renders multi lines on {shift}+{enter}', function () { @@ -46,6 +51,8 @@ describe('Editor', function () { expect(lines[0].textContent).to.equal('{'); expect(lines[1].textContent?.trim()).to.equal(''); expect(lines[2].textContent).to.equal('}'); + + expect(editorRef.current?.editorContents).to.equal('{\n \n}'); }); }); });