From 6974ee630e6ae8f908e0ab2b3a594a3ac66b164a Mon Sep 17 00:00:00 2001
From: Nathalie Schulz <nathalie.schulz@evolvsys.com>
Date: Fri, 10 Nov 2023 10:18:30 +0100
Subject: [PATCH 1/2] modify test to show the history back problem

---
 .../test/AppInsightsErrorBoundary.test.tsx    | 68 +++++++------------
 1 file changed, 26 insertions(+), 42 deletions(-)

diff --git a/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx b/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx
index e55a225..f81167c 100644
--- a/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx
+++ b/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx
@@ -94,20 +94,14 @@ describe("<AppInsightsErrorBoundary />", () => {
   });
 
   function NewError() {
-    const navigate = useNavigate();
-    const ErrorDisplay = () => <div>You are on the error page</div>;
     function handleClick() {
-      navigate(-1);
+      history.back()
     }
     return (
       <div>
         <button onClick={handleClick}>go back</button>
-      <AppInsightsErrorBoundary
-        appInsights={reactPlugin}
-        onError={ErrorDisplay}>
-      <ErrorTestComponent />
-      </AppInsightsErrorBoundary>
-    </div>
+        <div>You are on the error page</div>
+      </div>
     );
   }
 
@@ -116,48 +110,38 @@ describe("<AppInsightsErrorBoundary />", () => {
     if (orgError) {
       console.error = msg => { /* Do Nothing */ };
     }
-    const Home = () => <div>Home Page</div>
-    const About = () => <div>About Page</div>
+    const Home = () => <div>Home Page</div>;
+    const About = () => {
+      throw new Error("something went wrong");
+    };
 
     try {
       render(
-        <Router>
+        <AppInsightsErrorBoundary appInsights={reactPlugin} onError={NewError}>
+          <Router>
             <div>
-            <Link to="/">Home</Link>
-            <Link to="/about">About</Link>
-            <Link to="/error">Error</Link>
-            <button type="button" onClick={() => { window.history.go(-1); }}>Back</button>
-             <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/about" element={<About />} />
-              <Route path="/error" element={<NewError/>} />
-            </Routes>
-            <LocationDisplay />
-          </div>
-        </Router>
+              <Link to="/">Home</Link>
+              <Link to="/about">About</Link>
+              <button type="button" onClick={() => { window.history.go(-1); }}>Back</button>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/about" element={<About />} />
+              </Routes>
+              <LocationDisplay />
+            </div>
+          </Router>
+        </AppInsightsErrorBoundary>
       );
       expect(screen.getByText(/Home Page/i)).toBeInTheDocument()
-      
-      // go to error page
-      await userEvent.click(screen.getByText(/error/i))
-      expect(screen.getByText(/You are on the error page/i)).toBeInTheDocument()
-      expect(trackExceptionSpy).toHaveBeenCalledTimes(1);
 
-      // go back to home page
-      await userEvent.click(screen.getByText(/go back/i));
-      expect(screen.getByText(/Home Page/i)).toBeInTheDocument();
-      expect(trackExceptionSpy).toHaveBeenCalledTimes(1);
-
-      // go to error page again
-      await userEvent.click(screen.getByText(/error/i))
-      expect(screen.getByText(/You are on the error page/i)).toBeInTheDocument()
-      console.log("track time", trackExceptionSpy.mock.calls.length);
-
-      // navigate to about page
-      await userEvent.click(screen.getByText(/about/i))
-      expect(screen.getByText(/About Page/i)).toBeInTheDocument()
+      // navigate to about page (throws error, so show error component)
+      await userEvent.click(screen.getByText(/about/i));
+      expect(screen.getByText(/You are on the error page/i)).toBeInTheDocument();
       console.log("track time", trackExceptionSpy.mock.calls.length);
 
+      // go back to home page (no error, so show home component)
+      await userEvent.click(screen.getByText(/go back/i));
+      expect(screen.getByText(/Home Page/i)).toBeInTheDocument();
     } finally {
       if (orgError) {
         console.error = orgError;

From 5b44a59e2070bf55ef427094c01473746d4673bd Mon Sep 17 00:00:00 2001
From: Nathalie Schulz <nathalie.schulz@evolvsys.com>
Date: Mon, 13 Nov 2023 12:12:40 +0100
Subject: [PATCH 2/2] replace history.back with navigate

---
 .../test/AppInsightsErrorBoundary.test.tsx    | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx b/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx
index f81167c..562ff86 100644
--- a/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx
+++ b/applicationinsights-react-js/test/AppInsightsErrorBoundary.test.tsx
@@ -94,9 +94,12 @@ describe("<AppInsightsErrorBoundary />", () => {
   });
 
   function NewError() {
+    const navigate = useNavigate();
+  
     function handleClick() {
-      history.back()
+      navigate(-1);
     }
+  
     return (
       <div>
         <button onClick={handleClick}>go back</button>
@@ -105,6 +108,14 @@ describe("<AppInsightsErrorBoundary />", () => {
     );
   }
 
+  function BackButton() {
+    const navigate = useNavigate();
+  
+    return (
+      <button type="button" onClick={() => navigate(-1)}>Back</button>
+    );
+  }
+
   test("error state would not show again after user use back button", async () => {
     const orgError = console && console.error;
     if (orgError) {
@@ -117,20 +128,20 @@ describe("<AppInsightsErrorBoundary />", () => {
 
     try {
       render(
-        <AppInsightsErrorBoundary appInsights={reactPlugin} onError={NewError}>
-          <Router>
+        <Router>
+          <AppInsightsErrorBoundary appInsights={reactPlugin} onError={NewError}>
             <div>
               <Link to="/">Home</Link>
               <Link to="/about">About</Link>
-              <button type="button" onClick={() => { window.history.go(-1); }}>Back</button>
+              <BackButton />
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/about" element={<About />} />
               </Routes>
               <LocationDisplay />
             </div>
-          </Router>
-        </AppInsightsErrorBoundary>
+          </AppInsightsErrorBoundary>
+        </Router>
       );
       expect(screen.getByText(/Home Page/i)).toBeInTheDocument()