From 0a3959af86b0b306994a8374392042c29c8b59e8 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Sun, 14 Feb 2021 07:56:10 -0800
Subject: [PATCH] test(web): TextField

---
 web/src/components/TextField.jsx              |  5 +-
 .../components/__tests__/TextField.test.jsx   | 73 +++++++++++++++++++
 2 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/__tests__/TextField.test.jsx

diff --git a/web/src/components/TextField.jsx b/web/src/components/TextField.jsx
index 5ae35912c..8dd3540c0 100644
--- a/web/src/components/TextField.jsx
+++ b/web/src/components/TextField.jsx
@@ -60,7 +60,10 @@ export default function TextField({
         }`}
         ref={inputRef}
       >
-        <label className="flex space-x-2 items-center">
+        <label
+          className="flex space-x-2 items-center"
+          data-testid={`label-${label.toLowerCase().replace(/[^\w]+/g, '_')}`}
+        >
           {LeadingIcon ? (
             <div className="w-10 h-full">
               <LeadingIcon />
diff --git a/web/src/components/__tests__/TextField.test.jsx b/web/src/components/__tests__/TextField.test.jsx
new file mode 100644
index 000000000..f05d941e1
--- /dev/null
+++ b/web/src/components/__tests__/TextField.test.jsx
@@ -0,0 +1,73 @@
+import { h } from 'preact';
+import TextField from '../TextField';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('TextField', () => {
+  test('can render a leading icon', async () => {
+    render(<TextField label="Tacos" leadingIcon={FakeLeadingIcon} />);
+    expect(screen.getByTestId('icon-leading')).toBeInTheDocument();
+  });
+
+  test('can render a trailing icon', async () => {
+    render(<TextField label="Tacos" trailingIcon={FakeTrailingIcon} />);
+    expect(screen.getByTestId('icon-trailing')).toBeInTheDocument();
+  });
+
+  test('can renders icons in correct positions', async () => {
+    render(<TextField label="Tacos" leadingIcon={FakeLeadingIcon} trailingIcon={FakeTrailingIcon} />);
+    const icons = screen.queryAllByTestId(/icon-.+/);
+    expect(icons[0]).toHaveAttribute('data-testid', 'icon-leading');
+    expect(icons[1]).toHaveAttribute('data-testid', 'icon-trailing');
+  });
+
+  test('focuses and blurs', async () => {
+    const handleFocus = jest.fn();
+    const handleBlur = jest.fn();
+    render(<TextField label="Tacos" onFocus={handleFocus} onBlur={handleBlur} />);
+
+    fireEvent.focus(screen.getByRole('textbox'));
+    expect(handleFocus).toHaveBeenCalled();
+    expect(screen.getByText('Tacos').classList.contains('-translate-y-2')).toBe(true);
+
+    fireEvent.blur(screen.getByRole('textbox'));
+    expect(handleBlur).toHaveBeenCalled();
+    expect(screen.getByText('Tacos').classList.contains('-translate-y-2')).toBe(false);
+  });
+
+  test('onChange updates the value', async () => {
+    const handleChangeText = jest.fn();
+    render(<TextField label="Tacos" onChangeText={handleChangeText} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.input(input, { target: { value: 'i like tacos' } });
+    expect(handleChangeText).toHaveBeenCalledWith('i like tacos');
+    expect(input.value).toEqual('i like tacos');
+  });
+
+  test('still updates the value if an original value was given', async () => {
+    render(<TextField label="Tacos" value="no, burritos" />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.input(input, { target: { value: 'i like tacos' } });
+    expect(input.value).toEqual('i like tacos');
+  });
+
+  test('changes the value if the prop value changes', async () => {
+    const { rerender } = render(<TextField key="test" label="Tacos" value="no, burritos" />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.input(input, { target: { value: 'i like tacos' } });
+    expect(input.value).toEqual('i like tacos');
+
+    rerender(<TextField key="test" label="Tacos" value="no, really, burritos" />);
+    expect(input.value).toEqual('no, really, burritos');
+  });
+});
+
+function FakeLeadingIcon() {
+  return <div data-testid="icon-leading" />;
+}
+
+function FakeTrailingIcon() {
+  return <div data-testid="icon-trailing" />;
+}