File size: 2,750 Bytes
b59aa07
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import userEvent from "@testing-library/user-event";
import { SettingsInput } from "#/components/features/settings/settings-input";

describe("SettingsInput", () => {
  it("should render an optional tag if showOptionalTag is true", async () => {
    const { rerender } = render(
      <SettingsInput testId="test-input" label="Test Input" type="text" />,
    );

    expect(screen.queryByText(/optional/i)).not.toBeInTheDocument();

    rerender(
      <SettingsInput
        testId="test-input"
        showOptionalTag
        label="Test Input"
        type="text"
      />,
    );

    expect(screen.getByText(/optional/i)).toBeInTheDocument();
  });

  it("should disable the input if isDisabled is true", async () => {
    const { rerender } = render(
      <SettingsInput testId="test-input" label="Test Input" type="text" />,
    );

    expect(screen.getByTestId("test-input")).toBeEnabled();

    rerender(
      <SettingsInput
        testId="test-input"
        label="Test Input"
        type="text"
        isDisabled
      />,
    );

    expect(screen.getByTestId("test-input")).toBeDisabled();
  });

  it("should set a placeholder on the input", async () => {
    render(
      <SettingsInput
        testId="test-input"
        label="Test Input"
        type="text"
        placeholder="Test Placeholder"
      />,
    );

    expect(screen.getByTestId("test-input")).toHaveAttribute(
      "placeholder",
      "Test Placeholder",
    );
  });

  it("should set a default value on the input", async () => {
    render(
      <SettingsInput
        testId="test-input"
        label="Test Input"
        type="text"
        defaultValue="Test Value"
      />,
    );

    expect(screen.getByTestId("test-input")).toHaveValue("Test Value");
  });

  it("should render start content", async () => {
    const startContent = <div>Start Content</div>;

    render(
      <SettingsInput
        testId="test-input"
        label="Test Input"
        type="text"
        defaultValue="Test Value"
        startContent={startContent}
      />,
    );

    expect(screen.getByText("Start Content")).toBeInTheDocument();
  });

  it("should call onChange with the input value", async () => {
    const onChangeMock = vi.fn();
    const user = userEvent.setup();

    render(
      <SettingsInput
        testId="test-input"
        label="Test Input"
        type="text"
        onChange={onChangeMock}
      />,
    );

    const input = screen.getByTestId("test-input");
    await user.type(input, "Test");

    expect(onChangeMock).toHaveBeenCalledTimes(4);
    expect(onChangeMock).toHaveBeenNthCalledWith(4, "Test");
  });
});