Add test for mobile - Display a Food Site

cypress/e2e/mobile/modals.cy.js

@@ -17,7 +17,33 @@ describe('modals', () => {
   });
 
   it('should successfully display a food site', () => {
-    // TODO
+    // Switch to food view
+    cy.get('[data-cy=button-resource-type-menu]').click();
+    cy.get('.MuiDialog-root:not(div[aria-hidden="true"]) [data-cy=mobile-button-FOOD-data-selector]').click();
+
+    // Load a sample food site
+    cy.get('[title=data-cy-1]').click();
+
+    // Confirm that the modal that pops up shows the correct name for the location
+    cy.get('[data-cy=tap-organization-name]').should(
+      'have.text',
+      'Test Organization'
+    );
+
+    // Confirm that the modal represents a half-modal
+    cy.get('mobile-site-info-drawer-open').should('not.exist');
+
+    // Expand the modal to a full-modal
+    cy.get('div[data-cy=expanded-site-info]').trigger('pointermove', { offsetX: 0, offsetY: -1 });
+
+    // Confirm that the modal represents a full-modal
+    cy.get('[data-cy=mobile-site-info-drawer-open]').should('exist');
+
+    // Confirm that the correct description for the location is displayed
+    cy.get('[data-cy=tap-description]').should(
+      'have.text',
+      'Sites are open Mondays and Thursdays from 10 a.m. – 12 p.m.\n\nResidents can pick up one box per household.\n\nBoxes contain non-perishable items on Mondays and fresh produce on Thursdays.\n\nResidents do not need to present an ID or proof of income for eligibility.\n\nFood sites are supported by the City, Share Food Program, and Philabundance.\n\nThese food sites are supplementary to the existing food pantry network. To find a food pantry closest to you, call 311.')
+    cy.wait(500);
   });
 
   it('should successfully display a foraging site', () => {

cypress/support/e2e.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

src/components/ChooseResourceType/MobileChooseResourceType.js

@@ -42,7 +42,9 @@ const MobileResourceButton = props => {
         switchType(props.type)
       }}
     >
-      <ListItemIcon><props.mobileIcon /></ListItemIcon>
+      <ListItemIcon>
+        <props.mobileIcon data-cy={props['data-cy']} />
+      </ListItemIcon>
       <ListItemText>
         <Grid container justifyContent={'flex-start'}>
           <Box mx={1.25} bgcolor={'white'} p={0.25} borderRadius={1} px={1}>
@@ -52,7 +54,7 @@ const MobileResourceButton = props => {
           </Box>
         </Grid>
       </ListItemText>
-    </ListItemButton>
+    </ListItemButton >
   );
 };
 
@@ -86,7 +88,11 @@ const MobileChooseResourceType = (props) => {
         >
           <List sx={{ maxWidth: 210 }}>
             {props.resourceTypeInfo.map(entry => (
-              <MobileResourceButton key={entry.type} {...entry} />
+              <MobileResourceButton
+                {...entry}
+                key={entry.type}
+                data-cy={`mobile-button-${entry.type}-data-selector`}
+              />
             ))}
           </List>
         </Slide>

src/components/SelectedTapMobile/SelectedTapDetails.js

@@ -112,11 +112,11 @@ function SelectedTapDetails(props) {
   };
 
   return (
-    <div className={styles.halfInfo} onPointerMove={detectSwipe}>
+    <div className={styles.halfInfo} onPointerMove={detectSwipe} data-cy="expanded-site-info">
       {isMobile && !infoCollapse ? (
         <button className={styles.swipeIcon}></button>
       ) : (
-        <div className={styles.expandedToolBar}>
+        <div className={styles.expandedToolBar} data-cy="mobile-site-info-drawer-open">
           <div>
             <IconButton
               color="primary"
@@ -185,9 +185,9 @@ function SelectedTapDetails(props) {
             onClick={() =>
               window.open(
                 'https://www.google.com/maps/dir/?api=1&destination=' +
-                  resource.latitude +
-                  ',' +
-                  resource.longitude,
+                resource.latitude +
+                ',' +
+                resource.longitude,
                 '_blank'
               )
             }
@@ -220,7 +220,7 @@ function SelectedTapDetails(props) {
         <div className={styles.halfInfoExpand}>
           <div className={styles.details}>
             <h3>Description</h3>
-            <p>
+            <p data-cy="tap-description">
               {resource.description
                 ? resource.description
                 : 'No description provided'}