crumbs/tests/e2e/notes-crud.spec.ts

import { test, expect, noteCard } from './helpers/fixtures.js';

test.describe('Notes CRUD', () => {
	test('Scenario: New note appears in the notes list after creation', async ({ authenticatedPage: page }) => {
		// When the user creates a note titled "My First Note" with content "Hello world!"
		await page.getByTestId('new-note-btn').click();
		await page.getByTestId('note-title-input').fill('My First Note');
		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
		await editor.click();
		await editor.pressSequentially('Hello world!');
		await page.getByTestId('close-editor-btn').click();

		// Then the note is visible in the notes list
		await expect(noteCard(page, 'My First Note')).toBeVisible();
	});

	test('Scenario: Edited note title is reflected in the notes list', async ({ authenticatedPage: page }) => {
		// Given a note titled "Original Title" exists
		await page.getByTestId('new-note-btn').click();
		await page.getByTestId('note-title-input').fill('Original Title');
		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');
		await editor.click();
		await editor.pressSequentially('Original content');
		await page.getByTestId('close-editor-btn').click();

		// When the user changes the title to "Updated Title"
		await noteCard(page, 'Original Title').click();
		await page.getByTestId('note-title-input').clear();
		await page.getByTestId('note-title-input').fill('Updated Title');
		await page.getByTestId('close-editor-btn').click();

		// Then the updated title is displayed
		await expect(page.getByText('Updated Title')).toBeVisible();
	});

	test('Scenario: Trashed note disappears from the main view', async ({ authenticatedPage: page }) => {
		// Given a note titled "Delete Me" exists
		await page.getByTestId('new-note-btn').click();
		await page.getByTestId('note-title-input').fill('Delete Me');
		await page.getByTestId('close-editor-btn').click();

		// When the user trashes the note
		const card = noteCard(page, 'Delete Me');
		await card.hover();
		await card.getByTestId('trash-btn').click({ force: true });

		// Then the note is no longer visible
		await expect(page.getByText('Delete Me')).not.toBeVisible();
	});

	test('Scenario: Bold formatting applies to selected text in the editor', async ({ authenticatedPage: page }) => {
		// Given the user is editing a note with content "hello world"
		await page.getByTestId('new-note-btn').click();
		await page.getByTestId('markdown-toggle').click();
		await page.getByTestId('note-content-input').fill('hello world');
		await page.getByTestId('markdown-toggle').click();
		const editor = page.getByTestId('tiptap-editor').locator('.tiptap');

		// When the user selects "world" and applies bold formatting
		await page.getByTestId('tiptap-editor').evaluate((el) => {
			const ed = (el as any).__tiptapEditor;
			if (!ed) return;
			ed.chain().focus().setTextSelection({ from: 7, to: 12 }).toggleBold().run();
		});

		// Then the selected text appears bold in the editor
		await expect(editor.locator('strong')).toHaveText('world');
	});
});