From 3e77697da02810c4bbb13137ab283f6f6342079c Mon Sep 17 00:00:00 2001
From: Karan Shah <karan.shah@simplybusiness.co.uk>
Date: Wed, 29 Dec 2021 17:04:08 +0000
Subject: [PATCH] Fix AirbrakeWidget.test.tsx

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
---
 plugins/airbrake/dev/index.tsx                | 27 +++++++++-
 .../AirbrakeWidget/AirbrakeWidget.test.tsx    |  2 +-
 .../AirbrakeWidget/AirbrakeWidget.tsx         | 53 ++++++++-----------
 .../components/AirbrakeWidget/ExampleData.ts  |  3 +-
 4 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/plugins/airbrake/dev/index.tsx b/plugins/airbrake/dev/index.tsx
index 67de050404..a76b80a4e3 100644
--- a/plugins/airbrake/dev/index.tsx
+++ b/plugins/airbrake/dev/index.tsx
@@ -15,12 +15,35 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { airbrakePlugin, AirbrakePage } from '../src/plugin';
+import { AirbrakePage, airbrakePlugin } from '../src/plugin';
+import {
+  Content,
+  ContentHeader,
+  Header,
+  HeaderLabel,
+  Page,
+  SupportButton,
+} from '@backstage/core-components';
 
 createDevApp()
   .registerPlugin(airbrakePlugin)
   .addPage({
-    element: <AirbrakePage />,
+    element: (
+      <Page themeId="tool">
+        <Header title="Airbrake" subtitle="Errors in your application">
+          <HeaderLabel label="Owner" value="Owner" />
+          <HeaderLabel label="Lifecycle" value="Alpha" />
+        </Header>
+        <Content>
+          <ContentHeader title="Airbrake">
+            <SupportButton>
+              A description of your plugin goes here.
+            </SupportButton>
+          </ContentHeader>
+          <AirbrakePage />
+        </Content>
+      </Page>
+    ),
     title: 'Root Page',
     path: '/airbrake',
   })
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
index e568ea526d..470064ed10 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
+++ b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
@@ -31,7 +31,7 @@ describe('AirbrakeWidget', () => {
     expect(exampleData.groups.length).toBeGreaterThan(0);
     for (const group of exampleData.groups) {
       expect(
-        await table.findByText(group.errors[0].message),
+        await table.getByText(group.errors[0].message),
       ).toBeInTheDocument();
     }
   });
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
index c7f1e1b626..1bceb9c7e1 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
+++ b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
@@ -14,42 +14,35 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Typography, Grid } from '@material-ui/core';
-import {
-  InfoCard,
-  Header,
-  Page,
-  Content,
-  ContentHeader,
-  HeaderLabel,
-  SupportButton,
-} from '@backstage/core-components';
+import { Grid, Typography } from '@material-ui/core';
+import { InfoCard } from '@backstage/core-components';
 import exampleData from './ExampleData';
 import hash from 'object-hash';
+import { makeStyles } from '@material-ui/core/styles';
+import { BackstageTheme } from '@backstage/theme';
+
+const useStyles = makeStyles<BackstageTheme>(() => ({
+  multilineText: {
+    whiteSpace: 'pre-wrap',
+  },
+}));
 
 export const AirbrakeWidget = () => {
+  const classes = useStyles();
+
   return (
-    <Page themeId="tool">
-      <Header title="Airbrake" subtitle="Errors in your application">
-        <HeaderLabel label="Owner" value="Owner" />
-        <HeaderLabel label="Lifecycle" value="Alpha" />
-      </Header>
-      <Content>
-        <ContentHeader title="Airbrake">
-          <SupportButton>A description of your plugin goes here.</SupportButton>
-        </ContentHeader>
-        <Grid container spacing={3} direction="column">
-          {exampleData.groups.map(group => (
-            <Grid item key={group.id}>
-              {group.errors.map(error => (
-                <InfoCard title={error.type} key={hash(error)}>
-                  <Typography variant="body1">{error.message}</Typography>
-                </InfoCard>
-              ))}
-            </Grid>
+    <Grid container spacing={3} direction="column">
+      {exampleData.groups.map(group => (
+        <Grid item key={group.id}>
+          {group.errors.map(error => (
+            <InfoCard title={error.type} key={hash(error)}>
+              <Typography variant="body1" className={classes.multilineText}>
+                {error.message}
+              </Typography>
+            </InfoCard>
           ))}
         </Grid>
-      </Content>
-    </Page>
+      ))}
+    </Grid>
   );
 };
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts b/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts
index d1d2394ee6..3d4793c011 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts
+++ b/plugins/airbrake/src/components/AirbrakeWidget/ExampleData.ts
@@ -65,8 +65,7 @@ export default {
       errors: [
         {
           type: 'ChunkLoadError',
-          message:
-            'Loading chunk 7764 failed.\n(error: https://example.com/static/react-syntax-highlighter/lowlight-import.9ac339f2.chunk.js)',
+          message: 'Loading chunk 7764 failed.',
           backtrace: [
             {
               file: '/PROJECT_ROOT/static/runtime.069c874d.js',