-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Style selector basic functionality (#76)
* Add prop-types package * Create basic carousel component * Remove unnecessary range function * Clean up App * Remove empty Carousel test file * Set up data flow in Overview * Add product details to ProductInformation * Make ProductInformation props required * Fix props for StyleSelector * Use proper async useEffect pattern * Select style by ID Optional chaining is used to avoid errors resulting from lookups on undefined. * Add basic style selector functionality * Add product details to ProductInformation * Select style by ID Optional chaining is used to avoid errors resulting from lookups on undefined. * Add basic style selector functionality * Remove merge artifacts * Test for style change on thumbnail click * Move StyleSelector and AddToCart to Overview * Simplify StyleSelector Also makes changes for accessibility.
- Loading branch information
Showing
5 changed files
with
104 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,54 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| function StyleSelector() { | ||
| return null; | ||
| /** | ||
| * Displays thumbnails of the product styles and | ||
| * allows style selection by clicking on a thumbnail | ||
| */ | ||
| function Style({ style, handleStyleSelect, selected }) { | ||
| // TODO: handle selected overlay | ||
| // TODO: | ||
| return ( | ||
| <button | ||
| type="button" | ||
| onClick={() => handleStyleSelect(style.style_id)} | ||
| > | ||
| <img | ||
| src={style.photos[0].thumbnail_url} | ||
| alt={`${style.name} style thumbnail`} | ||
| width="50" | ||
| /> | ||
| </button> | ||
| ); | ||
| } | ||
|
|
||
| Style.propTypes = { | ||
| style: PropTypes.object.isRequired, | ||
| handleStyleSelect: PropTypes.func.isRequired, | ||
| selected: PropTypes.bool.isRequired, | ||
| }; | ||
|
|
||
| function StyleSelector({ styles, selectedStyleId, handleStyleSelect }) { | ||
| // TODO: use color-thief to extract color of thumbnails server-side | ||
| // or parse style name | ||
| return ( | ||
| <div> | ||
| {styles.map((style) => ( | ||
| <Style | ||
| key={style.style_id} | ||
| style={style} | ||
| handleStyleSelect={handleStyleSelect} | ||
| selected={style.style_id === selectedStyleId} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| StyleSelector.propTypes = { | ||
| styles: PropTypes.array.isRequired, | ||
| selectedStyleId: PropTypes.number.isRequired, | ||
| handleStyleSelect: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default StyleSelector; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { screen } from '@testing-library/react'; | ||
| import StyleSelector from 'Overview/StyleSelector.jsx'; | ||
|
|
||
| describe('StyleSelector', () => { | ||
| it('should change selected style when a thumbnail is clicked', async () => { | ||
| const user = userEvent.setup(); | ||
| const handleStyleSelect = (styleId) => { | ||
| selectedStyleId = styleId; | ||
| }; | ||
| let selectedStyleId = 1; | ||
|
|
||
| const {rerender} = render(<StyleSelector | ||
| styles={testData.styles.results} | ||
| selectedStyleId={selectedStyleId} | ||
| handleStyleSelect={handleStyleSelect} | ||
| />); | ||
|
|
||
| //TODO: might need to be more specific as thumbnails get added to imageGallery | ||
| const style = 'Desert Brown & Tan'; | ||
| await user.click(screen.getByAltText(new RegExp(style))); | ||
|
|
||
| const selectedStyleObj = Object.values(testData.styles.results) | ||
| .find(styleObj => styleObj.style_id === selectedStyleId); | ||
| const selectedStyle = selectedStyleObj.name; | ||
|
|
||
| expect(selectedStyle).toBe(style); | ||
| }); | ||
|
|
||
| it.todo('should show all styles for a product'); | ||
| it.todo('should initially select the default style <- should go in Overview') | ||
| it.todo('should not change style when the currently selected style thumbnail is clicked'); | ||
| it.todo('should indicate the selected style with an overlay'); | ||
| }); |