HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 03:00:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rework tests to use displayElement, remove DOM clearing per test

Browse Source
This commit is contained in:
jade 2025-01-10 01:02:58 -07:00
parent 9e60268ba0
commit ad1d854f43
25 changed files with 251 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tender-ads-prove.md Normal file
View File

@ -0,0 +1,5 @@
---
"@jspsych/config": patch
---
remove DOM clearing after each individual test, fixes issues with testing in other repositories

3
packages/config/jest.cjs
View File

@ -18,7 +18,6 @@ module.exports.makePackageConfig = (dirname) => {
displayName: {
name: packageBaseName,
color: packageBaseName === "jspsych" ? "white" : "cyanBright",
},
setupFilesAfterEnv: ["../config/jest.setup.js"],
}
};
};

3
packages/config/jest.setup.js
View File

@ -1,3 +0,0 @@
global.afterEach(() => {
document.body.innerHTML = '';
});

26
packages/jspsych/tests/core/functions-as-parameters.test.ts
View File

@ -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();
});

37
packages/jspsych/tests/core/progressbar.test.ts
View File

@ -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(
'<span>Completion Progress</span><div id="jspsych-progressbar-outer"><div id="jspsych-progressbar-inner" style="width: 0%;"></div></div>'
);
});
@ -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<HTMLElement>("#jspsych-progressbar-inner");
const displayContainer = getContainer(jsPsych);
const progressbarElement = displayContainer.querySelector<HTMLElement>("#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<HTMLElement>("#jspsych-progressbar-inner");
const displayContainer = getContainer(jsPsych);
const progressbarElement = displayContainer.querySelector<HTMLElement>("#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<HTMLElement>("#jspsych-progressbar-inner");
const displayContainer = getContainer(jsPsych);
const progressbarElement = displayContainer.querySelector<HTMLElement>("#jspsych-progressbar-inner");
expect(progressbarElement.style.width).toEqual("0%");
await pressKey("a");

16
packages/jspsych/tests/data/data-csv-conversion.test.ts
View File

@ -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,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(

16
packages/jspsych/tests/data/data-json-conversion.test.ts
View File

@ -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,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(

8
packages/jspsych/tests/data/trialparameters.test.ts
View File

@ -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());
});

4
packages/plugin-audio-button-response/src/index.spec.ts
View File

@ -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);

101
packages/plugin-cloze/src/index.spec.ts
View File

@ -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", () => {
'<div class="cloze">This is a <input type="text" id="input0" value=""> text.</div>'
);
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", () => {
'<button class="jspsych-html-button-response-button" type="button" id="finish_cloze_button">OK</button>'
);
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", () => {
'<button class="jspsych-html-button-response-button" type="button" id="finish_cloze_button">Next</button>'
);
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;

8
packages/plugin-fullscreen/src/index.spec.ts
View File

@ -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();

4
packages/plugin-html-button-response/src/index.spec.ts
View File

@ -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++) {

4
packages/plugin-html-keyboard-response/src/index.spec.ts
View File

@ -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"
);

4
packages/plugin-html-slider-response/src/index.spec.ts
View File

@ -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", () => {
'<div id="jspsych-html-slider-response-stimulus">this is html</div>'
);
await clickTarget(document.querySelector("#jspsych-html-slider-response-next"));
await clickTarget(displayElement.querySelector("#jspsych-html-slider-response-next"));
await expectFinished();
});

11
packages/plugin-image-button-response/src/index.spec.ts
View File

@ -15,7 +15,6 @@ describe("image-button-response", () => {
},
]);
// expect(getHTML()).toContain('<img ');
expect(getHTML()).toMatchInlineSnapshot(
'"<img src="../media/blue.png" id="jspsych-image-button-response-stimulus"><div id="jspsych-image-button-response-btngroup" class="jspsych-btn-group-grid" style="grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);"><button class="jspsych-btn" data-choice="0">button-choice</button></div>"'
);
@ -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"
);

24
packages/plugin-image-slider-response/src/index.spec.ts
View File

@ -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(
'<div id="jspsych-image-slider-response-stimulus"><img src="../media/blue.png"'
);
await clickTarget(document.querySelector("#jspsych-image-slider-response-next"));
await clickTarget(displayElement.querySelector("#jspsych-image-slider-response-next"));
await expectFinished();
});
test("displays labels", async () => {
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('<span style="text-align: center; font-size: 80%;">left</span>');
expect(getHTML()).toContain('<span style="text-align: center; font-size: 80%;">right</span>');
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", () => {
'<button id="jspsych-image-slider-response-next" class="jspsych-btn">button</button>'
);
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("<p>This is a prompt</p>");
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", () => {
'<div id="jspsych-image-slider-response-stimulus"><img src="../media/blue.png"'
);
await clickTarget(document.querySelector("#jspsych-image-slider-response-next"));
await clickTarget(displayElement.querySelector("#jspsych-image-slider-response-next"));
await expectFinished();
});
});

8
packages/plugin-maxdiff/src/index.spec.ts
View File

@ -6,7 +6,7 @@ jest.useFakeTimers();
describe("maxdiff plugin", () => {
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<HTMLInputElement>('input[data-name="0"][name="left"]').checked = true;
document.querySelector<HTMLInputElement>('input[data-name="1"][name="right"]').checked = true;
displayElement.querySelector<HTMLInputElement>('input[data-name="0"][name="left"]').checked = true;
displayElement.querySelector<HTMLInputElement>('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" });

21
packages/plugin-serial-reaction-time-mouse/src/index.spec.ts
View File

@ -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();
});

44
packages/plugin-serial-reaction-time/src/index.spec.ts
View File

@ -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");

2
packages/plugin-survey-html-form/src/index.spec.ts
View File

@ -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();

21
packages/plugin-survey-likert/src/index.spec.ts
View File

@ -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();

30
packages/plugin-survey-multi-choice/src/index.spec.ts
View File

@ -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();

22
packages/plugin-survey-multi-select/src/index.spec.ts
View File

@ -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();

40
packages/plugin-survey-text/src/index.spec.ts
View File

@ -2,8 +2,10 @@ import { clickTarget, simulateTimeline, startTimeline } from "@jspsych/test-util
import surveyText from ".";
const selectInput = (inputId: number) =>
document.querySelector<HTMLInputElement>(`#input-${inputId}`);
const selectInput = (
inputId: number,
displayElement: HTMLElement
) => displayElement.querySelector<HTMLInputElement>(`#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();

6
packages/plugin-video-button-response/src/index.spec.ts
View File

@ -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);