Add unit tests

frontend/.vscode/launch.json

@@ -1,6 +1,12 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach",
+      "port": 9229
+    },
     {
       "name": "Chrome",
       "type": "chrome",
@@ -17,15 +23,18 @@
       "type": "node",
       "request": "launch",
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
-      "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
+      "args": [
+        "test", 
+        "--runInBand", 
+        "--no-cache", 
+        "--env=jsdom",
+        "--watchAll=false"],
       "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "env": {
         "CI": "true"
       },
-      "disableOptimisticBPs": true
     },
     {
       "type": "node",
@@ -42,7 +51,6 @@
       ],
       "cwd": "${workspaceFolder}",
       "console": "integratedTerminal",
-      "protocol": "inspector",
       "internalConsoleOptions": "neverOpen"
     }
   ]

frontend/src/features/properties/components/GeocoderAutoComplete.tsx

@@ -64,6 +64,7 @@ export const GeocoderAutoComplete: React.FC<IGeocoderAutoCompleteProps> = ({
 
   const onTextChanged = async (val?: string) => {
     onTextChange && onTextChange(val);
+
     if (val && val.length >= 5 && val !== value) {
       await search(val, false);
     } else {

frontend/src/features/properties/filter/PropertyFilterOptions.test.tsx

@@ -0,0 +1,105 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { Formik } from 'formik';
+import { PimsAPI, useApi } from 'hooks/useApi';
+import React from 'react';
+
+import { PropertyFilterOptions } from '.';
+import { IPropertyFilter } from './IPropertyFilter';
+
+jest.mock('axios');
+jest.mock('@react-keycloak/web');
+jest.mock('hooks/useApi');
+((useApi as unknown) as jest.Mock<Partial<PimsAPI>>).mockReturnValue({
+  searchAddress: jest.fn((val: string) => {
+    return Promise.resolve([]);
+  }),
+});
+
+const filter: IPropertyFilter = {
+  searchBy: 'address',
+  pid: '',
+  address: '',
+  administrativeArea: '',
+  projectNumber: '',
+  agencies: '',
+  classificationId: '',
+  minLotSize: '',
+  maxLotSize: '',
+  rentableArea: '',
+};
+
+const component = (filter: IPropertyFilter) => (
+  <div>
+    <Formik initialValues={filter} onSubmit={(values, helpers) => {}}>
+      <PropertyFilterOptions />
+    </Formik>
+  </div>
+);
+
+describe('PropertyFilterOptions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders for address', () => {
+    const { container } = render(component(filter));
+    expect(container.firstChild).toMatchSnapshot('address');
+  });
+
+  it('renders for pid', () => {
+    const { container } = render(component({ ...filter, searchBy: 'pid' }));
+    expect(container.firstChild).toMatchSnapshot('pid');
+  });
+
+  it('make request to geocoder', async () => {
+    const value = '12345';
+    const api = useApi();
+
+    const { container } = render(component(filter));
+    const address = container.querySelector('input[name="address"]');
+
+    await waitFor(() => {
+      fireEvent.change(address!, {
+        target: {
+          value: value,
+        },
+      });
+      expect(api.searchAddress).toBeCalledTimes(1);
+      expect(api.searchAddress).toBeCalledWith(value);
+    });
+  });
+
+  it('less than 5 characters', async () => {
+    const value = '1234';
+    const api = useApi();
+
+    const { container } = render(component(filter));
+    const address = container.querySelector('input[name="address"]');
+
+    await waitFor(() => {
+      fireEvent.change(address!, {
+        target: {
+          value: value,
+        },
+      });
+      expect(api.searchAddress).toBeCalledTimes(0);
+    });
+  });
+
+  it('do not make request to geocoder', async () => {
+    const value = '12345';
+    const api = useApi();
+
+    const { container } = render(component({ ...filter, address: value }));
+    const address = container.querySelector('input[name="address"]');
+
+    await waitFor(() => {
+      fireEvent.change(address!, {
+        target: {
+          value: value,
+        },
+      });
+      expect(api.searchAddress).toBeCalledTimes(0);
+    });
+  });
+});

frontend/src/features/properties/filter/__snapshots__/PropertyFilterOptions.test.tsx.snap

@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PropertyFilterOptions renders for address: address 1`] = `
+.c0 {
+  width: 250px;
+  font-size: 1rem;
+  position: relative;
+}
+
+.c0 .form.Control {
+  width: 100%;
+  height: 100%;
+  border: none;
+  font-size: 16px;
+  box-sizing: border-box;
+  -webkit-flex: 1 1;
+  -ms-flex: 1 1;
+  flex: 1 1;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+.c0 .suggestionList {
+  background-color: white;
+  border-style: solid;
+  border-color: lightslategray;
+  border-width: thin;
+  font-size: 14px;
+  text-align: left;
+  max-height: 600px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  overflow-y: auto;
+  z-index: 999;
+  top: 0px;
+  left: -50px;
+}
+
+.c0 option {
+  padding: 10px 5px;
+  word-wrap: break-word;
+  width: 400px;
+  overflow: hidden;
+  cursor: pointer;
+  color: #494949;
+}
+
+.c0 option:hover {
+  background-color: #007bff;
+  color: #fff;
+}
+
+<div>
+  <div
+    class="input-group"
+  >
+    <div
+      class="input-group-prepend"
+    >
+      <div
+        class="form-group"
+      >
+        <select
+          class="form-select form-control"
+          id="input-searchBy"
+          name="searchBy"
+        >
+          <option
+            class="option"
+            value="address"
+          >
+            Address
+          </option>
+          <option
+            class="option"
+            value="pid"
+          >
+            PID/PIN
+          </option>
+        </select>
+      </div>
+    </div>
+    <div
+      class="input-group-content"
+    >
+      <div
+        class="c0 GeocoderAutoComplete"
+      >
+        <div>
+          <div
+            class="form-group"
+          >
+            <input
+              class="form-control"
+              field="address"
+              id="input-address"
+              name="address"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PropertyFilterOptions renders for pid: pid 1`] = `
+<div>
+  <div
+    class="input-group"
+  >
+    <div
+      class="input-group-prepend"
+    >
+      <div
+        class="form-group"
+      >
+        <select
+          class="form-select form-control"
+          id="input-searchBy"
+          name="searchBy"
+        >
+          <option
+            class="option"
+            value="address"
+          >
+            Address
+          </option>
+          <option
+            class="option"
+            value="pid"
+          >
+            PID/PIN
+          </option>
+        </select>
+      </div>
+    </div>
+    <div
+      class="input-group-content"
+    >
+      <div
+        class="form-group"
+      >
+        <input
+          class="form-control"
+          id="input-pid"
+          name="pid"
+          placeholder="Enter a PID or PIN"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;