Merge pull request #1873 from hackforla/1334-add-frontend-tests

add basic frontend tests with Vitest + React Testing Library

Author: ryanfchase

README.md

@@ -65,12 +65,21 @@ Our mission is to create a user-friendly platform for anyone interested in explo
 - Run `npm start`
 - Visit http://localhost:5173
 
+### Run tests
+
+- Run `npm test`
+
+See [contributing.md](contributing.md#testing) for info on writing tests.
+
 ### Information About Technologies
 
 - Frontend
   - Mapbox
   - React
   - MUI
+  - Vite
+  - Vitest
+  - React Testing Library
 - Backend
   - DuckDb
   - HuggingFace

components/Map/controls/MapOverview.jsx

@@ -9,7 +9,7 @@ import clx from 'classnames';
 import moment from 'moment';
 import RequestsDonut from './RequestsDonut';
 import RequestsBarChart from './RequestsBarChart';
-import Button from '@components/common/Button';
+// import Button from '@components/common/Button';
 
 import {
   setMapMode as reduxSetMapMode,

components/common/DatePicker/DatePicker.jsx

@@ -126,7 +126,8 @@ function DatePicker({
 
   const getCoordinates = () => {
     if (ref.current) {
-      const { left, top, height } = ref.current.getClientRects()[0];
+      const { left, top, height } =
+        ref.current.getClientRects()[0] ?? ref.current.getBoundingClientRect();
       const offsetFromSelectorDisplay = 2;
       return {
         left,

components/main/Desktop/FilterMenu.test.jsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@utils/test-utils";
+import FilterMenu from "./FilterMenu";
+
+describe('FilterMenu', () => {
+  it('selects/deselects all request types', () => {
+    renderWithProviders(<FilterMenu />);
+
+    const requestTypes = screen.getAllByRole('checkbox');
+    const allCheckbox = screen.getByLabelText('Select/Deselect All');
+
+    requestTypes.forEach(checkbox => {
+      expect(checkbox.checked).toEqual(true);
+    });
+
+    fireEvent.click(allCheckbox);
+    requestTypes.forEach(checkbox => {
+      expect(checkbox.checked).toEqual(false);
+    });
+
+    fireEvent.click(allCheckbox);
+    requestTypes.forEach(checkbox => {
+      expect(checkbox.checked).toEqual(true);
+    });
+  });
+});

contributing.md

@@ -19,8 +19,8 @@ If you want to look at our setup, check out the "Actions" tab in Github, as well
 
 In addition to status checks, PR's are required to have at least one reviewer before being merged into `main`.
 
-## Testing (to be implemented)
-CI Is driven by tests, they help instill confidence in pull requests because a developer can say "All the status checks pass and my new tests pass so the PR is safe to merge". When contributing new features, it is most ideal to write at least 4 tests targeting your code.
+## Testing
+Tests help instill confidence in pull requests because a developer can say "All the status checks pass and my new tests pass so the PR is safe to merge". When contributing new features, it is most ideal to write at least 4 tests targeting your code.
   - One for the "happy path"
     - Test the endpoint/feature in the way it is intended to be used
   - One for the "extreme path"
@@ -29,6 +29,27 @@ CI Is driven by tests, they help instill confidence in pull requests because a d
     - Test with strange input, (What if I send characters to a function that expects integers)
   - One for the "null path"
     - Test with empty params/nothing/emptiness
-   
-      
-Our front end tests are run through Jest and RTL.
+
+### Frontend testing
+Our frontend tests are run through [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). Vitest serves as a drop-in replacement for [Jest](https://jestjs.io/).
+
+#### Intro
+If you're unfamiliar with writing UI tests, we recommend reading docs for React Testing Library and [Redux](https://redux.js.org/usage/writing-tests) to learn the basic concepts of integration testing a Redux app.
+
+The structure of a frontend integration test is "arrange, act, assert":
+
+1. Arrange: Render some UI
+2. Act: Simulate user interactions
+3. Assert: Expect certain state changes in the UI
+
+#### In 311-Data
+Frontend testing for 311-Data is currently a work in progress. Example tests are provided in two files:
+
+1. utils.test.js demonstrates unit testing non-UI code.
+2. FilterMenu.test.jsx demonstrates integration testing UI code. This follows the "arrange, act, assert" procedure mentioned above.
+
+You can refer to these files as examples of how to write additional tests for 311-Data with Vitest and React Testing Library.
+
+#### Where to put test files
+
+Test files are placed in the same directory as the file that they test. This makes the association between application code and test code clear.