From baa79f07241ff2524381607708207ae62ff8cc00 Mon Sep 17 00:00:00 2001
From: Karan Shah <karan.shah@simplybusiness.co.uk>
Date: Wed, 29 Dec 2021 16:02:09 +0000
Subject: [PATCH] Improve tests and keys in for loops for TSX

Signed-off-by: Karan Shah <karan.shah@simplybusiness.co.uk>
---
 plugins/airbrake/package.json                 |  4 ++-
 .../AirbrakeWidget/AirbrakeWidget.test.tsx    | 25 ++++++++++++++++++-
 .../AirbrakeWidget/AirbrakeWidget.tsx         |  9 ++++---
 plugins/airbrake/src/plugin.test.tsx          |  4 ++-
 yarn.lock                                     |  7 +++++-
 5 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/plugins/airbrake/package.json b/plugins/airbrake/package.json
index 26e2d5fded..2a4c822439 100644
--- a/plugins/airbrake/package.json
+++ b/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",
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
index 7f0d9bd499..e568ea526d 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.test.tsx
+++ b/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();
+    }
+  });
+});
diff --git a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx b/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
index 7a150c5746..c7f1e1b626 100644
--- a/plugins/airbrake/src/components/AirbrakeWidget/AirbrakeWidget.tsx
+++ b/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>
               ))}
diff --git a/plugins/airbrake/src/plugin.test.tsx b/plugins/airbrake/src/plugin.test.tsx
index 36696e4aaa..267f29253d 100644
--- a/plugins/airbrake/src/plugin.test.tsx
+++ b/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,
+    );
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 6ca47899b6..c9fb02d2c8 100644
--- a/yarn.lock
+++ b/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==