Functional Test: Desktop - Filter Food Sites

[gcardonag]

Is your feature request related to a problem? Please describe. As a PHLASK developer, I would like to have automated testing of filtering Food sites so that this functionality works consistently throughout any future site development.

Describe the solution you'd like

1. Add a Cypress test that performs the following actions in cypress/e2e/desktop/filters.cy.js
   1. Click on the "Resources" button on the bottom toolbar
   2. Click on the "Food" button on the resources modal
   3. Click on the "Filter" button on the bottom toolbar
   4. Select a combination of "Food Type", "Distribution Type", and "Organization Type" options, then click "Apply". a. Make sure that the combination shows at least one tap using test data. b. If necessary, modify the test data in public/testData.json so that there is a valid site for the applied filters.
   5. Confirm that a tap matching the filter is showing on the map.
   6. Confirm that a tap not matching the filter does not show on the map.
   7. Click on the "Clear All" button
   8. Confirm that a tap that was previously not matching the filter shows on the map.
2. If necessary, add data-cy attributes to resources in order to allow Cypress to target them for clicking/writing/etc.
   • For an example of how to target elements, see the the should successfully submit a water site for testing test in the cypress/e2e/desktop/crowdsourcing.cy.js file.
   • For an example of how components are updated to support the example above, see line 27 of the src/components/AddResourceModal/ChooseResource.jsx file.
3. When opening a Pull Request for this story, make sure to include a video recording of the completed test to help reviewers.
   • When you run tests locally, a video of the test should automatically be recorded in the cypress/videos folder.

Describe alternatives you've considered N/A

Additional context Add any other context or screenshots about the feature request here.