From 9da721b2ccc7e3e77fedbcbcbff3a3826a20e683 Mon Sep 17 00:00:00 2001
From: bjoluc <mail@bjoluc.de>
Date: Thu, 6 Jan 2022 13:11:58 +0100
Subject: [PATCH] some aesthetic changes to the testing examples

---
 basic-testing/index.html        | 70 +++++++++++----------------------
 testing-with-jasmine/index.html | 40 ++++++++-----------
 testing-with-jasmine/tests.js   | 22 ++++++-----
 3 files changed, 52 insertions(+), 80 deletions(-)

diff --git a/basic-testing/index.html b/basic-testing/index.html
index dbd0cb1..5ac3ac1 100644
--- a/basic-testing/index.html
+++ b/basic-testing/index.html
@@ -45,7 +45,7 @@
           task: "instructions-check",
         },
         on_finish: (data) => {
-          data.correct = data.response == jsPsych.timelineVariable("answer");
+          data.correct = data.response === jsPsych.timelineVariable("answer");
         },
       },
     ],
@@ -68,22 +68,14 @@
     ],
     conditional_function: () => {
       const ic_data = jsPsych.data.get().filter({ task: "instructions-check" }).last(2);
-      return !ic_data.select("correct").all((value) => {
-        return value == true;
-      });
+      return !ic_data.select("correct").all(Boolean);
     },
   };
 
   const instructions_loop = {
     timeline: [instructions, instruction_check, instructions_check_fail],
-    loop_function: (data) => {
-      return !data
-        .filter({ task: "instructions-check" })
-        .select("correct")
-        .all((value) => {
-          return value == true;
-        });
-    },
+    loop_function: (data) =>
+      !data.filter({ task: "instructions-check" }).select("correct").all(Boolean),
   };
 
   const pre_task_start = {
@@ -105,9 +97,7 @@
       },
       {
         type: jsPsychHtmlKeyboardResponse,
-        stimulus: () => {
-          return `<p class="stimulus">${jsPsych.timelineVariable("number")}</p>`;
-        },
+        stimulus: () => `<p class="stimulus">${jsPsych.timelineVariable("number")}</p>`,
         choices: ["a", "l"],
         data: {
           digit: jsPsych.timelineVariable("number"),
@@ -141,42 +131,28 @@
 
     // check that there are an equal number of all trial types
     const all_equal = [
-      data.filter({ parity: "odd", magnitude: "small" }).count(),
-      data.filter({ parity: "odd", magnitude: "large" }).count(),
-      data.filter({ parity: "even", magnitude: "small" }).count(),
-      data.filter({ parity: "even", magnitude: "large" }).count(),
-    ].every((value, i, array) => {
-      return value === array[0];
-    });
+      { parity: "odd", magnitude: "small" },
+      { parity: "odd", magnitude: "large" },
+      { parity: "even", magnitude: "small" },
+      { parity: "even", magnitude: "large" },
+    ]
+      .map((properties) => data.filter(properties).count())
+      .every((value, i, array) => value === array[0]);
 
-    if (all_equal) {
-      test_results += "<p>✔️ Equal number of all trial types</p>";
-    } else {
-      test_results += "<p>❌ Unequal number of all trial types</p>";
-    }
+    test_results += all_equal
+      ? "<p>✔️ Equal number of all trial types</p>"
+      : "<p>❌ Unequal number of all trial types</p>";
 
-    // check that answering the instructions incorrectly causes a loop
+    // check whether answering the instructions incorrectly causes a loop
     const looped = data.filter({ task: "instructions-check" }).count() > 2;
-    if (
-      !data
-        .filter({ task: "instructions-check" })
-        .first(2)
-        .select("correct")
-        .all((x) => {
-          return x == true;
-        })
-    ) {
-      if (looped) {
-        test_results += "<p>✔️ Instructions looped on check fail</p>";
-      } else {
-        test_results += "<p>❌ Instructions did not loop on check fail</p>";
-      }
+    if (!data.filter({ task: "instructions-check" }).first(2).select("correct").all(Boolean)) {
+      test_results += looped
+        ? "<p>✔️ Instructions looped on check fail</p>"
+        : "<p>❌ Instructions did not loop on check fail</p>";
     } else {
-      if (!looped) {
-        test_results += "<p>✔️ Instructions did not loop on check pass</p>";
-      } else {
-        test_results += "<p>❌ Instructions looped on check pass</p>";
-      }
+      test_results += looped
+        ? "<p>❌ Instructions looped on check pass</p>"
+        : "<p>✔️ Instructions did not loop on check pass</p>";
     }
 
     jsPsych.getDisplayElement().innerHTML = test_results;
diff --git a/testing-with-jasmine/index.html b/testing-with-jasmine/index.html
index 5538ca6..2d8e0ab 100644
--- a/testing-with-jasmine/index.html
+++ b/testing-with-jasmine/index.html
@@ -3,15 +3,12 @@
   <script src="https://unpkg.com/jspsych@7.1.2"></script>
   <script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.0"></script>
   <script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.1.0"></script>
-  <script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.1/lib/jasmine-core/jasmine.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.1/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.1/lib/jasmine-core/boot0.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.1/lib/jasmine-core/boot1.js"></script>
+  <script src="https://unpkg.com/jasmine-core@4.0.0/lib/jasmine-core/jasmine.js"></script>
+  <script src="https://unpkg.com/jasmine-core@4.0.0/lib/jasmine-core/jasmine-html.js"></script>
+  <script src="https://unpkg.com/jasmine-core@4.0.0/lib/jasmine-core/boot0.js"></script>
+  <script src="https://unpkg.com/jasmine-core@4.0.0/lib/jasmine-core/boot1.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.2/css/jspsych.css" />
-  <link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/jasmine-core@3.10.1/lib/jasmine-core/jasmine.css"
-  />
+  <link rel="stylesheet" href="https://unpkg.com/jasmine-core@4.0.0/lib/jasmine-core/jasmine.css" />
   <style>
     .stimulus {
       font-size: 40px;
@@ -142,25 +139,22 @@
   }
 
   async function simulateExperiment(simulation_options) {
-    return new Promise((resolve) => {
-      const container = document.createElement("div");
-      container.setAttribute("id", "experiment-simulation-container");
-      container.style.visibility = "hidden";
+    const container = document.createElement("div");
+    container.setAttribute("id", "experiment-simulation-container");
+    container.style.visibility = "hidden";
 
-      document.querySelector("body").appendChild(container);
+    document.querySelector("body").appendChild(container);
 
-      const jsPsych = initJsPsych({
-        display_element: "experiment-simulation-container",
-        on_finish: function () {
-          container.remove();
-          resolve(jsPsych.data.get());
-        },
-      });
+    const jsPsych = initJsPsych({
+      display_element: "experiment-simulation-container",
+    });
 
-      const timeline = create_timeline(jsPsych);
+    const timeline = create_timeline(jsPsych);
 
-      jsPsych.simulate(timeline, "data-only", simulation_options);
-    });
+    await jsPsych.simulate(timeline, "data-only", simulation_options);
+
+    container.remove();
+    return jsPsych.data.get();
   }
 </script>
 <script src="tests.js"></script>
diff --git a/testing-with-jasmine/tests.js b/testing-with-jasmine/tests.js
index b3dd217..322655d 100644
--- a/testing-with-jasmine/tests.js
+++ b/testing-with-jasmine/tests.js
@@ -3,15 +3,17 @@ describe("snarc experiment", () => {
     const data = await simulateExperiment();
 
     const all_equal = [
-      data.filter({ parity: "odd", magnitude: "small" }).count(),
-      data.filter({ parity: "odd", magnitude: "large" }).count(),
-      data.filter({ parity: "even", magnitude: "small" }).count(),
-      data.filter({ parity: "even", magnitude: "large" }).count(),
-    ].every((value, i, array) => {
-      return value === array[0];
-    });
+      { parity: "odd", magnitude: "small" },
+      { parity: "odd", magnitude: "large" },
+      { parity: "even", magnitude: "small" },
+      { parity: "even", magnitude: "large" },
+    ]
+      .map((properties) => data.filter(properties).count())
+      .every((value, i, array) => {
+        return value === array[0];
+      });
 
-    expect(all_equal).toBe(true);
+    expect(all_equal).toBeTrue();
   });
 
   it("loops if the instructions check is failed", async () => {
@@ -41,7 +43,7 @@ describe("snarc experiment", () => {
 
     const looped = data.filter({ task: "instructions-check" }).count() > 2;
 
-    expect(looped).toBe(true);
+    expect(looped).toBeTrue();
   });
 
   it("does not loop if the instructions check is passed", async () => {
@@ -62,6 +64,6 @@ describe("snarc experiment", () => {
 
     const looped = data.filter({ task: "instructions-check" }).count() > 2;
 
-    expect(looped).toBe(false);
+    expect(looped).toBeFalse();
   });
 });