Functional Test: Mobile - Display a Food Site

[gcardonag]

Is your feature request related to a problem? Please describe. As a PHLASK developer, I would like to have automated testing of displaying 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/mobile/modals.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 one of the taps that appear on the map
   4. Confirm that the modal that pops up shows the correct name for the location
   5. Confirm that the modal represents a half-modal
      1. This can be done by adding a data-cy attribute to handle the case when the modal is showing as as half or full modal.
   6. Expand the modal to a full-modal
   7. Confirm that the correct description for the location is displayed
   8. Confirm that the modal represents a full-modal
      1. This can be done by adding a data-cy attribute to handle the case when the modal is showing as as half or full modal.
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.