chore: Test shared user org select #4667

frontend/shared/UserOrgSelect.jsx

@@ -12,19 +12,19 @@ function makeOptions(opts) {
 }
 
 const UserOrgSelect = ({
-  className,
+  className = '',
   id,
-  label,
-  touched,
+  label = "Select the site's organization",
+  touched = false,
   error,
-  mustChooseOption,
+  mustChooseOption = false,
   name,
   onChange,
   orgData,
   value,
 }) => (
   <div>
-    <label htmlFor={name} className="usa-label text-bold">
+    <label htmlFor={id} className="usa-label text-bold">
       {label}
     </label>
     {touched && error && <span className="usa-error-message">{error}</span>}
@@ -52,18 +52,9 @@ UserOrgSelect.propTypes = {
   error: PropTypes.string,
   mustChooseOption: PropTypes.bool,
   name: PropTypes.string.isRequired,
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
   orgData: PropTypes.arrayOf(ORGANIZATION).isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
 
-UserOrgSelect.defaultProps = {
-  className: null,
-  label: "Select the site's organization",
-  touched: false,
-  error: null,
-  mustChooseOption: false,
-  onChange: () => {},
-};
-
 export default UserOrgSelect;

frontend/shared/UserOrgSelect.test.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { spy } from 'sinon';
+import { createFixtureOrg } from '../../test/frontend/support/data/organizations';
+
+import UserOrgSelect from './UserOrgSelect';
+
+const id = 'hello-select';
+const label = 'Hello World';
+const name = 'select-name';
+const org1 = createFixtureOrg({ name: 'org-1' });
+const org2 = createFixtureOrg({ name: 'org-2' });
+const value = '';
+const initialProps = {
+  className: '',
+  id,
+  label,
+  touched: false,
+  error: null,
+  mustChooseOption: false,
+  name,
+  onChange: spy(),
+  orgData: [org1, org2],
+  value,
+};
+
+describe('<UserOrgSelect />', () => {
+  it('renders a select element', () => {
+    render(<UserOrgSelect {...initialProps} />);
+    expect(screen.getByLabelText(label)).toBeTruthy();
+    expect(screen.queryByText('Please select an organization')).toBeFalsy();
+    expect(screen.getByText(org1.name)).toBeTruthy();
+    expect(screen.getByText(org2.name)).toBeTruthy();
+
+    const select = screen.getByRole('combobox');
+    const calledWith = { target: { value: org1.id } };
+    fireEvent.change(select, calledWith);
+    expect(initialProps.onChange.calledOnce).toBeTruthy();
+  });
+
+  it('renders a select element with a must choose option', () => {
+    const mustChooseOption = 'Please select an organization';
+    const props = { ...initialProps, mustChooseOption: true };
+
+    render(<UserOrgSelect {...props} />);
+    expect(screen.getByLabelText(label)).toBeTruthy();
+    expect(screen.getByText(mustChooseOption)).toBeTruthy();
+  });
+
+  it('renders an error', () => {
+    const error = 'This is an error';
+    const props = { ...initialProps, error, touched: true };
+
+    render(<UserOrgSelect {...props} />);
+    expect(screen.getByText(error)).toBeTruthy();
+    expect(screen.getByLabelText(label)).toBeTruthy();
+  });
+});

test/frontend/support/data/organizations.js

@@ -0,0 +1,15 @@
+import { randomUUID } from 'node:crypto';
+
+export function createFixtureOrg({
+  createdAt = Date.now().toString(),
+  id = randomUUID(),
+  name = 'an-organization',
+  updatedAt = Date.now().toString(),
+} = {}) {
+  return {
+    createdAt,
+    id,
+    name,
+    updatedAt,
+  };
+}