-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Morecast Draft Forecast Save (#3469)
- Saves draft forecast on every edit - Add reset button to clear drafts and reset cells - Closes #2995
- Loading branch information
Showing
11 changed files
with
453 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
web/src/features/moreCast2/components/ResetForecastButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react' | ||
| import { Button } from '@mui/material' | ||
| import { fillGrassCuringForecast } from 'features/moreCast2/util' | ||
| import { MoreCast2Row, PredictionItem } from 'features/moreCast2/interfaces' | ||
| import { ModelChoice, WeatherDeterminate } from 'api/moreCast2API' | ||
|
|
||
| export interface ResetForecastButtonProps { | ||
| className?: string | ||
| enabled: boolean | ||
| label: string | ||
| onClick: () => void | ||
| } | ||
|
|
||
| /** | ||
| * Reset forecast rows to their default state. Temp, RH, Wind Dir & Speed are cleared, | ||
| * Precip is set to 0, and GC is carried forward from last submitted value. | ||
| */ | ||
| export const resetForecastRows = (rows: MoreCast2Row[]) => { | ||
| const resetRows = rows.map(row => { | ||
| const rowToReset = { ...row } | ||
| Object.keys(rowToReset).forEach(key => { | ||
| if (key.includes(WeatherDeterminate.FORECAST)) { | ||
| const isPrecipField = key.includes('precip') | ||
| const field = rowToReset[key as keyof MoreCast2Row] as PredictionItem | ||
| // Submitted forecasts have a ModelChoice.FORECAST, we don't want to reset those | ||
| if (field.choice != ModelChoice.FORECAST && !isNaN(field.value)) { | ||
| field.value = isPrecipField ? 0 : NaN | ||
| field.choice = '' | ||
| } | ||
| } | ||
| }) | ||
| return rowToReset | ||
| }) | ||
| fillGrassCuringForecast(resetRows) | ||
| return resetRows | ||
| } | ||
|
|
||
| const ResetForecastButton = ({ className, enabled, label, onClick }: ResetForecastButtonProps) => { | ||
| return ( | ||
| <Button | ||
| className={className} | ||
| variant="contained" | ||
| data-testid={'reset-forecast-button'} | ||
| disabled={!enabled} | ||
| onClick={onClick} | ||
| > | ||
| {label} | ||
| </Button> | ||
| ) | ||
| } | ||
|
|
||
| export default React.memo(ResetForecastButton) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
web/src/features/moreCast2/components/resetForecastButton.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { render, waitFor } from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
| import store from 'app/store' | ||
| import ResetForecastButton, { resetForecastRows } from 'features/moreCast2/components/ResetForecastButton' | ||
| import { buildValidActualRow, buildValidForecastRow } from 'features/moreCast2/rowFilters.test' | ||
| import { DateTime } from 'luxon' | ||
| import React from 'react' | ||
| import { Provider } from 'react-redux' | ||
|
|
||
| const TEST_DATE = DateTime.fromISO('2023-04-27T20:00:00+00:00') | ||
|
|
||
| describe('SaveForecastButton', () => { | ||
| it('should render the button as enabled', () => { | ||
| const { getByTestId } = render( | ||
| <Provider store={store}> | ||
| <ResetForecastButton enabled={true} label="test" onClick={() => undefined} /> | ||
| </Provider> | ||
| ) | ||
|
|
||
| const resetForecastButton = getByTestId('reset-forecast-button') | ||
| expect(resetForecastButton).toBeInTheDocument() | ||
| expect(resetForecastButton).toBeEnabled() | ||
| }) | ||
| it('should render the button as disabled', () => { | ||
| const { getByTestId } = render( | ||
| <Provider store={store}> | ||
| <ResetForecastButton enabled={false} label="test" onClick={() => undefined} /> | ||
| </Provider> | ||
| ) | ||
|
|
||
| const manageStationsButton = getByTestId('reset-forecast-button') | ||
| expect(manageStationsButton).toBeInTheDocument() | ||
| expect(manageStationsButton).toBeDisabled() | ||
| }) | ||
| it('should reset the forecast rows to their initial load state', () => { | ||
| const mockRowData = [ | ||
| buildValidForecastRow(111, TEST_DATE.plus({ days: 1 }), 'MANUAL'), | ||
| buildValidForecastRow(222, TEST_DATE.plus({ days: 1 }), 'MANUAL'), | ||
| buildValidActualRow(222, TEST_DATE.minus({ days: 1 })) | ||
| ] | ||
|
|
||
| const resetRows = resetForecastRows(mockRowData) | ||
|
|
||
| expect(resetRows[0].tempForecast?.value).toBe(NaN) | ||
| expect(resetRows[0].rhForecast?.value).toBe(NaN) | ||
| expect(resetRows[0].windSpeedForecast?.value).toBe(NaN) | ||
| expect(resetRows[0].precipForecast?.value).toBe(0) | ||
| }) | ||
| it('should not reset rows with submitted forecasts or actuals', () => { | ||
| const mockRowData = [ | ||
| buildValidForecastRow(111, TEST_DATE.plus({ days: 1 }), 'FORECAST'), | ||
| buildValidForecastRow(222, TEST_DATE.plus({ days: 1 }), 'FORECAST'), | ||
| buildValidActualRow(222, TEST_DATE.minus({ days: 1 })) | ||
| ] | ||
|
|
||
| const resetRows = resetForecastRows(mockRowData) | ||
|
|
||
| expect(resetRows).toEqual(mockRowData) | ||
| }) | ||
| it('should call the reset click handler when clicked', async () => { | ||
| const handleResetClickMock = jest.fn() | ||
| const { getByTestId } = render( | ||
| <Provider store={store}> | ||
| <ResetForecastButton enabled={true} label="test" onClick={handleResetClickMock} /> | ||
| </Provider> | ||
| ) | ||
| const resetForecastButton = getByTestId('reset-forecast-button') | ||
| userEvent.click(resetForecastButton) | ||
| await waitFor(() => expect(handleResetClickMock).toHaveBeenCalledTimes(1)) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { MorecastDraftForecast } from 'features/moreCast2/forecastDraft' | ||
| import { DraftMorecast2Rows } from 'features/moreCast2/interfaces' | ||
| import { buildValidActualRow, buildValidForecastRow } from 'features/moreCast2/rowFilters.test' | ||
| import { DateTime } from 'luxon' | ||
| import * as DateUtils from 'utils/date' | ||
|
|
||
| const TEST_DATE = DateTime.fromISO('2024-01-01T00:00:00.000-08:00') | ||
|
|
||
| describe('MorecastDraftForecast', () => { | ||
| afterEach(() => { | ||
| jest.restoreAllMocks() | ||
| }) | ||
|
|
||
| const localStorageMock: Storage = { | ||
| getItem: jest.fn(), | ||
| setItem: jest.fn(), | ||
| removeItem: jest.fn(), | ||
| length: 0, | ||
| clear: jest.fn(), | ||
| key: jest.fn() | ||
| } | ||
|
|
||
| const draftForecast = new MorecastDraftForecast(localStorageMock) | ||
|
|
||
| const mockRowData = [ | ||
| buildValidForecastRow(111, TEST_DATE.plus({ days: 1 })), | ||
| buildValidForecastRow(111, TEST_DATE.plus({ days: 2 })), | ||
| buildValidForecastRow(222, TEST_DATE.plus({ days: 1 })), | ||
| buildValidForecastRow(222, TEST_DATE.plus({ days: 2 })), | ||
| buildValidActualRow(222, TEST_DATE.minus({ days: 1 })), | ||
| buildValidActualRow(222, TEST_DATE.minus({ days: 2 })), | ||
| buildValidForecastRow(111, TEST_DATE.minus({ days: 1 })) | ||
| ] | ||
|
|
||
| it('should only store current forecast rows', () => { | ||
| jest.spyOn(DateUtils, 'getDateTimeNowPST').mockReturnValue(TEST_DATE) | ||
| const toBeStored: DraftMorecast2Rows = { rows: mockRowData.slice(0, 4), lastEdited: TEST_DATE } | ||
| const setSpy = jest.spyOn(localStorageMock, 'setItem') | ||
|
|
||
| draftForecast.updateStoredDraftForecasts(mockRowData, TEST_DATE) | ||
|
|
||
| expect(setSpy).toHaveBeenCalledWith(draftForecast.STORAGE_KEY, JSON.stringify(toBeStored)) | ||
| }) | ||
| it('should call getItem upon retrieval of a forecast', () => { | ||
| const getSpy = jest.spyOn(localStorageMock, 'getItem') | ||
| draftForecast.getStoredDraftForecasts() | ||
|
|
||
| expect(getSpy).toHaveBeenCalledWith(draftForecast.STORAGE_KEY) | ||
| }) | ||
| it('should delete saved rows from storage', () => { | ||
| const storedDraft: DraftMorecast2Rows = { rows: mockRowData.slice(0, 4), lastEdited: TEST_DATE } | ||
| const toBeStored: DraftMorecast2Rows = { rows: mockRowData.slice(2, 4), lastEdited: TEST_DATE } | ||
| const savedRows = mockRowData.slice(0, 2) | ||
|
|
||
| jest.spyOn(localStorageMock, 'getItem').mockReturnValue(JSON.stringify(storedDraft)) | ||
| const setSpy = jest.spyOn(localStorageMock, 'setItem') | ||
|
|
||
| draftForecast.deleteRowsFromStoredDraft(savedRows, TEST_DATE) | ||
|
|
||
| expect(setSpy).toHaveBeenCalledWith(draftForecast.STORAGE_KEY, JSON.stringify(toBeStored)) | ||
| }) | ||
| it('should return true if a draft forecast is stored', () => { | ||
| const storedDraft: DraftMorecast2Rows = { rows: mockRowData.slice(0, 4), lastEdited: TEST_DATE } | ||
| jest.spyOn(localStorageMock, 'getItem').mockReturnValue(JSON.stringify(storedDraft)) | ||
|
|
||
| const draftStored = draftForecast.hasDraftForecastStored() | ||
| expect(draftStored).toBe(true) | ||
| }) | ||
| it('should return false if a draft forecast is not stored', () => { | ||
| jest.spyOn(localStorageMock, 'getItem').mockReturnValue('') | ||
|
|
||
| const draftStored = draftForecast.hasDraftForecastStored() | ||
| expect(draftStored).toBe(false) | ||
| }) | ||
| }) |
Oops, something went wrong.