diff --git a/plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx b/plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx new file mode 100644 index 0000000000000..791937a3b5052 --- /dev/null +++ b/plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx @@ -0,0 +1,41 @@ +/* + * 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 { render, fireEvent } from '@testing-library/react'; +import ErrorButton from './ErrorButton'; +import { ApiRegistry, errorApiRef, ApiProvider } from '@spotify-backstage/core'; + +describe('ErrorButton', () => { + it('should trigger an error', () => { + const errorApi = { post: jest.fn() }; + + const rendered = render( + + + , + ); + + const button = rendered.getByText('Trigger an error!'); + expect(button).toBeInTheDocument(); + + expect(errorApi.post).not.toHaveBeenCalled(); + fireEvent.click(button); + expect(errorApi.post).toHaveBeenCalledWith( + expect.objectContaining({ message: 'Oh no!' }), + ); + }); +}); diff --git a/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx b/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx new file mode 100644 index 0000000000000..fa73115d18f2a --- /dev/null +++ b/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx @@ -0,0 +1,35 @@ +/* + * 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, { FC } from 'react'; +import { Button } from '@material-ui/core'; +import { errorApiRef, useApi } from '@spotify-backstage/core'; + +const ErrorButton: FC<{}> = () => { + const errorApi = useApi(errorApiRef); + + const handleClick = () => { + errorApi.post(new Error('Oh no!')); + }; + + return ( + + ); +}; + +export default ErrorButton; diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx index a5be434b59c95..9787fa2a9a18e 100644 --- a/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx +++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx @@ -18,14 +18,24 @@ import React from 'react'; import { render } from '@testing-library/react'; import WelcomePage from './WelcomePage'; import { ThemeProvider } from '@material-ui/core'; -import { BackstageTheme } from '@spotify-backstage/core'; +import { + BackstageTheme, + ApiProvider, + ApiRegistry, + errorApiRef, +} from '@spotify-backstage/core'; describe('WelcomePage', () => { it('should render', () => { + // TODO: use common test app with mock implementations of all core APIs const rendered = render( - - - , + + + + + , ); expect(rendered.baseElement).toBeInTheDocument(); }); diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx index c77e9ae6aa570..755e19e0ffb3c 100644 --- a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx +++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx @@ -34,6 +34,7 @@ import { ContentHeader, SupportButton, } from '@spotify-backstage/core'; +import ErrorButton from './ErrorButton'; const WelcomePage: FC<{}> = () => { const profile = { givenName: '' }; @@ -113,6 +114,15 @@ const WelcomePage: FC<{}> = () => { + + + + The button below is an example of how to consume APIs. + +
+ +
+