Test Automation - clean up (#61)

* result->value for consistency * Flatten test results, separate value from error message. * result -> value for consistency * Referrer trimming - flatten results object. * Expose click-to-play results in a global variable. Move JS from HTML to a JS file.
duckduckgo · Oct 11, 2021 · 7c52c55 · 7c52c55
1 parent 7c6701d
commit 7c52c55
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 121 deletions.
diff --git a/privacy-protections/click-to-load/index.html b/privacy-protections/click-to-load/index.html
@@ -56,88 +56,7 @@ <h2> Objects in iFrames </h2>
 <p> Groups don't currently allow iFrame displays, but the documentation still shows this as a valid method of showing groups, so it's included here in case it changes again in the future </p> 
 <br /><iframe src="https://www.facebook.com/plugins/group.php?href=https%3A%2F%2Fwww.facebook.com%2Fgroups%2Fayearofrunning%2F&width=280&show_social_context=true&show_metadata=false&height=267&appId" width="280" height="267" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
 
-<script>
-let facebookCalls = 0;
-let fbIFrames = 0;
-
-// Find all the iFrames currently on page.
-const frameNodes = document.querySelectorAll('iFrame');
-fbIFrames = frameNodes.length
-document.getElementById('facebook_iFrames').innerHTML = fbIFrames;
-
-// This initializes the facebook SDK.
-window.fbAsyncInit = function () {
-    // eslint-disable-next-line no-undef
-    FB.init({
-        appId: '',
-        autoLogAppEvents: true,
-        xfbml: true,
-        version: 'v9.0'
-    });
-
-    function fbLogin () {
-        const displayArea = document.getElementById('loginResponse');
-        displayArea.innerHTML = 'Calling FB SDK... ';
-        // eslint-disable-next-line no-undef
-        FB.login(function (response) {
-            if (response.authResponse) {
-                displayArea.innerHTML = 'Starting FB login... ';
-                // eslint-disable-next-line no-undef
-                FB.api('/me', function (response) {
-                    displayArea.innerHTML = `Logged in as ${response.name}`;
-                });
-            } else {
-                displayArea.innerHTML = 'User cancelled login or did not fully authorize.';
-            }
-        });
-    }
-
-    const loginButton = document.getElementById('custom-fb-login-button');
-    loginButton.addEventListener('click', fbLogin);
-};
-
-function displayFacebookCalls (callCount) {
-    document.getElementById('facebook_call_count').innerHTML = callCount;
-}
-
-function facebookObserver (list, observer) {
-    const resourceLoads = list.getEntriesByType('resource');
-    for (const resource of resourceLoads) {
-        if (resource.name.match(/facebook.com|facebook.net/)) {
-            /* Observer still counts calls that fail, but the duration is less. In testing,
-             * failed iFrames always returned in around 100 or less, with success generally being
-             * above 200. Occasionally, a loaded resource comes in around 150. If Facebook requests
-             * are allowed, there will also be other resources that load - scripts and content
-             * which will always be counted.
-            */
-            if (resource.initiatorType !== 'iframe' || resource.duration > 150) {
-                facebookCalls += 1;
-            }
-        }
-    }
-    displayFacebookCalls(facebookCalls);
-}
-
-const observer = new PerformanceObserver(facebookObserver);
-observer.observe({ entryTypes: ['resource'] });
-
-function downloadTheResults () {
-    const data = JSON.stringify({ facebookCalls: facebookCalls, facebookIframes: fbIFrames });
-    const a = document.createElement('a');
-    const url = window.URL.createObjectURL(new Blob([data], { type: 'application/json' }));
-    a.href = url;
-    a.download = 'click-to-load-results.json';
-
-    document.body.appendChild(a);
-    a.click();
-
-    window.URL.revokeObjectURL(url);
-    a.remove();
-}
-
-const downloadButton = document.querySelector('#download');
-downloadButton.addEventListener('click', () => downloadTheResults());
-</script>
+<script src='./main.js'></script>
 
 </body>
 </html>
diff --git a/privacy-protections/click-to-load/main.js b/privacy-protections/click-to-load/main.js
@@ -0,0 +1,100 @@
+let facebookCalls = 0;
+let fbIFrames = 0;
+
+// object that contains results of all tests
+const results = {
+    page: 'facebook-click-to-load',
+    date: (new Date()).toUTCString(),
+    results: []
+};
+
+function updateResults () {
+    results.results = [
+        {
+            id: 'facebookCalls',
+            value: facebookCalls
+        },
+        {
+            id: 'fbIFrames',
+            value: fbIFrames
+        }
+    ];
+
+    document.getElementById('facebook_iFrames').innerHTML = fbIFrames;
+    document.getElementById('facebook_call_count').innerHTML = facebookCalls;
+}
+
+// Find all the iFrames currently on page.
+const frameNodes = document.querySelectorAll('iFrame');
+fbIFrames = frameNodes.length;
+updateResults();
+
+// This initializes the facebook SDK.
+window.fbAsyncInit = function () {
+    // eslint-disable-next-line no-undef
+    FB.init({
+        appId: '',
+        autoLogAppEvents: true,
+        xfbml: true,
+        version: 'v9.0'
+    });
+
+    function fbLogin () {
+        const displayArea = document.getElementById('loginResponse');
+        displayArea.innerHTML = 'Calling FB SDK... ';
+        // eslint-disable-next-line no-undef
+        FB.login(function (response) {
+            if (response.authResponse) {
+                displayArea.innerHTML = 'Starting FB login... ';
+                // eslint-disable-next-line no-undef
+                FB.api('/me', function (response) {
+                    displayArea.innerHTML = `Logged in as ${response.name}`;
+                });
+            } else {
+                displayArea.innerHTML = 'User cancelled login or did not fully authorize.';
+            }
+        });
+    }
+
+    const loginButton = document.getElementById('custom-fb-login-button');
+    loginButton.addEventListener('click', fbLogin);
+};
+
+function facebookObserver (list, observer) {
+    const resourceLoads = list.getEntriesByType('resource');
+    for (const resource of resourceLoads) {
+        if (resource.name.match(/facebook.com|facebook.net/)) {
+            /* Observer still counts calls that fail, but the duration is less. In testing,
+             * failed iFrames always returned in around 100 or less, with success generally being
+             * above 200. Occasionally, a loaded resource comes in around 150. If Facebook requests
+             * are allowed, there will also be other resources that load - scripts and content
+             * which will always be counted.
+            */
+            if (resource.initiatorType !== 'iframe' || resource.duration > 150) {
+                facebookCalls += 1;
+            }
+        }
+    }
+
+    updateResults();
+}
+
+const observer = new PerformanceObserver(facebookObserver);
+observer.observe({ entryTypes: ['resource'] });
+
+function downloadTheResults () {
+    const data = JSON.stringify(results);
+    const a = document.createElement('a');
+    const url = window.URL.createObjectURL(new Blob([data], { type: 'application/json' }));
+    a.href = url;
+    a.download = 'facebook-click-to-load-results.json';
+
+    document.body.appendChild(a);
+    a.click();
+
+    window.URL.revokeObjectURL(url);
+    a.remove();
+}
+
+const downloadButton = document.querySelector('#download');
+downloadButton.addEventListener('click', () => downloadTheResults());
diff --git a/privacy-protections/referrer-trimming/main.js b/privacy-protections/referrer-trimming/main.js
@@ -26,11 +26,11 @@ function generateNavigationTest (url) {
         const result = [
             {
                 test: 'js',
-                result: currentURL.searchParams.get('js')
+                value: currentURL.searchParams.get('js')
             },
             {
                 test: 'header',
-                result: currentURL.searchParams.get('header')
+                value: currentURL.searchParams.get('header')
             }
         ];
         localStorage.setItem(key, JSON.stringify(result));
@@ -148,13 +148,14 @@ function runTests () {
         testsSummaryDiv.innerText = `Performed ${all} tests${failed > 0 ? ` (${failed} failed)` : ''}. Click for details.`;
     }
 
-    for (const test of tests) {
-        const resultObj = {
-            id: test.id,
-            value: null
-        };
-        results.results.push(resultObj);
+    function addTestResult (testId, value) {
+        results.results.push({
+            id: testId,
+            value: value
+        });
+    }
 
+    for (const test of tests) {
         const li = document.createElement('li');
         li.id = `test-${test.id.replace(' ', '-')}`;
         li.innerHTML = `${test.id} - <span class='value'>…</span>`;
@@ -172,30 +173,40 @@ function runTests () {
                 result
                     .then(data => {
                         if (Array.isArray(data)) {
-                            valueSpan.innerHTML = `<ul>${data.map(r => `<li>${r.test} - ${r.result}</li>`).join('')}</ul>`;
-                        } else if (data) {
-                            valueSpan.innerHTML = JSON.stringify(data, null, 2);
-                        }
+                            valueSpan.innerHTML = `<ul>${data.map(r => `<li>${r.test} - ${r.value}</li>`).join('')}</ul>`;
+
+                            data.forEach(item => addTestResult(`${test.id} - ${item.test}`, item.result));
+                        } else {
+                            if (data) {
+                                valueSpan.innerHTML = JSON.stringify(data, null, 2);
+                            }
 
-                        resultObj.value = data;
+                            addTestResult(test.id, data);
+                        }
                     })
                     .catch(e => {
                         failed++;
                         valueSpan.innerHTML = `❌ error thrown ("${e.message ? e.message : e}")`;
+                        addTestResult(test.id, null);
                         updateSummary();
                     });
             } else {
                 if (Array.isArray(result)) {
-                    valueSpan.innerHTML = `<ul>${result.map(r => `<li>${r.test} - ${r.result}</li>`).join('')}</ul>`;
-                } else if (result) {
-                    valueSpan.innerHTML = JSON.stringify(result, null, 2);
-                }
+                    valueSpan.innerHTML = `<ul>${result.map(r => `<li>${r.test} - ${r.value}</li>`).join('')}</ul>`;
 
-                resultObj.value = result || null;
+                    result.forEach(item => addTestResult(`${test.id} - ${item.test}`, item.value));
+                } else {
+                    if (result) {
+                        valueSpan.innerHTML = JSON.stringify(result, null, 2);
+                    }
+
+                    addTestResult(test.id, result || null);
+                }
             }
         } catch (e) {
             failed++;
             valueSpan.innerHTML = `❌ error thrown ("${e.message ? e.message : e}")`;
+            addTestResult(test.id, null);
         }
 
         all++;

diff --git a/privacy-protections/storage-blocking/iframe.js b/privacy-protections/storage-blocking/iframe.js
@@ -9,22 +9,22 @@ function storeData (randomNumber) {
                 return result
                     .then(() => ({
                         test: test.id,
-                        result: 'OK'
+                        value: 'OK'
                     }))
                     .catch(e => ({
                         test: test.id,
-                        result: e.message
+                        value: e.message
                     }));
             } else {
                 return Promise.resolve({
                     test: test.id,
-                    result: 'OK'
+                    value: 'OK'
                 });
             }
         } catch (e) {
             return Promise.resolve({
                 test: test.id,
-                result: e.message ? e.message : e
+                value: e.message ? e.message : e
             });
         }
     }));
@@ -39,22 +39,24 @@ function retrieveData () {
                 return result
                     .then(value => ({
                         test: test.id,
-                        result: value
+                        value: value
                     }))
                     .catch(e => ({
                         test: test.id,
-                        result: e.message
+                        value: null,
+                        error: e.message
                     }));
             } else {
                 return Promise.resolve({
                     test: test.id,
-                    result: result
+                    value: result
                 });
             }
         } catch (e) {
             return Promise.resolve({
                 test: test.id,
-                result: e.message ? e.message : e
+                value: null,
+                error: e.message ? e.message : e
             });
         }
     }));