diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx index 8de5a7aaf21b..ef7182cdf3d0 100644 --- a/components/watermark/__tests__/index.test.tsx +++ b/components/watermark/__tests__/index.test.tsx @@ -16,10 +16,18 @@ describe('Watermark', () => { }); }); + beforeEach(() => { + jest.useFakeTimers(); + }); + afterAll(() => { mockSrcSet.mockRestore(); }); + afterEach(() => { + jest.useRealTimers(); + }); + it('The watermark should render successfully', () => { const { container } = render(); expect(container.querySelector('.watermark div')).toBeTruthy(); @@ -94,4 +102,15 @@ describe('Watermark', () => { await waitFor(() => expect(target).toBeTruthy()); expect(container).toMatchSnapshot(); }); + + it('should not crash if content is empty string', async () => { + const spy = jest.spyOn(CanvasRenderingContext2D.prototype, 'drawImage'); + render(); + await waitFakeTimer(); + expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, 0); + expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, 0); + expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, -0); + expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, -0); + spy.mockRestore(); + }); }); diff --git a/components/watermark/useClips.ts b/components/watermark/useClips.ts index 2392e67d6a88..c8c8843ab440 100644 --- a/components/watermark/useClips.ts +++ b/components/watermark/useClips.ts @@ -69,7 +69,9 @@ export default function useClips() { // Copy from `ctx` and rotate rCtx.translate(realMaxSize / 2, realMaxSize / 2); rCtx.rotate(angle); - rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2); + if (contentWidth > 0 && contentHeight > 0) { + rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2); + } // Get boundary of rotated text function getRotatePos(x: number, y: number) {