diff --git a/js/utils/qrcode.js b/js/utils/qrcode.js index b8e32b57..cb7ee4d5 100644 --- a/js/utils/qrcode.js +++ b/js/utils/qrcode.js @@ -337,8 +337,13 @@ if (hasDocument) { var nWidth = Math.floor(_htOption.width / nCount); var nHeight = Math.floor(_htOption.height / nCount); - var table = document.createElement("table"); - table.className = "qr-code__table"; + // Clear existing content + while (_el.firstChild) { + _el.removeChild(_el.firstChild); + } + + var elTable = document.createElement("table"); + elTable.className = "qr-code__table"; updateQrCodeContainerStyles(_el, { colorDark: _htOption.colorDark, @@ -349,27 +354,22 @@ if (hasDocument) { }); for (var row = 0; row < nCount; row++) { - var tr = document.createElement("tr"); + var elRow = document.createElement("tr"); for (var col = 0; col < nCount; col++) { - var td = document.createElement("td"); - td.className = oQRCode.isDark(row, col) + var elCell = document.createElement("td"); + elCell.className = oQRCode.isDark(row, col) ? "qr-code__cell qr-code__cell--dark" : "qr-code__cell"; - tr.appendChild(td); + elRow.appendChild(elCell); } - table.appendChild(tr); + elTable.appendChild(elRow); } - // Clear previous content - while (_el.firstChild) { - _el.removeChild(_el.firstChild); - } - _el.appendChild(table); + _el.appendChild(elTable); // Fix the margin values as real size. - var elTable = table; var nLeftMarginTable = (_htOption.width - (nCount * nWidth)) / 2; var nTopMarginTable = (_htOption.height - (nCount * nHeight)) / 2; diff --git a/tests/qrcode_table_fallback.test.mjs b/tests/qrcode_table_fallback.test.mjs index d2147d26..4cd4583e 100644 --- a/tests/qrcode_table_fallback.test.mjs +++ b/tests/qrcode_table_fallback.test.mjs @@ -1,26 +1,29 @@ -import { test, describe } from 'node:test'; +import { test } from 'node:test'; import assert from 'node:assert'; import { JSDOM } from 'jsdom'; -describe('QRCode Table Fallback', () => { - test('should generate table when Canvas is not supported', async () => { +test('QR Code Table Fallback', async (t) => { + // Setup JSDOM const dom = new JSDOM(`
`); - // Set up global environment for the library - global.document = dom.window.document; + // 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; - global.WeakMap = dom.window.WeakMap || global.WeakMap; - global.Map = dom.window.Map || global.Map; - // Ensure CanvasRenderingContext2D is NOT defined to trigger table fallback - delete global.CanvasRenderingContext2D; - delete global.window.CanvasRenderingContext2D; + // Copy other properties if needed, but these should be enough for qrcode.js - // Ensure we are not in SVG mode (JSDOM default is HTML) + // Ensure CanvasRenderingContext2D is NOT defined to trigger the table fallback + if (global.CanvasRenderingContext2D) { + delete global.CanvasRenderingContext2D; + } + if (global.window.CanvasRenderingContext2D) { + delete global.window.CanvasRenderingContext2D; + } - // Import the module dynamically + // 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'); @@ -28,16 +31,14 @@ describe('QRCode Table Fallback', () => { // Create QR code createQrCode(el, { text: "test", width: 100, height: 100 }); - // Verify table is used + // Verify table is used (this confirms we hit the refactored code path) const table = el.querySelector('table'); - assert.ok(table, "Table element should be created"); + 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"); - // Check for table structure 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"); - }); });