qrcodejs/testing.html at master · locandy/qrcodejs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html>
<head>
	<title>Cross-Browser QRCode generator for Javascript</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<script type="text/javascript" src="qrcode.js"></script>
	<style>
		#controls { margin: 2em; }
		#sourcetext, #scanresult { width:80em; }
		.successful { color: green; border: 1px solid #D0E0FF; border-radius:.25em; font-weight:bold; padding: .25em; margin:1.5em; }
	</style>
</head>
<body>
<h2>QRcode.js Simple Testing Facility</h2>
<p>As a simple aid to testing this library, a sequence of QR-code encoded URLs will be presented for you to paste into the first text box,
and if that text matches the original URL string, then that test is passed and should mark successful by clicking the checkbox. You should then move on to the next URL.
If all the tests pass, you can feel more confident in the correctness and reliability of this version of the library.
Generally, it will be most convenient to begin this test with a desktop computer displaying this page and a mobile telephone with a camera and QR-code scanning software to scan each code as they are presented, and then task switch back to the mobile browser. An attempt to read the clipboard will be made, but if it fails, merely paste the URI scanned directly into the "Scanned result text" text box.
In order to keep this purely client side and very simple, no server is coordination is attempted, but that means that you must manually check off the cases if and only if they pass, and you must do so on both the desktop and the mobile phone in coordination.
</p>
<div id="controls">
	<label for="sourcetext">Source Text:</label>
	<input id="sourcetext" type="text" value="" onblur="makeCode()"/>
	<input id="svg" type="checkbox" onchange="changeSVG(this)"><label for="svg">Use SVG</label>
</div>

<div id="qrcode" style="height:500px; margin-top:auto;" ></div>

<div>
	<hr/>
	<label for="scanresult">Scanned result text:</label>
	<input id="scanresult" type="text" value="" conchange="checkTestCase()" />
	<span id="status"></span>
	<ol id="testcases">
		<!-- To be populated dynamically -->
	</ol>
</div>


<script type="text/javascript">
const urlSequence = [
		"https://web.dev/",  //short
		"https://github.com/locandy/qrcodejs/blob/HEAD/qrcode.js#L568?artifical_length_extension_to_achieve_approximately_two-hundred-ninety-nine_character_length=as_this_was_known_to_result_in_an_overflow_error_somewhere_in_the_reed-solomon_error_correction_table_lookups&test_url_param_chars=simultaneously", //long + url param characters embedded
		"http://a.b.c.d.e.f.g.h.i.j.k.l.m.n.oo.pp.qqq.rrrr.ssssss.tttttttt.uuuuuuuuuuu.vvvvvvvvvvvvvvv.wwwwwwwwwwwwwwwwwwwwww.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy.zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.me/about-260-chars/back-there/but_by_the_time_this_is_done/it_should_be_upwards_of_300_characters/You_read_that_right/UPWARDS_OF_THREE_HUNDRED/NO_UPWARDS_OF_FOUR_HUNDRED/", //SUPER long
		"http://detectportal.firefox.com/success.txt", //no ssl
		"https://multimedia-audioguide.locandy.com/",
		"https://apps.apple.com/ua/app/locandy/id789268894",
		"https://en.wikipedia.org/wiki/QR_code"
	];
var lastTestPassed = -1;
var debounce = Date.now();
var div = document.getElementById("qrcode");
var qrcode = new QRCode(div, {
	width:400,
	height:400,
	output:"canvas+png" // or "svg" or "table"
});

function makeCode () {
	var elText = document.getElementById("sourcetext");
	qrcode.setCode(elText.value);
}

function changeSVG(inputCheckbox)
{
    qrcode.clear();

    if(inputCheckbox.checked)
        qrcode = new QRCode(div, { width:400, height:400, output:"svg" });
    else
        qrcode = new QRCode(div, { width:400, height:400, output:"canvas" });

    makeCode();
}


function testStep () {
	let elText = document.getElementById("sourcetext");
	elText.value = urlSequence[lastTestPassed + 1];
	makeCode();
	if (lastTestPassed > -1) {
		if (lastTestPassed < urlSequence.length - 1) {
			document.querySelector("#testcases > li:nth-child("+ (lastTestPassed + 2) +") > input[type='checkbox']").disabled=false;
		}
		if (lastTestPassed) {
			if (lastTestPassed >= urlSequence.length - 1) {
				alert("Testing complete! All tests successful!");
				console.log("Testing complete! All tests successful!");
			}
			//console.log("[x] Test Passed!  ( " + urlSequence[lastTestPassed] + " )");
		}
	}
	let elResult = document.getElementById("scanresult");
	elResult.value="";
	let elStatus = document.getElementById("status");
	elStatus.innerHTML= "[ ] awaiting decoded text for test";
	elStatus.classList.remove('successful');
}

function checkTestCase () {
	let rightnow = Date.now();
	if ((rightnow - debounce) < 800) {
		//noop
		console.log("debouncing...");
	} else {
		debounce = rightnow;
		let elResult = document.getElementById("scanresult");
		if (elResult.value && elResult.value == urlSequence[lastTestPassed+1]) {
			lastTestPassed += 1;
			console.log("[x] Test Passed!  ( " + urlSequence[lastTestPassed] + " )");
			testStep();
		} else {
			console.warn("Uh oh! This test was NOT passed!");
		}
	}
}


if(window.location.hash && window.location.hash.match(/#[0-9]+$/)) {
	lastTestPassed = parseInt(window.location.hash.substring(1));
}

//wire up
let elScanResult = document.getElementById("scanresult");
elScanResult.addEventListener('input', (event) => {
	if (event.currentTarget.value === urlSequence[lastTestPassed+1]) {
			console.log("[&check;] Test Passed!  ( " + urlSequence[lastTestPassed+1] + " )");
			let elStatus = document.getElementById("status");
			elStatus.innerHTML= "[&check;] Test Passed!";
			elStatus.classList.add('successful');
			//"&check;"
			//"&cross;"
	} else {
			console.log("[&cross;] Test FAILED!  ( " + urlSequence[lastTestPassed+1] + " )");
	}
});

//focus event on window works on desktop consistently, on android sometimes:
window.addEventListener('focus', (event) => {
	console.log("just got focus again, attempt clipboard acquire...");
	let elScanResult = document.getElementById("scanresult");
	navigator.clipboard.readText().then((clipText) => {
		elScanResult.value = clipText;
		elScanResult.dispatchEvent(new Event('input', { bubbles: true }));
	});
});

urlSequence.unshift(document.URL);
let elTestCases = document.getElementById("testcases");
for (let i = 0; i<urlSequence.length; i++) {
	console.log(urlSequence[i]);
	let newLI = document.createElement("li");
	newLI.innerText= urlSequence[i];
	const checkboxElement = document.createElement("input");
	checkboxElement.type = "checkbox";
	checkboxElement.id = "test_"+i;
	if (i) {
		checkboxElement.disabled = true;
	}
	checkboxElement.addEventListener('change', (event) => {
		if (event.currentTarget.checked) {
			lastTestPassed+=1;
			testStep();
		} else {
			console.log("note: we just unchecked, maybe warn to keep in sync?");
			let testIndex = 0;
			//first cycle up from zero to ensure we are contiguous,
			let contiguous = true;
			let checkboxes = document.querySelectorAll('#testcases input[type="checkbox"]');
			checkboxes.forEach((checkbox) => {
				if (checkbox.checked && contiguous) {
					console.log(checkbox.id + " check'd");
					testIndex += 1;
				} else {
					console.log(checkbox.id + " not check'd");
					contiguous = false;
				}
			});
			//then correct internal state
			lastTestPassed = testIndex - 1;
			navigator.clipboard.writeText(" ").then(() => {
				console.log("Text copied to clipboard successfully!");
				testStep();
				//checkTestCase();
			})
			alert("Test previously marked 'passed' has been unmarked. Make sure to keep your device test list in sync!");
		}
	});
	newLI.appendChild(checkboxElement);
	elTestCases.appendChild(newLI);
}

testStep();

</script>
</body>
</html>