Merge pull request #3486 from jspsych/standardize-tests

standardize use of `displayElement` in tests
jspsych · Jan 10, 2025 · a757ab8 · a757ab8
2 parents f87d104 + 0b78155
commit a757ab8
Show file tree

Hide file tree

Showing 31 changed files with 258 additions and 230 deletions.
diff --git a/.changeset/tender-ads-prove.md b/.changeset/tender-ads-prove.md
@@ -0,0 +1,5 @@
+---
+"@jspsych/config": patch
+---
+
+remove DOM clearing after each individual test, fixes issues with testing in other repositories
diff --git a/packages/config/jest.cjs b/packages/config/jest.cjs
@@ -18,7 +18,6 @@ module.exports.makePackageConfig = (dirname) => {
     displayName: {
       name: packageBaseName,
       color: packageBaseName === "jspsych" ? "white" : "cyanBright",
-    },
-    setupFilesAfterEnv: ["../config/jest.setup.js"],
+    }
   };
 };
diff --git a/packages/config/jest.setup.js b/packages/config/jest.setup.js
diff --git a/packages/jspsych/src/timeline/Timeline.spec.ts b/packages/jspsych/src/timeline/Timeline.spec.ts
@@ -586,10 +586,10 @@ describe("Timeline", () => {
         const variable = new TimelineVariable("x");
 
         await timeline.run();
-        expect(() => timeline.evaluateTimelineVariable(variable)).toThrowError("");
+        expect(() => timeline.evaluateTimelineVariable(variable)).toThrow();
         expect(() =>
           (timeline.children[0] as Timeline).evaluateTimelineVariable(variable)
-        ).toThrowError("");
+        ).toThrow();
       });
     });
   });

diff --git a/packages/jspsych/src/timeline/Trial.spec.ts b/packages/jspsych/src/timeline/Trial.spec.ts
@@ -524,7 +524,7 @@ describe("Trial", () => {
           );
           await expect(
             createTrial({ type: TestPlugin, requiredComplexNested: {} }).run()
-          ).rejects.toThrowError('"requiredComplexNested.requiredChild" parameter');
+          ).rejects.toThrow('"requiredComplexNested.requiredChild" parameter');
         });
 
         it("errors on missing parameters nested in `COMPLEX` array parameters", async () => {

diff --git a/packages/jspsych/tests/core/functions-as-parameters.test.ts b/packages/jspsych/tests/core/functions-as-parameters.test.ts
@@ -21,7 +21,7 @@ describe("standard use of function as parameter", () => {
   test("parameters can be protected from early evaluation using ParameterType.FUNCTION", async () => {
     const mock = jest.fn();
 
-    await startTimeline([
+    const { displayElement } = await startTimeline([
       {
         type: cloze,
         text: "%foo%",
@@ -31,7 +31,7 @@ describe("standard use of function as parameter", () => {
     ]);
 
     expect(mock).not.toHaveBeenCalled();
-    await clickTarget(document.querySelector("#finish_cloze_button"));
+    await clickTarget(displayElement.querySelector("#finish_cloze_button"));
     expect(mock).toHaveBeenCalledTimes(1);
   });
 });
@@ -76,12 +76,12 @@ describe("nested parameters as functions", () => {
     ]);
 
     expect(displayElement.querySelectorAll("p.jspsych-survey-text").length).toBe(2);
-    await clickTarget(document.querySelector("#jspsych-survey-text-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
     await expectFinished();
   });
 
   test("nested parameter can be a function", async () => {
-    const { expectFinished } = await startTimeline([
+    const { expectFinished, displayElement } = await startTimeline([
       {
         type: surveyText,
         questions: [
@@ -95,18 +95,18 @@ describe("nested parameters as functions", () => {
       },
     ]);
 
-    expect(document.querySelector("#jspsych-survey-text-0 p.jspsych-survey-text").innerHTML).toBe(
+    expect(displayElement.querySelector("#jspsych-survey-text-0 p.jspsych-survey-text").innerHTML).toBe(
       "foo"
     );
-    expect(document.querySelector("#jspsych-survey-text-1 p.jspsych-survey-text").innerHTML).toBe(
+    expect(displayElement.querySelector("#jspsych-survey-text-1 p.jspsych-survey-text").innerHTML).toBe(
       "bar"
     );
-    await clickTarget(document.querySelector("#jspsych-survey-text-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
     await expectFinished();
   });
 
   test("multiple nested parameters can be functions", async () => {
-    const { expectFinished } = await startTimeline([
+    const { expectFinished, displayElement } = await startTimeline([
       {
         type: surveyMultiChoice,
         questions: [
@@ -128,11 +128,11 @@ describe("nested parameters as functions", () => {
       },
     ]);
 
-    expect(document.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("foo");
-    expect(document.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("buzz");
-    expect(document.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("bar");
-    expect(document.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("one");
-    await clickTarget(document.querySelector("#jspsych-survey-multi-choice-next"));
+    expect(displayElement.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("foo");
+    expect(displayElement.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("buzz");
+    expect(displayElement.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("bar");
+    expect(displayElement.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("one");
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next"));
     await expectFinished();
   });
 

diff --git a/packages/jspsych/tests/core/progressbar.test.ts b/packages/jspsych/tests/core/progressbar.test.ts
@@ -1,23 +1,24 @@
 import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response";
 import { pressKey, startTimeline } from "@jspsych/test-utils";
 
-import { initJsPsych } from "../../src";
+import { initJsPsych, JsPsych } from "../../src";
 
 describe("automatic progress bar", () => {
   test("progress bar does not display by default", async () => {
-    await startTimeline([
+    const { jsPsych } = await startTimeline([
       {
         type: htmlKeyboardResponse,
         stimulus: "foo",
       },
     ]);
 
-    expect(document.querySelector("#jspsych-progressbar-container")).toBeNull();
+    expect(jsPsych.getDisplayContainerElement().querySelector("#jspsych-progressbar-container"))
+      .toBeNull();
     await pressKey("a");
   });
 
   test("progress bar displays when show_progress_bar is true", async () => {
-    await startTimeline(
+    const { jsPsych } = await startTimeline(
       [
         {
           type: htmlKeyboardResponse,
@@ -27,9 +28,10 @@ describe("automatic progress bar", () => {
       { show_progress_bar: true }
     );
 
-    expect(document.querySelector("#jspsych-progressbar-container").innerHTML).toMatch(
-      '<span>Completion Progress</span><div id="jspsych-progressbar-outer"><div id="jspsych-progressbar-inner" style="width: 0%;"></div></div>'
-    );
+    expect(jsPsych.getDisplayContainerElement().querySelector("#jspsych-progressbar-container").innerHTML)
+      .toMatch(
+        '<span>Completion Progress</span><div id="jspsych-progressbar-outer"><div id="jspsych-progressbar-inner" style="width: 0%;"></div></div>'
+      );
   });
 
   test("progress bar automatically updates by default", async () => {
@@ -38,9 +40,13 @@ describe("automatic progress bar", () => {
       stimulus: "foo",
     };
 
-    await startTimeline([trial, trial, trial, trial], { show_progress_bar: true });
+    const { jsPsych } = await startTimeline(
+      [trial, trial, trial, trial],
+      { show_progress_bar: true }
+    );
 
-    const progressbarElement = document.querySelector<HTMLElement>("#jspsych-progressbar-inner");
+    const progressbarElement = 
+      jsPsych.getDisplayContainerElement().querySelector<HTMLElement>("#jspsych-progressbar-inner");
 
     expect(progressbarElement.style.width).toEqual("0%");
     await pressKey("a");
@@ -59,12 +65,13 @@ describe("automatic progress bar", () => {
       stimulus: "foo",
     };
 
-    await startTimeline([trial, trial, trial, trial], {
+    const { jsPsych } = await startTimeline([trial, trial, trial, trial], {
       show_progress_bar: true,
       auto_update_progress_bar: false,
     });
 
-    const progressbarElement = document.querySelector<HTMLElement>("#jspsych-progressbar-inner");
+    const progressbarElement = 
+      jsPsych.getDisplayContainerElement().querySelector<HTMLElement>("#jspsych-progressbar-inner");
 
     for (let i = 0; i < 4; i++) {
       expect(progressbarElement.style.width).toEqual("0%");
@@ -74,7 +81,7 @@ describe("automatic progress bar", () => {
   });
 
   test("set `progressBar.progress` manually", async () => {
-    const jsPsych = initJsPsych({
+    const jsPsychObject = initJsPsych({
       show_progress_bar: true,
       auto_update_progress_bar: false,
     });
@@ -96,9 +103,10 @@ describe("automatic progress bar", () => {
       },
     ];
 
-    await startTimeline(timeline, jsPsych);
+    const { jsPsych } = await startTimeline(timeline, jsPsychObject);
 
-    const progressbarElement = document.querySelector<HTMLElement>("#jspsych-progressbar-inner");
+    const progressbarElement = 
+      jsPsych.getDisplayContainerElement().querySelector<HTMLElement>("#jspsych-progressbar-inner");
 
     expect(progressbarElement.style.width).toEqual("0%");
     await pressKey("a");

diff --git a/packages/jspsych/tests/core/timeline-variables.test.ts b/packages/jspsych/tests/core/timeline-variables.test.ts
@@ -400,8 +400,7 @@ describe("timeline variables are correctly evaluated", () => {
   });
 });
 
-// using console.warn instead of error for now. plan is to enable this test with version 8.
-test.skip("timelineVariable() throws an error when variable doesn't exist", async () => {
+test("throws an error when variable doesn't exist", async () => {
   const jsPsych = initJsPsych();
   const { expectFinished } = await startTimeline(
     [
@@ -411,7 +410,7 @@ test.skip("timelineVariable() throws an error when variable doesn't exist", asyn
             type: htmlKeyboardResponse,
             stimulus: "foo",
             on_start: () => {
-              expect(() => jsPsych.evaluateTimelineVariable("c")).toThrowError();
+              expect(() => jsPsych.evaluateTimelineVariable("c")).toThrow();
             },
           },
         ],
@@ -430,7 +429,7 @@ test.skip("timelineVariable() throws an error when variable doesn't exist", asyn
   await expectFinished();
 });
 
-test("timelineVariable() can fetch a variable called 'data'", async () => {
+test("can fetch a variable called 'data'", async () => {
   const jsPsych = initJsPsych();
   const { expectFinished } = await startTimeline(
     [
@@ -440,7 +439,7 @@ test("timelineVariable() can fetch a variable called 'data'", async () => {
             type: htmlKeyboardResponse,
             stimulus: "foo",
             on_start: () => {
-              expect(() => jsPsych.evaluateTimelineVariable("data")).not.toThrowError();
+              expect(() => jsPsych.evaluateTimelineVariable("data")).not.toThrow();
             },
           },
         ],

diff --git a/packages/jspsych/tests/data/data-csv-conversion.test.ts b/packages/jspsych/tests/data/data-csv-conversion.test.ts
@@ -7,17 +7,17 @@ jest.useFakeTimers();
 
 describe("data conversion to csv", () => {
   test("survey-text data response object is correctly converted", async () => {
-    const { getData } = await startTimeline([
+    const { getData, displayElement } = await startTimeline([
       {
         type: surveyText,
         questions: [{ prompt: "Q1" }, { prompt: "Q2" }],
       },
     ]);
 
-    document.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
-    document.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
+    displayElement.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
+    displayElement.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
 
-    await clickTarget(document.querySelector("#jspsych-survey-text-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
 
     expect(
       getData()
@@ -62,17 +62,17 @@ describe("data conversion to csv", () => {
   });
 
   test("survey-multi-select response array is correctly converted", async () => {
-    const { getHTML, getData } = await startTimeline([
+    const { getHTML, getData, displayElement } = await startTimeline([
       {
         type: surveyMultiSelect,
         questions: [{ prompt: "foo", options: ["fuzz", "bizz", "bar"], name: "q" }],
       },
     ]);
 
     expect(getHTML()).toMatch("foo");
-    await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-0"));
-    await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-1"));
-    await clickTarget(document.querySelector("#jspsych-survey-multi-select-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-0"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-1"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-next"));
     expect(getHTML()).toBe("");
 
     expect(

diff --git a/packages/jspsych/tests/data/data-json-conversion.test.ts b/packages/jspsych/tests/data/data-json-conversion.test.ts
@@ -8,17 +8,17 @@ jest.useFakeTimers();
 
 describe("data conversion to json", () => {
   test("survey-text data response object is correctly converted", async () => {
-    const { getData } = await startTimeline([
+    const { getData, displayElement } = await startTimeline([
       {
         type: surveyText,
         questions: [{ prompt: "Q1" }, { prompt: "Q2" }],
       },
     ]);
 
-    document.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
-    document.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
+    displayElement.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
+    displayElement.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
 
-    await clickTarget(document.querySelector("#jspsych-survey-text-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
 
     expect(
       getData()
@@ -71,17 +71,17 @@ describe("data conversion to json", () => {
   });
 
   test("survey-multi-select response array is correctly converted", async () => {
-    const { getHTML, getData } = await startTimeline([
+    const { getHTML, getData, displayElement } = await startTimeline([
       {
         type: surveyMultiSelect,
         questions: [{ prompt: "foo", options: ["fuzz", "bizz", "bar"], name: "q" }],
       },
     ]);
 
     expect(getHTML()).toMatch("foo");
-    await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-0"));
-    await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-1"));
-    await clickTarget(document.querySelector("#jspsych-survey-multi-select-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-0"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-1"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-next"));
     expect(getHTML()).toBe("");
 
     expect(

diff --git a/packages/jspsych/tests/data/trialparameters.test.ts b/packages/jspsych/tests/data/trialparameters.test.ts
@@ -65,7 +65,7 @@ describe("Trial parameters in the data", () => {
   test("Arrayed objects work with save_trial_parameters ", async () => {
     const questions = [{ prompt: "foo" }, { prompt: "bar" }];
 
-    const { getData } = await startTimeline([
+    const { getData, displayElement } = await startTimeline([
       {
         type: surveyText,
         questions,
@@ -75,7 +75,7 @@ describe("Trial parameters in the data", () => {
       },
     ]);
 
-    await clickTarget(document.querySelector("#jspsych-survey-text-next"));
+    await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
 
     const data = getData().values()[0];
     expect(data.questions[0].prompt).toBe(questions[0].prompt);
@@ -96,7 +96,7 @@ describe("Trial parameters in the data", () => {
       return html;
     };
 
-    const { getData } = await startTimeline([
+    const { getData, displayElement } = await startTimeline([
       {
         type: reconstruction,
         stim_function: sample_function,
@@ -107,7 +107,7 @@ describe("Trial parameters in the data", () => {
       },
     ]);
 
-    await clickTarget(document.querySelector("button"));
+    await clickTarget(displayElement.querySelector("button"));
 
     expect(getData().values()[0].stim_function).toBe(sample_function.toString());
   });

diff --git a/packages/jspsych/tests/randomization/randomization.test.ts b/packages/jspsych/tests/randomization/randomization.test.ts
@@ -198,7 +198,7 @@ describe("randomInt", () => {
   test("setting upper < lower throws an error", () => {
     expect(() => {
       randomInt(1, 0);
-    }).toThrowError();
+    }).toThrow();
   });
 });
 

diff --git a/packages/plugin-audio-button-response/src/index.spec.ts b/packages/plugin-audio-button-response/src/index.spec.ts
@@ -273,9 +273,9 @@ describe("audio-button-response", () => {
       use_webaudio: false,
     });
 
-    await startTimeline(timeline, jsPsych);
+    const { displayElement } = await startTimeline(timeline, jsPsych);
 
-    const btns = document.querySelectorAll(".jspsych-html-button-response-button button");
+    const btns = displayElement.querySelectorAll(".jspsych-html-button-response-button button");
 
     for (let i = 0; i < btns.length; i++) {
       expect(btns[i].getAttribute("disabled")).toBe(true);