adding monkeytype

frontend/__tests__/components/ui/form/SubmitButton.spec.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from "@solidjs/testing-library";
+import { JSXElement } from "solid-js";
+import { describe, it, expect } from "vitest";
+
+import { SubmitButton } from "../../../../src/ts/components/ui/form/SubmitButton";
+
+type FormState = {
+  canSubmit: boolean;
+  isSubmitting: boolean;
+  isValid: boolean;
+  isDirty: boolean;
+};
+
+function makeForm(state: Partial<FormState> = {}) {
+  const fullState: FormState = {
+    canSubmit: true,
+    isSubmitting: false,
+    isValid: true,
+    isDirty: true,
+    ...state,
+  };
+
+  return {
+    Subscribe: (props: {
+      selector: (state: FormState) => FormState;
+      children: (state: () => FormState) => JSXElement;
+    }) => props.children(() => props.selector(fullState)),
+  };
+}
+
+describe("SubmitButton", () => {
+  it("renders enabled when form is dirty, valid, and can submit", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" />);
+    expect(screen.getByRole("button", { name: "Save" })).not.toBeDisabled();
+  });
+
+  it("renders as submit type", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" />);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
+  });
+
+  it("disables when form is not dirty", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isDirty: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form cannot submit", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ canSubmit: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form is submitting", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isSubmitting: true })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form is not valid", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isValid: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when disabled prop is true even if form is ready", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" disabled />);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+});