Merge pull request #317 from adhocteam/TTAHUB-156/validating-start-en…

…d-dates

start date is now passed a calculated allowed end date

frontend/src/components/DatePicker.js

@@ -22,15 +22,25 @@ import './DatePicker.css';
 const dateFmt = 'MM/DD/YYYY';
 
 const DateInput = ({
-  control, minDate, name, disabled, maxDate, openUp, required, ariaName,
+  control, minDate, name, disabled, maxDate, openUp, required, ariaName, maxDateInclusive,
 }) => {
   const hintId = `${name}-hint`;
   const [isFocused, updateFocus] = useState(false);
   const openDirection = openUp ? OPEN_UP : OPEN_DOWN;
 
   const isOutsideRange = (date) => {
     const isBefore = minDate && date.isBefore(moment(minDate, dateFmt));
-    const isAfter = maxDate && date.isAfter(moment(maxDate, dateFmt));
+
+    // If max date is inclusive (maxDateInclusive == true)
+    // allow the user to pick a start date that is the same as the maxDate
+    // otherwise, only the day before is allowed
+    let isAfter = false;
+    if (maxDateInclusive) {
+      const newDate = moment(maxDate, dateFmt).add(1, 'days');
+      isAfter = maxDate && date.isAfter(newDate, dateFmt);
+    } else {
+      isAfter = maxDate && date.isAfter(moment(maxDate, dateFmt));
+    }
 
     return isBefore || isAfter;
   };
@@ -103,6 +113,7 @@ DateInput.propTypes = {
   openUp: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  maxDateInclusive: PropTypes.bool,
 };
 
 DateInput.defaultProps = {
@@ -111,6 +122,7 @@ DateInput.defaultProps = {
   disabled: false,
   openUp: false,
   required: true,
+  maxDateInclusive: false,
 };
 
 export default DateInput;

frontend/src/components/__tests__/DatePicker.js

@@ -3,7 +3,6 @@ import React from 'react';
 import {
   render, screen, fireEvent, waitFor,
 } from '@testing-library/react';
-
 import { useForm } from 'react-hook-form/dist/index.ie11';
 import DatePicker from '../DatePicker';
 

frontend/src/pages/ActivityReport/Pages/activitySummary.js

@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import { isEmpty } from 'lodash';
-
 import {
   Fieldset, Radio, Grid, TextInput, Checkbox,
 } from '@trussworks/react-uswds';
-
 import ReviewPage from './Review/ReviewPage';
 import DatePicker from '../../../components/DatePicker';
 import MultiSelect from '../../../components/MultiSelect';
@@ -243,6 +241,7 @@ const ActivitySummary = ({
                   ariaName="Start Date (Required)"
                   control={control}
                   maxDate={endDate}
+                  maxDateInclusive
                   name="startDate"
                   openUp
                 />

frontend/src/pages/ActivityReport/__tests__/index.js

@@ -212,5 +212,35 @@ describe('ActivityReport', () => {
       granteeSelectbox = await screen.findByLabelText(/grantee name\(s\)/i);
       expect(within(granteeSelectbox).queryByText('Grantee Name')).toBeNull();
     });
+
+    it('allows you to pick the same start and end date', async () => {
+      // render a new activity report
+      renderActivityReport('new');
+
+      // we need to wait for the page to render, that's what this is for
+      const dateSection = await screen.findByRole('group', { name: 'Activity date' });
+
+      // get the start date text box and type in a date
+      const startDate = within(dateSection).getByRole('textbox', { name: /start date \(required\), month\/day\/year, edit text/i });
+      userEvent.type(startDate, '12/25/1967');
+
+      // then type in a different date in the end date box
+      const endDate = within(dateSection).getByRole('textbox', { name: /end date \(required\), month\/day\/year, edit text/i });
+      userEvent.type(endDate, '12/26/1967');
+
+      // then change the start date to a date after the end date
+      userEvent.clear(startDate);
+      userEvent.type(startDate, '12/28/1967');
+
+      // expect an error
+      expect(endDate).toBeDisabled();
+
+      // then change the start date to a date after the end date
+      userEvent.clear(startDate);
+      userEvent.type(startDate, '12/26/1967');
+
+      // expect everything to be ok
+      expect(endDate).toBeEnabled();
+    });
   });
 });