Skip to content

Commit a757ab8

Browse files
jodeleeuwjodeleeuw
authored
Merge pull request #3486 from jspsych/standardize-tests
standardize use of `displayElement` in tests
2 parents f87d104 + 0b78155 commit a757ab8

File tree

31 files changed

+258
-230
lines changed

31 files changed

+258
-230
lines changed

‎.changeset/tender-ads-prove.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@jspsych/config": patch
3+
---
4+
5+
remove DOM clearing after each individual test, fixes issues with testing in other repositories

‎packages/config/jest.cjs

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ module.exports.makePackageConfig = (dirname) => {
1818
displayName: {
1919
name: packageBaseName,
2020
color: packageBaseName === "jspsych" ? "white" : "cyanBright",
21-
},
22-
setupFilesAfterEnv: ["../config/jest.setup.js"],
21+
}
2322
};
2423
};

‎packages/config/jest.setup.js

-3
This file was deleted.

‎packages/jspsych/src/timeline/Timeline.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -586,10 +586,10 @@ describe("Timeline", () => {
586586
const variable = new TimelineVariable("x");
587587

588588
await timeline.run();
589-
expect(() => timeline.evaluateTimelineVariable(variable)).toThrowError("");
589+
expect(() => timeline.evaluateTimelineVariable(variable)).toThrow();
590590
expect(() =>
591591
(timeline.children[0] as Timeline).evaluateTimelineVariable(variable)
592-
).toThrowError("");
592+
).toThrow();
593593
});
594594
});
595595
});

‎packages/jspsych/src/timeline/Trial.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -524,7 +524,7 @@ describe("Trial", () => {
524524
);
525525
await expect(
526526
createTrial({ type: TestPlugin, requiredComplexNested: {} }).run()
527-
).rejects.toThrowError('"requiredComplexNested.requiredChild" parameter');
527+
).rejects.toThrow('"requiredComplexNested.requiredChild" parameter');
528528
});
529529

530530
it("errors on missing parameters nested in `COMPLEX` array parameters", async () => {

‎packages/jspsych/tests/core/functions-as-parameters.test.ts

+13-13
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe("standard use of function as parameter", () => {
2121
test("parameters can be protected from early evaluation using ParameterType.FUNCTION", async () => {
2222
const mock = jest.fn();
2323

24-
await startTimeline([
24+
const { displayElement } = await startTimeline([
2525
{
2626
type: cloze,
2727
text: "%foo%",
@@ -31,7 +31,7 @@ describe("standard use of function as parameter", () => {
3131
]);
3232

3333
expect(mock).not.toHaveBeenCalled();
34-
await clickTarget(document.querySelector("#finish_cloze_button"));
34+
await clickTarget(displayElement.querySelector("#finish_cloze_button"));
3535
expect(mock).toHaveBeenCalledTimes(1);
3636
});
3737
});
@@ -76,12 +76,12 @@ describe("nested parameters as functions", () => {
7676
]);
7777

7878
expect(displayElement.querySelectorAll("p.jspsych-survey-text").length).toBe(2);
79-
await clickTarget(document.querySelector("#jspsych-survey-text-next"));
79+
await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
8080
await expectFinished();
8181
});
8282

8383
test("nested parameter can be a function", async () => {
84-
const { expectFinished } = await startTimeline([
84+
const { expectFinished, displayElement } = await startTimeline([
8585
{
8686
type: surveyText,
8787
questions: [
@@ -95,18 +95,18 @@ describe("nested parameters as functions", () => {
9595
},
9696
]);
9797

98-
expect(document.querySelector("#jspsych-survey-text-0 p.jspsych-survey-text").innerHTML).toBe(
98+
expect(displayElement.querySelector("#jspsych-survey-text-0 p.jspsych-survey-text").innerHTML).toBe(
9999
"foo"
100100
);
101-
expect(document.querySelector("#jspsych-survey-text-1 p.jspsych-survey-text").innerHTML).toBe(
101+
expect(displayElement.querySelector("#jspsych-survey-text-1 p.jspsych-survey-text").innerHTML).toBe(
102102
"bar"
103103
);
104-
await clickTarget(document.querySelector("#jspsych-survey-text-next"));
104+
await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
105105
await expectFinished();
106106
});
107107

108108
test("multiple nested parameters can be functions", async () => {
109-
const { expectFinished } = await startTimeline([
109+
const { expectFinished, displayElement } = await startTimeline([
110110
{
111111
type: surveyMultiChoice,
112112
questions: [
@@ -128,11 +128,11 @@ describe("nested parameters as functions", () => {
128128
},
129129
]);
130130

131-
expect(document.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("foo");
132-
expect(document.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("buzz");
133-
expect(document.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("bar");
134-
expect(document.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("one");
135-
await clickTarget(document.querySelector("#jspsych-survey-multi-choice-next"));
131+
expect(displayElement.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("foo");
132+
expect(displayElement.querySelector("#jspsych-survey-multi-choice-0").innerHTML).toMatch("buzz");
133+
expect(displayElement.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("bar");
134+
expect(displayElement.querySelector("#jspsych-survey-multi-choice-1").innerHTML).toMatch("one");
135+
await clickTarget(displayElement.querySelector("#jspsych-survey-multi-choice-next"));
136136
await expectFinished();
137137
});
138138

‎packages/jspsych/tests/core/progressbar.test.ts

+22-14
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
import htmlKeyboardResponse from "@jspsych/plugin-html-keyboard-response";
22
import { pressKey, startTimeline } from "@jspsych/test-utils";
33

4-
import { initJsPsych } from "../../src";
4+
import { initJsPsych, JsPsych } from "../../src";
55

66
describe("automatic progress bar", () => {
77
test("progress bar does not display by default", async () => {
8-
await startTimeline([
8+
const { jsPsych } = await startTimeline([
99
{
1010
type: htmlKeyboardResponse,
1111
stimulus: "foo",
1212
},
1313
]);
1414

15-
expect(document.querySelector("#jspsych-progressbar-container")).toBeNull();
15+
expect(jsPsych.getDisplayContainerElement().querySelector("#jspsych-progressbar-container"))
16+
.toBeNull();
1617
await pressKey("a");
1718
});
1819

1920
test("progress bar displays when show_progress_bar is true", async () => {
20-
await startTimeline(
21+
const { jsPsych } = await startTimeline(
2122
[
2223
{
2324
type: htmlKeyboardResponse,
@@ -27,9 +28,10 @@ describe("automatic progress bar", () => {
2728
{ show_progress_bar: true }
2829
);
2930

30-
expect(document.querySelector("#jspsych-progressbar-container").innerHTML).toMatch(
31-
'<span>Completion Progress</span><div id="jspsych-progressbar-outer"><div id="jspsych-progressbar-inner" style="width: 0%;"></div></div>'
32-
);
31+
expect(jsPsych.getDisplayContainerElement().querySelector("#jspsych-progressbar-container").innerHTML)
32+
.toMatch(
33+
'<span>Completion Progress</span><div id="jspsych-progressbar-outer"><div id="jspsych-progressbar-inner" style="width: 0%;"></div></div>'
34+
);
3335
});
3436

3537
test("progress bar automatically updates by default", async () => {
@@ -38,9 +40,13 @@ describe("automatic progress bar", () => {
3840
stimulus: "foo",
3941
};
4042

41-
await startTimeline([trial, trial, trial, trial], { show_progress_bar: true });
43+
const { jsPsych } = await startTimeline(
44+
[trial, trial, trial, trial],
45+
{ show_progress_bar: true }
46+
);
4247

43-
const progressbarElement = document.querySelector<HTMLElement>("#jspsych-progressbar-inner");
48+
const progressbarElement =
49+
jsPsych.getDisplayContainerElement().querySelector<HTMLElement>("#jspsych-progressbar-inner");
4450

4551
expect(progressbarElement.style.width).toEqual("0%");
4652
await pressKey("a");
@@ -59,12 +65,13 @@ describe("automatic progress bar", () => {
5965
stimulus: "foo",
6066
};
6167

62-
await startTimeline([trial, trial, trial, trial], {
68+
const { jsPsych } = await startTimeline([trial, trial, trial, trial], {
6369
show_progress_bar: true,
6470
auto_update_progress_bar: false,
6571
});
6672

67-
const progressbarElement = document.querySelector<HTMLElement>("#jspsych-progressbar-inner");
73+
const progressbarElement =
74+
jsPsych.getDisplayContainerElement().querySelector<HTMLElement>("#jspsych-progressbar-inner");
6875

6976
for (let i = 0; i < 4; i++) {
7077
expect(progressbarElement.style.width).toEqual("0%");
@@ -74,7 +81,7 @@ describe("automatic progress bar", () => {
7481
});
7582

7683
test("set `progressBar.progress` manually", async () => {
77-
const jsPsych = initJsPsych({
84+
const jsPsychObject = initJsPsych({
7885
show_progress_bar: true,
7986
auto_update_progress_bar: false,
8087
});
@@ -96,9 +103,10 @@ describe("automatic progress bar", () => {
96103
},
97104
];
98105

99-
await startTimeline(timeline, jsPsych);
106+
const { jsPsych } = await startTimeline(timeline, jsPsychObject);
100107

101-
const progressbarElement = document.querySelector<HTMLElement>("#jspsych-progressbar-inner");
108+
const progressbarElement =
109+
jsPsych.getDisplayContainerElement().querySelector<HTMLElement>("#jspsych-progressbar-inner");
102110

103111
expect(progressbarElement.style.width).toEqual("0%");
104112
await pressKey("a");

‎packages/jspsych/tests/core/timeline-variables.test.ts

+4-5
Original file line numberDiff line numberDiff line change
@@ -400,8 +400,7 @@ describe("timeline variables are correctly evaluated", () => {
400400
});
401401
});
402402

403-
// using console.warn instead of error for now. plan is to enable this test with version 8.
404-
test.skip("timelineVariable() throws an error when variable doesn't exist", async () => {
403+
test("throws an error when variable doesn't exist", async () => {
405404
const jsPsych = initJsPsych();
406405
const { expectFinished } = await startTimeline(
407406
[
@@ -411,7 +410,7 @@ test.skip("timelineVariable() throws an error when variable doesn't exist", asyn
411410
type: htmlKeyboardResponse,
412411
stimulus: "foo",
413412
on_start: () => {
414-
expect(() => jsPsych.evaluateTimelineVariable("c")).toThrowError();
413+
expect(() => jsPsych.evaluateTimelineVariable("c")).toThrow();
415414
},
416415
},
417416
],
@@ -430,7 +429,7 @@ test.skip("timelineVariable() throws an error when variable doesn't exist", asyn
430429
await expectFinished();
431430
});
432431

433-
test("timelineVariable() can fetch a variable called 'data'", async () => {
432+
test("can fetch a variable called 'data'", async () => {
434433
const jsPsych = initJsPsych();
435434
const { expectFinished } = await startTimeline(
436435
[
@@ -440,7 +439,7 @@ test("timelineVariable() can fetch a variable called 'data'", async () => {
440439
type: htmlKeyboardResponse,
441440
stimulus: "foo",
442441
on_start: () => {
443-
expect(() => jsPsych.evaluateTimelineVariable("data")).not.toThrowError();
442+
expect(() => jsPsych.evaluateTimelineVariable("data")).not.toThrow();
444443
},
445444
},
446445
],

‎packages/jspsych/tests/data/data-csv-conversion.test.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ jest.useFakeTimers();
77

88
describe("data conversion to csv", () => {
99
test("survey-text data response object is correctly converted", async () => {
10-
const { getData } = await startTimeline([
10+
const { getData, displayElement } = await startTimeline([
1111
{
1212
type: surveyText,
1313
questions: [{ prompt: "Q1" }, { prompt: "Q2" }],
1414
},
1515
]);
1616

17-
document.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
18-
document.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
17+
displayElement.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
18+
displayElement.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
1919

20-
await clickTarget(document.querySelector("#jspsych-survey-text-next"));
20+
await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
2121

2222
expect(
2323
getData()
@@ -62,17 +62,17 @@ describe("data conversion to csv", () => {
6262
});
6363

6464
test("survey-multi-select response array is correctly converted", async () => {
65-
const { getHTML, getData } = await startTimeline([
65+
const { getHTML, getData, displayElement } = await startTimeline([
6666
{
6767
type: surveyMultiSelect,
6868
questions: [{ prompt: "foo", options: ["fuzz", "bizz", "bar"], name: "q" }],
6969
},
7070
]);
7171

7272
expect(getHTML()).toMatch("foo");
73-
await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-0"));
74-
await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-1"));
75-
await clickTarget(document.querySelector("#jspsych-survey-multi-select-next"));
73+
await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-0"));
74+
await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-1"));
75+
await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-next"));
7676
expect(getHTML()).toBe("");
7777

7878
expect(

‎packages/jspsych/tests/data/data-json-conversion.test.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ jest.useFakeTimers();
88

99
describe("data conversion to json", () => {
1010
test("survey-text data response object is correctly converted", async () => {
11-
const { getData } = await startTimeline([
11+
const { getData, displayElement } = await startTimeline([
1212
{
1313
type: surveyText,
1414
questions: [{ prompt: "Q1" }, { prompt: "Q2" }],
1515
},
1616
]);
1717

18-
document.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
19-
document.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
18+
displayElement.querySelector<HTMLInputElement>("#input-0").value = "Response 1";
19+
displayElement.querySelector<HTMLInputElement>("#input-1").value = "Response 2";
2020

21-
await clickTarget(document.querySelector("#jspsych-survey-text-next"));
21+
await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
2222

2323
expect(
2424
getData()
@@ -71,17 +71,17 @@ describe("data conversion to json", () => {
7171
});
7272

7373
test("survey-multi-select response array is correctly converted", async () => {
74-
const { getHTML, getData } = await startTimeline([
74+
const { getHTML, getData, displayElement } = await startTimeline([
7575
{
7676
type: surveyMultiSelect,
7777
questions: [{ prompt: "foo", options: ["fuzz", "bizz", "bar"], name: "q" }],
7878
},
7979
]);
8080

8181
expect(getHTML()).toMatch("foo");
82-
await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-0"));
83-
await clickTarget(document.querySelector("#jspsych-survey-multi-select-response-0-1"));
84-
await clickTarget(document.querySelector("#jspsych-survey-multi-select-next"));
82+
await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-0"));
83+
await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-response-0-1"));
84+
await clickTarget(displayElement.querySelector("#jspsych-survey-multi-select-next"));
8585
expect(getHTML()).toBe("");
8686

8787
expect(

‎packages/jspsych/tests/data/trialparameters.test.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ describe("Trial parameters in the data", () => {
6565
test("Arrayed objects work with save_trial_parameters ", async () => {
6666
const questions = [{ prompt: "foo" }, { prompt: "bar" }];
6767

68-
const { getData } = await startTimeline([
68+
const { getData, displayElement } = await startTimeline([
6969
{
7070
type: surveyText,
7171
questions,
@@ -75,7 +75,7 @@ describe("Trial parameters in the data", () => {
7575
},
7676
]);
7777

78-
await clickTarget(document.querySelector("#jspsych-survey-text-next"));
78+
await clickTarget(displayElement.querySelector("#jspsych-survey-text-next"));
7979

8080
const data = getData().values()[0];
8181
expect(data.questions[0].prompt).toBe(questions[0].prompt);
@@ -96,7 +96,7 @@ describe("Trial parameters in the data", () => {
9696
return html;
9797
};
9898

99-
const { getData } = await startTimeline([
99+
const { getData, displayElement } = await startTimeline([
100100
{
101101
type: reconstruction,
102102
stim_function: sample_function,
@@ -107,7 +107,7 @@ describe("Trial parameters in the data", () => {
107107
},
108108
]);
109109

110-
await clickTarget(document.querySelector("button"));
110+
await clickTarget(displayElement.querySelector("button"));
111111

112112
expect(getData().values()[0].stim_function).toBe(sample_function.toString());
113113
});

‎packages/jspsych/tests/randomization/randomization.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ describe("randomInt", () => {
198198
test("setting upper < lower throws an error", () => {
199199
expect(() => {
200200
randomInt(1, 0);
201-
}).toThrowError();
201+
}).toThrow();
202202
});
203203
});
204204

‎packages/plugin-audio-button-response/src/index.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -273,9 +273,9 @@ describe("audio-button-response", () => {
273273
use_webaudio: false,
274274
});
275275

276-
await startTimeline(timeline, jsPsych);
276+
const { displayElement } = await startTimeline(timeline, jsPsych);
277277

278-
const btns = document.querySelectorAll(".jspsych-html-button-response-button button");
278+
const btns = displayElement.querySelectorAll(".jspsych-html-button-response-button button");
279279

280280
for (let i = 0; i < btns.length; i++) {
281281
expect(btns[i].getAttribute("disabled")).toBe(true);

0 commit comments

Comments
 (0)