diff --git a/src/QRCodeCanvas.tsx b/src/QRCodeCanvas.tsx index d5cd979..0e5b436 100644 --- a/src/QRCodeCanvas.tsx +++ b/src/QRCodeCanvas.tsx @@ -97,7 +97,7 @@ const QRCodeCanvas = React.forwardRef( if (isSupportPath2d) { ctx.fill(new Path2D(generatePath(cellsToDraw, margin))); } else { - cells.forEach((row, rdx) => { + cellsToDraw.forEach((row, rdx) => { row.forEach((cell, cdx) => { if (cell) { ctx.fillRect(cdx + margin, rdx + margin, 1, 1); diff --git a/tests/fallback.test.tsx b/tests/fallback.test.tsx new file mode 100644 index 0000000..72ee222 --- /dev/null +++ b/tests/fallback.test.tsx @@ -0,0 +1,46 @@ +import { render } from '@testing-library/react'; +import React from 'react'; + +jest.mock('../src/utils', () => ({ + ...jest.requireActual('../src/utils'), + isSupportPath2d: false, +})); + +import { QRCodeCanvas } from '../src/QRCodeCanvas'; + +describe('Canvas fallback rendering', () => { + afterEach(() => { + jest.restoreAllMocks(); + }); + + it('excavates modules behind an embedded image without Path2D', () => { + jest + .spyOn(HTMLImageElement.prototype, 'complete', 'get') + .mockReturnValue(true); + jest + .spyOn(HTMLImageElement.prototype, 'naturalHeight', 'get') + .mockReturnValue(128); + jest + .spyOn(HTMLImageElement.prototype, 'naturalWidth', 'get') + .mockReturnValue(128); + const fillRect = jest.spyOn(CanvasRenderingContext2D.prototype, 'fillRect'); + + render( + , + ); + + // The full-size image excavates the complete QR matrix, leaving only the + // background fill. Individual dark modules must not be painted beneath it. + expect(fillRect).toHaveBeenCalledTimes(1); + }); +});