Minor refactoring in the e2e infra (#2123)

Author: wcandillon

example/src/Tests/deserialize.ts

@@ -66,7 +66,7 @@ const parseProp = (value: any, assets: Assets) => {
       return Skia.RuntimeEffect.Make(value.source);
     } else if (value.__typename__ === "SVG") {
       return Skia.SVG.MakeFromString(value.source);
-    } else if (value.__typename__ === "Paragraph") {
+    } else if (value.__typename__ === "SkiaObject") {
       // eslint-disable-next-line no-eval
       return eval(
         `(function Main(){return (${value.source})(this.Skia, this.ctx); })`

fabricexample/src/Tests/deserialize.ts

@@ -66,7 +66,7 @@ const parseProp = (value: any, assets: Assets) => {
       return Skia.RuntimeEffect.Make(value.source);
     } else if (value.__typename__ === "SVG") {
       return Skia.SVG.MakeFromString(value.source);
-    } else if (value.__typename__ === "Paragraph") {
+    } else if (value.__typename__ === "SkiaObject") {
       // eslint-disable-next-line no-eval
       return eval(
         `(function Main(){return (${value.source})(this.Skia, this.ctx); })`

package/src/renderer/__tests__/e2e/ParagraphPaint.spec.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import type { EvalContext } from "../setup";
 import { importSkia, resolveFile, surface } from "../setup";
 import { checkImage, docPath } from "../../../__tests__/setup";
 import {
@@ -12,75 +11,13 @@ import {
   Paint,
   Paragraph,
 } from "../../components";
-import type {
-  Skia,
-  SkCanvas,
-  SkParagraph,
-  SkRectWithDirection,
-} from "../../../skia/types";
+
+import { ParagraphAsset } from "./setup";
 
 const RobotoMedium = Array.from(
   resolveFile("skia/__tests__/assets/Roboto-Medium.ttf")
 );
 
-class ParagraphAsset<Ctx extends EvalContext> implements SkParagraph {
-  private code: string;
-  private paragraph: SkParagraph;
-  constructor(
-    Skia: Skia,
-    fn: (Skia: Skia, ctx: Ctx) => SkParagraph,
-    public context: Ctx = {} as Ctx
-  ) {
-    this.code = `(Skia, ctx) => {
-  return (${fn.toString()})(Skia, ctx);
-}`;
-    this.paragraph = fn(Skia, context);
-  }
-
-  layout(width: number) {
-    this.paragraph.layout(width);
-  }
-  paint(canvas: SkCanvas, x: number, y: number) {
-    this.paragraph.paint(canvas, x, y);
-  }
-  getHeight() {
-    return this.paragraph.getHeight();
-  }
-  getMaxWidth() {
-    return this.paragraph.getMaxWidth();
-  }
-  getMinIntrinsicWidth() {
-    return this.paragraph.getMinIntrinsicWidth();
-  }
-  getMaxIntrinsicWidth() {
-    return this.paragraph.getMaxIntrinsicWidth();
-  }
-  getLongestLine() {
-    return this.paragraph.getLongestLine();
-  }
-  getGlyphPositionAtCoordinate(x: number, y: number) {
-    return this.paragraph.getGlyphPositionAtCoordinate(x, y);
-  }
-  getRectsForRange(start: number, end: number) {
-    return this.paragraph.getRectsForRange(start, end);
-  }
-  getLineMetrics() {
-    return this.paragraph.getLineMetrics();
-  }
-  getRectsForPlaceholders(): SkRectWithDirection[] {
-    return this.paragraph.getRectsForPlaceholders();
-  }
-  __typename__: "Paragraph" = "Paragraph" as const;
-
-  dispose(): void {
-    this.paragraph.dispose();
-  }
-
-  source() {
-    return this.code;
-  }
-}
-
 describe("Paragraphs", () => {
   it("Should use shader for the foreground and background", async () => {
     const img = await surface.drawOffscreen(

package/src/renderer/__tests__/e2e/SVG.spec.tsx

@@ -14,32 +14,8 @@ import {
   Paint,
   fitbox,
 } from "../../components";
-import type { SkSVG } from "../../../skia/types";
 
-// Because SkSVG doesn't exist on web,
-// this instance is just to send the svg over the wire
-class SVGAsset implements SkSVG {
-  __typename__ = "SVG" as const;
-  constructor(
-    private _source: string,
-    private _width: number,
-    private _height: number
-  ) {}
-
-  dispose() {}
-
-  source() {
-    return this._source;
-  }
-
-  width() {
-    return this._width;
-  }
-
-  height() {
-    return this._height;
-  }
-}
+import { SVGAsset } from "./setup";
 
 const circle = new SVGAsset(
   `<svg viewBox='0 0 20 20' width="20" height="20" xmlns='http://www.w3.org/2000/svg'>
@@ -55,21 +31,13 @@ const tiger = new SVGAsset(
   800
 );
 
-const svgWithoutSize = {
-  __typename__: "SVG" as const,
-  width() {
-    return -1;
-  },
-  height() {
-    return -1;
-  },
-  dispose() {},
-  source() {
-    return `<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-    <circle cx='10' cy='10' r='10' fill='#00FFFF'/>
-  </svg>`;
-  },
-};
+const svgWithoutSize = new SVGAsset(
+  `<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+<circle cx='10' cy='10' r='10' fill='#00FFFF'/>
+</svg>`,
+  -1,
+  -1
+);
 
 describe("Displays SVGs", () => {
   itRunsE2eOnly(

package/src/renderer/__tests__/e2e/setup/Paragraph.ts

@@ -0,0 +1,56 @@
+import type { SkParagraph, Skia, SkCanvas } from "../../../../skia/types";
+import type { EvalContext } from "../../setup";
+
+import { SkiaObject } from "./SkiaObject";
+
+export class ParagraphAsset<Ctx extends EvalContext>
+  extends SkiaObject<Ctx, SkParagraph>
+  implements SkParagraph
+{
+  constructor(
+    Skia: Skia,
+    fn: (Skia: Skia, ctx: Ctx) => SkParagraph,
+    context: Ctx = {} as Ctx
+  ) {
+    super(Skia, fn, context);
+  }
+
+  layout(width: number) {
+    this.instance.layout(width);
+  }
+  paint(canvas: SkCanvas, x: number, y: number) {
+    this.instance.paint(canvas, x, y);
+  }
+  getHeight() {
+    return this.instance.getHeight();
+  }
+  getMaxWidth() {
+    return this.instance.getMaxWidth();
+  }
+  getMinIntrinsicWidth() {
+    return this.instance.getMinIntrinsicWidth();
+  }
+  getMaxIntrinsicWidth() {
+    return this.instance.getMaxIntrinsicWidth();
+  }
+  getLongestLine() {
+    return this.instance.getLongestLine();
+  }
+  getGlyphPositionAtCoordinate(x: number, y: number) {
+    return this.instance.getGlyphPositionAtCoordinate(x, y);
+  }
+  getRectsForRange(start: number, end: number) {
+    return this.instance.getRectsForRange(start, end);
+  }
+  getLineMetrics() {
+    return this.instance.getLineMetrics();
+  }
+  getRectsForPlaceholders() {
+    return this.instance.getRectsForPlaceholders();
+  }
+  __typename__ = "Paragraph" as const;
+
+  dispose(): void {
+    this.instance.dispose();
+  }
+}

package/src/renderer/__tests__/e2e/setup/SVG.ts

@@ -0,0 +1,27 @@
+// Because SkSVG doesn't exist on web,
+
+import type { SkSVG } from "../../../../skia/types";
+
+// this instance is just to send the svg over the wire
+export class SVGAsset implements SkSVG {
+  __typename__ = "SVG" as const;
+  constructor(
+    private _source: string,
+    private _width: number,
+    private _height: number
+  ) {}
+
+  dispose() {}
+
+  source() {
+    return this._source;
+  }
+
+  width() {
+    return this._width;
+  }
+
+  height() {
+    return this._height;
+  }
+}

package/src/renderer/__tests__/e2e/setup/SkiaObject.ts

@@ -0,0 +1,27 @@
+import type { SkJSIInstance, Skia } from "../../../../skia/types";
+import type { EvalContext } from "../../setup";
+
+export abstract class SkiaObject<
+  Ctx extends EvalContext,
+  R extends SkJSIInstance<string>
+> {
+  protected _source: string;
+  protected instance: R;
+
+  constructor(
+    Skia: Skia,
+    fn: (Skia: Skia, ctx: Ctx) => R,
+    public _context: Ctx
+  ) {
+    this._source = fn.toString();
+    this.instance = fn(Skia, _context);
+  }
+
+  get source() {
+    return this._source;
+  }
+
+  get context() {
+    return this._context;
+  }
+}

package/src/renderer/__tests__/e2e/setup/index.ts

@@ -0,0 +1,3 @@
+export * from "./Paragraph";
+export * from "./SVG";
+export * from "./SkiaObject";

package/src/renderer/__tests__/setup.tsx

@@ -18,6 +18,8 @@ import { SkiaRoot } from "../Reconciler";
 import { JsiDrawingContext } from "../../dom/types/DrawingContext";
 import { LoadSkiaWeb } from "../../web/LoadSkiaWeb";
 
+import type { SkiaObject } from "./e2e/setup";
+
 jest.setTimeout(180 * 1000);
 
 type TestOS = "ios" | "android" | "web" | "node";
@@ -285,10 +287,11 @@ const serializeSkOjects = (obj: any): any => {
         source: obj.source(),
       };
     } else if (obj.__typename__ === "Paragraph") {
+      const skObj: SkiaObject<EvalContext, any> = obj;
       return {
-        __typename__: "Paragraph",
-        source: obj.source(),
-        context: obj.context,
+        __typename__: "SkiaObject",
+        source: skObj.source,
+        context: skObj.context,
       };
     }
   }