Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions fixtures/components/error-boundary/error-boundary/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import * as React from 'react';
import { NonCancelableEventHandler } from '../../internal/events';

export interface ErrorBoundaryProps {
/**
* React content.
*/
children: React.ReactNode;
/**
* A special callback that fires when an error is captured.
*/
onError: (error: Error, errorInfo: React.ErrorInfo) => void;
/**
* A callback that fires when the user clicks on the refresh button.
*/
onRefresh?: NonCancelableEventHandler;
}

export default function ErrorBoundary({ children }: ErrorBoundaryProps): JSX.Element {
return <div>{children}</div>;
}
7 changes: 7 additions & 0 deletions fixtures/components/error-boundary/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"rootDir": "."
},
"include": ["./**/*.tsx"]
}
11 changes: 9 additions & 2 deletions src/components/component-definition.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,16 @@ export function buildComponentDefinition(
checker: ts.TypeChecker
): ComponentDefinition {
const regions = props.filter(prop => prop.type === 'React.ReactNode');
const events = props.filter(prop => prop.name.match(/^on[A-Z]/));
const events = props.filter(prop => {
// The onError event handler of the error boundary component does not follow the
// event handlers convention and is categorized to properties instead.
if (name === 'ErrorBoundary' && prop.name === 'onError') {
return false;
} else {
return prop.name.match(/^on[A-Z]/);
}
});
const onlyProps = props.filter(prop => !events.includes(prop) && !regions.includes(prop));

return {
name,
dashCaseName,
Expand Down
66 changes: 66 additions & 0 deletions test/components/__snapshots__/error-boundary.test.ts.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Error boundary > should have correct properties definitions 1`] = `
[
{
"dashCaseName": "error-boundary",
"description": undefined,
"events": [
{
"cancelable": false,
"deprecatedTag": undefined,
"description": "A callback that fires when the user clicks on the refresh button.",
"detailInlineType": undefined,
"detailType": undefined,
"name": "onRefresh",
"systemTags": undefined,
},
],
"functions": [],
"name": "ErrorBoundary",
"properties": [
{
"analyticsTag": undefined,
"defaultValue": undefined,
"deprecatedTag": undefined,
"description": "A special callback that fires when an error is captured.",
"i18nTag": undefined,
"inlineType": {
"name": "(error: Error, errorInfo: React.ErrorInfo) => void",
"parameters": [
{
"name": "error",
"type": "Error",
},
{
"name": "errorInfo",
"type": "React.ErrorInfo",
},
],
"returnType": "void",
"type": "function",
},
"name": "onError",
"optional": false,
"systemTags": undefined,
"type": "(error: Error, errorInfo: React.ErrorInfo) => void",
"visualRefreshTag": undefined,
},
],
"regions": [
{
"deprecatedTag": undefined,
"description": "React content.",
"displayName": undefined,
"i18nTag": undefined,
"isDefault": true,
"name": "children",
"systemTags": undefined,
"visualRefreshTag": undefined,
},
],
"releaseStatus": "stable",
"systemTags": undefined,
},
]
`;
12 changes: 12 additions & 0 deletions test/components/error-boundary.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0

import { describe, expect, test } from 'vitest';
import { buildProject } from './test-helpers';

describe('Error boundary', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd suggest adding a test for the onError behavior. You could trigger a condition that causes onError to be called and then verify it with toHaveBeenCalledWith

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes here validate that the onError is added to the generated documentation (validated with the snapshot test), but the actual error boundary implementation is here: cloudscape-design/components#3736, and it does include the coverage on the onError behaviour.

test('should have correct properties definitions', () => {
const result = buildProject('error-boundary');
expect(result).toMatchSnapshot();
});
});
Loading