208 add tests for a richeditor

packages/app/package.json

@@ -53,6 +53,7 @@
 		"@swc/core": "^1.15.11",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/bytes": "^3.1.5",
 		"@types/file-saver": "^2.0.7",
 		"@types/humanize-duration": "^3.27.4",

packages/app/scripts/vitest.setup.ts

@@ -3,4 +3,27 @@ const isDOMLikeEnv = typeof window !== 'undefined' && typeof document !== 'undef
 if (isDOMLikeEnv) {
 	require('@testing-library/jest-dom');
 	require('blob-polyfill');
+
+	// Mock this function because jsdom does not implement the layout API; getClientRects returns an object without the `item` method,
+	// causing HighlightingPlugin to crash
+	Element.prototype.getClientRects = () =>
+		({
+			item: () => null,
+			length: 0,
+			[Symbol.iterator]: function* () {},
+		}) as unknown as DOMRectList;
+
+	// Mock this function because the Rich Editor uses it to calculate cursor and selection positions.
+	// Tests may fail without it
+	Range.prototype.getBoundingClientRect = () => ({
+		width: 0,
+		height: 0,
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		x: 0,
+		y: 0,
+		toJSON: () => {},
+	});
 }

packages/app/src/core/storage/interop/export/NotesExporter.test.ts

@@ -107,9 +107,11 @@ test('Export all notes and attached files', async () => {
 	const filesList = exportTarget.list();
 	await expect(
 		filesList.then((paths) =>
-			paths.map((path) =>
-				path.replaceAll(/[a-z\d]+(-[a-z\d]+){4}/g, '[REDACTED-UUID]'),
-			),
+			paths
+				.map((path) =>
+					path.replaceAll(/[a-z\d]+(-[a-z\d]+){4}/g, '[REDACTED-UUID]'),
+				)
+				.sort(),
 		),
 	).resolves.toMatchSnapshot('Files list');
 
@@ -129,7 +131,7 @@ test('Export all notes and attached files', async () => {
 					.replace(/updated: \d+/, `updated: ${200_000 + index}`)
 					.replaceAll(/[a-z\d]+(-[a-z\d]+){4}/g, '[REDACTED-UUID]');
 			}),
-		),
+		).then((notes) => notes.sort()),
 	).resolves.toMatchSnapshot('Notes texts');
 });
 
@@ -218,9 +220,11 @@ test('Export all notes and attached files with custom file names', async () => {
 	const filesList = exportTarget.list();
 	await expect(
 		filesList.then((paths) =>
-			paths.map((path) =>
-				path.replaceAll(/[a-z\d]+(-[a-z\d]+){4}/g, '[REDACTED-UUID]'),
-			),
+			paths
+				.map((path) =>
+					path.replaceAll(/[a-z\d]+(-[a-z\d]+){4}/g, '[REDACTED-UUID]'),
+				)
+				.sort(),
 		),
 	).resolves.toMatchSnapshot('Files list');
 
@@ -240,7 +244,7 @@ test('Export all notes and attached files with custom file names', async () => {
 					.replace(/updated: \d+/, `updated: ${200_000 + index}`)
 					.replaceAll(/[a-z\d]+(-[a-z\d]+){4}/g, '[REDACTED-UUID]');
 			}),
-		),
+		).then((notes) => notes.sort()),
 	).resolves.toMatchSnapshot('Notes texts');
 });
 

packages/app/src/core/storage/interop/export/__snapshots__/NotesExporter.test.ts.snap

@@ -5,9 +5,9 @@ exports[`Export all notes and attached files > Files list 1`] = `
   "/[REDACTED-UUID].md",
   "/[REDACTED-UUID].md",
   "/[REDACTED-UUID].md",
-  "/_resources/[REDACTED-UUID]-test.txt",
   "/[REDACTED-UUID].md",
   "/[REDACTED-UUID].md",
+  "/_resources/[REDACTED-UUID]-test.txt",
 ]
 `;
 
@@ -25,21 +25,11 @@ tags:
 ---
 
 Hello world!
-",
-  "---
-title: Note 5
-created: 100001
-updated: 200001
-tags: []
-
----
-
-Note with [invalid attachment](res://[REDACTED-UUID]) and mention for [invalid note](note://[REDACTED-UUID])
 ",
   "---
 title: Note 2
-created: 100002
-updated: 200002
+created: 100003
+updated: 200003
 tags: []
 
 ---
@@ -48,8 +38,8 @@ Mention for [Note 1](./[REDACTED-UUID].md)
 ",
   "---
 title: Note 3
-created: 100003
-updated: 200003
+created: 100002
+updated: 200002
 tags: []
 
 ---
@@ -65,6 +55,16 @@ tags: []
 ---
 
 Note with [attachment](./_resources/[REDACTED-UUID]-test.txt) and mention for [Note 1](./[REDACTED-UUID].md)
+",
+  "---
+title: Note 5
+created: 100001
+updated: 200001
+tags: []
+
+---
+
+Note with [invalid attachment](res://[REDACTED-UUID]) and mention for [invalid note](note://[REDACTED-UUID])
 ",
 ]
 `;
@@ -106,12 +106,12 @@ exports[`Export all notes and attached files > onProcessed hook calls 1`] = `
 
 exports[`Export all notes and attached files with custom file names > Files list 1`] = `
 [
-  "/notes/bar/[REDACTED-UUID]-Note 1.md",
-  "/notes/[REDACTED-UUID]-Note 5.md",
-  "/notes/[REDACTED-UUID]-Note 2.md",
   "/files/[REDACTED-UUID]-test.txt",
+  "/notes/[REDACTED-UUID]-Note 2.md",
   "/notes/[REDACTED-UUID]-Note 3.md",
   "/notes/[REDACTED-UUID]-Note 4.md",
+  "/notes/[REDACTED-UUID]-Note 5.md",
+  "/notes/bar/[REDACTED-UUID]-Note 1.md",
 ]
 `;
 
@@ -129,21 +129,11 @@ tags:
 ---
 
 Hello world!
-",
-  "---
-title: Note 5
-created: 100001
-updated: 200001
-tags: []
-
----
-
-Note with [invalid attachment](res://[REDACTED-UUID]) and mention for [invalid note](note://[REDACTED-UUID])
 ",
   "---
 title: Note 2
-created: 100002
-updated: 200002
+created: 100003
+updated: 200003
 tags: []
 
 ---
@@ -152,8 +142,8 @@ Mention for [Note 1](<./bar/[REDACTED-UUID]-Note 1.md>)
 ",
   "---
 title: Note 3
-created: 100003
-updated: 200003
+created: 100002
+updated: 200002
 tags: []
 
 ---
@@ -169,6 +159,16 @@ tags: []
 ---
 
 Note with [attachment](../files/[REDACTED-UUID]-test.txt) and mention for [Note 1](<./bar/[REDACTED-UUID]-Note 1.md>)
+",
+  "---
+title: Note 5
+created: 100001
+updated: 200001
+tags: []
+
+---
+
+Note with [invalid attachment](res://[REDACTED-UUID]) and mention for [invalid note](note://[REDACTED-UUID])
 ",
 ]
 `;

packages/app/src/features/NoteEditor/__tests__/behavior.dom.test.ts

@@ -0,0 +1,93 @@
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { renderRichEditor } from './utils/renderRichEditor';
+import { selectContent } from './utils/utils';
+
+test('Editor updates when value changes', async () => {
+	const editor = await renderRichEditor({ value: `# Big text` });
+
+	expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Big text');
+
+	// Run component rerender with new value
+	await editor.rerender({ value: `### Not so big text` });
+
+	expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent(
+		'Not so big text',
+	);
+
+	// The old header was removed
+	expect(screen.queryByRole('heading', { level: 1 })).not.toBeInTheDocument();
+});
+
+test('Editor is not editable in readonly mode', async () => {
+	const user = userEvent.setup();
+	await renderRichEditor({
+		value: '# Hello',
+		isReadOnly: true,
+	});
+
+	expect(screen.getByRole('textbox')).toHaveAttribute('contenteditable', 'false');
+
+	// Cannot enter text
+	await user.click(screen.getByRole('heading'));
+	await user.keyboard('Some text');
+
+	expect(screen.getByRole('textbox')).toHaveTextContent('Hello');
+	expect(screen.getByRole('textbox')).not.toHaveTextContent('Some text');
+});
+
+test('Formatting text in one editor does not affect the other editor', async () => {
+	const editorA = await renderRichEditor({ value: 'Big text' });
+	const editorB = await renderRichEditor({ value: 'Small text' });
+
+	const textBoxes = screen.getAllByRole('textbox');
+	expect(textBoxes).toHaveLength(2);
+
+	// initial state
+	expect(within(textBoxes[0]).queryByRole('paragraph')).toHaveTextContent('Big text');
+	expect(within(textBoxes[1]).queryByRole('paragraph')).toHaveTextContent('Small text');
+
+	// apply italic in editorA
+	selectContent(textBoxes[0], 'Big text');
+	await editorA.format('italic');
+
+	expect(within(textBoxes[0]).getByRole('emphasis')).toHaveTextContent('Big text');
+	expect(within(textBoxes[1]).queryByRole('emphasis')).not.toBeInTheDocument();
+
+	// apply strikethrough in editorB
+	selectContent(textBoxes[1], 'Small text');
+	await editorB.format('strikethrough');
+
+	expect(within(textBoxes[1]).getByRole('deletion')).toHaveTextContent('Small text');
+	expect(within(textBoxes[1]).queryByRole('emphasis')).not.toBeInTheDocument();
+
+	expect(within(textBoxes[0]).getByRole('emphasis')).toHaveTextContent('Big text');
+	expect(within(textBoxes[0]).queryByRole('deletion')).not.toBeInTheDocument();
+});
+
+test('ReadOnly editor is not editable while the other editor remains editable', async () => {
+	const user = userEvent.setup();
+	await renderRichEditor({ value: 'Editable text' });
+	await renderRichEditor({ value: 'ReadOnly text', isReadOnly: true });
+
+	const textBoxes = screen.getAllByRole('textbox');
+	expect(textBoxes).toHaveLength(2);
+
+	expect(textBoxes[0]).toHaveAttribute('contenteditable', 'true');
+	expect(textBoxes[1]).toHaveAttribute('contenteditable', 'false');
+
+	// editorA is editable — editing works
+	await user.click(within(textBoxes[0]).getByText('Editable text'));
+	await user.keyboard('New text ');
+
+	expect(textBoxes[0]).toHaveTextContent('New text Editable text');
+
+	// editorB is readOnly — editing must be ignored
+	await user.click(within(textBoxes[1]).getByText('ReadOnly text'));
+	await user.keyboard('Some text');
+
+	expect(textBoxes[1]).toHaveTextContent('ReadOnly text');
+	expect(textBoxes[1]).not.toHaveTextContent('Some text');
+	expect(textBoxes[1]).toHaveAttribute('contenteditable', 'false');
+});