-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move all the shared code for the home page workflow menu into a WorkflowMenu component. Add stories and tests.
- Loading branch information
1 parent
b4e8bf9
commit 0704f21
Showing
7 changed files
with
208 additions
and
68 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
82 changes: 82 additions & 0 deletions
82
...rc/screens/ProjectHomePage/components/Hero/components/WorkflowMenu/WorflowMenu.stories.js
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,82 @@ | ||
| import asyncStates from '@zooniverse/async-states' | ||
| import zooTheme from '@zooniverse/grommet-theme' | ||
| import { Grommet } from 'grommet' | ||
| import { Provider } from 'mobx-react' | ||
| import { mockWorkflow as mockGroupedWorkflow } from '@shared/components/WorkflowSelector/components/SubjectSetPicker/helpers' | ||
| import WorkflowMenu from './WorkflowMenu' | ||
|
|
||
| const store = { | ||
| project: { | ||
| background: { | ||
| src: 'https://panoptes-uploads.zooniverse.org/production/project_background/260e68fd-d3ec-4a94-bb32-43ff91d5579a.jpeg' | ||
| }, | ||
| description: 'Learn about and help document the wonders of nesting Western Bluebirds.', | ||
| display_name: 'Nest Quest Go: Western Bluebirds', | ||
| slug: 'brbcornell/nest-quest-go-western-bluebirds', | ||
| workflow_description: `Choose your own adventure! There are many ways to engage with this project: | ||
| 1) "Nest Site": Smartphone-friendly, helps us understand where Western Bluebirds build their nests. | ||
| 2) "Location": Smartphone-friendly, series of questions on the geographic location of the nest. | ||
| 3) "Nest Attempt: Smartphone-friendly, for data-entry lovers to record nest attempt data on cards. | ||
| 4) "Comments": For transcription lovers, we ask you to transcribe all the written comments on the cards.` | ||
| }, | ||
| user: { | ||
| loadingState: asyncStates.success | ||
| } | ||
| } | ||
|
|
||
| const WORKFLOWS = [ | ||
| { | ||
| completeness: 0.65, | ||
| default: false, | ||
| displayName: 'The Family and the Fishing Net', | ||
| id: '12345' | ||
| }, | ||
| { | ||
| completeness: 0, | ||
| default: false, | ||
| displayName: 'Games Without Frontiers', | ||
| id: '7890' | ||
| }, | ||
| { | ||
| completeness: 0.99, | ||
| default: false, | ||
| displayName: 'Shock The Monkey', | ||
| id: '5678' | ||
| } | ||
| ] | ||
|
|
||
| function StoryContext (props) { | ||
| const { children, theme } = props | ||
|
|
||
| return ( | ||
| <Grommet | ||
| background={{ | ||
| dark: 'dark-1', | ||
| light: 'light-1' | ||
| }} | ||
| theme={theme} | ||
| themeMode={(theme.dark) ? 'dark' : 'light'} | ||
| > | ||
| <Provider store={store}> | ||
| {children} | ||
| </Provider> | ||
| </Grommet> | ||
| ) | ||
| } | ||
|
|
||
| export default { | ||
| title: 'Project App / Screens / Project Home / Workflow Menu', | ||
| component: WorkflowMenu, | ||
| args: { | ||
| dark: false, | ||
| workflows: [ ...WORKFLOWS, mockGroupedWorkflow ] | ||
| } | ||
| } | ||
|
|
||
| export function Default({ dark, workflows }) { | ||
| return ( | ||
| <StoryContext theme={{ ...zooTheme, dark }}> | ||
| <WorkflowMenu workflows={workflows} /> | ||
| </StoryContext> | ||
| ) | ||
| } |
55 changes: 55 additions & 0 deletions
55
...oject/src/screens/ProjectHomePage/components/Hero/components/WorkflowMenu/WorkflowMenu.js
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,55 @@ | ||
| import { arrayOf, shape, string } from 'prop-types' | ||
| import { useRouter } from 'next/router' | ||
| import React, { useState } from 'react' | ||
| import { Modal } from '@zooniverse/react-components' | ||
|
|
||
| import WorkflowSelector from '@shared/components/WorkflowSelector' | ||
| import { SubjectSetPicker } from '@shared/components/WorkflowSelector/components' | ||
|
|
||
| export default function WorkflowMenu({ workflows }) { | ||
| const [ activeWorkflow, setActiveWorkflow ] = useState() | ||
| const router = useRouter() | ||
| const { owner, project } = router?.query || {} | ||
|
|
||
| function onSelectWorkflow(event, workflow) { | ||
| if (workflow.grouped) { | ||
| event.preventDefault() | ||
| setActiveWorkflow(workflow) | ||
| return false | ||
| } | ||
| return true | ||
| } | ||
| return ( | ||
| <> | ||
| <WorkflowSelector | ||
| onSelect={onSelectWorkflow} | ||
| workflows={workflows} | ||
| /> | ||
| {activeWorkflow && | ||
| <Modal | ||
| active | ||
| closeFn={() => setActiveWorkflow(null)} | ||
| headingBackground='brand' | ||
| title={activeWorkflow.displayName || 'Choose a subject set'} | ||
| titleColor='neutral-6' | ||
| > | ||
| <SubjectSetPicker | ||
| owner={owner} | ||
| project={project} | ||
| workflow={activeWorkflow} | ||
| /> | ||
| </Modal> | ||
| } | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| WorkflowMenu.defaultProps = { | ||
| workflows: [] | ||
| } | ||
|
|
||
| WorkflowMenu.propTypes = { | ||
| workflows: arrayOf(shape({ | ||
| id: string.isRequired | ||
| })) | ||
| } |
62 changes: 62 additions & 0 deletions
62
.../src/screens/ProjectHomePage/components/Hero/components/WorkflowMenu/WorkflowMenu.spec.js
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,62 @@ | ||
| import { shallow } from 'enzyme' | ||
| import sinon from 'sinon' | ||
| import WorkflowSelector from '@shared/components/WorkflowSelector' | ||
| import { SubjectSetPicker } from '@shared/components/WorkflowSelector/components' | ||
|
|
||
| import WorkflowMenu from './WorkflowMenu' | ||
|
|
||
| describe('Component > Hero > WorkflowMenu', function () { | ||
| let wrapper | ||
|
|
||
| const WORKFLOWS = [ | ||
| { | ||
| completeness: 0.65, | ||
| default: false, | ||
| displayName: 'The Family and the Fishing Net', | ||
| grouped: true, | ||
| id: '12345' | ||
| }, | ||
| { | ||
| completeness: 0, | ||
| default: false, | ||
| displayName: 'Games Without Frontiers', | ||
| id: '7890' | ||
| }, | ||
| { | ||
| completeness: 0.99, | ||
| default: false, | ||
| displayName: 'Shock The Monkey', | ||
| id: '5678' | ||
| } | ||
| ] | ||
|
|
||
| beforeEach(function () { | ||
| wrapper = shallow(<WorkflowMenu workflows={WORKFLOWS} />) | ||
| }) | ||
|
|
||
| it('should show a workflow selector', function () { | ||
| expect(wrapper.find(WorkflowSelector)).to.have.lengthOf(1) | ||
| }) | ||
|
|
||
| describe('on selecting', function () { | ||
| let onSelect | ||
|
|
||
| beforeEach(function () { | ||
| onSelect = wrapper.find(WorkflowSelector).prop('onSelect') | ||
| }) | ||
|
|
||
| describe('a grouped workflow', function () { | ||
| it('should show a subject set picker', function () { | ||
| onSelect( { preventDefault: sinon.stub() }, WORKFLOWS[0]) | ||
| expect(wrapper.find(SubjectSetPicker)).to.have.lengthOf(1) | ||
| }) | ||
| }) | ||
|
|
||
| describe('an ordinary workflow', function () { | ||
| it('should not show a subject set picker', function () { | ||
| onSelect( { preventDefault: sinon.stub() }, WORKFLOWS[1]) | ||
| expect(wrapper.find(SubjectSetPicker)).to.have.lengthOf(0) | ||
| }) | ||
| }) | ||
| }) | ||
| }) |
1 change: 1 addition & 0 deletions
1
.../app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowMenu/index.js
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 @@ | ||
| export { default } from './WorkflowMenu' |
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