Made several adjustments for session timer tests

- Turned the timeoutPopup module into a proper module that is exported
- Pulled out the setInterval inner function to be its own method
- Adjusted the session timer tests to have additional setup and teardown pieces
- Added a few tests

There may be some additional adjustments needed, e.g., we may not have to expose all of the methods, but then we have to figure out how to make them accessible in the tests another way.

h/t @A-Shumway42 for pairing with me to review all of these changes and approach!

Signed-off-by: Carlo Costino <carlo.costino@gsa.gov>

app/assets/javascripts/timeoutPopup.js

@@ -1,25 +1,23 @@
 (function(global) {
     "use strict";
+
     const sessionTimer = document.getElementById("sessionTimer");
 
-    setTimeout(function() {
-        var timeTillSessionEnd = new Date().getTime() + (5 * 60 * 1000);
-        var x = setInterval(function() {
-            var now = new Date().getTime();
-            var difference = timeTillSessionEnd - now;
-            var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
-            var seconds = Math.floor((difference % (1000 * 60)) / 1000);
-            document.getElementById("timeLeft").innerHTML = + minutes + "m " + seconds + "s";
-            showTimer();
-            document.getElementById("logOutTimer").addEventListener("click", logoutUser);
-            document.getElementById("extendSessionTimer").addEventListener("click", extendSession);
-            if (difference < 0) {
-                clearInterval(x);
-                closeTimer();
-                logoutUser();
-            }
-        }, 1000);
-    }, 25 * 60 * 1000);
+    function checkTimer(timeTillSessionEnd) {
+        var now = new Date().getTime();
+        var difference = timeTillSessionEnd - now;
+        var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+        var seconds = Math.floor((difference % (1000 * 60)) / 1000);
+        document.getElementById("timeLeft").innerHTML = + minutes + "m " + seconds + "s";
+        showTimer();
+        document.getElementById("logOutTimer").addEventListener("click", logoutUser);
+        document.getElementById("extendSessionTimer").addEventListener("click", extendSession);
+        if (difference < 0) {
+            clearInterval(x);
+            closeTimer();
+            logoutUser();
+        }
+    }
 
     function logoutUser() {
         window.location.href = '/sign-out';
@@ -36,9 +34,17 @@
     function closeTimer() {
         sessionTimer.close();
     }
-    })(window);
-
-
-
 
+    global.GOVUK.Modules.TimeoutPopup = function() {
+        setTimeout(function() {
+            var timeTillSessionEnd = new Date().getTime() + (5 * 60 * 1000);
+            var x = setInterval(checkTimer, 1000, timeTillSessionEnd);
+        }, 25 * 60 * 1000);
+    };
 
+    global.GOVUK.Modules.TimeoutPopup.checkTimer = checkTimer;
+    global.GOVUK.Modules.TimeoutPopup.logoutUser = logoutUser;
+    global.GOVUK.Modules.TimeoutPopup.extendSession = extendSession;
+    global.GOVUK.Modules.TimeoutPopup.showTimer = showTimer;
+    global.GOVUK.Modules.TimeoutPopup.closeTimer = closeTimer;
+})(window);

tests/javascripts/timeoutPopup.test.js

@@ -1,18 +1,97 @@
-const sessionTimerWrapper = require('../../app/assets/javascripts/timeoutPopup.js');
+beforeAll(() => {
+    jest.useFakeTimers();
+    jest.spyOn(global, 'setTimeout');
+
+    document.body.innerHTML = `
+        <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
+            <div class="usa-modal__content">
+                <div class="usa-modal__main">
+                <h2 class="usa-modal__heading" id="sessionTimerHeading">
+                    Your session will end soon.
+                    <span class="usa-sr-only">Please choose to extend your session or sign out. Your session will expire in 5 minutes or less.</span>
+                </h2>
+                <div class="usa-prose">
+                    <p>You have been inactive for too long.
+                    Your session will expire in <span id="timeLeft" role="timer"></span>.
+                    </p>
+                </div>
+                <div class="usa-modal__footer">
+                    <ul class="usa-button-group">
+                    <li class="usa-button-group__item">
+                        <button type="button" class="usa-button" id="extendSessionTimer" data-close-modal>
+                        Extend Session
+                        </button>
+                    </li>
+                    <li class="usa-button-group__item">
+                        <button type="button" class="usa-button usa-button--unstyled padding-105 text-center" id="logOutTimer"
+                        data-close-modal>
+                        Sign out
+                        </button>
+                    </li>
+                    </ul>
+                </div>
+                </div>
+            </div>
+        </dialog>
+    `
+
+        const sessionTimerModule = require('../../app/assets/javascripts/timeoutPopup.js');
+        window.GOVUK.modules.start();
+});
+
+afterAll(() => {
+    jest.useRealTimers();
+    document.body.innerHTML = '';
+});
 
 
-describe('Test popup process', () => {
-    beforeEach(() => {
-        jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-        jest.useRealTimers();
-    });
-
-    it('Test timers work', () => {
+describe('When an authenticated user', () => {
+    test('does whatever', () => {
         jest.runAllTimers();
     });
 
-}); 
+});
 
+
+describe('The session timer ', () => {
+    test('logoutUser method logs the user out', () => {
+        const logoutUserMethod = window.GOVUK.Modules.TimeoutPopup.logoutUser;
+
+        expect(window.location.href).toEqual(expect.not.stringContaining('/sign-out'));
+
+        logoutUserMethod();
+
+        expect(window.location.href).toEqual(expect.stringContaining('/sign-out'));
+    });
+
+    test('extendSession method reloads the page', () => {
+        const windowReload = jest.spyOn(window.location, 'reload');
+        const extendSessionMethod = window.GOVUK.Modules.TimeoutPopup.extendSession;
+
+        extendSessionMethod();
+
+        expect(windowReload).toHaveBeenCalled();
+    });
+
+    test('showTimer method shows the session timer modal', () => {
+        const sessionTimer = document.getElementById("sessionTimer");
+        sessionTimer.showModal = jest.fn();
+
+        const showTimerMock = jest.spyOn(sessionTimer, 'showModal');
+
+        window.GOVUK.Modules.TimeoutPopup.showTimer();
+
+        expect(showTimerMock).toHaveBeenCalled();
+    });
+
+    test('closeTimer method closes the session timer modal', () => {
+        const sessionTimer = document.getElementById("sessionTimer");
+        sessionTimer.close = jest.fn();
+
+        const closeTimerMock = jest.spyOn(sessionTimer, 'close');
+
+        window.GOVUK.Modules.TimeoutPopup.closeTimer();
+
+        expect(closeTimerMock).toHaveBeenCalled();
+    });
+});