From ad1d854f43c1e25ba988a3aa2a23a8ab22be3535 Mon Sep 17 00:00:00 2001 From: jade <101148768+jadeddelta@users.noreply.github.com> Date: Fri, 10 Jan 2025 01:02:58 -0700 Subject: [PATCH] rework tests to use `displayElement`, remove DOM clearing per test --- .changeset/tender-ads-prove.md | 5 + packages/config/jest.cjs | 3 +- packages/config/jest.setup.js | 3 - .../core/functions-as-parameters.test.ts | 26 ++--- .../jspsych/tests/core/progressbar.test.ts | 37 ++++--- .../tests/data/data-csv-conversion.test.ts | 16 +-- .../tests/data/data-json-conversion.test.ts | 16 +-- .../tests/data/trialparameters.test.ts | 8 +- .../src/index.spec.ts | 4 +- packages/plugin-cloze/src/index.spec.ts | 101 +++++++++--------- packages/plugin-fullscreen/src/index.spec.ts | 8 +- .../src/index.spec.ts | 4 +- .../src/index.spec.ts | 4 +- .../src/index.spec.ts | 4 +- .../src/index.spec.ts | 11 +- .../src/index.spec.ts | 24 ++--- packages/plugin-maxdiff/src/index.spec.ts | 8 +- .../src/index.spec.ts | 21 ++-- .../src/index.spec.ts | 44 ++++---- .../plugin-survey-html-form/src/index.spec.ts | 2 +- .../plugin-survey-likert/src/index.spec.ts | 21 ++-- .../src/index.spec.ts | 30 +++--- .../src/index.spec.ts | 22 ++-- packages/plugin-survey-text/src/index.spec.ts | 40 +++---- .../src/index.spec.ts | 6 +- 25 files changed, 251 insertions(+), 217 deletions(-) create mode 100644 .changeset/tender-ads-prove.md delete mode 100644 packages/config/jest.setup.js diff --git a/.changeset/tender-ads-prove.md b/.changeset/tender-ads-prove.md new file mode 100644 index 00000000..a0548b90 --- /dev/null +++ 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 index 43ea3630..c4f24a37 100644 --- 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 deleted file mode 100644 index 4c6b91b3..00000000 --- a/packages/config/jest.setup.js +++ /dev/null @@ -1,3 +0,0 @@ -global.afterEach(() => { - document.body.innerHTML = ''; -}); \ No newline at end of file diff --git a/packages/jspsych/tests/core/functions-as-parameters.test.ts b/packages/jspsych/tests/core/functions-as-parameters.test.ts index 47286645..b6ba66cf 100644 --- 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 index 39d1c78a..b83d96f9 100644 --- a/packages/jspsych/tests/core/progressbar.test.ts +++ b/packages/jspsych/tests/core/progressbar.test.ts @@ -1,23 +1,29 @@ import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response"; import { pressKey, startTimeline } from "@jspsych/test-utils"; -import { initJsPsych } from "../../src"; +import { initJsPsych, JsPsych } from "../../src"; + +// progress bar lives in the container element +const getContainer = (jsPsych: JsPsych) => { + return jsPsych.getDisplayContainerElement(); +} 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(); + const displayContainer = getContainer(jsPsych); + expect(displayContainer.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,7 +33,8 @@ describe("automatic progress bar", () => { { show_progress_bar: true } ); - expect(document.querySelector("#jspsych-progressbar-container").innerHTML).toMatch( + const displayContainer = getContainer(jsPsych); + expect(displayContainer.querySelector("#jspsych-progressbar-container").innerHTML).toMatch( 'Completion Progress
' ); }); @@ -38,9 +45,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("#jspsych-progressbar-inner"); + const displayContainer = getContainer(jsPsych); + const progressbarElement = displayContainer.querySelector("#jspsych-progressbar-inner"); expect(progressbarElement.style.width).toEqual("0%"); await pressKey("a"); @@ -59,12 +70,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("#jspsych-progressbar-inner"); + const displayContainer = getContainer(jsPsych); + const progressbarElement = displayContainer.querySelector("#jspsych-progressbar-inner"); for (let i = 0; i < 4; i++) { expect(progressbarElement.style.width).toEqual("0%"); @@ -74,7 +86,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 +108,10 @@ describe("automatic progress bar", () => { }, ]; - await startTimeline(timeline, jsPsych); + const { jsPsych } = await startTimeline(timeline, jsPsychObject); - const progressbarElement = document.querySelector("#jspsych-progressbar-inner"); + const displayContainer = getContainer(jsPsych); + const progressbarElement = displayContainer.querySelector("#jspsych-progressbar-inner"); expect(progressbarElement.style.width).toEqual("0%"); await pressKey("a"); diff --git a/packages/jspsych/tests/data/data-csv-conversion.test.ts b/packages/jspsych/tests/data/data-csv-conversion.test.ts index 133c5f41..1256fddb 100644 --- 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("#input-0").value = "Response 1"; - document.querySelector("#input-1").value = "Response 2"; + displayElement.querySelector("#input-0").value = "Response 1"; + displayElement.querySelector("#input-1").value = "Response 2"; - await clickTarget(document.querySelector("#jspsych-survey-text-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-text-next")); expect( getData() @@ -62,7 +62,7 @@ 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" }], @@ -70,9 +70,9 @@ describe("data conversion to csv", () => { ]); 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 index 5d58d902..1115dbae 100644 --- 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("#input-0").value = "Response 1"; - document.querySelector("#input-1").value = "Response 2"; + displayElement.querySelector("#input-0").value = "Response 1"; + displayElement.querySelector("#input-1").value = "Response 2"; - await clickTarget(document.querySelector("#jspsych-survey-text-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-text-next")); expect( getData() @@ -71,7 +71,7 @@ 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" }], @@ -79,9 +79,9 @@ describe("data conversion to json", () => { ]); 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 index 3627742e..9a5324f4 100644 --- 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/plugin-audio-button-response/src/index.spec.ts b/packages/plugin-audio-button-response/src/index.spec.ts index 8a3ff519..06a69875 100644 --- 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); diff --git a/packages/plugin-cloze/src/index.spec.ts b/packages/plugin-cloze/src/index.spec.ts index 045373af..a08bc22b 100644 --- a/packages/plugin-cloze/src/index.spec.ts +++ b/packages/plugin-cloze/src/index.spec.ts @@ -4,13 +4,18 @@ import cloze from "."; jest.useFakeTimers(); -const getInputElementById = (id: string) => document.getElementById(id) as HTMLInputElement; +const getInputElementById = ( + id: string, + displayElement: HTMLElement +) => displayElement.querySelector("#" + id) as HTMLInputElement; -const clickFinishButton = () => clickTarget(document.querySelector("#finish_cloze_button")); +const clickFinishButton = ( + displayElement: HTMLElement +) => clickTarget(displayElement.querySelector("#finish_cloze_button")); describe("cloze", () => { test("displays cloze", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -21,12 +26,12 @@ describe("cloze", () => { '
This is a text.
' ); - await clickFinishButton(); + await clickFinishButton(displayElement); await expectFinished(); }); test("displays default button text", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -37,12 +42,12 @@ describe("cloze", () => { '' ); - await clickFinishButton(); + await clickFinishButton(displayElement); await expectFinished(); }); test("displays custom button text", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -54,24 +59,24 @@ describe("cloze", () => { '' ); - await clickFinishButton(); + await clickFinishButton(displayElement); await expectFinished(); }); test("ends trial on button click when using default settings, i.e. answers are not checked", async () => { - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", }, ]); - await clickFinishButton(); + await clickFinishButton(displayElement); await expectFinished(); }); test("ends trial on button click when answers are checked and correct", async () => { - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -79,13 +84,13 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "cloze"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "cloze"; + await clickFinishButton(displayElement); await expectFinished(); }); test("ends trial on button click when answers are checked and correct without case sensitivity", async () => { - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -94,13 +99,13 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "CLOZE"; - clickTarget(document.querySelector("#finish_cloze_button")); + getInputElementById("input0", displayElement).value = "CLOZE"; + await clickFinishButton(displayElement); await expectFinished(); }); test("ends trial on button click when all answers are checked for completion and are complete", async () => { - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -108,13 +113,13 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "filler"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "filler"; + await clickFinishButton(displayElement); await expectFinished(); }); test("does not end trial on button click when answers are checked and not correct or missing", async () => { - const { expectRunning, expectFinished } = await startTimeline([ + const { expectRunning, expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -122,23 +127,23 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "some wrong answer"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "some wrong answer"; + await clickFinishButton(displayElement); await expectRunning(); - getInputElementById("input0").value = ""; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = ""; + await clickFinishButton(displayElement); await expectRunning(); - getInputElementById("input0").value = "cloze"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "cloze"; + await clickFinishButton(displayElement); await expectFinished(); }); test("does not call mistake function on button click when answers are checked and correct", async () => { const mistakeFn = jest.fn(); - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -147,8 +152,8 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "cloze"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "cloze"; + await clickFinishButton(displayElement); expect(mistakeFn).not.toHaveBeenCalled(); await expectFinished(); @@ -157,7 +162,7 @@ describe("cloze", () => { test("does not call mistake function on button click when answers are checked for completion and are complete", async () => { const mistakeFn = jest.fn(); - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -166,8 +171,8 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "cloze"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "cloze"; + await clickFinishButton(displayElement); expect(mistakeFn).not.toHaveBeenCalled(); await expectFinished(); @@ -176,7 +181,7 @@ describe("cloze", () => { test("calls mistake function on button click when answers are checked and not correct or missing", async () => { const mistakeFn = jest.fn(); - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text.", @@ -185,25 +190,25 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "some wrong answer"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "some wrong answer"; + await clickFinishButton(displayElement); expect(mistakeFn).toHaveBeenCalled(); mistakeFn.mockReset(); - getInputElementById("input0").value = ""; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = ""; + await clickFinishButton(displayElement); expect(mistakeFn).toHaveBeenCalled(); - getInputElementById("input0").value = "cloze"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "cloze"; + await clickFinishButton(displayElement); await expectFinished(); }); test("calls mistake function on button click when answers are checked and do not belong to a multiple answer blank", async () => { const mistakeFn = jest.fn(); - const { expectFinished } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze/jspsych% text.", @@ -212,26 +217,26 @@ describe("cloze", () => { }, ]); - getInputElementById("input0").value = "not fitting in answer"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "not fitting in answer"; + await clickFinishButton(displayElement); expect(mistakeFn).toHaveBeenCalled(); - getInputElementById("input0").value = "cloze"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "cloze"; + await clickFinishButton(displayElement); await expectFinished(); }); test("response data is stored as an array", async () => { - const { getData, expectFinished } = await startTimeline([ + const { getData, expectFinished, displayElement } = await startTimeline([ { type: cloze, text: "This is a %cloze% text. Here is another cloze response box %%.", }, ]); - getInputElementById("input0").value = "cloze1"; - getInputElementById("input1").value = "cloze2"; - await clickFinishButton(); + getInputElementById("input0", displayElement).value = "cloze1"; + getInputElementById("input1", displayElement).value = "cloze2"; + await clickFinishButton(displayElement); await expectFinished(); const data = getData().values()[0].response; diff --git a/packages/plugin-fullscreen/src/index.spec.ts b/packages/plugin-fullscreen/src/index.spec.ts index fac7a44c..c3cd83ea 100644 --- a/packages/plugin-fullscreen/src/index.spec.ts +++ b/packages/plugin-fullscreen/src/index.spec.ts @@ -12,7 +12,7 @@ describe("fullscreen plugin", () => { }); test("launches fullscreen mode by default", async () => { - await startTimeline([ + const { displayElement } = await startTimeline([ { type: fullscreen, delay_after: 0, @@ -20,12 +20,12 @@ describe("fullscreen plugin", () => { ]); expect(document.documentElement.requestFullscreen).not.toHaveBeenCalled(); - await clickTarget(document.querySelector("#jspsych-fullscreen-btn")); + await clickTarget(displayElement.querySelector("#jspsych-fullscreen-btn")); expect(document.documentElement.requestFullscreen).toHaveBeenCalled(); }); test("records RT of click", async () => { - const { getData, expectFinished } = await startTimeline([ + const { getData, expectFinished, displayElement } = await startTimeline([ { type: fullscreen, delay_after: 0, @@ -34,7 +34,7 @@ describe("fullscreen plugin", () => { expect(document.documentElement.requestFullscreen).not.toHaveBeenCalled(); jest.advanceTimersByTime(1000); - clickTarget(document.querySelector("#jspsych-fullscreen-btn")); + clickTarget(displayElement.querySelector("#jspsych-fullscreen-btn")); expect(document.documentElement.requestFullscreen).toHaveBeenCalled(); jest.runAllTimers(); await expectFinished(); diff --git a/packages/plugin-html-button-response/src/index.spec.ts b/packages/plugin-html-button-response/src/index.spec.ts index c3ff9077..52819063 100644 --- a/packages/plugin-html-button-response/src/index.spec.ts +++ b/packages/plugin-html-button-response/src/index.spec.ts @@ -142,7 +142,7 @@ describe("html-button-response", () => { }); test("buttons should be disabled first and then enabled after enable_button_after is set", async () => { - const { getHTML } = await startTimeline([ + const { displayElement } = await startTimeline([ { type: htmlButtonResponse, stimulus: "this is html", @@ -151,7 +151,7 @@ describe("html-button-response", () => { }, ]); - const btns = document.querySelectorAll("div#jspsych-html-button-response-btngroup button"); + const btns = displayElement.querySelectorAll("div#jspsych-html-button-response-btngroup button"); expect(btns.length).toBeGreaterThan(0); for (let i = 0; i < btns.length; i++) { diff --git a/packages/plugin-html-keyboard-response/src/index.spec.ts b/packages/plugin-html-keyboard-response/src/index.spec.ts index ce7608a3..b5a76cbc 100644 --- a/packages/plugin-html-keyboard-response/src/index.spec.ts +++ b/packages/plugin-html-keyboard-response/src/index.spec.ts @@ -113,7 +113,7 @@ describe("html-keyboard-response", () => { }); test("class should say responded when key is pressed", async () => { - const { getHTML, expectRunning } = await startTimeline([ + const { getHTML, expectRunning, displayElement } = await startTimeline([ { type: htmlKeyboardResponse, stimulus: "this is html", @@ -128,7 +128,7 @@ describe("html-keyboard-response", () => { await pressKey("f"); - expect(document.querySelector("#jspsych-html-keyboard-response-stimulus").className).toBe( + expect(displayElement.querySelector("#jspsych-html-keyboard-response-stimulus").className).toBe( " responded" ); diff --git a/packages/plugin-html-slider-response/src/index.spec.ts b/packages/plugin-html-slider-response/src/index.spec.ts index 4e85869e..e336210f 100644 --- a/packages/plugin-html-slider-response/src/index.spec.ts +++ b/packages/plugin-html-slider-response/src/index.spec.ts @@ -130,7 +130,7 @@ describe("html-slider-response", () => { }); test("should end trial when button is clicked", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: htmlSliderResponse, stimulus: "this is html", @@ -144,7 +144,7 @@ describe("html-slider-response", () => { '
this is html
' ); - await clickTarget(document.querySelector("#jspsych-html-slider-response-next")); + await clickTarget(displayElement.querySelector("#jspsych-html-slider-response-next")); await expectFinished(); }); diff --git a/packages/plugin-image-button-response/src/index.spec.ts b/packages/plugin-image-button-response/src/index.spec.ts index 83973fa2..3361f720 100644 --- a/packages/plugin-image-button-response/src/index.spec.ts +++ b/packages/plugin-image-button-response/src/index.spec.ts @@ -15,7 +15,6 @@ describe("image-button-response", () => { }, ]); - // expect(getHTML()).toContain('
"' ); @@ -68,7 +67,7 @@ describe("image-button-response", () => { }); test("should hide stimulus if stimulus-duration is set", async () => { - const { getHTML, displayElement } = await startTimeline([ + const { displayElement } = await startTimeline([ { type: imageButtonResponse, stimulus: "../media/blue.png", @@ -105,7 +104,7 @@ describe("image-button-response", () => { }); test("should end trial when button is clicked", async () => { - const { getHTML, expectFinished, displayElement } = await startTimeline([ + const { expectFinished, displayElement } = await startTimeline([ { type: imageButtonResponse, stimulus: "../media/blue.png", @@ -138,7 +137,7 @@ describe("image-button-response", () => { }); test("delay enable button", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { displayElement } = await startTimeline([ { type: imageButtonResponse, stimulus: "../media/blue.png", @@ -148,7 +147,7 @@ describe("image-button-response", () => { }, ]); - const btns = document.querySelectorAll(".jspsych-image-button-response-button button"); + const btns = displayElement.querySelectorAll(".jspsych-image-button-response-button button"); for (let i = 0; i < btns.length; i++) { expect(btns[i].getAttribute("disabled")).toBe("disabled"); @@ -200,7 +199,7 @@ describe("image-button-response simulation", () => { }, ]; - const { expectFinished, expectRunning, getHTML, getData } = await simulateTimeline( + const { expectFinished, expectRunning, getData } = await simulateTimeline( timeline, "visual" ); diff --git a/packages/plugin-image-slider-response/src/index.spec.ts b/packages/plugin-image-slider-response/src/index.spec.ts index 7d21ec22..7e476145 100644 --- a/packages/plugin-image-slider-response/src/index.spec.ts +++ b/packages/plugin-image-slider-response/src/index.spec.ts @@ -6,7 +6,7 @@ jest.useFakeTimers(); describe("image-slider-response", () => { test("displays image stimulus", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: imageSliderResponse, stimulus: "../media/blue.png", @@ -19,12 +19,12 @@ describe("image-slider-response", () => { expect(getHTML()).toContain( '
{ - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: imageSliderResponse, stimulus: "../media/blue.png", @@ -37,12 +37,12 @@ describe("image-slider-response", () => { expect(getHTML()).toContain('left'); expect(getHTML()).toContain('right'); - await clickTarget(document.querySelector("#jspsych-image-slider-response-next")); + await clickTarget(displayElement.querySelector("#jspsych-image-slider-response-next")); await expectFinished(); }); test("displays button label", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: imageSliderResponse, stimulus: "../media/blue.png", @@ -56,7 +56,7 @@ describe("image-slider-response", () => { '' ); - await clickTarget(document.querySelector("#jspsych-image-slider-response-next")); + await clickTarget(displayElement.querySelector("#jspsych-image-slider-response-next")); await expectFinished(); }); @@ -82,12 +82,12 @@ describe("image-slider-response", () => { expect(responseElement.max).toBe("10"); expect(responseElement.step).toBe("2"); - await clickTarget(document.querySelector("#jspsych-image-slider-response-next")); + await clickTarget(displayElement.querySelector("#jspsych-image-slider-response-next")); await expectFinished(); }); test("prompt should append to bottom of stimulus", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: imageSliderResponse, stimulus: "../media/blue.png", @@ -100,7 +100,7 @@ describe("image-slider-response", () => { expect(getHTML()).toContain("

This is a prompt

"); - await clickTarget(document.querySelector("#jspsych-image-slider-response-next")); + await clickTarget(displayElement.querySelector("#jspsych-image-slider-response-next")); await expectFinished(); }); @@ -123,7 +123,7 @@ describe("image-slider-response", () => { jest.advanceTimersByTime(500); expect(stimulusElement.style.visibility).toContain("hidden"); - await clickTarget(document.querySelector("#jspsych-image-slider-response-next")); + await clickTarget(displayElement.querySelector("#jspsych-image-slider-response-next")); await expectFinished(); }); @@ -148,7 +148,7 @@ describe("image-slider-response", () => { }); test("should end trial when button is clicked", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: imageSliderResponse, stimulus: "../media/blue.png", @@ -163,7 +163,7 @@ describe("image-slider-response", () => { '
{ test("returns appropriate response with randomization", async () => { - const { getData, expectFinished } = await startTimeline([ + const { getData, expectFinished, displayElement } = await startTimeline([ { type: maxdiff, alternatives: ["a", "b", "c", "d"], @@ -15,10 +15,10 @@ describe("maxdiff plugin", () => { }, ]); - document.querySelector('input[data-name="0"][name="left"]').checked = true; - document.querySelector('input[data-name="1"][name="right"]').checked = true; + displayElement.querySelector('input[data-name="0"][name="left"]').checked = true; + displayElement.querySelector('input[data-name="1"][name="right"]').checked = true; - await clickTarget(document.querySelector("#jspsych-maxdiff-next")); + await clickTarget(displayElement.querySelector("#jspsych-maxdiff-next")); await expectFinished(); expect(getData().values()[0].response).toEqual({ left: "a", right: "b" }); diff --git a/packages/plugin-serial-reaction-time-mouse/src/index.spec.ts b/packages/plugin-serial-reaction-time-mouse/src/index.spec.ts index 98b8e6aa..eedab09d 100644 --- a/packages/plugin-serial-reaction-time-mouse/src/index.spec.ts +++ b/packages/plugin-serial-reaction-time-mouse/src/index.spec.ts @@ -4,28 +4,31 @@ import serialReactionTimeMouse from "."; jest.useFakeTimers(); -const getCellElement = (cellId: string) => - document.querySelector(`#jspsych-serial-reaction-time-stimulus-cell-${cellId}`) as HTMLElement; +const getCellElement = ( + cellId: string, + displayElement: HTMLElement +) => + displayElement.querySelector(`#jspsych-serial-reaction-time-stimulus-cell-${cellId}`) as HTMLElement; describe("serial-reaction-time-mouse plugin", () => { test("default behavior", async () => { - const { getHTML, expectFinished } = await startTimeline([ + const { getHTML, expectFinished, displayElement } = await startTimeline([ { type: serialReactionTimeMouse, target: [0, 0], }, ]); - expect(getCellElement("0-0").style.backgroundColor).toBe("rgb(153, 153, 153)"); - expect(getCellElement("0-1").style.backgroundColor).toBe(""); - expect(getCellElement("0-2").style.backgroundColor).toBe(""); - expect(getCellElement("0-3").style.backgroundColor).toBe(""); + expect(getCellElement("0-0", displayElement).style.backgroundColor).toBe("rgb(153, 153, 153)"); + expect(getCellElement("0-1", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-2", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-3", displayElement).style.backgroundColor).toBe(""); - mouseDownMouseUpTarget(getCellElement("0-1")); + mouseDownMouseUpTarget(getCellElement("0-1", displayElement)); expect(getHTML()).not.toBe(""); - mouseDownMouseUpTarget(getCellElement("0-0")); + mouseDownMouseUpTarget(getCellElement("0-0", displayElement)); await expectFinished(); }); diff --git a/packages/plugin-serial-reaction-time/src/index.spec.ts b/packages/plugin-serial-reaction-time/src/index.spec.ts index 88890e2d..bd21edfd 100644 --- a/packages/plugin-serial-reaction-time/src/index.spec.ts +++ b/packages/plugin-serial-reaction-time/src/index.spec.ts @@ -4,22 +4,24 @@ import serialReactionTime from "."; jest.useFakeTimers(); -const getCellElement = (cellId: string) => - document.querySelector(`#jspsych-serial-reaction-time-stimulus-cell-${cellId}`) as HTMLElement; +const getCellElement = ( + cellId: string, + displayElement: HTMLElement +) => displayElement.querySelector(`#jspsych-serial-reaction-time-stimulus-cell-${cellId}`) as HTMLElement; describe("serial-reaction-time plugin", () => { test("default behavior", async () => { - const { expectFinished, getData } = await startTimeline([ + const { expectFinished, getData, displayElement } = await startTimeline([ { type: serialReactionTime, target: [0, 0], }, ]); - expect(getCellElement("0-0").style.backgroundColor).toBe("rgb(153, 153, 153)"); - expect(getCellElement("0-1").style.backgroundColor).toBe(""); - expect(getCellElement("0-2").style.backgroundColor).toBe(""); - expect(getCellElement("0-3").style.backgroundColor).toBe(""); + expect(getCellElement("0-0", displayElement).style.backgroundColor).toBe("rgb(153, 153, 153)"); + expect(getCellElement("0-1", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-2", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-3", displayElement).style.backgroundColor).toBe(""); await pressKey("3"); @@ -28,7 +30,7 @@ describe("serial-reaction-time plugin", () => { }); test("response ends trial is false", async () => { - const { getHTML, expectFinished, getData } = await startTimeline([ + const { getHTML, expectFinished, getData, displayElement } = await startTimeline([ { type: serialReactionTime, target: [0, 0], @@ -37,10 +39,10 @@ describe("serial-reaction-time plugin", () => { }, ]); - expect(getCellElement("0-0").style.backgroundColor).toBe("rgb(153, 153, 153)"); - expect(getCellElement("0-1").style.backgroundColor).toBe(""); - expect(getCellElement("0-2").style.backgroundColor).toBe(""); - expect(getCellElement("0-3").style.backgroundColor).toBe(""); + expect(getCellElement("0-0", displayElement).style.backgroundColor).toBe("rgb(153, 153, 153)"); + expect(getCellElement("0-1", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-2", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-3", displayElement).style.backgroundColor).toBe(""); await pressKey("3"); @@ -53,7 +55,7 @@ describe("serial-reaction-time plugin", () => { }); test("responses are scored correctly", async () => { - const { getHTML, expectFinished, getData } = await startTimeline([ + const { displayElement, expectFinished, getData } = await startTimeline([ { type: serialReactionTime, target: [0, 0], @@ -64,19 +66,19 @@ describe("serial-reaction-time plugin", () => { }, ]); - expect(getCellElement("0-0").style.backgroundColor).toBe("rgb(153, 153, 153)"); - expect(getCellElement("0-1").style.backgroundColor).toBe(""); - expect(getCellElement("0-2").style.backgroundColor).toBe(""); - expect(getCellElement("0-3").style.backgroundColor).toBe(""); + expect(getCellElement("0-0", displayElement).style.backgroundColor).toBe("rgb(153, 153, 153)"); + expect(getCellElement("0-1", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-2", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-3", displayElement).style.backgroundColor).toBe(""); await pressKey("3"); jest.runAllTimers(); - expect(getCellElement("0-0").style.backgroundColor).toBe(""); - expect(getCellElement("0-1").style.backgroundColor).toBe("rgb(153, 153, 153)"); - expect(getCellElement("0-2").style.backgroundColor).toBe(""); - expect(getCellElement("0-3").style.backgroundColor).toBe(""); + expect(getCellElement("0-0", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-1", displayElement).style.backgroundColor).toBe("rgb(153, 153, 153)"); + expect(getCellElement("0-2", displayElement).style.backgroundColor).toBe(""); + expect(getCellElement("0-3", displayElement).style.backgroundColor).toBe(""); await pressKey("3"); diff --git a/packages/plugin-survey-html-form/src/index.spec.ts b/packages/plugin-survey-html-form/src/index.spec.ts index 7f8ec0cd..e644df69 100644 --- a/packages/plugin-survey-html-form/src/index.spec.ts +++ b/packages/plugin-survey-html-form/src/index.spec.ts @@ -22,7 +22,7 @@ describe("survey-html-form plugin", () => { '#jspsych-survey-html-form input[name="second"]' )[0].value = TEST_VALUE; - await clickTarget(document.querySelector("#jspsych-survey-html-form-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-html-form-next")); await expectFinished(); diff --git a/packages/plugin-survey-likert/src/index.spec.ts b/packages/plugin-survey-likert/src/index.spec.ts index e9a5573e..aea48962 100644 --- a/packages/plugin-survey-likert/src/index.spec.ts +++ b/packages/plugin-survey-likert/src/index.spec.ts @@ -4,13 +4,16 @@ import surveyLikert from "."; jest.useFakeTimers(); -const selectInput = (name: string, value: string) => - document.querySelector(`input[name="${name}"][value="${value}"]`) as HTMLInputElement; +const selectInput = ( + name: string, + value: string, + displayElement: HTMLElement +) => displayElement.querySelector(`input[name="${name}"][value="${value}"]`) as HTMLInputElement; describe("survey-likert plugin", () => { test("data are logged with the right question when randomize order is true", async () => { const scale = ["a", "b", "c", "d", "e"]; - const { getData, expectFinished } = await startTimeline([ + const { getData, expectFinished, displayElement } = await startTimeline([ { type: surveyLikert, questions: [ @@ -24,13 +27,13 @@ describe("survey-likert plugin", () => { }, ]); - selectInput("Q0", "0").checked = true; - selectInput("Q1", "1").checked = true; - selectInput("Q2", "2").checked = true; - selectInput("Q3", "3").checked = true; - selectInput("Q4", "4").checked = true; + selectInput("Q0", "0", displayElement).checked = true; + selectInput("Q1", "1", displayElement).checked = true; + selectInput("Q2", "2", displayElement).checked = true; + selectInput("Q3", "3", displayElement).checked = true; + selectInput("Q4", "4", displayElement).checked = true; - await clickTarget(document.querySelector("#jspsych-survey-likert-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-likert-next")); await expectFinished(); diff --git a/packages/plugin-survey-multi-choice/src/index.spec.ts b/packages/plugin-survey-multi-choice/src/index.spec.ts index e52f6c0e..cb952e14 100644 --- a/packages/plugin-survey-multi-choice/src/index.spec.ts +++ b/packages/plugin-survey-multi-choice/src/index.spec.ts @@ -5,8 +5,12 @@ import surveyMultiChoice from "."; jest.useFakeTimers(); -const getInputElement = (choiceId: number, value: string) => - document.querySelector( +const getInputElement = ( + choiceId: number, + value: string, + displayElement: HTMLElement +) => + displayElement.querySelector( `#jspsych-survey-multi-choice-${choiceId} input[value="${value}"]` ) as HTMLInputElement; @@ -24,7 +28,7 @@ describe("survey-multi-choice plugin", () => { const jsPsychInst = initJsPsych({ display_element: innerDiv }) const options = ["a", "b", "c"]; - const { getData, expectFinished } = await startTimeline([ + const { displayElement, expectFinished } = await startTimeline([ { type: surveyMultiChoice, questions: [ @@ -34,16 +38,14 @@ describe("survey-multi-choice plugin", () => { }, ], jsPsychInst); - getInputElement(0, "a").checked = true; - await clickTarget(document.querySelector("#jspsych-survey-multi-choice-next")); + getInputElement(0, "a", displayElement).checked = true; + await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next")); await expectFinished(); - }) - test("data are logged with the right question when randomize order is true", async () => { var scale = ["a", "b", "c", "d", "e"]; - const { getData, expectFinished } = await startTimeline([ + const { getData, expectFinished, displayElement } = await startTimeline([ { type: surveyMultiChoice, questions: [ @@ -57,13 +59,13 @@ describe("survey-multi-choice plugin", () => { }, ]); - getInputElement(0, "a").checked = true; - getInputElement(1, "b").checked = true; - getInputElement(2, "c").checked = true; - getInputElement(3, "d").checked = true; - getInputElement(4, "e").checked = true; + getInputElement(0, "a", displayElement).checked = true; + getInputElement(1, "b", displayElement).checked = true; + getInputElement(2, "c", displayElement).checked = true; + getInputElement(3, "d", displayElement).checked = true; + getInputElement(4, "e", displayElement).checked = true; - await clickTarget(document.querySelector("#jspsych-survey-multi-choice-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next")); await expectFinished(); diff --git a/packages/plugin-survey-multi-select/src/index.spec.ts b/packages/plugin-survey-multi-select/src/index.spec.ts index 8e5c1894..b1d73861 100644 --- a/packages/plugin-survey-multi-select/src/index.spec.ts +++ b/packages/plugin-survey-multi-select/src/index.spec.ts @@ -4,8 +4,12 @@ import surveyMultiSelect from "."; jest.useFakeTimers(); -const getInputElement = (selectId: number, value: string) => - document.querySelector( +const getInputElement = ( + selectId: number, + value: string, + displayElement: HTMLElement +) => + displayElement.querySelector( `#jspsych-survey-multi-select-${selectId} input[value="${value}"]` ) as HTMLInputElement; @@ -43,7 +47,7 @@ describe("survey-multi-select plugin", () => { test("data are logged with the right question when randomize order is true", async () => { const scale = ["a", "b", "c", "d", "e"]; - const { expectFinished, getData } = await startTimeline([ + const { expectFinished, getData, displayElement } = await startTimeline([ { type: surveyMultiSelect, questions: [ @@ -57,13 +61,13 @@ describe("survey-multi-select plugin", () => { }, ]); - getInputElement(0, "a").checked = true; - getInputElement(1, "b").checked = true; - getInputElement(2, "c").checked = true; - getInputElement(3, "d").checked = true; - getInputElement(4, "e").checked = true; + getInputElement(0, "a", displayElement).checked = true; + getInputElement(1, "b", displayElement).checked = true; + getInputElement(2, "c", displayElement).checked = true; + getInputElement(3, "d", displayElement).checked = true; + getInputElement(4, "e", displayElement).checked = true; - await clickTarget(document.querySelector("#jspsych-survey-multi-select-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-next")); await expectFinished(); diff --git a/packages/plugin-survey-text/src/index.spec.ts b/packages/plugin-survey-text/src/index.spec.ts index 775e81a8..675e56c7 100644 --- a/packages/plugin-survey-text/src/index.spec.ts +++ b/packages/plugin-survey-text/src/index.spec.ts @@ -2,8 +2,10 @@ import { clickTarget, simulateTimeline, startTimeline } from "@jspsych/test-util import surveyText from "."; -const selectInput = (inputId: number) => - document.querySelector(`#input-${inputId}`); +const selectInput = ( + inputId: number, + displayElement: HTMLElement +) => displayElement.querySelector(`#input-${inputId}`); jest.useFakeTimers(); @@ -17,10 +19,10 @@ describe("survey-text plugin", () => { ]); expect(displayElement.querySelectorAll("p.jspsych-survey-text").length).toBe(2); - expect(selectInput(0).size).toBe(40); - expect(selectInput(1).size).toBe(40); + expect(selectInput(0, displayElement).size).toBe(40); + expect(selectInput(1, displayElement).size).toBe(40); - await clickTarget(document.querySelector("#jspsych-survey-text-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-text-next")); await expectFinished(); }); @@ -37,10 +39,10 @@ describe("survey-text plugin", () => { ]); expect(displayElement.querySelectorAll("p.jspsych-survey-text").length).toBe(2); - expect(selectInput(0).size).toBe(50); - expect(selectInput(1).size).toBe(20); + expect(selectInput(0, displayElement).size).toBe(50); + expect(selectInput(1, displayElement).size).toBe(20); - await clickTarget(document.querySelector("#jspsych-survey-text-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-text-next")); await expectFinished(); }); @@ -57,16 +59,16 @@ describe("survey-text plugin", () => { ]); expect(displayElement.querySelectorAll("p.jspsych-survey-text").length).toBe(2); - expect(selectInput(0).required).toBe(true); - expect(selectInput(1).required).toBe(false); + expect(selectInput(0, displayElement).required).toBe(true); + expect(selectInput(1, displayElement).required).toBe(false); - selectInput(0).value = "42"; - await clickTarget(document.querySelector("#jspsych-survey-text-next")); + selectInput(0, displayElement).value = "42"; + await clickTarget(displayElement.querySelector("#jspsych-survey-text-next")); await expectFinished(); }); test("data are logged with the right question when randomize order is true", async () => { - const { expectFinished, getData } = await startTimeline([ + const { expectFinished, getData, displayElement } = await startTimeline([ { type: surveyText, questions: [ @@ -80,13 +82,13 @@ describe("survey-text plugin", () => { }, ]); - selectInput(0).value = "a0"; - selectInput(1).value = "a1"; - selectInput(2).value = "a2"; - selectInput(3).value = "a3"; - selectInput(4).value = "a4"; + selectInput(0, displayElement).value = "a0"; + selectInput(1, displayElement).value = "a1"; + selectInput(2, displayElement).value = "a2"; + selectInput(3, displayElement).value = "a3"; + selectInput(4, displayElement).value = "a4"; - await clickTarget(document.querySelector("#jspsych-survey-text-next")); + await clickTarget(displayElement.querySelector("#jspsych-survey-text-next")); await expectFinished(); diff --git a/packages/plugin-video-button-response/src/index.spec.ts b/packages/plugin-video-button-response/src/index.spec.ts index 762afca6..e5be8f22 100644 --- a/packages/plugin-video-button-response/src/index.spec.ts +++ b/packages/plugin-video-button-response/src/index.spec.ts @@ -23,7 +23,7 @@ describe("video-button-response", () => { await expect(async () => { await jsPsych.run(timeline); - }).rejects.toThrowError(); + }).rejects.toThrow(); }); test("enable buttons during video playing", async () => { @@ -40,9 +40,9 @@ describe("video-button-response", () => { const jsPsych = initJsPsych(); - const { getHTML, finished } = 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);