Skip to content

Commit 99034ec

Browse files
meabedmeabed
committed
chore: update
1 parent 5b425b9 commit 99034ec

29 files changed

+1925
-5
lines changed

‎e2e/e2e-capture-screenshots.js

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
#!/usr/bin/env node
2+
3+
const puppeteer = require('puppeteer')
4+
const path = require('path')
5+
const fs = require('fs').promises
6+
7+
const SERVER_URL = 'http://127.0.0.1:8080'
8+
const SCREENSHOTS_DIR = path.join(__dirname, 'screenshots')
9+
const EXAMPLES_DIR = path.join(__dirname, '..', 'examples')
10+
11+
const PAGES_TO_CAPTURE = [
12+
{
13+
url: 'index.html',
14+
name: 'main-demo',
15+
selectors: ['#root'],
16+
description: 'Main demo with interactive controls',
17+
},
18+
{
19+
url: 'advanced-demo.html',
20+
name: 'advanced-demo',
21+
selectors: ['body'],
22+
viewport: { width: 1920, height: 1080 },
23+
description: 'Advanced customization examples',
24+
},
25+
{
26+
url: 'simple-usage.html',
27+
name: 'simple-usage',
28+
selectors: ['body'],
29+
description: 'Simple usage examples',
30+
},
31+
{
32+
url: 'qr-test.html',
33+
name: 'qr-test',
34+
selectors: ['body'],
35+
description: 'QR code detectability test',
36+
},
37+
{
38+
url: 'api-docs.html',
39+
name: 'api-docs',
40+
selectors: ['body'],
41+
viewport: { width: 1920, height: 1080 },
42+
description: 'API documentation',
43+
},
44+
]
45+
46+
async function captureScreenshots() {
47+
console.log('📸 E2E Screenshot Capture Tool')
48+
console.log('==============================\n')
49+
50+
// Create screenshots directory in e2e folder
51+
await fs.mkdir(SCREENSHOTS_DIR, { recursive: true })
52+
console.log(`📁 Created screenshots directory: ${SCREENSHOTS_DIR}\n`)
53+
54+
const browser = await puppeteer.launch({
55+
headless: 'new',
56+
args: ['--no-sandbox', '--disable-setuid-sandbox'],
57+
})
58+
59+
try {
60+
// Start a local server from examples directory
61+
console.log('🌐 Starting local server...')
62+
const { exec } = require('child_process')
63+
const serverProcess = exec(
64+
`cd ${EXAMPLES_DIR} && npx http-server . -p 8080`,
65+
(error, stdout, stderr) => {
66+
if (error) {
67+
console.error(`Server error: ${error}`)
68+
}
69+
}
70+
)
71+
72+
// Wait for server to start
73+
await new Promise((resolve) => setTimeout(resolve, 3000))
74+
console.log('✅ Server started on http://127.0.0.1:8080\n')
75+
76+
// Capture each page
77+
for (const pageConfig of PAGES_TO_CAPTURE) {
78+
const page = await browser.newPage()
79+
80+
if (pageConfig.viewport) {
81+
await page.setViewport(pageConfig.viewport)
82+
} else {
83+
await page.setViewport({ width: 1280, height: 800 })
84+
}
85+
86+
const url = `${SERVER_URL}/${pageConfig.url}`
87+
console.log(`📸 Capturing: ${pageConfig.name}`)
88+
console.log(` URL: ${url}`)
89+
console.log(` Description: ${pageConfig.description}`)
90+
91+
await page.goto(url, { waitUntil: 'networkidle2' })
92+
await new Promise((resolve) => setTimeout(resolve, 2000))
93+
94+
// Capture full page
95+
const screenshotPath = path.join(
96+
SCREENSHOTS_DIR,
97+
`${pageConfig.name}.png`
98+
)
99+
await page.screenshot({ path: screenshotPath, fullPage: true })
100+
console.log(` ✅ Full page saved: ${screenshotPath}`)
101+
102+
// Also capture specific elements if provided
103+
if (pageConfig.selectors) {
104+
for (const selector of pageConfig.selectors) {
105+
try {
106+
const element = await page.$(selector)
107+
if (element) {
108+
const elementScreenshotPath = path.join(
109+
SCREENSHOTS_DIR,
110+
`${pageConfig.name}-element.png`
111+
)
112+
await element.screenshot({ path: elementScreenshotPath })
113+
console.log(` ✅ Element saved: ${elementScreenshotPath}`)
114+
}
115+
} catch (err) {
116+
console.log(` ⚠️ Could not capture ${selector}`)
117+
}
118+
}
119+
}
120+
121+
console.log('')
122+
await page.close()
123+
}
124+
125+
// Capture individual QR code examples
126+
console.log('📸 Capturing individual QR code examples...')
127+
const page = await browser.newPage()
128+
await page.setViewport({ width: 1920, height: 1080 })
129+
await page.goto(`${SERVER_URL}/advanced-demo.html`, {
130+
waitUntil: 'networkidle2',
131+
})
132+
await new Promise((resolve) => setTimeout(resolve, 3000))
133+
134+
// Capture specific QR code examples
135+
const examples = [
136+
{ selector: '#basic-example svg', name: 'qr-basic' },
137+
{ selector: '#gradient-example svg', name: 'qr-gradient' },
138+
{ selector: '#circle-modules svg', name: 'qr-circle' },
139+
{ selector: '#diamond-modules svg', name: 'qr-diamond' },
140+
{ selector: '#rounded-modules svg', name: 'qr-rounded' },
141+
{ selector: '#logo-example svg', name: 'qr-logo' },
142+
{ selector: '#neon-example svg', name: 'qr-neon' },
143+
{ selector: '#ocean-example svg', name: 'qr-ocean' },
144+
]
145+
146+
for (const example of examples) {
147+
try {
148+
const element = await page.$(example.selector)
149+
if (element) {
150+
const screenshotPath = path.join(
151+
SCREENSHOTS_DIR,
152+
`${example.name}.png`
153+
)
154+
await element.screenshot({ path: screenshotPath })
155+
console.log(` ✅ Saved QR: ${screenshotPath}`)
156+
}
157+
} catch (err) {
158+
console.log(` ⚠️ Could not capture ${example.name}`)
159+
}
160+
}
161+
162+
await page.close()
163+
164+
// Kill the server process
165+
serverProcess.kill()
166+
167+
console.log('\n✨ Screenshots captured successfully!')
168+
console.log(`📁 All screenshots saved to: ${SCREENSHOTS_DIR}`)
169+
170+
// Generate summary
171+
const files = await fs.readdir(SCREENSHOTS_DIR)
172+
console.log(`\n📊 Summary:`)
173+
console.log(` Total files: ${files.length}`)
174+
console.log(` Pages captured: ${PAGES_TO_CAPTURE.length}`)
175+
console.log(` QR examples: ${examples.length}`)
176+
} finally {
177+
await browser.close()
178+
}
179+
}
180+
181+
// Run if called directly
182+
if (require.main === module) {
183+
captureScreenshots().catch((err) => {
184+
console.error('❌ Error:', err)
185+
process.exit(1)
186+
})
187+
}
188+
189+
module.exports = { captureScreenshots }

‎e2e/e2e-decode-simple.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const fs = require('fs')
2+
const { QRCode } = require('./dist/index.cjs.js')
3+
4+
// Read the SVG
5+
const svgContent = fs.readFileSync('test-minimal-output.svg', 'utf8')
6+
7+
// Extract data from SVG
8+
console.log('SVG Analysis:')
9+
console.log('=============')
10+
11+
// Check contrast
12+
const bgColor = svgContent.match(/fill="#(ffffff)"/)?.[1]
13+
const fgColors = svgContent.match(/fill="#(000000)"/g)
14+
15+
console.log('Background color:', bgColor || 'not found')
16+
console.log('Foreground modules:', fgColors ? fgColors.length : 0)
17+
18+
// Verify QR generation with same data
19+
try {
20+
const qr = new QRCode(0, 'L')
21+
qr.addData('TEST')
22+
qr.make()
23+
24+
const moduleCount = qr.getModuleCount()
25+
console.log('Module count:', moduleCount)
26+
console.log('QR Version:', qr.typeNumber)
27+
28+
// Count dark modules
29+
let darkCount = 0
30+
const modules = qr.getModules()
31+
for (let row = 0; row < moduleCount; row++) {
32+
for (let col = 0; col < moduleCount; col++) {
33+
if (modules[row][col]) darkCount++
34+
}
35+
}
36+
console.log('Dark modules:', darkCount)
37+
console.log('Expected rect elements:', darkCount + 1) // +1 for background
38+
39+
// The SVG has 225 rects which seems correct (224 dark modules + 1 background)
40+
console.log('\n✅ QR Code appears to be correctly generated')
41+
console.log('✅ Contrast ratio is maximum (black on white = 21:1)')
42+
console.log('✅ Should be detectable by all QR scanners')
43+
} catch (err) {
44+
console.error('Error:', err.message)
45+
}

‎e2e/e2e-default-qr.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
const puppeteer = require('puppeteer')
2+
const fs = require('fs').promises
3+
4+
async function testDefaultQR() {
5+
console.log('Testing default QR code from examples/index.html...\n')
6+
7+
const browser = await puppeteer.launch({
8+
headless: 'new',
9+
args: ['--no-sandbox', '--disable-setuid-sandbox'],
10+
})
11+
12+
try {
13+
const page = await browser.newPage()
14+
15+
// Navigate to examples/index.html
16+
await page.goto('http://localhost:8082/examples/index.html', {
17+
waitUntil: 'networkidle2',
18+
timeout: 30000,
19+
})
20+
21+
// Wait for React to render
22+
await new Promise((resolve) => setTimeout(resolve, 5000))
23+
24+
// Extract all QR codes
25+
const qrAnalysis = await page.evaluate(() => {
26+
const results = []
27+
28+
// Get all divs that might contain QR codes
29+
const containers = document.querySelectorAll('div')
30+
31+
containers.forEach((container) => {
32+
const svg = container.querySelector('svg')
33+
if (svg && svg.getAttribute('viewBox')) {
34+
const svgString = new XMLSerializer().serializeToString(svg)
35+
36+
// Find the title/label near this QR code
37+
let label = 'Unknown'
38+
const h4 = container.querySelector('h4')
39+
if (h4) {
40+
label = h4.textContent.trim()
41+
}
42+
43+
// Get colors
44+
const rects = svg.querySelectorAll('rect')
45+
let bgColor = null
46+
let fgColor = null
47+
48+
if (rects.length > 0) {
49+
// First rect is usually background
50+
bgColor = rects[0].getAttribute('fill')
51+
52+
// Second rect onwards are modules
53+
if (rects.length > 1) {
54+
fgColor = rects[1].getAttribute('fill')
55+
}
56+
}
57+
58+
results.push({
59+
label,
60+
width: svg.getAttribute('width'),
61+
height: svg.getAttribute('height'),
62+
backgroundColor: bgColor,
63+
foregroundColor: fgColor,
64+
totalRects: rects.length,
65+
svgString,
66+
})
67+
}
68+
})
69+
70+
return results
71+
})
72+
73+
console.log(`Found ${qrAnalysis.length} QR codes:\n`)
74+
75+
for (let i = 0; i < qrAnalysis.length; i++) {
76+
const qr = qrAnalysis[i]
77+
console.log(`${i + 1}. ${qr.label}`)
78+
console.log(` Size: ${qr.width}x${qr.height}`)
79+
console.log(` Background: ${qr.backgroundColor}`)
80+
console.log(` Foreground: ${qr.foregroundColor}`)
81+
console.log(` Modules: ${qr.totalRects - 1}`)
82+
83+
// Check detectability
84+
const bg = qr.backgroundColor
85+
const fg = qr.foregroundColor
86+
87+
if (!bg || !fg) {
88+
console.log(' ❌ CRITICAL: Missing color values!')
89+
} else if (bg === fg) {
90+
console.log(` ❌ CRITICAL: Same color for bg and fg: ${bg}`)
91+
} else if (
92+
(bg === '#ffffff' && fg === '#000000') ||
93+
(bg === '#000000' && fg === '#ffffff')
94+
) {
95+
console.log(' ✅ Perfect contrast')
96+
} else {
97+
// Calculate if there's enough contrast
98+
console.log(` ⚠️ Custom colors - check contrast`)
99+
}
100+
101+
// Save problematic QR codes
102+
if (
103+
qr.label === 'Default' ||
104+
(!qr.foregroundColor && !qr.backgroundColor)
105+
) {
106+
const filename = `e2e/qr-${qr.label.toLowerCase().replace(/\s+/g, '-')}.svg`
107+
await fs.writeFile(filename, qr.svgString)
108+
console.log(` 💾 Saved to: ${filename}`)
109+
}
110+
111+
console.log('')
112+
}
113+
114+
// Take a screenshot
115+
await page.screenshot({
116+
path: 'e2e/examples-page.png',
117+
fullPage: true,
118+
})
119+
console.log('Screenshot saved to: e2e/examples-page.png')
120+
} catch (error) {
121+
console.error('Error:', error.message)
122+
console.error(error.stack)
123+
} finally {
124+
await browser.close()
125+
}
126+
}
127+
128+
testDefaultQR().catch(console.error)

0 commit comments

Comments
 (0)