forked from instructure/canvas-lms
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve error handling in Pace Plans
This change improves the error alert that is shown for various error conditions within Pace Plans. It adds an expandable area where the raw details of an error can be displayed, and for select errors (like publishing), displays a "Retry" button for easy recovery. This change adds the new `ExpandableErrorAlert` component to `@canvas/alerts`, so it can be used elsewhere in Canvas, as well. closes LS-2776 flag=pace_plans test plan: - visit `/pace_plans` for a course with pace plans enabled - using the Chrome dev tools, set network throttling to 'Offline' on the 'Network' tab (to simulate an error state) - make some changes, and attempt to publish them - verify that an error is displayed, with an option to view more details - verify that clicking 'View details' and 'Hide details' correctly toggles the raw error details - verify that the unpublished changes indicator is now red, and reads "Publishing error" - disable network throttling, and click the "Retry" button - verify that the error disappears, and your pace plan is successfully published - verify that the red "Publishing error" text is gone - repeat the above using Safari and VoiceOver (you may need to stop your rails server instead of using network throttling, as Safari doesn't have that feature) - when the error first appears, verify that VoiceOver reads it promptly (without requiring navigation by the user to select it) - verify that focus was automatically transferred to the alert Change-Id: I80e7f0a0d1f40af14dd3ee56ce344d25bf12a00e Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/276602 Reviewed-by: Ed Schiebel <[email protected]> Tested-by: Service Cloud Jenkins <[email protected]> QA-Review: Ed Schiebel <[email protected]> Product-Review: Peyton Craighill <[email protected]>
- Loading branch information
Showing
15 changed files
with
482 additions
and
65 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
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
62 changes: 62 additions & 0 deletions
62
ui/features/pace_plans/react/components/__tests__/errors.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,62 @@ | ||
| /* | ||
| * Copyright (C) 2021 - present Instructure, Inc. | ||
| * | ||
| * This file is part of Canvas. | ||
| * | ||
| * Canvas is free software: you can redistribute it and/or modify it under | ||
| * the terms of the GNU Affero General Public License as published by the Free | ||
| * Software Foundation, version 3 of the License. | ||
| * | ||
| * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY | ||
| * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR | ||
| * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more | ||
| * details. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License along | ||
| * with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| */ | ||
|
|
||
| import {Errors, ErrorsProps} from '../errors' | ||
| import {act, render} from '@testing-library/react' | ||
| import React from 'react' | ||
| import userEvent from '@testing-library/user-event' | ||
|
|
||
| const publishPlan = jest.fn() | ||
| afterEach(jest.clearAllMocks) | ||
|
|
||
| describe('Errors', () => { | ||
| const defaultProps: ErrorsProps = { | ||
| errors: { | ||
| publish: 'TypeError: Failed to fetch', | ||
| loading: 'TypeError: Failed to fetch', | ||
| darkMode: 'E_THEME_TOO_DARK: Theme too dark, user could trip and fall' | ||
| }, | ||
| responsiveSize: 'large', | ||
| publishPlan | ||
| } | ||
|
|
||
| it('renders nothing when there are no errors', () => { | ||
| const {container} = render(<Errors {...defaultProps} errors={{}} />) | ||
|
|
||
| expect(container.firstChild).toBeEmpty() | ||
| }) | ||
|
|
||
| it('displays custom error messages for pre-defined categories, and generic error messages for unknown categories', () => { | ||
| const {getAllByText} = render(<Errors {...defaultProps} />) | ||
|
|
||
| for (const error of [ | ||
| ...getAllByText('There was an error publishing your pace plan.'), | ||
| ...getAllByText('There was an error loading the plan.'), | ||
| ...getAllByText('An error has occurred.') | ||
| ]) { | ||
| expect(error).toBeInTheDocument() | ||
| } | ||
| }) | ||
|
|
||
| it('triggers a re-publish when the retry button is clicked', () => { | ||
| const {getByRole} = render(<Errors {...defaultProps} />) | ||
|
|
||
| act(() => userEvent.click(getByRole('button', {name: 'Retry'}))) | ||
| expect(publishPlan).toHaveBeenCalled() | ||
| }) | ||
| }) |
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
Oops, something went wrong.