diff --git a/src/common/variables.js b/src/common/variables.js index a93d705a7..2a9ab80c2 100644 --- a/src/common/variables.js +++ b/src/common/variables.js @@ -1,7 +1,4 @@ export const drawerWidth = 240; -//move this variable to react app env -//export const API_ROOT = 'api/admin' -//export const API_ROOT = 'http://localhost:3000/' export const selectedHighlightColor = '#0af'; export const documentTitle = 'Treetracker Admin by Greenstand'; export const verificationStates = { @@ -13,3 +10,8 @@ export const tokenizationStates = { TOKENIZED: 'Tokenized', NOT_TOKENIZED: 'Not Tokenized', }; + +// These are the default min/max dates for the MUI KeyboardDatePicker component +// See https://material-ui-pickers.dev/api/KeyboardDatePicker +// If we set minDate or maxDate to null on this component, the fwd/back buttons are disabled +export const datePickerDefaultMinDate = '1900-01-01'; diff --git a/src/components/Filter.js b/src/components/Filter.js index bda5dc129..cf9c928c9 100644 --- a/src/components/Filter.js +++ b/src/components/Filter.js @@ -21,6 +21,9 @@ import { getDateFormatLocale, convertDateToDefaultSqlDate, } from '../common/locale'; +import { + datePickerDefaultMinDate, +} from '../common/variables'; import { verificationStates, tokenizationStates } from '../common/variables'; @@ -198,24 +201,6 @@ function Filter(props) { value={planterIdentifier} onChange={(e) => setPlanterIdentifier(e.target.value)} /> - {/* - - setStatus(e.target.value === 'All' ? '' : e.target.value)} - > - {['All', 'Planted', 'Hole dug', 'Not a capture', 'Blurry'].map((name) => ( - - {name} - - ))} - - */} { + const filterModel = new FilterModel(); + beforeEach(() => { + mount( + + + , + ); + }); + + it('works', () => { + cy.contains(/Filters/i); + }); + + it('start date picker forward button should be enabled', () => { + cy.get('#start-date-picker+* button').then(($buttons) => { + $buttons[0].click(); + // Check forward button is disabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1); + cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => { + $headerButtons[0].click(); + // Check both buttons are enabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0); + }); + }); + }); + + it('end date picker back button should be enabled', () => { + cy.get('#end-date-picker+* button').then(($buttons) => { + $buttons[0].click(); + // Check forward button is disabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1); + cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => { + $headerButtons[0].click(); + // Check both buttons are enabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0); + }); + }); + }); +}); diff --git a/src/components/FilterTop.js b/src/components/FilterTop.js index 8106ee4ab..6aa0c277c 100644 --- a/src/components/FilterTop.js +++ b/src/components/FilterTop.js @@ -11,6 +11,7 @@ import FilterModel, { ALL_ORGANIZATIONS, ORGANIZATION_NOT_SET, TAG_NOT_SET, + } from '../models/Filter'; import DateFnsUtils from '@date-io/date-fns'; import { connect } from 'react-redux'; @@ -24,7 +25,11 @@ import { convertDateToDefaultSqlDate, } from '../common/locale'; import { getOrganization } from '../api/apiUtils'; -import { verificationStates, tokenizationStates } from '../common/variables'; +import { + verificationStates, + tokenizationStates, + datePickerDefaultMinDate, +} from '../common/variables'; export const FILTER_WIDTH = 330; @@ -230,7 +235,7 @@ function Filter(props) { format={getDateFormatLocale(true)} value={dateStart} onChange={handleDateStartChange} - maxDate={dateEnd} + maxDate={dateEnd || Date()} // Don't allow selection after today KeyboardButtonProps={{ 'aria-label': 'change date', }} @@ -242,7 +247,8 @@ function Filter(props) { format={getDateFormatLocale(true)} value={dateEnd} onChange={handleDateEndChange} - minDate={dateStart} + minDate={dateStart || datePickerDefaultMinDate} + maxDate={Date()} // Don't allow selection after today KeyboardButtonProps={{ 'aria-label': 'change date', }} diff --git a/src/components/FilterTop.spec.py.js b/src/components/FilterTop.spec.py.js new file mode 100644 index 000000000..835faa7cf --- /dev/null +++ b/src/components/FilterTop.spec.py.js @@ -0,0 +1,79 @@ +/* eslint-disable */ +import { mount } from 'cypress-react-unit-test'; +import React from 'react'; +import theme from './common/theme'; +import { ThemeProvider } from '@material-ui/core/styles'; +import { Provider } from 'react-redux'; +import { init } from '@rematch/core'; + +import FilterTop from './FilterTop'; +import FilterModel from '../models/Filter'; + +describe('FilterTop', () => { + const filterModel = new FilterModel(); + beforeEach(() => { + store = init({ + models: { + species: { + state: { + speciesList: [], + }, + effects: {}, + }, + tags: { + state: { + tagList: [], + }, + effects: { + getTags(_payload, _state) {}, + }, + }, + organizations: { + state: { + organizationList: [], + }, + effects: { + loadOrganizations(_payload, _state) {}, + }, + }, + }, + }); + + mount( + + + + , + + ); + }); + + it('start date picker forward button should be enabled', () => { + cy.get('#start-date-picker+* button').then(($buttons) => { + $buttons[0].click(); + // Check forward button is disabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1); + cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => { + $headerButtons[0].click(); + // Check both buttons are enabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0); + }); + }); + }); + + it('end date picker back button should be enabled', () => { + cy.get('#end-date-picker+* button').then(($buttons) => { + $buttons[0].click(); + // Check forward button is disabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 1); + cy.get('.MuiPickersCalendarHeader-iconButton').then(($headerButtons) => { + $headerButtons[0].click(); + // Check both buttons are enabled + cy.get('.MuiPickersCalendarHeader-iconButton.Mui-disabled').should('have.length', 0); + }); + }); + }); +});