test

odoo · Nov 22, 2024 · 7d456b8 · 7d456b8
1 parent 662e42b
commit 7d456b8
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 36 deletions.
diff --git a/src/helpers/clipboard/clipboard_helpers.ts b/src/helpers/clipboard/clipboard_helpers.ts
@@ -1,3 +1,4 @@
+import { SpreadsheetClipboardData } from "../../plugins/ui_stateful";
 import {
   ClipboardCellData,
   ClipboardMIMEType,
@@ -69,20 +70,19 @@ export async function parseOSClipboardContent(
   content: OSClipboardContent,
   clipboardId: string
 ): Promise<ParsedOSClipboardContent> {
-  if (!content[ClipboardMIMEType.Html]) {
-    return {
-      text: content[ClipboardMIMEType.PlainText],
-    };
+  let contentClipboardId: string | undefined;
+  let spreadsheetContent: SpreadsheetClipboardData | undefined = undefined;
+  if (content[ClipboardMIMEType.Html]) {
+    const htmlDocument = new DOMParser().parseFromString(
+      content[ClipboardMIMEType.Html],
+      "text/html"
+    );
+    const oSheetClipboardData = htmlDocument
+      .querySelector("div")
+      ?.getAttribute("data-osheet-clipboard");
+    spreadsheetContent = oSheetClipboardData && JSON.parse(oSheetClipboardData);
+    contentClipboardId = spreadsheetContent?.clipboardId;
   }
-  const htmlDocument = new DOMParser().parseFromString(
-    content[ClipboardMIMEType.Html],
-    "text/html"
-  );
-  const oSheetClipboardData = htmlDocument
-    .querySelector("div")
-    ?.getAttribute("data-osheet-clipboard");
-  const spreadsheetContent = oSheetClipboardData && JSON.parse(oSheetClipboardData);
-  const contentClipboardId = spreadsheetContent?.clipboardId;
   if (contentClipboardId !== clipboardId) {
     const clipboardContent: ParsedOSClipboardContent = {
       text: content[ClipboardMIMEType.PlainText],

diff --git a/src/helpers/clipboard/navigator_clipboard_wrapper.ts b/src/helpers/clipboard/navigator_clipboard_wrapper.ts
@@ -89,15 +89,14 @@ class WebClipboardWrapper implements ClipboardInterface {
   }
 
   private getClipboardItems(content: OSClipboardContent): ClipboardItems {
-    const clipboardItemData = {
-      [ClipboardMIMEType.PlainText]: this.getBlob(content, ClipboardMIMEType.PlainText),
-      [ClipboardMIMEType.Html]: this.getBlob(content, ClipboardMIMEType.Html),
-      [ClipboardMIMEType.Image]: this.getBlob(content, ClipboardMIMEType.Image),
-    };
+    const clipboardItemData = {};
+    for (const type of Object.keys(content)) {
+      clipboardItemData[type] = this.getBlob(content, type);
+    }
     return [new ClipboardItem(clipboardItemData)];
   }
 
-  private getBlob(clipboardContent: OSClipboardContent, type: ClipboardMIMEType): Blob {
+  private getBlob(clipboardContent: OSClipboardContent, type: string): Blob {
     const content = clipboardContent[type];
     if (content instanceof Blob) {
       return content;

diff --git a/src/helpers/figures/images/image_provider.ts b/src/helpers/figures/images/image_provider.ts
@@ -40,7 +40,7 @@ export class ImageProvider implements ImageProviderInterface {
 
   getImageOriginalSize(path: string): Promise<FigureSize> {
     return new Promise((resolve, reject) => {
-      const image = new Image();
+      const image = new window.Image();
       image.src = path;
       image.addEventListener("load", () => {
         const size = { width: image.width, height: image.height };

diff --git a/src/plugins/ui_stateful/clipboard.ts b/src/plugins/ui_stateful/clipboard.ts
@@ -148,9 +148,7 @@ export class ClipboardPlugin extends UIPlugin {
           const definition = cmd.clipboardContent.imageData;
 
           // compute positojn based on current selection
-          const { x, y } = this.getters.getVisibleRectWithoutHeaders(
-            this.getters.getSelectedZone()
-          );
+          const { x, y } = this.getters.getVisibleRectWithoutHeaders(cmd.target[0]);
 
           this.dispatch("CREATE_IMAGE", {
             definition,
@@ -517,7 +515,7 @@ export class ClipboardPlugin extends UIPlugin {
       [ClipboardMIMEType.Html]: await this.getHTMLContent(),
     };
     if (mime && blob) {
-      content[mime] = content;
+      content[mime] = blob;
     }
     return content;
   }

diff --git a/tests/clipboard/clipboard_plugin.test.ts b/tests/clipboard/clipboard_plugin.test.ts
@@ -2414,6 +2414,30 @@ describe("clipboard: pasting outside of sheet", () => {
     expect(getEvaluatedCell(model, "A1").value).toBe(8.14);
   });
 
+  test("Pasted images from Os are inserted at the paste position", () => {
+    const model = new Model();
+    const width = 100;
+    const height = 50;
+    pasteFromOSClipboard(model, "B2", {
+      imageData: {
+        path: "data:image/png;base64,",
+        size: { width, height },
+      },
+    });
+    const sheetId = model.getters.getActiveSheetId();
+    expect(getCellContent(model, "B2")).toBe("");
+    const figures = model.getters.getFigures(sheetId);
+    expect(figures).toHaveLength(1);
+    const { x, y } = model.getters.getVisibleRectWithoutHeaders(toZone("B2"));
+    expect(figures[0]).toMatchObject({
+      tag: "image",
+      width,
+      height,
+      x,
+      y,
+    });
+  });
+
   test("Can copy parts of the spread values", () => {
     const model = new Model();
     setCellContent(model, "A1", "1");

diff --git a/tests/grid/grid_component.test.ts b/tests/grid/grid_component.test.ts
@@ -1,3 +1,4 @@
+import { ChartConfiguration } from "chart.js";
 import { Spreadsheet, TransportService } from "../../src";
 import { CellComposerStore } from "../../src/components/composer/composer/cell_composer_store";
 import { ComposerFocusStore } from "../../src/components/composer/composer_focus_store";
@@ -29,6 +30,7 @@ import { MockClipboardData, getClipboardEvent } from "../test_helpers/clipboard"
 import {
   copy,
   createChart,
+  createImage,
   createSheet,
   createTableWithFilter,
   cut,
@@ -91,6 +93,9 @@ import { mockGetBoundingClientRect } from "../test_helpers/mock_helpers";
 jest.mock("../../src/components/composer/content_editable_helper", () =>
   require("../__mocks__/content_editable_helper")
 );
+jest.mock("../../src/helpers/figures/images/image_provider", () =>
+  require("../__mocks__/mock_image_provider")
+);
 
 function getVerticalScroll(): number {
   const scrollbar = fixture.querySelector(".o-scrollbar.vertical") as HTMLElement;
@@ -1506,11 +1511,14 @@ describe("Edge-Scrolling on mouseMove in selection", () => {
 describe("Copy paste keyboard shortcut", () => {
   let clipboardData: MockClipboardData;
   let sheetId: string;
-
+  let mockChartData: ChartConfiguration;
+  const fileStore = new FileStore();
   beforeEach(async () => {
-    mockChart();
+    mockChartData = mockChart();
     clipboardData = new MockClipboardData();
-    ({ parent, model, fixture } = await mountSpreadsheet());
+    ({ parent, model, fixture } = await mountSpreadsheet({
+      model: new Model({}, { external: { fileStore } }),
+    }));
     sheetId = model.getters.getActiveSheetId();
   });
 
@@ -1780,6 +1788,78 @@ describe("Copy paste keyboard shortcut", () => {
     expect(model.getters.getChartIds(sheetId)).toHaveLength(1);
     expect(model.getters.getChartIds(sheetId)[0]).not.toEqual("chartId");
   });
+
+  test.each<"cut" | "copy">(["copy", "cut"])(
+    "Copy/cut a chart pushes it in the clipboard as attachment",
+    async (operation) => {
+      selectCell(model, "A1");
+      createChart(model, { type: "bar" }, "chartId");
+      model.dispatch("SELECT_FIGURE", { id: "chartId" });
+      document.body.dispatchEvent(getClipboardEvent(operation, clipboardData));
+      await nextTick();
+      const clipboard = await parent.env.clipboard.read!();
+      if (clipboard.status !== "ok") {
+        throw new Error("Clipboard read failed");
+      }
+      const clipboardContent = clipboard.content;
+
+      const cbPlugin = getPlugin(model, ClipboardPlugin);
+      //@ts-ignore
+      const clipboardHtmlData = JSON.stringify(cbPlugin.getSheetData());
+      const imgData = new window.Chart("test", mockChartData).toBase64Image();
+
+      expect(clipboardContent).toMatchObject({
+        "text/plain": "\t",
+        "text/html": `<div data-osheet-clipboard='${xmlEscape(
+          clipboardHtmlData
+        )}'><img src="${xmlEscape(imgData)}" /></div>`,
+        "image/png": expect.any(Blob),
+      });
+    }
+  );
+
+  test.each<"cut" | "copy">(["copy", "cut"])(
+    "Copy/cut an image pushes it in the clipboard as attachment",
+    async (operation) => {
+      selectCell(model, "A1");
+      createImage(model, { figureId: "imageId" });
+      model.dispatch("SELECT_FIGURE", { id: "imageId" });
+      document.body.dispatchEvent(getClipboardEvent(operation, clipboardData));
+      await nextTick();
+      const clipboard = await parent.env.clipboard.read!();
+      if (clipboard.status !== "ok") {
+        throw new Error("Clipboard read failed");
+      }
+      const clipboardContent = clipboard.content;
+
+      const cbPlugin = getPlugin(model, ClipboardPlugin);
+      //@ts-ignore
+      const clipboardHtmlData = JSON.stringify(cbPlugin.getSheetData());
+      //@ts-ignore
+      const imgData = (await cbPlugin.readFileAsDataURL(
+        new Blob([], { type: "image/png" })
+      )) as string;
+
+      expect(clipboardContent).toMatchObject({
+        "text/plain": "\t",
+        "text/html": `<div data-osheet-clipboard='${xmlEscape(
+          clipboardHtmlData
+        )}'><img src="${xmlEscape(imgData)}" /></div>`,
+        "image/png": expect.any(Blob),
+      });
+    }
+  );
+
+  test("Paste an image from the clipboard uploads it on the server and adds it to the sheet", async () => {
+    const image = new File(["image"], "image.png", { type: "image/png" });
+    clipboardData.setData("image/png", image);
+    selectCell(model, "A1");
+    document.body.dispatchEvent(getClipboardEvent("paste", clipboardData));
+    await nextTick();
+    const figures = model.getters.getFigures(sheetId);
+    expect(figures).toHaveLength(1);
+    expect(model.getters.getFigure(sheetId, figures[0].id)).toMatchObject({});
+  });
 });
 
 describe("Header grouping shortcuts", () => {

diff --git a/tests/test_helpers/clipboard.ts b/tests/test_helpers/clipboard.ts
@@ -5,15 +5,12 @@ import {
 import { ClipboardMIMEType, OSClipboardContent } from "../../src/types";
 
 export class MockClipboard implements ClipboardInterface {
-  private content: OSClipboardContent = {};
+  content: OSClipboardContent = {};
 
   async read(): Promise<ClipboardReadResult> {
     return {
       status: "ok",
-      content: {
-        [ClipboardMIMEType.PlainText]: this.content[ClipboardMIMEType.PlainText],
-        [ClipboardMIMEType.Html]: this.content[ClipboardMIMEType.Html],
-      },
+      content: { ...this.content },
     };
   }
 
@@ -23,10 +20,7 @@ export class MockClipboard implements ClipboardInterface {
   }
 
   async write(content: OSClipboardContent) {
-    this.content = {
-      [ClipboardMIMEType.PlainText]: content[ClipboardMIMEType.PlainText],
-      [ClipboardMIMEType.Html]: content[ClipboardMIMEType.Html],
-    };
+    this.content = { ...content };
   }
 }
 
@@ -52,6 +46,9 @@ export class MockClipboardData {
 
   setData<T extends keyof OSClipboardContent>(type: T, content: OSClipboardContent[T]) {
     this.content[type] = content;
+    if (type.startsWith("image")) {
+      this.files.push(content as File);
+    }
   }
 
   get types() {