Add chs_type to video consent (#66)

* add chs_type: consent to video consent plugin
* update response with completed_consent_frame: true
* add/fix tests: add response id to window.chs, add data mock, update next button test, add test for end trial

.changeset/moody-points-cheat.md

@@ -0,0 +1,7 @@
+---
+"@lookit/record": patch
+---
+
+Adds `chs_type: "consent"` to consentVideo trial data and updates the lookit-api
+response object with `completed_consent_frame: true` at the end of the
+consentVideo trial.

packages/record/src/consentVideo.spec.ts

@@ -1,3 +1,4 @@
+import Data from "@lookit/data";
 import { LookitWindow } from "@lookit/data/dist/types";
 import Handlebars from "handlebars";
 import { initJsPsych, PluginInfo, TrialType } from "jspsych";
@@ -14,7 +15,22 @@ import Recorder from "./recorder";
 
 declare const window: LookitWindow;
 
+window.chs = {
+  study: {
+    attributes: {
+      name: "name",
+      duration: "duration",
+    },
+  },
+  response: {
+    id: "some id",
+  },
+} as typeof window.chs;
+
 jest.mock("./recorder");
+jest.mock("@lookit/data", () => ({
+  updateResponse: jest.fn().mockReturnValue("Response"),
+}));
 
 test("Instantiate recorder", () => {
   const jsPsych = initJsPsych();
@@ -28,15 +44,6 @@ test("Trial", () => {
   const display = document.createElement("div");
   const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
 
-  window.chs = {
-    study: {
-      attributes: {
-        name: "name",
-        duration: "duration",
-      },
-    },
-  } as typeof window.chs;
-
   plugin["recordFeed"] = jest.fn();
   plugin["recordButton"] = jest.fn();
   plugin["stopButton"] = jest.fn();
@@ -264,14 +271,29 @@ test("nextButton", () => {
   const display = document.createElement("div");
 
   display.innerHTML = Handlebars.compile(consentVideoTrial)({});
-  jsPsych.finishTrial = jest.fn();
+  plugin["endTrial"] = jest.fn();
 
   plugin["nextButton"](display);
   display
     .querySelector<HTMLButtonElement>("button#next")!
     .dispatchEvent(new Event("click"));
 
-  expect(jsPsych.finishTrial).toHaveBeenCalledTimes(1);
+  expect(plugin["endTrial"]).toHaveBeenCalledTimes(1);
+});
+
+test("endTrial", () => {
+  const jsPsych = initJsPsych();
+  const plugin = new VideoConsentPlugin(jsPsych);
+
+  plugin["endTrial"]();
+
+  expect(Data.updateResponse).toHaveBeenCalledWith(window.chs.response.id, {
+    completed_consent_frame: true,
+  });
+});
+
+test("Does video consent plugin return chsData correctly?", () => {
+  expect(VideoConsentPlugin.chsData()).toMatchObject({ chs_type: "consent" });
 });
 
 test("Video playback should not be muted", () => {

packages/record/src/consentVideo.ts

@@ -1,3 +1,4 @@
+import Data from "@lookit/data";
 import { LookitWindow } from "@lookit/data/dist/types";
 import Handlebars from "handlebars";
 import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
@@ -279,6 +280,28 @@ export class VideoConsentPlugin implements JsPsychPlugin<Info> {
    */
   private nextButton(display: HTMLElement) {
     const next = this.getButton(display, "next");
-    next.addEventListener("click", () => this.jsPsych.finishTrial());
+    next.addEventListener("click", () => this.endTrial());
+  }
+
+  /**
+   * Mark the response in the lookit-api database as having completed the
+   * consent frame, then finish the trial.
+   */
+  private async endTrial() {
+    await Data.updateResponse(window.chs.response.id, {
+      completed_consent_frame: true,
+    });
+    this.jsPsych.finishTrial();
+  }
+
+  /**
+   * Add CHS type to experiment data. This will enable Lookit API to run the
+   * "consent" Frame Action Dispatcher method after the experiment has
+   * completed.
+   *
+   * @returns Object containing CHS type.
+   */
+  public static chsData() {
+    return { chs_type: "consent" };
   }
 }