fix tests?

cypress/component/DataSearch/dataset_search_table.spec.js

@@ -46,42 +46,47 @@ describe('Dataset Search Table tests', () => {
   });
 
   describe('Data library filter by participant count tests', () => {
-    let searchText;
-    let filtered;
 
     beforeEach(() => {
       cy.initApplicationConfig();
       cy.stub(TerraDataRepo, 'listSnapshotsByDatasetIds').returns({});
-      filtered = false;
     });
 
-    function handler(request) {
+    function handler(request, searchText) {
       if (JSON.stringify(request.body).includes(searchText)) {
-        filtered = true;
+        request.reply(['filtered']);
+      } else {
+        request.reply([]);
       }
-      request.reply({statusCode: 200, body:[]});
     }
 
-    it('When a participant count filter is applied the query is updated', () => {
-      searchText ='{"range":{"participantCount":{"gte":null,"lte":"50"}}}';
 
+    it('When a participant count filter is applied the query is updated', () => {
       cy.intercept(
-        {method: 'POST', url: '**/api/dataset/search/index'}, handler);
+        {method: 'POST', url: '**/api/dataset/search/index'}, (req) => {
+          return handler(req, '{"range":{"participantCount":{"gte":null,"lte":50}}}');
+        }).as('searchIndex');
       mount(<DatasetSearchTable {...props} />);
+      // first clear the default value (100), without clearing first, type('50') would result in input of 10050
       cy.get('#participantCountMax-range-input').clear().type('50');
-      cy.wait(3000).then(() => {
-        expect(filtered).to.be.true;
+      // ignore first call, caused by .clear()
+      cy.wait('@searchIndex');
+      // this api call, caused by .type('50'), should have had a request that contained the searchText
+      cy.wait('@searchIndex').then((response) => {
+        expect(response.response.body[0]).to.equal('filtered');
       });
     });
 
     it('When an invalid participant count filter is applied the query represents the default value', () => {
-      searchText = '{"range":{"participantCount":{"gte":100,"lte":null}}}';
 
-      cy.intercept({method: 'POST', url: '**/api/dataset/search/index'}, handler);
+      cy.intercept({method: 'POST', url: '**/api/dataset/search/index'}, (req) => {
+        // when non-numeric input is entered, the default value (in this case, 100) is used
+        return handler(req, '{"range":{"participantCount":{"gte":100,"lte":null}}}');
+      }).as('searchIndex');
       mount(<DatasetSearchTable {...props} />);
-      cy.get('#participantCountMin-range-input').clear().type('test');
-      cy.wait(3000).then(() => {
-        expect(filtered).to.be.true;
+      cy.get('#participantCountMin-range-input').type('test');
+      cy.wait('@searchIndex').then((response) => {
+        expect(response.response.body[0]).to.equal('filtered');
       });
     });
 

src/components/data_search/DatasetFilterList.jsx

@@ -47,17 +47,18 @@ export const FilterItemList = (props) => {
 
 export const FilterItemRange = (props) => {
   const { min, max, minCategory, maxCategory, filterHandler } = props;
+  const getValue = (val, defaultVal) => isNaN(Number(val)) ? defaultVal : Number(val);
   return (
     <Box key={minCategory + '-' + maxCategory} sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
       <TextField id={minCategory + '-range-input'} size='small' margin='dense' variant='outlined' defaultValue={min}
         helperText={'minimum'}
         FormHelperTextProps={{style: { transform: 'scale(1.5)' }}}
-        onChange={(event) => filterHandler(minCategory, isNaN(parseInt(event.target.value)) ? min : event.target.value)}/>
+        onChange={(event) => filterHandler(minCategory, getValue(event.target.value, min))}/>
       <Box padding={'0rem 1rem 1rem'}> - </Box>
       <TextField id={maxCategory + '-range-input'} size='small' margin='dense' variant='outlined' defaultValue={max}
         helperText={'maximum'}
         FormHelperTextProps={{style: {transform: 'scale(1.5)'}}}
-        onChange={(event) => filterHandler(maxCategory, isNaN(parseInt(event.target.value)) ? max : event.target.value)}
+        onChange={(event) => filterHandler(maxCategory, getValue(event.target.value, max))}
       />
     </Box>
   );