unit tests for text box components

frontend/app/components/input-field.tsx

@@ -17,6 +17,7 @@ const inputErrorClassName = 'border-red-500 focus:border-red-500 focus:ring-red-
 export interface InputFieldProps {
   ariaDescribedby?: string;
   className?: string;
+  defaultValue?: string;
   errorMessage?: string;
   helpMessagePrimary?: React.ReactNode;
   helpMessagePrimaryClassName?: string;
@@ -34,6 +35,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>((props, ref) =>
     ariaDescribedby,
     errorMessage,
     className,
+    defaultValue,
     helpMessagePrimary,
     helpMessagePrimaryClassName,
     helpMessageSecondary,
@@ -93,6 +95,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>((props, ref) =>
           className,
         )}
         data-testid="input-field"
+        defaultValue={defaultValue}
         id={id}
         required={required}
         type={type}

frontend/tests/components/__snapshots__/input-error.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputError > should render input label component > expected html 1`] = `"<span class="inline-block max-w-prose border-l-2 border-red-600 bg-red-50 px-3 py-1" data-testid="input-error-test-id" role="alert" id="id">input test</span>"`;

frontend/tests/components/__snapshots__/input-field.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputField > should render input field component > expected html 1`] = `"<div id="input-test-id" data-testid="input-test-id"><label class="inline-block font-semibold mb-2" data-testid="input-label" id="input-test-id-label" for="test-id"><span>label test</span></label><input aria-invalid="false" aria-labelledby="input-test-id-label" class="block rounded-lg border-gray-500 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-500 disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 read-only:bg-gray-100 read-only:pointer-events-none read-only:cursor-not-allowed read-only:opacity-70" data-testid="input-field" id="test-id" type="text" value="default value" name="test"></div>"`;
+
+exports[`InputField > should render input field with error message > expected html 1`] = `"<div id="input-test-id" data-testid="input-test-id"><label class="inline-block font-semibold mb-2" data-testid="input-label" id="input-test-id-label" for="test-id"><span>label test</span></label><p class="mb-2"><span class="inline-block max-w-prose border-l-2 border-red-600 bg-red-50 px-3 py-1" data-testid="input-error-test-id" role="alert" id="input-test-id-error">error message</span></p><input aria-errormessage="input-test-id-error" aria-invalid="true" aria-labelledby="input-test-id-label" class="block rounded-lg focus:outline-none focus:ring disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 read-only:bg-gray-100 read-only:pointer-events-none read-only:cursor-not-allowed read-only:opacity-70 border-red-500 focus:border-red-500 focus:ring-red-500" data-testid="input-field" id="test-id" type="text" value="default value" name="test"></div>"`;
+
+exports[`InputField > should render input field with help message > expected html 1`] = `"<div id="input-test-id" data-testid="input-test-id"><label class="inline-block font-semibold mb-2" data-testid="input-label" id="input-test-id-label" for="test-id"><span>label test</span></label><input aria-describedby="input-test-id-help-secondary" aria-invalid="false" aria-labelledby="input-test-id-label" class="block rounded-lg border-gray-500 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-500 disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 read-only:bg-gray-100 read-only:pointer-events-none read-only:cursor-not-allowed read-only:opacity-70" data-testid="input-field" id="test-id" type="text" value="default value" name="test"><span class="block max-w-prose text-gray-500 mt-2" data-testid="input-field-help-secondary" id="input-test-id-help-secondary">help message</span></div>"`;
+
+exports[`InputField > should render input field with required > expected html 1`] = `"<div id="input-test-id" data-testid="input-test-id"><label class="inline-block font-semibold mb-2" data-testid="input-label" id="input-test-id-label" for="test-id"><span>label test</span></label><input aria-invalid="false" aria-labelledby="input-test-id-label" aria-required="true" class="block rounded-lg border-gray-500 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-500 disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 read-only:bg-gray-100 read-only:pointer-events-none read-only:cursor-not-allowed read-only:opacity-70" data-testid="input-field" id="test-id" required="" type="text" value="default value" name="test"></div>"`;

frontend/tests/components/__snapshots__/input-help.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputHelp > should render input help component > expected html 1`] = `"<span class="block max-w-prose text-gray-500" data-testid="input-help" id="id">input help</span>"`;

frontend/tests/components/__snapshots__/input-label.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputLabel > should render input label component > expected html 1`] = `"<label class="inline-block font-semibold" data-testid="input-label" id="id"><span>input test</span></label>"`;

frontend/tests/components/input-error.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { InputError } from '~/components/input-error';
+
+describe('InputError', () => {
+  it('should render input label component', () => {
+    const { container } = render(<InputError id="id">input test</InputError>);
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+});

frontend/tests/components/input-field.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { InputField } from '~/components/input-field';
+
+describe('InputField', () => {
+  it('should render input field component', () => {
+    const { container } = render(<InputField id="test-id" name="test" label="label test" defaultValue="default value" />);
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+
+  it('should render input field with help message', () => {
+    const { container } = render(
+      <InputField
+        id="test-id"
+        name="test"
+        label="label test"
+        defaultValue="default value"
+        helpMessageSecondary="help message"
+      />,
+    );
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+
+  it('should render input field with required', () => {
+    const { container } = render(
+      <InputField id="test-id" name="test" label="label test" defaultValue="default value" required />,
+    );
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+
+  it('should render input field with error message', () => {
+    const { container } = render(
+      <InputField id="test-id" name="test" label="label test" defaultValue="default value" errorMessage="error message" />,
+    );
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+});

frontend/tests/components/input-help.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { InputHelp } from '~/components/input-help';
+
+describe('InputHelp', () => {
+  it('should render input help component', () => {
+    const { container } = render(<InputHelp id="id">input help</InputHelp>);
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+});

frontend/tests/components/input-label.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { InputLabel } from '~/components/input-label';
+
+describe('InputLabel', () => {
+  it('should render input label component', () => {
+    const { container } = render(<InputLabel id="id">input test</InputLabel>);
+    expect(container.innerHTML).toMatchSnapshot('expected html');
+  });
+});