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) => (
-
- ))}
-
- */}
{
+ 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);
+ });
+ });
+ });
+});