diff --git a/packages/core/src/layout/ErrorBoundary/ErrorBoundary.test.tsx b/packages/core/src/layout/ErrorBoundary/ErrorBoundary.test.tsx new file mode 100644 index 0000000000..4a3126c73c --- /dev/null +++ b/packages/core/src/layout/ErrorBoundary/ErrorBoundary.test.tsx @@ -0,0 +1,71 @@ +/* eslint-disable no-console */ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { ErrorBoundary } from './ErrorBoundary'; +import { renderInTestApp, withLogCollector } from '@backstage/test-utils'; + +type BombProps = { + shouldThrow?: boolean; + children?: React.ReactNode; +}; + +const Bomb = ({ shouldThrow }: BombProps) => { + if (shouldThrow) { + throw new Error('Bomb'); + } else { + return

Working Component

; + } +}; + +describe('', () => { + it('should render error boundary with and without error', async () => { + const { error } = await withLogCollector(['error'], async () => { + const { + rerender, + queryByRole, + getByRole, + getByText, + } = await renderInTestApp( + + + , + ); + + expect(queryByRole('alert')).not.toBeInTheDocument(); + expect(getByText(/working component/i)).toBeInTheDocument(); + + rerender( + + + , + ); + + expect(getByRole('alert')).toBeInTheDocument(); + expect(getByText(/something went wrong here/i)).toBeInTheDocument(); + }); + + expect(error).toEqual([ + expect.stringMatching(/^Error: Uncaught \[Error: Bomb\]/), + expect.stringMatching( + /^The above error occurred in the component:/, + ), + expect.stringMatching(/^ErrorBoundary/), + ]); + expect(error.length).toEqual(3); + }); +}); diff --git a/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx b/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx index cc48e26b1d..17900ad8e3 100644 --- a/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx +++ b/packages/core/src/layout/ErrorBoundary/ErrorBoundary.tsx @@ -65,7 +65,7 @@ type EProps = { const Error = ({ slackChannel }: EProps) => { return ( -
+
Something went wrong here.{' '} {slackChannel && <>Please contact {slackChannel} for help.}