diff --git a/frontend/__tests__/components/ui/form/LabeledField.spec.tsx b/frontend/__tests__/components/ui/form/LabeledField.spec.tsx new file mode 100644 index 000000000000..ccaa134351da --- /dev/null +++ b/frontend/__tests__/components/ui/form/LabeledField.spec.tsx @@ -0,0 +1,57 @@ +import { render, screen } from "@solidjs/testing-library"; +import { describe, it, expect } from "vitest"; + +import { LabeledField } from "../../../../src/ts/components/ui/form/LabeledField"; + +describe("LabeledField", () => { + it("renders label text correctly", () => { + render(() => ( + + + + )); + + expect(screen.getByText("test label")).toBeInTheDocument(); + }); + + it("renders children correctly", () => { + render(() => ( + +
child content
+ + )); + + expect(screen.getByTestId("child")).toBeInTheDocument(); + }); + + it("renders subtext when provided", () => { + render(() => ( + + + + )); + + expect(screen.getByText("helper text")).toBeInTheDocument(); + }); + + it("links label to input when id is provided", () => { + const { container } = render(() => ( + + + + )); + + const label = container.querySelector("label"); + expect(label).toHaveAttribute("for", "test-id"); + }); + + it("applies custom class to wrapper", () => { + const { container } = render(() => ( + + + + )); + + expect(container.firstChild).toHaveClass("custom-wrapper-class"); + }); +}); diff --git a/frontend/__tests__/root/config-metadata.spec.ts b/frontend/__tests__/root/config-metadata.spec.ts index d8db8f348d75..ac227685de5d 100644 --- a/frontend/__tests__/root/config-metadata.spec.ts +++ b/frontend/__tests__/root/config-metadata.spec.ts @@ -163,6 +163,15 @@ describe("ConfigMeta", () => { { value: false, given: { tapeMode: "word" } }, { value: true, given: { tapeMode: "word" }, fail: true }, ], + monkey: [{ value: false, given: { liveSpeedStyle: "text" } }], + liveSpeedStyle: [ + { value: "mini", given: { monkey: true } }, + { value: "text", given: { monkey: true } }, + ], + liveAccStyle: [ + { value: "mini", given: { monkey: true } }, + { value: "text", given: { monkey: true } }, + ], }; it.for( @@ -244,6 +253,45 @@ describe("ConfigMeta", () => { expected: { freedomMode: false, stopOnError: "off" }, }, ], + monkey: [ + { + value: false, + given: { liveSpeedStyle: "text", liveAccStyle: "text" }, + expected: { + liveSpeedStyle: "text", + liveAccStyle: "text", + }, + }, + { + value: true, + given: { liveSpeedStyle: "text", liveAccStyle: "text" }, + expected: { liveSpeedStyle: "mini", liveAccStyle: "mini" }, + }, + ], + liveSpeedStyle: [ + { + value: "mini", + given: { monkey: true }, + expected: { monkey: true }, + }, + { + value: "text", + given: { monkey: true }, + expected: { monkey: false }, + }, + ], + liveAccStyle: [ + { + value: "mini", + given: { monkey: true }, + expected: { monkey: true }, + }, + { + value: "text", + given: { monkey: true }, + expected: { monkey: false }, + }, + ], tapeMode: [ { value: "off", diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts index d8c881e5588f..40e3ced07ee2 100644 --- a/frontend/__tests__/root/config.spec.ts +++ b/frontend/__tests__/root/config.spec.ts @@ -109,6 +109,50 @@ describe("Config", () => { expect(Config.setConfig("showAllLines", true)).toBe(false); }); + it("disables live text stats when enabling monkey", () => { + //GIVEN + replaceConfig({ + liveSpeedStyle: "text", + liveAccStyle: "text", + monkey: false, + }); + + //WHEN / THEN + expect(Config.setConfig("monkey", true)).toBe(true); + expect(getConfig()).toMatchObject({ + monkey: true, + liveSpeedStyle: "mini", + liveAccStyle: "mini", + }); + expect(notificationAddMock).not.toHaveBeenCalled(); + }); + + it("disables monkey when enabling live speed text", () => { + //GIVEN + replaceConfig({ monkey: true, liveSpeedStyle: "off" }); + + //WHEN / THEN + expect(Config.setConfig("liveSpeedStyle", "text")).toBe(true); + expect(getConfig()).toMatchObject({ + monkey: false, + liveSpeedStyle: "text", + }); + expect(notificationAddMock).not.toHaveBeenCalled(); + }); + + it("disables monkey when enabling live accuracy text", () => { + //GIVEN + replaceConfig({ monkey: true, liveAccStyle: "off" }); + + //WHEN / THEN + expect(Config.setConfig("liveAccStyle", "text")).toBe(true); + expect(getConfig()).toMatchObject({ + monkey: false, + liveAccStyle: "text", + }); + expect(notificationAddMock).not.toHaveBeenCalled(); + }); + it("should use overrideValue", () => { //WHEN Config.setConfig("customLayoutfluid", ["3l", "ABNT2", "3l"]); diff --git a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx b/frontend/src/ts/components/modals/CustomGeneratorModal.tsx index e743fb83dc00..0c5b83362820 100644 --- a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx +++ b/frontend/src/ts/components/modals/CustomGeneratorModal.tsx @@ -7,6 +7,7 @@ import { AnimatedModal } from "../common/AnimatedModal"; import { Button } from "../common/Button"; import { Separator } from "../common/Separator"; import { InputField } from "../ui/form/InputField"; +import { LabeledField } from "../ui/form/LabeledField"; import { SubmitButton } from "../ui/form/SubmitButton"; import { TextareaField } from "../ui/form/TextareaField"; import SlimSelect from "../ui/SlimSelect"; @@ -159,9 +160,8 @@ export function CustomGeneratorModal(props: { }} class="grid gap-4" > -
-
presets
-
+ +
-
+
Enter characters or strings separated by spaces. Random combinations will be generated using these inputs.
-
-
character set
+ )} -
+
-
-
min length
+ {(field) => } -
-
-
max length
+ + {(field) => } -
+
-
-
word count
+ {(field) => } -
+
{ '"Set" replaces the current custom text with generated words, "Add" appends generated words to the current custom text.' diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx index 0de7c72fae9f..e52ea8a1a8c4 100644 --- a/frontend/src/ts/components/modals/QuoteReportModal.tsx +++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx @@ -19,6 +19,7 @@ import { removeLanguageSize } from "../../utils/strings"; import { AnimatedModal } from "../common/AnimatedModal"; import { Button } from "../common/Button"; import { Separator } from "../common/Separator"; +import { LabeledField } from "../ui/form/LabeledField"; import { fieldMandatory } from "../ui/form/utils"; import SlimSelect from "../ui/SlimSelect"; @@ -133,17 +134,15 @@ export function QuoteReportModal(): JSXElement {
Please add comments in English only. -
- +
{quoteText()}
-
+ ( -
- + -
+ )} /> () }} children={(field) => ( -
- +