plugins/welcome: add error button that shows an example of consuming …

…the error api

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(
+      <ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
+        <ErrorButton />
+      </ApiProvider>,
+    );
+
+    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!' }),
+    );
+  });
+});

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 (
+    <Button variant="contained" color="primary" onClick={handleClick}>
+      Trigger an error!
+    </Button>
+  );
+};
+
+export default ErrorButton;

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(
-      <ThemeProvider theme={BackstageTheme}>
-        <WelcomePage />
-      </ThemeProvider>,
+      <ApiProvider
+        apis={ApiRegistry.from([[errorApiRef, { post: jest.fn() }]])}
+      >
+        <ThemeProvider theme={BackstageTheme}>
+          <WelcomePage />
+        </ThemeProvider>
+      </ApiProvider>,
     );
     expect(rendered.baseElement).toBeInTheDocument();
   });

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<{}> = () => {
               </List>
             </InfoCard>
           </Grid>
+          <Grid item>
+            <InfoCard title="APIs">
+              <Typography>
+                The button below is an example of how to consume APIs.
+              </Typography>
+              <br />
+              <ErrorButton />
+            </InfoCard>
+          </Grid>
         </Grid>
       </Content>
     </Page>