Replace unit tests relying on SVG renderMode with canvas renderMode

wojtekmaj · Jan 6, 2024 · 0cbb75a · 0cbb75a
1 parent 353e565
commit 0cbb75a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 43 deletions.
diff --git a/packages/react-pdf/src/Page.spec.tsx b/packages/react-pdf/src/Page.spec.tsx
@@ -1,4 +1,3 @@
-import { Blob } from 'node:buffer';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { fireEvent, render } from '@testing-library/react';
@@ -395,14 +394,11 @@ describe('Page', () => {
     });
 
     it('requests page to be rendered with default rotation when given nothing', async () => {
-      const originalBlob = globalThis.Blob;
-      globalThis.Blob = Blob as unknown as typeof globalThis.Blob;
-
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
 
       const { container } = renderWithContext(
-        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} renderMode="svg" />,
+        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} />,
         {
           linkService,
           pdf,
@@ -411,29 +407,24 @@ describe('Page', () => {
 
       const [page] = await onRenderSuccessPromise;
 
-      const pageSvg = container.querySelector('.react-pdf__Page__svg') as SVGElement;
+      const pageCanvas = container.querySelector('.react-pdf__Page__canvas') as HTMLCanvasElement;
 
-      const { width, height } = window.getComputedStyle(pageSvg);
+      const { width, height } = window.getComputedStyle(pageCanvas);
 
       const viewport = page.getViewport({ scale: 1 });
 
-      // Expect the SVG layer not to be rotated
+      // Expect the canvas layer not to be rotated
       expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
       expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-
-      globalThis.Blob = originalBlob;
     });
 
     it('requests page to be rendered with given rotation when given rotate prop', async () => {
-      const originalBlob = globalThis.Blob;
-      globalThis.Blob = Blob as unknown as typeof globalThis.Blob;
-
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
       const rotate = 90;
 
       const { container } = renderWithContext(
-        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} renderMode="svg" rotate={rotate} />,
+        <Page onRenderSuccess={onRenderSuccess} pageIndex={0} rotate={rotate} />,
         {
           linkService,
           pdf,
@@ -442,17 +433,15 @@ describe('Page', () => {
 
       const [page] = await onRenderSuccessPromise;
 
-      const pageSvg = container.querySelector('.react-pdf__Page__svg') as SVGElement;
+      const pageCanvas = container.querySelector('.react-pdf__Page__canvas') as HTMLCanvasElement;
 
-      const { width, height } = window.getComputedStyle(pageSvg);
+      const { width, height } = window.getComputedStyle(pageCanvas);
 
       const viewport = page.getViewport({ scale: 1, rotation: rotate });
 
-      // Expect the SVG layer to be rotated
+      // Expect the canvas layer to be rotated
       expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
       expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-
-      globalThis.Blob = originalBlob;
     });
 
     it('requests page to be rendered in canvas mode by default', async () => {

diff --git a/packages/react-pdf/src/Thumbnail.spec.tsx b/packages/react-pdf/src/Thumbnail.spec.tsx
@@ -1,4 +1,3 @@
-import { Blob } from 'node:buffer';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { fireEvent, render } from '@testing-library/react';
@@ -330,63 +329,52 @@ describe('Thumbnail', () => {
     });
 
     it('requests page to be rendered with default rotation when given nothing', async () => {
-      const originalBlob = globalThis.Blob;
-      globalThis.Blob = Blob as unknown as typeof globalThis.Blob;
-
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
 
       const { container } = renderWithContext(
-        <Thumbnail onRenderSuccess={onRenderSuccess} pageIndex={0} renderMode="svg" />,
+        <Thumbnail onRenderSuccess={onRenderSuccess} pageIndex={0} />,
         { pdf },
       );
 
       const [page] = await onRenderSuccessPromise;
 
-      const pageSvg = container.querySelector('.react-pdf__Thumbnail__page__svg') as SVGElement;
+      const pageCanvas = container.querySelector(
+        '.react-pdf__Thumbnail__page__canvas',
+      ) as HTMLCanvasElement;
 
-      const { width, height } = window.getComputedStyle(pageSvg);
+      const { width, height } = window.getComputedStyle(pageCanvas);
 
       const viewport = page.getViewport({ scale: 1 });
 
-      // Expect the SVG layer not to be rotated
+      // Expect the canvas layer not to be rotated
       expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
       expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-
-      globalThis.Blob = originalBlob;
     });
 
     it('requests page to be rendered with given rotation when given rotate prop', async () => {
-      const originalBlob = globalThis.Blob;
-      globalThis.Blob = Blob as unknown as typeof globalThis.Blob;
-
       const { func: onRenderSuccess, promise: onRenderSuccessPromise } =
         makeAsyncCallback<[PageCallback]>();
       const rotate = 90;
 
       const { container } = renderWithContext(
-        <Thumbnail
-          onRenderSuccess={onRenderSuccess}
-          pageIndex={0}
-          renderMode="svg"
-          rotate={rotate}
-        />,
+        <Thumbnail onRenderSuccess={onRenderSuccess} pageIndex={0} rotate={rotate} />,
         { pdf },
       );
 
       const [page] = await onRenderSuccessPromise;
 
-      const pageSvg = container.querySelector('.react-pdf__Thumbnail__page__svg') as SVGElement;
+      const pageCanvas = container.querySelector(
+        '.react-pdf__Thumbnail__page__canvas',
+      ) as HTMLCanvasElement;
 
-      const { width, height } = window.getComputedStyle(pageSvg);
+      const { width, height } = window.getComputedStyle(pageCanvas);
 
       const viewport = page.getViewport({ scale: 1, rotation: rotate });
 
-      // Expect the SVG layer to be rotated
+      // Expect the canvas layer to be rotated
       expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
       expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-
-      globalThis.Blob = originalBlob;
     });
 
     it('requests page to be rendered in canvas mode by default', async () => {