From ceacbb5ef53085f5097b1bf1acdaaf1a91f7ed11 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Thu, 5 Sep 2024 13:12:32 +0200 Subject: [PATCH] Adjust docs --- docs/getting-started/integrations/angular.md | 52 ++++----- docs/getting-started/integrations/react.md | 106 +++++++++--------- docs/getting-started/integrations/vuejs-v3.md | 48 ++++---- 3 files changed, 106 insertions(+), 100 deletions(-) diff --git a/docs/getting-started/integrations/angular.md b/docs/getting-started/integrations/angular.md index 033f45d9b02..6cfff8d0e53 100644 --- 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 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 index a0234d9ec2d..05dcc11af07 100644 --- 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 ( -
- { - editorRef.current = editor; - }} - data={value} - onChange={() => { - onChange(editorRef.current?.getData()); - }} - /> -
- ); -}; + return ( +
+ { + editorRef.current = editor; + }} + data={value} + onChange={() => { + onChange(editorRef.current?.getData()); + }} + /> +
+ ); + }; +} ); it('renders', async () => { render(); diff --git a/docs/getting-started/integrations/vuejs-v3.md b/docs/getting-started/integrations/vuejs-v3.md index 9544d16168a..63e25312cae 100644 --- 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 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