Add Unit test for Paste source from M365 Apps (#1918)

* Test in pipeline * addTest * Fix test in FF * addContentModelTest * Just check that functionsgot called
microsoft · Jun 30, 2023 · 9807ed1 · 9807ed1
1 parent b5800e7
commit 9807ed1
Show file tree

Hide file tree

Showing 9 changed files with 473 additions and 0 deletions.
diff --git a/.../roosterjs-content-model-editor/lib/editor/plugins/PastePlugin/ContentModelPastePlugin.ts b/.../roosterjs-content-model-editor/lib/editor/plugins/PastePlugin/ContentModelPastePlugin.ts
@@ -87,6 +87,7 @@ export default class ContentModelFormatPlugin implements EditorPlugin {
                 processPastedContentWacComponents(ev);
                 break;
             case KnownPasteSourceType.ExcelOnline:
+            case KnownPasteSourceType.ExcelDesktop:
                 if (
                     event.pasteType === PasteType.Normal ||
                     event.pasteType === PasteType.MergeFormat

diff --git a/...oosterjs-content-model-editor/test/editor/plugins/paste/e2e/cmPasteFromExcelOnlineTest.ts b/...oosterjs-content-model-editor/test/editor/plugins/paste/e2e/cmPasteFromExcelOnlineTest.ts
@@ -0,0 +1,46 @@
+import * as processPastedContentFromExcel from '../../../../../lib/editor/plugins/PastePlugin/Excel/processPastedContentFromExcel';
+import paste from '../../../../../lib/publicApi/utils/paste';
+import { ClipboardData } from 'roosterjs-editor-types';
+import { IContentModelEditor } from '../../../../../lib/publicTypes/IContentModelEditor';
+import { initEditor } from './cmPasteFromExcelTest';
+import { tableProcessor } from 'roosterjs-content-model-dom';
+
+const ID = 'CM_Paste_From_ExcelOnline_E2E';
+const clipboardData = <ClipboardData>(<any>{
+    types: ['text/plain', 'text/html'],
+    text: 'Test\tTest',
+    image: null,
+    files: [],
+    rawHtml:
+        "<html>\r\n<body>\r\n<!--StartFragment--><div ccp_infra_version='3' ccp_infra_timestamp='1687871836672' ccp_infra_user_hash='1011877142' ccp_infra_copy_id='edfc2633-1068-4e16-9f9a-02e650eb665e' data-ccp-timestamp='1687871836672'><html><head><meta http-equiv=Content-Type content=\"text/html; charset=utf-8\"><meta name=ProgId content=Excel.Sheet><meta name=Generator content=\"Microsoft Excel 15\"><style>table\r\n\t{mso-displayed-decimal-separator:\"\\.\";\r\n\tmso-displayed-thousand-separator:\"\\,\";}\r\ntr\r\n\t{mso-height-source:auto;}\r\ncol\r\n\t{mso-width-source:auto;}\r\ntd\r\n\t{padding-top:1px;\r\n\tpadding-right:1px;\r\n\tpadding-left:1px;\r\n\tmso-ignore:padding;\r\n\tcolor:black;\r\n\tfont-size:11.0pt;\r\n\tfont-weight:400;\r\n\tfont-style:normal;\r\n\ttext-decoration:none;\r\n\tfont-family:Calibri, sans-serif;\r\n\tmso-font-charset:0;\r\n\ttext-align:general;\r\n\tvertical-align:bottom;\r\n\tborder:none;\r\n\twhite-space:nowrap;\r\n\tmso-rotate:0;}\r\n</style></head><body link=\"#0563C1\" vlink=\"#954F72\"><table width=128 style='border-collapse:collapse;width:96pt'><!--StartFragment--><col width=64 style='width:48pt' span=2><tr height=20 style='height:15.0pt'><td width=64 height=20 style='width:48pt;height:15.0pt'>Test</td><td width=64 style='width:48pt'>Test</td></tr><!--EndFragment--></table></body></html></div><!--EndFragment-->\r\n</body>\r\n</html>",
+    customValues: {},
+    snapshotBeforePaste: '<br><!--{"start":[0],"end":[0]}-->',
+    htmlFirstLevelChildTags: ['DIV'],
+    html:
+        "<div ccp_infra_version='3' ccp_infra_timestamp='1687871836672' ccp_infra_user_hash='1011877142' ccp_infra_copy_id='edfc2633-1068-4e16-9f9a-02e650eb665e' data-ccp-timestamp='1687871836672'><html><head><meta http-equiv=Content-Type content=\"text/html; charset=utf-8\"><meta name=ProgId content=Excel.Sheet><meta name=Generator content=\"Microsoft Excel 15\"><style>table\r\n\t{mso-displayed-decimal-separator:\"\\.\";\r\n\tmso-displayed-thousand-separator:\"\\,\";}\r\ntr\r\n\t{mso-height-source:auto;}\r\ncol\r\n\t{mso-width-source:auto;}\r\ntd\r\n\t{padding-top:1px;\r\n\tpadding-right:1px;\r\n\tpadding-left:1px;\r\n\tmso-ignore:padding;\r\n\tcolor:black;\r\n\tfont-size:11.0pt;\r\n\tfont-weight:400;\r\n\tfont-style:normal;\r\n\ttext-decoration:none;\r\n\tfont-family:Calibri, sans-serif;\r\n\tmso-font-charset:0;\r\n\ttext-align:general;\r\n\tvertical-align:bottom;\r\n\tborder:none;\r\n\twhite-space:nowrap;\r\n\tmso-rotate:0;}\r\n</style></head><body link=\"#0563C1\" vlink=\"#954F72\"><table width=128 style='border-collapse:collapse;width:96pt'><!--StartFragment--><col width=64 style='width:48pt' span=2><tr height=20 style='height:15.0pt'><td width=64 height=20 style='width:48pt;height:15.0pt'>Test</td><td width=64 style='width:48pt'>Test</td></tr><!--EndFragment--></table></body></html></div>",
+});
+
+describe(ID, () => {
+    let editor: IContentModelEditor = undefined!;
+
+    beforeEach(() => {
+        editor = initEditor(ID);
+    });
+
+    afterEach(() => {
+        document.getElementById(ID)?.remove();
+    });
+
+    it('E2E', () => {
+        spyOn(processPastedContentFromExcel, 'processPastedContentFromExcel').and.callThrough();
+
+        paste(editor, clipboardData);
+        editor.createContentModel({
+            processorOverride: {
+                table: tableProcessor,
+            },
+        });
+
+        expect(processPastedContentFromExcel.processPastedContentFromExcel).toHaveBeenCalled();
+    });
+});
diff --git a/...odel/roosterjs-content-model-editor/test/editor/plugins/paste/e2e/cmPasteFromExcelTest.ts b/...odel/roosterjs-content-model-editor/test/editor/plugins/paste/e2e/cmPasteFromExcelTest.ts
@@ -0,0 +1,115 @@
+import * as processPastedContentFromExcel from '../../../../../lib/editor/plugins/PastePlugin/Excel/processPastedContentFromExcel';
+import ContentModelEditor from '../../../../../lib/editor/ContentModelEditor';
+import ContentModelPastePlugin from '../../../../../lib/editor/plugins/PastePlugin/ContentModelPastePlugin';
+import paste from '../../../../../lib/publicApi/utils/paste';
+import { Browser } from 'roosterjs-editor-dom';
+import { ClipboardData, ExperimentalFeatures } from 'roosterjs-editor-types';
+import { tableProcessor } from 'roosterjs-content-model-dom';
+import {
+    ContentModelEditorOptions,
+    IContentModelEditor,
+} from '../../../../../lib/publicTypes/IContentModelEditor';
+
+export function initEditor(id: string) {
+    let node = document.createElement('div');
+    node.id = id;
+    document.body.insertBefore(node, document.body.childNodes[0]);
+
+    let options: ContentModelEditorOptions = {
+        plugins: [new ContentModelPastePlugin()],
+        experimentalFeatures: [ExperimentalFeatures.ContentModelPaste],
+        defaultDomToModelOptions: {
+            disableCacheElement: true,
+        },
+    };
+
+    let editor = new ContentModelEditor(node as HTMLDivElement, options);
+
+    return editor as IContentModelEditor;
+}
+
+const ID = 'CM_Paste_From_Excel_E2E';
+const clipboardData = <ClipboardData>(<any>{
+    types: ['image/png', 'text/plain', 'text/html'],
+    text: 'Test\tTest\r\n',
+    image: {},
+    files: [],
+    rawHtml: '<html xmlns:v="urn:schemas-microsoft-com:vml"\r\nxmlns:o="urn:schemas-microsoft-com:office:office"\r\nxmlns:x="urn:schemas-microsoft-com:office:excel"\r\nxmlns="http://www.w3.org/TR/REC-html40">\r\n\r\n<head>\r\n<meta http-equiv=Content-Type content="text/html; charset=utf-8">\r\n<meta name=ProgId content=Excel.Sheet>\r\n<meta name=Generator content="Microsoft Excel 15">\r\n<link id=Main-File rel=Main-File\r\nhref="file:///C:/Users/BVALVE~1/AppData/Local/Temp/msohtmlclip1/01/clip.htm">\r\n<link rel=File-List\r\nhref="file:///C:/Users/BVALVE~1/AppData/Local/Temp/msohtmlclip1/01/clip_filelist.xml">\r\n<style>\r\n<!--table\r\n\t{mso-displayed-decimal-separator:"\\.";\r\n\tmso-displayed-thousand-separator:"\\,";}\r\n@page\r\n\t{margin:.75in .7in .75in .7in;\r\n\tmso-header-margin:.3in;\r\n\tmso-footer-margin:.3in;}\r\ntr\r\n\t{mso-height-source:auto;}\r\ncol\r\n\t{mso-width-source:auto;}\r\nbr\r\n\t{mso-data-placement:same-cell;}\r\ntd\r\n\t{padding-top:1px;\r\n\tpadding-right:1px;\r\n\tpadding-left:1px;\r\n\tmso-ignore:padding;\r\n\tcolor:black;\r\n\tfont-size:11.0pt;\r\n\tfont-weight:400;\r\n\tfont-style:normal;\r\n\ttext-decoration:none;\r\n\tfont-family:"Aptos Narrow", sans-serif;\r\n\tmso-font-charset:0;\r\n\tmso-number-format:General;\r\n\ttext-align:general;\r\n\tvertical-align:bottom;\r\n\tborder:none;\r\n\tmso-background-source:auto;\r\n\tmso-pattern:auto;\r\n\tmso-protection:locked visible;\r\n\twhite-space:nowrap;\r\n\tmso-rotate:0;}\r\n-->\r\n</style>\r\n</head>\r\n\r\n<body link="#467886" vlink="#96607D">\r\n\r\n<table border=0 cellpadding=0 cellspacing=0 width=134 style=\'border-collapse:\r\n collapse;width:100pt\'>\r\n <col width=67 span=2 style=\'width:50pt\'>\r\n <tr height=19 style=\'height:14.4pt\'>\r\n<!--StartFragment-->\r\n  <td height=19 width=67 style=\'height:14.4pt;width:50pt\'>Test</td>\r\n  <td width=67 style=\'width:50pt\'>Test</td>\r\n<!--EndFragment-->\r\n </tr>\r\n</table>\r\n\r\n</body>\r\n\r\n</html>\r\n'.replace(
+        '\r\n',
+        ''
+    ),
+    customValues: {},
+    imageDataUri: 'https://github.com/microsoft/roosterjs',
+    snapshotBeforePaste: '<div><br></div><!--{"start":[0,0],"end":[0,0]}-->',
+});
+
+describe(ID, () => {
+    let editor: IContentModelEditor = undefined!;
+
+    beforeEach(() => {
+        editor = initEditor(ID);
+    });
+
+    afterEach(() => {
+        document.getElementById(ID)?.remove();
+    });
+
+    it('E2E', () => {
+        if (Browser.isFirefox) {
+            return;
+        }
+        spyOn(processPastedContentFromExcel, 'processPastedContentFromExcel').and.callThrough();
+
+        paste(editor, clipboardData);
+        editor.createContentModel({});
+
+        expect(processPastedContentFromExcel.processPastedContentFromExcel).toHaveBeenCalled();
+    });
+
+    it('E2E paste a simage', () => {
+        if (Browser.isFirefox) {
+            return;
+        }
+        spyOn(processPastedContentFromExcel, 'processPastedContentFromExcel').and.callThrough();
+
+        paste(editor, clipboardData, false, false, true);
+        const model = editor.createContentModel({
+            processorOverride: {
+                table: tableProcessor,
+            },
+        });
+
+        expect(model).toEqual({
+            blockGroupType: 'Document',
+            blocks: [
+                {
+                    blockType: 'Paragraph',
+                    segments: [
+                        {
+                            segmentType: 'Image',
+                            src: 'https://github.com/microsoft/roosterjs',
+                            format: { maxWidth: '100%' },
+                            dataset: {},
+                        },
+                        {
+                            segmentType: 'SelectionMarker',
+                            isSelected: true,
+                            format: {},
+                        },
+                    ],
+                    format: {},
+                },
+            ],
+            format: {
+                fontWeight: undefined,
+                italic: undefined,
+                underline: undefined,
+                fontFamily: undefined,
+                fontSize: undefined,
+                textColor: undefined,
+                backgroundColor: undefined,
+            },
+        });
+        expect(processPastedContentFromExcel.processPastedContentFromExcel).not.toHaveBeenCalled();
+    });
+});