Skip to content

Commit

Permalink
Fixes cypress testing and adds consistent functionality back to forag…
Browse files Browse the repository at this point in the history 
…ing and bathroom AddResource flows
  • Loading branch information
@gcardonag
gcardonag committed Jan 20, 2025
1 parent a0ac931 commit e10153a
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 108 deletions.
4 changes: 2 additions & 2 deletions cypress/e2e/desktop/crowdsourcing.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('crowdsourcing form', () => {
cy.get('[data-cy=button-contribute-water]').click();

cy.get('input[name="name"]').type('Cypress Test Name', { force: true });
cy.get('input[name="address-textbox"]').type(
cy.get('input[id="address"]').type(
'City Hall Room 708, Philadelphia, PA 19107, USA'
);
cy.get('input[name="website"]').type('cypress.test');
Expand Down Expand Up @@ -73,7 +73,7 @@ describe('crowdsourcing form', () => {
cy.get('input[name="name"]').type('Cypress Food Test Name', {
force: true
});
cy.get('input[name="address-textbox"]').type(
cy.get('input[id="address"]').type(
'City Hall Room 708, Philadelphia, PA 19107, USA'
);
cy.get('input[name="website"]').type('cypress.test');
Expand Down
225 changes: 126 additions & 99 deletions src/components/AddResourceModal/AddBathroom/PageOne.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const PageOne = ({
render={({ field }) => (
<PlacesAutocomplete
name={field.name}
value={field.value}
onBlur={field.onBlur}
ref={field.ref}
disabled={field.disabled}
Expand All @@ -122,109 +123,135 @@ const PageOne = ({
suggestions,
getSuggestionItemProps,
loading
}) => (
<div>
<TextField
value={field.value}
id="address"
name="address-textbox"
label="Street address *"
fullWidth
onChange={e => {
field.onChange(e);
textFieldChangeHandler(e);
}}
helperText={
<Stack component="span">
{errors.address &&
errors.address.message &&
requiredFieldMsg}
<Button variant="text">
Use my location instead
<MyLocationIcon sx={{ fontSize: 10 }} />
</Button>
</Stack>
}
error={!!errors.address}
FormHelperTextProps={{
sx: { marginLeft: 'auto', marginRight: 0 },
onClick: e => {
// Will autofill the street address textbox with user's current address,
// after clicking 'use my address instead'
const { lat, lng } = userLocation;
geocode(RequestType.LATLNG, `${lat},${lng}`)
.then(({ results }) => {
const addr = results[0].formatted_address;
setValue('address-textbox', addr); // react-hook-form setValue
textFieldChangeHandler(addr);
field.onChange(addr);
})
.catch(noop);
}) => {
const {
type,
autoComplete,
role,
'aria-autocomplete': ariaAutocomplete,
'aria-expanded': ariaExpanded,
'aria-activedescendant': ariaActiveDescendent,
disabled,
onKeyDown,
onBlur,
value,
onChange
} = getInputProps({
className: 'modalAddressAutofill',
id: 'address'
});
return (
<div>
<TextField
id="address"
name={field.name}
label="Street address *"
fullWidth
onChange={e => {
field.onChange(e);
onChange(e);
textFieldChangeHandler(e);
}}
helperText={
<Stack component="span">
{errors.address && (
<span>
{errors.address.message || requiredFieldMsg}
</span>
)}
<Button variant="text">
Use my location instead
<MyLocationIcon sx={{ fontSize: 10 }} />
</Button>
</Stack>
}
}}
style={{ backgroundColor: 'white' }}
InputLabelProps={{ shrink: true }}
{...getInputProps({
className: 'modalAddressAutofill',
id: 'address'
})}
className={styles.modalAddressAutofill}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map((suggestion, i) => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? {
backgroundColor: '#fafafa',
cursor: 'pointer'
}
: {
backgroundColor: '#ffffff',
cursor: 'pointer'
};
error={!!errors.address}
FormHelperTextProps={{
sx: { marginLeft: 'auto', marginRight: 0 },
onClick: e => {
// Will autofill the street address textbox with user's current address,
// after clicking 'use my address instead'
const { lat, lng } = userLocation;
geocode(RequestType.LATLNG, `${lat},${lng}`)
.then(({ results }) => {
const addr = results[0].formatted_address;
setValue('address-textbox', addr); // react-hook-form setValue
textFieldChangeHandler(addr);
field.onChange(addr);
})
.catch(noop);
}
}}
style={{ backgroundColor: 'white' }}
InputLabelProps={{ shrink: true }}
type={type}
autoComplete={autoComplete}
role={role}
aria-autocomplete={ariaAutocomplete}
aria-expanded={ariaExpanded}
aria-activedescendant={ariaActiveDescendent}
disabled={disabled}
onKeyDown={onKeyDown}
onBlur={onBlur}
value={value}
className={styles.modalAddressAutofill}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map((suggestion, i) => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? {
backgroundColor: '#fafafa',
cursor: 'pointer'
}
: {
backgroundColor: '#ffffff',
cursor: 'pointer'
};

const {
key,
id,
onMouseEnter,
onMouseLeave,
onMouseDown,
onMouseUp,
onTouchStart,
onTouchEnd,
onClick
} = getSuggestionItemProps(suggestion, {
className,
style
});
const {
key,
id,
onMouseEnter,
onMouseLeave,
onMouseDown,
onMouseUp,
onTouchStart,
onTouchEnd,
onClick,
} = getSuggestionItemProps(suggestion, {
className,
style
});

return (
<div
key={key}
id={id}
role="option"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
onClick={onClick}
onKeyDown={onClick}
tabIndex={0}
aria-selected={suggestion.active}
>
<span>{suggestion.description}</span>
</div>
);
})}
return (
<div
key={key}
id={id}
role="option"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
onClick={onClick}
onKeyDown={onClick}
tabIndex={0}
aria-selected={suggestion.active}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
</div>
)}
);
}}
</PlacesAutocomplete>
)}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/AddResourceModal/AddFood/PageOne.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,13 +215,13 @@ const PageOne = ({
<div>
<TextField
id="address"
name="address-textbox"
name={field.name}
label="Street address *"
fullWidth
onChange={e => {
field.onChange(e);
onChange(e);
textFieldChangeHandler(e);
onChange();
}}
helperText={
<Stack component="span">
Expand Down
10 changes: 5 additions & 5 deletions src/components/AddResourceModal/AddForaging/PageOne.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,7 @@ const PageOne = ({
helperText={
<span>
{errors.name && requiredFieldMsg}
<Typography fontSize={!isMobile ? 10.5 : 13}>
Enter a name for the resource. (Example: City Hall){' '}
</Typography>
Enter a name for the resource. (Example: City Hall)
</span>
}
error={!!errors.name}
Expand Down Expand Up @@ -183,7 +181,8 @@ const PageOne = ({
disabled,
onKeyDown,
onBlur,
value
value,
onChange
} = getInputProps({
className: 'modalAddressAutofill',
id: 'address'
Expand All @@ -192,11 +191,12 @@ const PageOne = ({
<div>
<TextField
id="address"
name="address-textbox"
name={field.name}
label="Street address *"
fullWidth
onChange={e => {
field.onChange(e);
onChange(e);
textFieldChangeHandler(e);
}}
helperText={
Expand Down

0 comments on commit e10153a

Please sign in to comment.