Add "date-picker" configuration setting type. (PP-1874)

src/components/ProtocolFormField.tsx

@@ -96,6 +96,8 @@ export default class ProtocolFormField extends React.Component<
         ? setting.type
         : "input";
 
+    const type = setting.type === "date-picker" ? "date" : "text";
+
     const extraProps = {
       image: {
         accept: "image/*",
@@ -111,7 +113,7 @@ export default class ProtocolFormField extends React.Component<
     const basicProps = {
       key: setting.key,
       elementType: elementType,
-      type: "text",
+      type: type,
       disabled: this.props && this.props.disabled,
       name: setting.key,
       label: setting.label,

src/components/__tests__/ProtocolFormField-test.tsx

@@ -43,6 +43,29 @@ describe("ProtocolFormField", () => {
     expect(inputElement.value).to.equal("");
   });
 
+  it("renders date-picker setting", () => {
+    const datePickerSetting = { ...setting, ...{ type: "date-picker" } };
+    wrapper.setProps({ setting: datePickerSetting });
+    let input = wrapper.find(EditableInput);
+    expect(input.length).to.equal(1);
+    expect(input.prop("type")).to.equal("date");
+    expect(input.prop("disabled")).to.equal(false);
+    expect(input.prop("name")).to.equal("setting");
+    expect(input.prop("label")).to.equal("label");
+    expect(input.prop("description")).to.equal("<p>description</p>");
+    expect(input.prop("value")).to.be.undefined;
+
+    wrapper.setProps({ value: "2020-10-13", disabled: true });
+    input = wrapper.find(EditableInput);
+    expect(input.prop("disabled")).to.equal(true);
+    expect(input.prop("value")).to.equal("2020-10-13");
+    const inputElement = input.find("input").getDOMNode();
+    expect(inputElement.value).to.equal("2020-10-13");
+
+    (wrapper.instance() as ProtocolFormField).clear();
+    expect(inputElement.value).to.equal("");
+  });
+
   it("renders optional setting", () => {
     const optionalSetting = { ...setting, ...{ optional: true } };
     wrapper.setProps({ setting, optionalSetting });

tests/jest/components/ProtocolFormField.test.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ProtocolFormField from "../../../src/components/ProtocolFormField";
+
+// NB: This file adds / duplicates existing tests from:
+// - `src/components/__tests__/ProtocolFormField-test.tsx`.
+//
+// Those tests should eventually be migrated here and
+// adapted to the Jest/React Testing Library paradigm.
+
+describe("ProtocolFormField", () => {
+  it("renders date-picker setting", async () => {
+    const user = userEvent.setup();
+    const emptyValue = "";
+    const testDate = "2022-01-01";
+    const datePickerLabel = "A date setting field";
+    const fieldDescription = "Description of the setting";
+    const setting = {
+      key: "setting",
+      label: datePickerLabel,
+      description: `<p>${fieldDescription}</p>`,
+      type: "date-picker",
+    };
+
+    render(<ProtocolFormField setting={setting} disabled={false} />);
+    const input = screen.getByLabelText(datePickerLabel) as HTMLInputElement;
+
+    expect(input.value).toBe(emptyValue);
+
+    // Enter a date.
+    await user.click(input);
+    await user.keyboard(`${testDate}{enter}`);
+
+    expect(input.value).toBe(testDate);
+    screen.debug();
+  });
+});