refactor(editor): Move test files alongside tested files (no-changelog) (#11504)

2025-12-19 11:01:15 +00:00 · 2024-11-01 18:01:13 +02:00
parent d0dce57c14
commit 63efefcd24
132 changed files with 153 additions and 156 deletions
--- a/packages/editor-ui/src/components/HtmlEditor.test.ts
+++ b/packages/editor-ui/src/components/HtmlEditor.test.ts
@@ -0,0 +1,76 @@
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { STORES } from '@/constants';
+import { createTestingPinia } from '@pinia/testing';
+
+import { renderComponent } from '@/__tests__/render';
+import HtmlEditor from '@/components/HtmlEditor/HtmlEditor.vue';
+import { userEvent } from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
+import { setActivePinia } from 'pinia';
+import { htmlEditorEventBus } from '../event-bus';
+
+const DEFAULT_SETUP = {
+	props: {
+		modelValue: '<html><ul><li>one</li><li>two</li></ul></html>',
+		isReadOnly: false,
+	},
+};
+
+describe('HtmlEditor.vue', () => {
+	const pinia = createTestingPinia({
+		initialState: {
+			[STORES.SETTINGS]: {
+				settings: SETTINGS_STORE_DEFAULT_STATE.settings,
+			},
+		},
+	});
+	setActivePinia(pinia);
+
+	afterAll(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders simple html', async () => {
+		const { getByRole } = renderComponent(HtmlEditor, {
+			...DEFAULT_SETUP,
+			props: DEFAULT_SETUP.props,
+		});
+
+		await waitFor(() =>
+			expect(getByRole('textbox')).toHaveTextContent('<ul><li>one</li><li>two</li></ul>'),
+		);
+	});
+
+	it('formats html (and style/script tags)', async () => {
+		const unformattedHtml =
+			'<!DOCTYPE html><html><head>  <meta charset="UTF-8" />  <title>My HTML document</title></head><body>  <div class="container">    <h1>This is an H1 heading</h1>    <h2>This is an H2 heading</h2>    <p>This is a paragraph</p>  </div> </body> <style>.container {  background-color: #ffffff;  text-align: center;}</style><script>console.log("Hello World!");</script></html>';
+		const { getByRole } = renderComponent(HtmlEditor, {
+			...DEFAULT_SETUP,
+			props: { ...DEFAULT_SETUP.props, modelValue: unformattedHtml },
+		});
+
+		let textbox = await waitFor(() => getByRole('textbox'));
+		expect(textbox.querySelectorAll('.cm-line').length).toBe(1);
+
+		htmlEditorEventBus.emit('format-html');
+		textbox = await waitFor(() => getByRole('textbox'));
+
+		await waitFor(() => expect(textbox.querySelectorAll('.cm-line').length).toBe(24));
+	});
+
+	it('emits update:model-value events', async () => {
+		const { emitted, getByRole } = renderComponent(HtmlEditor, {
+			...DEFAULT_SETUP,
+			props: DEFAULT_SETUP.props,
+		});
+
+		const textbox = await waitFor(() => getByRole('textbox'));
+		await userEvent.type(textbox, '<div>Content');
+
+		await waitFor(() =>
+			expect(emitted('update:model-value')).toEqual([
+				['<div>Content</div><html><ul><li>one</li><li>two</li></ul></html>'],
+			]),
+		);
+	});
+});