From 91667b7ff7e7351689fcc521ebd3419025921066 Mon Sep 17 00:00:00 2001 From: Ravi Makhija Date: Mon, 12 Aug 2024 02:25:03 +0000 Subject: [PATCH 1/4] Add test for mobile - Display a Food Site --- cypress/e2e/desktop/siteInfo.cy.js | 10 +++++-- cypress/e2e/mobile/modals.cy.js | 29 ++++++++++++++++++- cypress/support/e2e.js | 2 +- cypress/support/index.js | 3 ++ .../MobileChooseResourceType.js | 12 ++++++-- src/components/SelectedTap/SelectedTap.css | 1 + .../SelectedTapMobile/SelectedTapDetails.js | 16 ++++++---- 7 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 cypress/support/index.js diff --git a/cypress/e2e/desktop/siteInfo.cy.js b/cypress/e2e/desktop/siteInfo.cy.js index 2ada395e..0b6e27fa 100644 --- a/cypress/e2e/desktop/siteInfo.cy.js +++ b/cypress/e2e/desktop/siteInfo.cy.js @@ -21,17 +21,21 @@ describe('site info', () => { // Switch to food view cy.get('[data-cy=button-resource-type-menu]').click() cy.get('[data-cy=button-FOOD-data-selector]').click() - cy.get('[data-cy=button-resource-type-menu]').click() // Load a sample food site // This is currently using live data, but should be updated to make use of test data. cy.get('[title=data-cy-1]').click(); - cy.get('[title=data-cy-2]').click(); - cy.get('[data-cy=tap-organization-name]').should( 'have.text', 'Test Organization' ); + // Confirm that the modal represents a half-modal + // Expand the modal to a full-modal + // Confirm that the correct description for the location is displayed + // Confirm that the modal represents a full-modal + + + // cy.get('[title=data-cy-2]').click(); }); it('should successfully display a foraging site', () => { diff --git a/cypress/e2e/mobile/modals.cy.js b/cypress/e2e/mobile/modals.cy.js index bae555c5..7c47991d 100644 --- a/cypress/e2e/mobile/modals.cy.js +++ b/cypress/e2e/mobile/modals.cy.js @@ -17,7 +17,34 @@ 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 + // This is currently using live data, but should be updated to make use of test data. + 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', () => { diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index d68db96d..37a498fb 100644 --- a/cypress/support/e2e.js +++ b/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') diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 00000000..9dccce3e --- /dev/null +++ b/cypress/support/index.js @@ -0,0 +1,3 @@ +import './commands' + + diff --git a/src/components/ChooseResourceType/MobileChooseResourceType.js b/src/components/ChooseResourceType/MobileChooseResourceType.js index 1237f284..9708569e 100644 --- a/src/components/ChooseResourceType/MobileChooseResourceType.js +++ b/src/components/ChooseResourceType/MobileChooseResourceType.js @@ -42,7 +42,9 @@ const MobileResourceButton = props => { switchType(props.type) }} > - + + + @@ -52,7 +54,7 @@ const MobileResourceButton = props => { - + ); }; @@ -86,7 +88,11 @@ const MobileChooseResourceType = (props) => { > {props.resourceTypeInfo.map(entry => ( - + ))} diff --git a/src/components/SelectedTap/SelectedTap.css b/src/components/SelectedTap/SelectedTap.css index b45dc019..1f6cb67c 100644 --- a/src/components/SelectedTap/SelectedTap.css +++ b/src/components/SelectedTap/SelectedTap.css @@ -120,6 +120,7 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; + color: greenyellow; /* debug! */ } #tap-info-address { text-align: start; diff --git a/src/components/SelectedTapMobile/SelectedTapDetails.js b/src/components/SelectedTapMobile/SelectedTapDetails.js index e0a17b89..35dbfc79 100644 --- a/src/components/SelectedTapMobile/SelectedTapDetails.js +++ b/src/components/SelectedTapMobile/SelectedTapDetails.js @@ -89,6 +89,10 @@ function SelectedTapDetails(props) { return; } setPointerPositionY(e.nativeEvent.offsetY); + console.log("offsetY:"); + console.log(e.nativeEvent.offsetY); + console.log("clientY:"); + console.log(e.nativeEvent.clientY); if (!infoCollapse && e.nativeEvent.offsetY < 0) { setInfoCollapse(true); @@ -112,11 +116,11 @@ function SelectedTapDetails(props) { }; return ( -
+
{isMobile && !infoCollapse ? ( ) : ( -
+
window.open( 'https://www.google.com/maps/dir/?api=1&destination=' + - resource.latitude + - ',' + - resource.longitude, + resource.latitude + + ',' + + resource.longitude, '_blank' ) } @@ -220,7 +224,7 @@ function SelectedTapDetails(props) {

Description

-

+

{resource.description ? resource.description : 'No description provided'} From aaa0b456b5fd1605f4b422317655873814d24c99 Mon Sep 17 00:00:00 2001 From: Ravi Makhija Date: Mon, 12 Aug 2024 02:44:12 +0000 Subject: [PATCH 2/4] Remove console.log statements --- src/components/SelectedTapMobile/SelectedTapDetails.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/SelectedTapMobile/SelectedTapDetails.js b/src/components/SelectedTapMobile/SelectedTapDetails.js index 35dbfc79..dfe10d08 100644 --- a/src/components/SelectedTapMobile/SelectedTapDetails.js +++ b/src/components/SelectedTapMobile/SelectedTapDetails.js @@ -89,10 +89,6 @@ function SelectedTapDetails(props) { return; } setPointerPositionY(e.nativeEvent.offsetY); - console.log("offsetY:"); - console.log(e.nativeEvent.offsetY); - console.log("clientY:"); - console.log(e.nativeEvent.clientY); if (!infoCollapse && e.nativeEvent.offsetY < 0) { setInfoCollapse(true); From fbc7804d619b7e48b9acf66966ce0a04cd24595a Mon Sep 17 00:00:00 2001 From: Ravi Makhija Date: Mon, 12 Aug 2024 02:49:52 +0000 Subject: [PATCH 3/4] Clean up work, restore prior test for desktop --- cypress/e2e/desktop/siteInfo.cy.js | 10 +++------- cypress/support/index.js | 3 --- src/components/SelectedTap/SelectedTap.css | 1 - 3 files changed, 3 insertions(+), 11 deletions(-) delete mode 100644 cypress/support/index.js diff --git a/cypress/e2e/desktop/siteInfo.cy.js b/cypress/e2e/desktop/siteInfo.cy.js index 0b6e27fa..2ada395e 100644 --- a/cypress/e2e/desktop/siteInfo.cy.js +++ b/cypress/e2e/desktop/siteInfo.cy.js @@ -21,21 +21,17 @@ describe('site info', () => { // Switch to food view cy.get('[data-cy=button-resource-type-menu]').click() cy.get('[data-cy=button-FOOD-data-selector]').click() + cy.get('[data-cy=button-resource-type-menu]').click() // Load a sample food site // This is currently using live data, but should be updated to make use of test data. cy.get('[title=data-cy-1]').click(); + cy.get('[title=data-cy-2]').click(); + cy.get('[data-cy=tap-organization-name]').should( 'have.text', 'Test Organization' ); - // Confirm that the modal represents a half-modal - // Expand the modal to a full-modal - // Confirm that the correct description for the location is displayed - // Confirm that the modal represents a full-modal - - - // cy.get('[title=data-cy-2]').click(); }); it('should successfully display a foraging site', () => { diff --git a/cypress/support/index.js b/cypress/support/index.js deleted file mode 100644 index 9dccce3e..00000000 --- a/cypress/support/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './commands' - - diff --git a/src/components/SelectedTap/SelectedTap.css b/src/components/SelectedTap/SelectedTap.css index 1f6cb67c..b45dc019 100644 --- a/src/components/SelectedTap/SelectedTap.css +++ b/src/components/SelectedTap/SelectedTap.css @@ -120,7 +120,6 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; - color: greenyellow; /* debug! */ } #tap-info-address { text-align: start; From bbde04861752365f626b3c382ee7bd7ddb693dff Mon Sep 17 00:00:00 2001 From: Ravi Makhija Date: Mon, 12 Aug 2024 10:13:13 -0400 Subject: [PATCH 4/4] Remove unnecessary comment --- cypress/e2e/mobile/modals.cy.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cypress/e2e/mobile/modals.cy.js b/cypress/e2e/mobile/modals.cy.js index 7c47991d..46e47fb3 100644 --- a/cypress/e2e/mobile/modals.cy.js +++ b/cypress/e2e/mobile/modals.cy.js @@ -22,7 +22,6 @@ describe('modals', () => { cy.get('.MuiDialog-root:not(div[aria-hidden="true"]) [data-cy=mobile-button-FOOD-data-selector]').click(); // Load a sample food site - // This is currently using live data, but should be updated to make use of test data. cy.get('[title=data-cy-1]').click(); // Confirm that the modal that pops up shows the correct name for the location