From 60b2822204264ebf698715d067ce22223505abe9 Mon Sep 17 00:00:00 2001
From: Chris Chuang <chrischuang0421@gmail.com>
Date: Mon, 11 Apr 2022 13:13:34 +0800
Subject: [PATCH] Fixed an issue in chapter 6 where window repeatedly listened
 to popstate events.

---
 .../2_history_api/main.test.js                           | 9 +++------
 .../1_http_requests/main.test.js                         | 9 +++------
 .../2_web_sockets/main.test.js                           | 9 +++------
 3 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/chapter6/4_testing_and_browser_apis/2_history_api/main.test.js b/chapter6/4_testing_and_browser_apis/2_history_api/main.test.js
index 6508b51..193f776 100644
--- a/chapter6/4_testing_and_browser_apis/2_history_api/main.test.js
+++ b/chapter6/4_testing_and_browser_apis/2_history_api/main.test.js
@@ -11,17 +11,14 @@ beforeEach(() => localStorage.clear());
 beforeEach(() => {
   document.body.innerHTML = initialHtml;
 
+  jest.spyOn(window, "addEventListener");
+
   // You must execute main.js again so that it can attach the
   // event listener to the form every time the body changes.
   // Here you must use `jest.resetModules` because otherwise
   // Jest will have cached `main.js` and it will _not_ run again.
   jest.resetModules();
-  require("./main");
-
-  // You can only spy on `window.addEventListener` after `main.js`
-  // has been executed. Otherwise `detachPopstateHandlers` will
-  // also detach the handlers that `main.js` attached to the page.
-  jest.spyOn(window, "addEventListener");
+  require("./main");  
 });
 
 afterEach(detachPopstateHandlers);
diff --git a/chapter6/5_web_sockets_and_http_requests/1_http_requests/main.test.js b/chapter6/5_web_sockets_and_http_requests/1_http_requests/main.test.js
index b62bbbe..323ad4b 100644
--- a/chapter6/5_web_sockets_and_http_requests/1_http_requests/main.test.js
+++ b/chapter6/5_web_sockets_and_http_requests/1_http_requests/main.test.js
@@ -13,6 +13,8 @@ beforeEach(() => localStorage.clear());
 beforeEach(async () => {
   document.body.innerHTML = initialHtml;
 
+  jest.spyOn(window, "addEventListener");
+
   // You must execute main.js again so that it can attach the
   // event listener to the form every time the body changes.
   // Here you must use `jest.resetModules` because otherwise
@@ -22,12 +24,7 @@ beforeEach(async () => {
   nock(API_ADDR)
     .get("/inventory")
     .replyWithError({ code: 500 });
-  await require("./main");
-
-  // You can only spy on `window.addEventListener` after `main.js`
-  // has been executed. Otherwise `detachPopstateHandlers` will
-  // also detach the handlers that `main.js` attached to the page.
-  jest.spyOn(window, "addEventListener");
+  await require("./main");  
 });
 
 afterEach(detachPopstateHandlers);
diff --git a/chapter6/5_web_sockets_and_http_requests/2_web_sockets/main.test.js b/chapter6/5_web_sockets_and_http_requests/2_web_sockets/main.test.js
index 59ec889..ff570c6 100644
--- a/chapter6/5_web_sockets_and_http_requests/2_web_sockets/main.test.js
+++ b/chapter6/5_web_sockets_and_http_requests/2_web_sockets/main.test.js
@@ -13,6 +13,8 @@ beforeEach(() => localStorage.clear());
 beforeEach(async () => {
   document.body.innerHTML = initialHtml;
 
+  jest.spyOn(window, "addEventListener");
+
   // You must execute main.js again so that it can attach the
   // event listener to the form every time the body changes.
   // Here you must use `jest.resetModules` because otherwise
@@ -22,12 +24,7 @@ beforeEach(async () => {
   nock(API_ADDR)
     .get("/inventory")
     .replyWithError({ code: 500 });
-  await require("./main");
-
-  // You can only spy on `window.addEventListener` after `main.js`
-  // has been executed. Otherwise `detachPopstateHandlers` will
-  // also detach the handlers that `main.js` attached to the page.
-  jest.spyOn(window, "addEventListener");
+  await require("./main");  
 });
 
 afterEach(detachPopstateHandlers);