-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
50 changed files
with
1,810 additions
and
77 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Binary file not shown.
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
34 changes: 34 additions & 0 deletions
34
apps/crn-frontend/src/network/teams/ManuscriptToastProvider.tsx
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,34 @@ | ||
| import { Toast } from '@asap-hub/react-components'; | ||
| import React, { createContext, useState } from 'react'; | ||
|
|
||
| type ManuscriptToastContextData = { | ||
| setShowSuccessBanner: React.Dispatch<React.SetStateAction<boolean>>; | ||
| }; | ||
|
|
||
| export const ManuscriptToastContext = createContext<ManuscriptToastContextData>( | ||
| {} as ManuscriptToastContextData, | ||
| ); | ||
|
|
||
| export const ManuscriptToastProvider = ({ | ||
| children, | ||
| }: { | ||
| children: React.ReactNode; | ||
| }) => { | ||
| const [showSuccessBanner, setShowSuccessBanner] = useState<boolean>(false); | ||
|
|
||
| return ( | ||
| <ManuscriptToastContext.Provider value={{ setShowSuccessBanner }}> | ||
| <> | ||
| {showSuccessBanner && ( | ||
| <Toast | ||
| accent="successLarge" | ||
| onClose={() => setShowSuccessBanner(false)} | ||
| > | ||
| Manuscript submitted successfully. | ||
| </Toast> | ||
| )} | ||
| {children} | ||
| </> | ||
| </ManuscriptToastContext.Provider> | ||
| ); | ||
| }; |
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,38 @@ | ||
| import { Frame } from '@asap-hub/frontend-utils'; | ||
| import { | ||
| ManuscriptForm, | ||
| ManuscriptHeader, | ||
| usePushFromHere, | ||
| } from '@asap-hub/react-components'; | ||
| import { network } from '@asap-hub/routing'; | ||
| import { FormProvider, useForm } from 'react-hook-form'; | ||
| import { usePostManuscript } from './state'; | ||
| import { useManuscriptToast } from './useManuscriptToast'; | ||
|
|
||
| type TeamManuscriptProps = { | ||
| teamId: string; | ||
| }; | ||
| const TeamManuscript: React.FC<TeamManuscriptProps> = ({ teamId }) => { | ||
| const { setShowSuccessBanner } = useManuscriptToast(); | ||
| const form = useForm(); | ||
| const createManuscript = usePostManuscript(); | ||
|
|
||
| const pushFromHere = usePushFromHere(); | ||
|
|
||
| const onSuccess = () => { | ||
| const path = network({}).teams({}).team({ teamId }).workspace({}).$; | ||
|
|
||
| setShowSuccessBanner(true); | ||
| pushFromHere(path); | ||
| }; | ||
|
|
||
| return ( | ||
| <FormProvider {...form}> | ||
| <Frame title="Create Manuscript"> | ||
| <ManuscriptHeader /> | ||
| <ManuscriptForm onSuccess={onSuccess} onSave={createManuscript} /> | ||
| </Frame> | ||
| </FormProvider> | ||
| ); | ||
| }; | ||
| export default TeamManuscript; |
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
104 changes: 104 additions & 0 deletions
104
apps/crn-frontend/src/network/teams/__tests__/TeamManuscript.test.tsx
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,104 @@ | ||
| import { | ||
| Auth0Provider, | ||
| WhenReady, | ||
| } from '@asap-hub/crn-frontend/src/auth/test-utils'; | ||
| import { network } from '@asap-hub/routing'; | ||
| import { | ||
| render, | ||
| screen, | ||
| waitFor, | ||
| waitForElementToBeRemoved, | ||
| } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { createMemoryHistory } from 'history'; | ||
| import { ComponentProps, Suspense } from 'react'; | ||
| import { Route, Router } from 'react-router-dom'; | ||
| import { RecoilRoot } from 'recoil'; | ||
|
|
||
| import { createManuscript } from '../api'; | ||
| import { ManuscriptToastProvider } from '../ManuscriptToastProvider'; | ||
| import { refreshTeamState } from '../state'; | ||
| import TeamManuscript from '../TeamManuscript'; | ||
|
|
||
| const manuscriptResponse = { id: '1', title: 'The Manuscript' }; | ||
|
|
||
| const teamId = '42'; | ||
| const history = createMemoryHistory({ | ||
| initialEntries: [ | ||
| network({}).teams({}).team({ teamId }).workspace({}).createManuscript({}).$, | ||
| ], | ||
| }); | ||
| jest.mock('../api', () => ({ | ||
| createManuscript: jest.fn().mockResolvedValue(manuscriptResponse), | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| jest.resetModules(); | ||
| }); | ||
|
|
||
| const renderPage = async ( | ||
| user: ComponentProps<typeof Auth0Provider>['user'] = {}, | ||
| ) => { | ||
| const path = | ||
| network.template + | ||
| network({}).teams.template + | ||
| network({}).teams({}).team.template + | ||
| network({}).teams({}).team({ teamId }).workspace.template + | ||
| network({}).teams({}).team({ teamId }).workspace({}).createManuscript | ||
| .template; | ||
|
|
||
| const { container } = render( | ||
| <RecoilRoot | ||
| initializeState={({ set }) => { | ||
| set(refreshTeamState(teamId), Math.random()); | ||
| }} | ||
| > | ||
| <Suspense fallback="loading"> | ||
| <Auth0Provider user={user}> | ||
| <WhenReady> | ||
| <Router history={history}> | ||
| <Route path={path}> | ||
| <ManuscriptToastProvider> | ||
| <TeamManuscript teamId={teamId} /> | ||
| </ManuscriptToastProvider> | ||
| </Route> | ||
| </Router> | ||
| </WhenReady> | ||
| </Auth0Provider> | ||
| </Suspense> | ||
| </RecoilRoot>, | ||
| ); | ||
| await waitForElementToBeRemoved(() => screen.queryByText(/loading/i)); | ||
| return { container }; | ||
| }; | ||
|
|
||
| it('renders manuscript form page', async () => { | ||
| const { container } = await renderPage(); | ||
|
|
||
| expect(container).toHaveTextContent( | ||
| 'Submit your manuscript to receive a compliance report and find out which areas need to be improved before publishing your article', | ||
| ); | ||
| expect(container).toHaveTextContent('What are you sharing'); | ||
| expect(container).toHaveTextContent('Title of Manuscript'); | ||
| }); | ||
|
|
||
| it('can publish a form when the data is valid and navigates to team workspace', async () => { | ||
| const title = 'The Manuscript'; | ||
|
|
||
| await renderPage(); | ||
|
|
||
| userEvent.type( | ||
| screen.getByRole('textbox', { name: /title of manuscript/i }), | ||
| title, | ||
| ); | ||
|
|
||
| const submitButton = screen.getByRole('button', { name: /Submit/i }); | ||
| userEvent.click(submitButton); | ||
|
|
||
| await waitFor(() => { | ||
| expect(createManuscript).toHaveBeenCalledWith({ title }, expect.anything()); | ||
| expect(history.location.pathname).toBe( | ||
| `/network/teams/${teamId}/workspace`, | ||
| ); | ||
| }); | ||
| }); |
Oops, something went wrong.