Adjust docs

ckeditor · Sep 5, 2024 · ceacbb5 · ceacbb5
1 parent 9b6afa9
commit ceacbb5
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 100 deletions.
diff --git a/docs/getting-started/integrations/angular.md b/docs/getting-started/integrations/angular.md
@@ -712,35 +712,37 @@ A better approach to test the component inside a fully-fledged web browser, impl
 If this is not possible, you can use the following mocks to make the tests pass:
 
 ```ts
-window.scrollTo = jest.fn();
-
-window.ResizeObserver = class ResizeObserver {
-	observe() {}
-	unobserve() {}
-	disconnect() {}
-};
-
-for (const key of ['InputEvent', 'KeyboardEvent']) {
-	window[key].prototype.getTargetRanges = () => {
-		const range = new StaticRange({
-			startContainer: document.body.querySelector('.ck-editor__editable p')!,
-			startOffset: 0,
-			endContainer: document.body.querySelector('.ck-editor__editable p')!,
-			endOffset: 0,
-		});
-
-		return [range];
+beforeAll( () => {
+	window.scrollTo = jest.fn();
+
+	window.ResizeObserver = class ResizeObserver {
+		observe() {}
+		unobserve() {}
+		disconnect() {}
 	};
-}
 
-Range.prototype.getClientRects = () => ({
-	item: () => null,
-	length: 0,
-	[Symbol.iterator]: function* () {},
-});
+	for (const key of ['InputEvent', 'KeyboardEvent']) {
+		window[key].prototype.getTargetRanges = () => {
+			const range = new StaticRange({
+				startContainer: document.body.querySelector('.ck-editor__editable p'),
+				startOffset: 0,
+				endContainer: document.body.querySelector('.ck-editor__editable p'),
+				endOffset: 0,
+			});
+
+			return [range];
+		};
+	}
+
+	Range.prototype.getClientRects = () => ({
+		item: () => null,
+		length: 0,
+		[Symbol.iterator]: function* () {},
+	});
+} );
 ```
 
-These mocks are not perfect and may not cover all the cases, but they should be sufficient for basic initialization and rendering editor. Keep in mind that they are not a replacement for proper browser testing.
+These mocks should be placed before the tests that use CKEditor&nbsp;5. They are not perfect and may not cover all the cases, but they should be sufficient for basic initialization and rendering editor. Keep in mind that they are not a replacement for proper browser testing.
 
 ## Contributing and reporting issues
 

diff --git a/docs/getting-started/integrations/react.md b/docs/getting-started/integrations/react.md
@@ -293,59 +293,61 @@ import { userEvent } from '@testing-library/user-event';
 import { DecoupledEditor, Essentials, Paragraph } from 'ckeditor5';
 import { CKEditor } from '@ckeditor/ckeditor5-react';
 
-window.scrollTo = jest.fn();
-
-window.ResizeObserver = class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
-
-for (const key of ['InputEvent', 'KeyboardEvent']) {
-  window[key].prototype.getTargetRanges = () => {
-    const range = new StaticRange({
-      startContainer: document.body.querySelector('.ck-editor__editable p')!,
-      startOffset: 0,
-      endContainer: document.body.querySelector('.ck-editor__editable p')!,
-      endOffset: 0,
-    });
-
-    return [range];
-  };
-}
-
-Range.prototype.getClientRects = () => ({
-  item: () => null,
-  length: 0,
-  [Symbol.iterator]: function* () {},
-});
+beforeAll( () => {
+	window.scrollTo = jest.fn();
+
+	window.ResizeObserver = class ResizeObserver {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+	};
+
+	for (const key of ['InputEvent', 'KeyboardEvent']) {
+	window[key].prototype.getTargetRanges = () => {
+		const range = new StaticRange({
+		startContainer: document.body.querySelector('.ck-editor__editable p'),
+		startOffset: 0,
+		endContainer: document.body.querySelector('.ck-editor__editable p'),
+		endOffset: 0,
+		});
+
+		return [range];
+	};
+	}
+
+	Range.prototype.getClientRects = () => ({
+	item: () => null,
+	length: 0,
+	[Symbol.iterator]: function* () {},
+	});
+
+	const SomeComponent = ({ value, onChange }) => {
+	const editorRef = useRef();
 
-const SomeComponent = ({ value, onChange }) => {
-  const editorRef = useRef();
-
-  return (
-    <div
-      style={{
-        border: '1px solid black',
-        padding: 10,
-      }}
-    >
-      <CKEditor
-        editor={DecoupledEditor}
-        config={{
-          plugins: [Essentials, Paragraph],
-        }}
-        onReady={(editor) => {
-          editorRef.current = editor;
-        }}
-        data={value}
-        onChange={() => {
-          onChange(editorRef.current?.getData());
-        }}
-      />
-    </div>
-  );
-};
+	return (
+		<div
+		style={{
+			border: '1px solid black',
+			padding: 10,
+		}}
+		>
+		<CKEditor
+			editor={DecoupledEditor}
+			config={{
+			plugins: [Essentials, Paragraph],
+			}}
+			onReady={(editor) => {
+			editorRef.current = editor;
+			}}
+			data={value}
+			onChange={() => {
+			onChange(editorRef.current?.getData());
+			}}
+		/>
+		</div>
+	);
+	};
+} );
 
 it('renders', async () => {
   render(<SomeComponent value="this is some content" />);

diff --git a/docs/getting-started/integrations/vuejs-v3.md b/docs/getting-started/integrations/vuejs-v3.md
@@ -485,35 +485,37 @@ A better approach to test the component inside a fully-fledged web browser, impl
 If this is not possible, you can use the following mocks to make the tests pass:
 
 ```ts
-window.scrollTo = jest.fn();
+beforeAll( () => {
+	window.scrollTo = jest.fn();
 
-window.ResizeObserver = class ResizeObserver {
-	observe() {}
-	unobserve() {}
-	disconnect() {}
-};
+	window.ResizeObserver = class ResizeObserver {
+		observe() {}
+		unobserve() {}
+		disconnect() {}
+	};
 
-for (const key of ['InputEvent', 'KeyboardEvent']) {
-	window[key].prototype.getTargetRanges = () => {
-		const range = new StaticRange({
-			startContainer: document.body.querySelector('.ck-editor__editable p')!,
-			startOffset: 0,
-			endContainer: document.body.querySelector('.ck-editor__editable p')!,
-			endOffset: 0,
-		});
+	for (const key of ['InputEvent', 'KeyboardEvent']) {
+		window[key].prototype.getTargetRanges = () => {
+			const range = new StaticRange({
+				startContainer: document.body.querySelector('.ck-editor__editable p')!,
+				startOffset: 0,
+				endContainer: document.body.querySelector('.ck-editor__editable p')!,
+				endOffset: 0,
+			});
 
-		return [range];
-	};
-}
+			return [range];
+		};
+	}
 
-Range.prototype.getClientRects = () => ({
-	item: () => null,
-	length: 0,
-	[Symbol.iterator]: function* () {},
-});
+	Range.prototype.getClientRects = () => ({
+		item: () => null,
+		length: 0,
+		[Symbol.iterator]: function* () {},
+	});
+	} );
 ```
 
-These mocks are not perfect and may not cover all the cases, but they should be sufficient for basic initialization and rendering editor. Keep in mind that they are not a replacement for proper browser testing.
+These mocks should be placed before the tests that use CKEditor&nbsp;5. They are not perfect and may not cover all the cases, but they should be sufficient for basic initialization and rendering editor. Keep in mind that they are not a replacement for proper browser testing.
 
 ## Contributing and reporting issues