generated from openedx/frontend-template-application
-
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.
feat: add loading circles to modals (#21)
* feat: add loading circles to modals - reset, reject, and verify buttons all have loading circles now - also, renamed the components to modals since that's what they are * chore: lint * test: update snapshots * test: remove old snapshots * feat: button labels moved to translation msgs * temp: trying to link button state to request * temp: 2nd attempt of hooks in component * docs: comments for request initial states * feat: cleaned code, moved redux hook -> utils * temp: rollback point for moving utils code * temp: tried moving utils to redux folder - it didn't work * chore: nit * temp: moving req. status to custom hook * fix: mocks in tests for new hook * temp: trying to make new test work * temp: fiddling with test * test: complete test for button state * test: hooks test * test: added reset tests - also fixed some nits * chore: lint * docs: added button state description * chore: removed unecessary mock * chore: nit
- Loading branch information
Showing
16 changed files
with
285 additions
and
116 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
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
28 changes: 19 additions & 9 deletions
28
...omponents/ResetExamAttemptButton.test.jsx → ...components/ResetExamAttemptModal.test.jsx
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,46 +1,56 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
|
|
||
| import ResetExamAttemptButton from './ResetExamAttemptButton'; | ||
| import ResetExamAttemptModal from './ResetExamAttemptModal'; | ||
|
|
||
| import * as hooks from '../hooks'; | ||
|
|
||
| jest.mock('../hooks', () => ({ | ||
| useDeleteExamAttempt: jest.fn(), | ||
| useButtonStateFromRequestStatus: jest.fn(), | ||
| })); | ||
|
|
||
| const mockMakeNetworkRequest = jest.fn(); | ||
|
|
||
| // nomally mocked for unit tests but required for rendering/snapshots | ||
| jest.unmock('react'); | ||
|
|
||
| const resetButton = <ResetExamAttemptButton username="username" examName="examName" attemptId={0} />; | ||
| const resetModal = <ResetExamAttemptModal username="username" examName="examName" attemptId={0} />; | ||
|
|
||
| describe('ResetExamAttemptButton', () => { | ||
| describe('ResetExamAttemptModal', () => { | ||
| beforeEach(() => { | ||
| jest.restoreAllMocks(); | ||
| hooks.useDeleteExamAttempt.mockReturnValue(mockMakeNetworkRequest); | ||
| hooks.useButtonStateFromRequestStatus.mockReturnValue(mockMakeNetworkRequest); | ||
| }); | ||
| it('Test that the ResetExamAttemptButton matches snapshot', () => { | ||
| expect(render(resetButton)).toMatchSnapshot(); | ||
| it('Test that the ResetExamAttemptModal matches snapshot', () => { | ||
| expect(render(resetModal)).toMatchSnapshot(); | ||
| }); | ||
| it('Modal appears upon clicking button', () => { | ||
| render(resetButton); | ||
| render(resetModal); | ||
| screen.getByText('Reset').click(); | ||
| expect(screen.getByText('Please confirm your choice.')).toBeInTheDocument(); | ||
| }); | ||
| it('Clicking the No button closes the modal', () => { | ||
| render(resetButton); | ||
| render(resetModal); | ||
| screen.getByText('Reset').click(); | ||
| screen.getByText('Cancel').click(); | ||
| // Using queryByText here allows the function to throw | ||
| expect(screen.queryByText('Please confirm your choice.')).not.toBeInTheDocument(); | ||
| }); | ||
| it('Clicking the Reset button displays the correct label based on the request state', () => { | ||
| render(resetModal); | ||
| hooks.useButtonStateFromRequestStatus.mockReturnValue(() => 'pending'); // for testing button label state | ||
| screen.getByText('Reset').click(); | ||
| expect(screen.queryByText('Resetting...')).toBeInTheDocument(); // The button should be in the pending state | ||
| }); | ||
| it('Clicking the Yes button calls the deletion hook', () => { | ||
| const mockDeleteExamAttempt = jest.fn(); | ||
| jest.spyOn(hooks, 'useDeleteExamAttempt').mockImplementation(() => mockDeleteExamAttempt); | ||
| render(resetButton); | ||
| render(resetModal); | ||
| screen.getByText('Reset').click(); | ||
| screen.getByText('Yes, I\'m Sure').click(); | ||
| // Need to use a test id here b/c there are two button with label 'Reset', | ||
| // One in the table, and one in the modal | ||
| screen.getByTestId('reset-stateful-button').click(); | ||
| expect(mockDeleteExamAttempt).toHaveBeenCalledWith(0); | ||
| }); | ||
| }); |
Oops, something went wrong.