Files
bitvid/tests/qrcode_table_fallback.test.mjs
T
google-labs-jules[bot]andPR0M3TH3AN e2835603c5 Refactor js/utils/qrcode.js to replace innerHTML with DOM manipulation
- Replaced `innerHTML` usage in `Drawing.prototype.draw` (table fallback) with `document.createElement`, `appendChild`, etc.
- Replaced `innerHTML` usage in `Drawing.prototype.clear` with `removeChild` loop.
- Added `tests/qrcode_table_fallback.test.mjs` to verify the table generation logic in a simulated environment (JSDOM) without Canvas support.
- Updated `package.json` to include `jsdom` in `devDependencies` (if it wasn't already there and committed, though I verified it is present after install).

This change eliminates the potential for HTML injection vulnerabilities in the QR code generation library.

Co-authored-by: PR0M3TH3AN <[email protected]>
2026-02-26 17:42:43 +00:00

45 lines
1.7 KiB
JavaScript

import { test } from 'node:test';
import assert from 'node:assert';
import { JSDOM } from 'jsdom';
test('QR Code Table Fallback', async (t) => {
// Setup JSDOM
const dom = new JSDOM(`<!DOCTYPE html><body><div id="qrcode"></div></body>`);
// Override globals to simulate browser environment provided by JSDOM
// We need to override what setup-localstorage.mjs might have set
global.window = dom.window;
global.document = dom.window.document;
global.HTMLStyleElement = dom.window.HTMLStyleElement;
global.HTMLElement = dom.window.HTMLElement;
// Copy other properties if needed, but these should be enough for qrcode.js
// Ensure CanvasRenderingContext2D is NOT defined to trigger the table fallback
if (global.CanvasRenderingContext2D) {
delete global.CanvasRenderingContext2D;
}
if (global.window.CanvasRenderingContext2D) {
delete global.window.CanvasRenderingContext2D;
}
// Dynamically import the module to ensure it uses the current environment
const { createQrCode } = await import('../js/utils/qrcode.js');
const el = global.document.getElementById('qrcode');
// Create QR code
createQrCode(el, { text: "test", width: 100, height: 100 });
// Verify table is used (this confirms we hit the refactored code path)
const table = el.querySelector('table');
assert.ok(table, "Table should be created when canvas is not supported");
assert.ok(table.classList.contains('qr-code__table'), "Table should have correct class");
const rows = table.querySelectorAll('tr');
assert.ok(rows.length > 0, "Should have rows");
const cells = table.querySelectorAll('td');
assert.ok(cells.length > 0, "Should have cells");
});