test(frontend): timing and chart tool tests

frontend/tests/page_tests/__snapshots__/chart-align.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form test all 1`] = `"{"params":{"lcd":4,"error":1,"bpm":200},"notes":"arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"}"`;
+
+exports[`form test required 1`] = `"{"params":{"error":4,"bpm":200},"notes":"arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"}"`;

frontend/tests/page_tests/__snapshots__/chart-mirror.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form test required 1`] = `"{"notes":"arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"}"`;

frontend/tests/page_tests/__snapshots__/chart-offset.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form test all 1`] = `"{"params":{"allowMinusTimingNote":true,"offset":200},"notes":"arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"}"`;
+
+exports[`form test required 1`] = `"{"params":{"allowMinusTimingNote":false,"offset":200},"notes":"arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"}"`;

frontend/tests/page_tests/__snapshots__/chart-scale.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form test all 1`] = `"{"params":{"standard":1000,"scale":1.2},"notes":"arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"}"`;
+
+exports[`form test required 1`] = `"{"params":{"scale":1.2},"notes":"arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"}"`;

frontend/tests/page_tests/__snapshots__/timing-easing-disp.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form test all 1`] = `"{"params":{"easing_b_point":[0,1,0,1],"easing":"ease_in_sine","bar":4,"count":10,"basebpm":200,"stop":1000,"start":0}}"`;
+
+exports[`form test required 1`] = `"{"params":{"easing":"ease_in_sine","count":10,"basebpm":200,"stop":1000,"start":0}}"`;

frontend/tests/page_tests/__snapshots__/timing-easing.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form test all 1`] = `"{"params":{"easing_b_point":[0,1,0,1],"easing":"s","bar":4,"count":10,"stop_bpm":200,"start_bpm":200,"stop":1000,"start":0}}"`;
+
+exports[`form test required 1`] = `"{"params":{"easing":"s","count":10,"stop_bpm":200,"start_bpm":200,"stop":1000,"start":0}}"`;

frontend/tests/page_tests/__snapshots__/timing-glitch.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`form test all 1`] = `"{"params":{"zero_bar":4,"exact_bar":4,"bpm_range":200,"count":10,"stop":1000,"start":0}}"`;
+
+exports[`form test required 1`] = `"{"params":{"bpm_range":200,"count":10,"stop":1000,"start":0}}"`;

frontend/tests/page_tests/chart-align.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ToolPage from "@/pages/tools/chart-align";
+
+jest.mock("next/router", () => jest.requireActual("next-router-mock"));
+jest.mock("react-redux");
+
+describe("form test", () => {
+  const user = userEvent.setup();
+  let u: () => void; // local unmount
+  let formControl: { [x: string]: HTMLElement };
+  let formSubmit: HTMLElement;
+  let formResult: HTMLElement;
+
+  beforeEach(() => {
+    const { unmount } = render(<ToolPage />);
+    u = unmount;
+    formControl = {
+      notes: screen.getAllByRole("textbox", { name: "input.notes" })[0],
+      bpm: screen.getAllByRole("textbox", { name: "input.params.bpm" })[0],
+      error: screen.getAllByRole("textbox", { name: "input.params.error" })[0],
+
+      // optional
+      lcd: screen.getAllByRole("textbox", { name: "input.params.lcd" })[0],
+    } as { [x: string]: HTMLElement };
+
+    formSubmit = screen.getAllByRole("button", { name: "submit" })[0];
+    formResult = screen.getAllByTestId("result")[0];
+  });
+
+  afterEach(() => {
+    u(); // unmount
+  });
+
+  it("required", async () => {
+    await user.type(
+      formControl.notes,
+      "arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"
+    );
+    await user.type(formControl.bpm, "200");
+    await user.type(formControl.error, "4");
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+
+  it("all", async () => {
+    await user.type(
+      formControl.notes,
+      "arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"
+    );
+    await user.type(formControl.bpm, "200");
+    await user.type(formControl.error, "1");
+
+    // optional
+    await user.type(formControl.lcd, "4");
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+});

frontend/tests/page_tests/chart-mirror.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ToolPage from "@/pages/tools/chart-mirror";
+
+jest.mock("next/router", () => jest.requireActual("next-router-mock"));
+jest.mock("react-redux");
+
+describe("form test", () => {
+  const user = userEvent.setup();
+  let u: () => void; // local unmount
+  let formControl: { [x: string]: HTMLElement };
+  let formSubmit: HTMLElement;
+  let formResult: HTMLElement;
+
+  beforeEach(() => {
+    const { unmount } = render(<ToolPage />);
+    u = unmount;
+    formControl = {
+      notes: screen.getAllByRole("textbox", { name: "input.notes" })[0],
+    } as { [x: string]: HTMLElement };
+
+    formSubmit = screen.getAllByRole("button", { name: "submit" })[0];
+    formResult = screen.getAllByTestId("result")[0];
+  });
+
+  afterEach(() => {
+    u(); // unmount
+  });
+
+  it("required", async () => {
+    await user.type(
+      formControl.notes,
+      "arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"
+    );
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+});

frontend/tests/page_tests/chart-offset.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ToolPage from "@/pages/tools/chart-offset";
+
+jest.mock("next/router", () => jest.requireActual("next-router-mock"));
+jest.mock("react-redux");
+
+describe("form test", () => {
+  const user = userEvent.setup();
+  let u: () => void; // local unmount
+  let formControl: { [x: string]: HTMLElement };
+  let formSubmit: HTMLElement;
+  let formResult: HTMLElement;
+
+  beforeEach(() => {
+    const { unmount } = render(<ToolPage />);
+    u = unmount;
+    formControl = {
+      notes: screen.getAllByRole("textbox", { name: "input.notes" })[0],
+      offset: screen.getAllByRole("textbox", {
+        name: "input.params.offset",
+      })[0],
+
+      // optional
+      allowMinusTimingNote: screen.getAllByRole("checkbox", {
+        name: "input.params.allowMinusTimingNote",
+      })[0],
+    } as { [x: string]: HTMLElement };
+
+    formSubmit = screen.getAllByRole("button", { name: "submit" })[0];
+    formResult = screen.getAllByTestId("result")[0];
+  });
+
+  afterEach(() => {
+    u(); // unmount
+  });
+
+  it("required", async () => {
+    await user.type(
+      formControl.notes,
+      "arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"
+    );
+    await user.type(formControl.offset, "200");
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+
+  it("all", async () => {
+    await user.type(
+      formControl.notes,
+      "arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"
+    );
+    await user.type(formControl.offset, "200");
+
+    // optional
+    await user.click(formControl.allowMinusTimingNote);
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+});

frontend/tests/page_tests/chart-scale.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ToolPage from "@/pages/tools/chart-scale";
+
+jest.mock("next/router", () => jest.requireActual("next-router-mock"));
+jest.mock("react-redux");
+
+describe("form test", () => {
+  const user = userEvent.setup();
+  let u: () => void; // local unmount
+  let formControl: { [x: string]: HTMLElement };
+  let formSubmit: HTMLElement;
+  let formResult: HTMLElement;
+
+  beforeEach(() => {
+    const { unmount } = render(<ToolPage />);
+    u = unmount;
+    formControl = {
+      notes: screen.getAllByRole("textbox", { name: "input.notes" })[0],
+      scale: screen.getAllByRole("textbox", { name: "input.params.scale" })[0],
+
+      // optional
+      standard: screen.getAllByRole("textbox", {
+        name: "input.params.standard",
+      })[0],
+    } as { [x: string]: HTMLElement };
+
+    formSubmit = screen.getAllByRole("button", { name: "submit" })[0];
+    formResult = screen.getAllByTestId("result")[0];
+  });
+
+  afterEach(() => {
+    u(); // unmount
+  });
+
+  it("required", async () => {
+    await user.type(
+      formControl.notes,
+      "arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"
+    );
+    await user.type(formControl.scale, "1.2");
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+
+  it("all", async () => {
+    await user.type(
+      formControl.notes,
+      "arc(0,1000,0.00,1.00,s,1.00,0.00,0,none,false);"
+    );
+    await user.type(formControl.scale, "1.2");
+
+    // optional
+    await user.type(formControl.standard, "1000");
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+});

frontend/tests/page_tests/timing-easing-disp.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ToolPage from "@/pages/tools/timing-easing-disp";
+
+jest.mock("next/router", () => jest.requireActual("next-router-mock"));
+jest.mock("react-redux");
+
+describe("form test", () => {
+  const user = userEvent.setup();
+  let u: () => void; // local unmount
+  let formControl: { [x: string]: HTMLElement };
+  let formSubmit: HTMLElement;
+  let formResult: HTMLElement;
+
+  beforeEach(() => {
+    const { unmount } = render(<ToolPage />);
+    u = unmount;
+    formControl = {
+      start: screen.getAllByRole("textbox", { name: "input.params.start" })[0],
+      stop: screen.getAllByRole("textbox", { name: "input.params.stop" })[0],
+      basebpm: screen.getAllByRole("textbox", {
+        name: "input.params.basebpm",
+      })[0],
+      count: screen.getAllByRole("textbox", { name: "input.params.count" })[0],
+
+      // optional
+      bar: screen.getAllByRole("textbox", { name: "input.params.bar" })[0],
+      // easing: screen.getAllByRole("button", { name: "input.params.easing" })[0],
+      easing_b_point: screen.getAllByRole("textbox", {
+        name: "input.params.easing_b_point",
+      })[0],
+    } as { [x: string]: HTMLElement };
+
+    formSubmit = screen.getAllByRole("button", { name: "submit" })[0];
+    formResult = screen.getAllByTestId("result")[0];
+  });
+
+  afterEach(() => {
+    u(); // unmount
+  });
+
+  it("required", async () => {
+    await user.type(formControl.start, "0");
+    await user.type(formControl.stop, "1000");
+    await user.type(formControl.basebpm, "200");
+    await user.type(formControl.count, "10");
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+
+  it("all", async () => {
+    await user.type(formControl.start, "0");
+    await user.type(formControl.stop, "1000");
+    await user.type(formControl.basebpm, "200");
+    await user.type(formControl.count, "10");
+
+    // optional
+    await user.type(formControl.bar, "4.00");
+    await user.type(formControl.easing_b_point, "0,1,0,1");
+
+    await user.click(formSubmit);
+
+    expect(formResult.innerHTML).toMatchSnapshot();
+  }, 30000);
+});