Improve tests and keys in for loops for TSX

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>

plugins/airbrake/package.json

@@ -26,12 +26,14 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
-    "react-use": "^17.2.4"
+    "react-use": "^17.2.4",
+    "object-hash": "^2.2.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0"
   },
   "devDependencies": {
+    "@types/object-hash": "^2.2.1",
     "@backstage/app-defaults": "^0.1.2",
     "@backstage/cli": "^0.10.2",
     "@backstage/core-app-api": "^0.2.1",

plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 The Backstage Authors
+ * Copyright 2020 The Backstage Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,3 +13,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '@material-ui/core';
+import { lightTheme } from '@backstage/theme';
+import { AirbrakeWidget } from './AirbrakeWidget';
+import exampleData from './ExampleData';
+
+describe('AirbrakeWidget', () => {
+  it('should render all messages sent from a payload', async () => {
+    const table = await render(
+      <ThemeProvider theme={lightTheme}>
+        <AirbrakeWidget />
+      </ThemeProvider>,
+    );
+    expect(exampleData.groups.length).toBeGreaterThan(0);
+    for (const group of exampleData.groups) {
+      expect(
+        await table.findByText(group.errors[0].message),
+      ).toBeInTheDocument();
+    }
+  });
+});

plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx

@@ -25,6 +25,7 @@ import {
   SupportButton,
 } from '@backstage/core-components';
 import exampleData from './ExampleData';
+import hash from 'object-hash';
 
 export const AirbrakeWidget = () => {
   return (
@@ -38,10 +39,10 @@ export const AirbrakeWidget = () => {
           <SupportButton>A description of your plugin goes here.</SupportButton>
         </ContentHeader>
         <Grid container spacing={3} direction="column">
-          {exampleData.groups.map(groupEntry => (
-            <Grid item key={groupEntry.id}>
-              {groupEntry.errors.map(error => (
-                <InfoCard title={error.type}>
+          {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>
               ))}

plugins/airbrake/src/plugin.test.tsx

@@ -52,6 +52,8 @@ describe('Airbrake', () => {
         </AppRouter>
       </AppProvider>,
     );
-    expect(rendered.baseElement).toBeInTheDocument();
+    expect(rendered.getAllByRole('heading', { name: 'Airbrake' }).length).toBe(
+      2,
+    );
   });
 });

yarn.lock

@@ -7910,6 +7910,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/object-hash@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/@types/object-hash/-/object-hash-2.2.1.tgz#67c169f8f033e0b62abbf81df2d00f4598d540b9"
+  integrity sha512-i/rtaJFCsPljrZvP/akBqEwUP2y5cZLOmvO+JaYnz01aPknrQ+hB5MRcO7iqCUsFaYfTG8kGfKUyboA07xeDHQ==
+
 "@types/overlayscrollbars@^1.12.0":
   version "1.12.0"
   resolved "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz#98456caceca8ad73bd5bb572632a585074e70764"
@@ -22083,7 +22088,7 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-hash@^2.0.1, object-hash@^2.1.1:
+object-hash@^2.0.1, object-hash@^2.1.1, object-hash@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
   integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==