Merge pull request #6588 from rubyforgood/improve-js-tests

improve js tests

Author: compwron

app/javascript/__tests__/casa_case.test.js

@@ -1,7 +1,9 @@
 /* eslint-env jest */
-import { showAlert } from '../src/casa_case'
+/**
+ * @jest-environment jsdom
+ */
 
-require('jest')
+import { showAlert } from '../src/casa_case'
 
 describe('showAlert', () => {
   const defaultErrorMessageHtml = '<div>Error Message</div>'

app/javascript/__tests__/case_button_states.test.js

@@ -1,4 +1,7 @@
 /* eslint-env jest */
+/**
+ * @jest-environment jsdom
+ */
 
 import {
   showBtn,
@@ -7,8 +10,6 @@ import {
   enableBtn
 } from '../src/casa_case'
 
-require('jest')
-
 let button
 
 beforeEach(() => {

app/javascript/__tests__/case_contact.test.js

@@ -1,7 +1,9 @@
 /* eslint-env jest */
-import { convertDateToSystemTimeZone } from '../src/case_contact'
+/**
+ * @jest-environment jsdom
+ */
 
-require('jest')
+import { convertDateToSystemTimeZone } from '../src/case_contact'
 
 test('utc date is correctly converted to system date', () => {
   expect(convertDateToSystemTimeZone('2022-06-22 17:14:50 UTC')).toEqual(new Date('2022-06-22 17:14:50 UTC'))

app/javascript/__tests__/case_emancipations.test.js

@@ -1,7 +1,9 @@
 /* eslint-env jest */
-import { Toggler } from '../src/case_emancipation'
+/**
+ * @jest-environment jsdom
+ */
 
-require('jest')
+import { Toggler } from '../src/case_emancipation'
 
 let category
 let categoryOptions

app/javascript/__tests__/notifier.test.js

@@ -1,7 +1,10 @@
 /* eslint-env jest */
+/**
+ * @jest-environment jsdom
+ */
+
 import { escape } from 'lodash'
 
-require('jest')
 const { Notifier, Notification } = require('../src/notifier.js')
 
 let notificationsElement
@@ -129,6 +132,9 @@ describe('Notifier', () => {
 
       $(() => {
         try {
+          // Clear any existing notifications from previous tests
+          notificationsElement.find('.messages').empty()
+
           notifier.notify(notificationMessage, 'info')
 
           const successMessages = notificationsElement.children('.messages').find('.success-notification')
@@ -443,7 +449,7 @@ describe('Notifier', () => {
       })
     })
 
-    test('throws an error and display it in a red notification when trying to stop an async operation when it\'s sexpecting to resolve none', (done) => {
+    test('throws an error and display it in a red notification when trying to stop an async operation when it\'s expecting to resolve none', (done) => {
       $(() => {
         try {
           expect(() => {
@@ -459,7 +465,7 @@ describe('Notifier', () => {
   })
 
   describe('totalNotificationCount', () => {
-    it('returns the number of notifications the notifier currently has displayed', (done) => {
+    test('returns the number of notifications the notifier currently has displayed', (done) => {
       $(() => {
         try {
           expect(notifier.totalNotificationCount()).toBe(0)

app/javascript/__tests__/password_confirmation.test.js

@@ -1,7 +1,9 @@
 /* eslint-env jest */
-import { checkPasswordsAndDisplayPopup } from '../src/password_confirmation'
+/**
+ * @jest-environment jsdom
+ */
 
-require('jest')
+import { checkPasswordsAndDisplayPopup } from '../src/password_confirmation'
 
 let submitButton, passwordField, confirmationField
 

app/javascript/__tests__/require_communication_preference.test.js

@@ -1,9 +1,13 @@
 /* eslint-env jest */
-import { displayPopUpIfPreferencesIsInvalid } from '../src/require_communication_preference'
+/**
+ * @jest-environment jsdom
+ */
 
-require('jest')
+import { displayPopUpIfPreferencesIsInvalid } from '../src/require_communication_preference'
 
 let saveButton
+let emailCheckbox
+let smsCheckbox
 
 beforeEach(() => {
   document.body.innerHTML = `
@@ -12,17 +16,19 @@ beforeEach(() => {
        <input class="toggle-email-notifications" type="checkbox" value="1" checked="checked" name="user[receive_email_notifications]" id="user_receive_email_notifications">
        <label for="user_receive_email_notifications">Email Me</label>
    </div>
- 
+
    <div>
        <input class="toggle-sms-notifications" type="checkbox" value="1" name="user[receive_sms_notifications]" id="user_receive_sms_notifications">
        <label for="user_receive_sms_notifications">Text Me</label>
- 
+
        <div class="action_container">
            <input type="submit" name="commit" value="Save Preferences" class="btn btn-primary mb-3 save-preference" data-disable-with="Save Preferences">
        </div>
  </form>
  `
   saveButton = document.getElementsByClassName('save-preference')[0]
+  emailCheckbox = document.getElementById('user_receive_email_notifications')
+  smsCheckbox = document.getElementById('user_receive_sms_notifications')
 })
 
 describe('ensure the save button is enabled when at least one preference is selected', () => {
@@ -35,4 +41,35 @@ describe('ensure the save button is enabled when at least one preference is sele
     expect(isDisabled(saveButton)).toBe(false)
     expect(document.getElementsByClassName('swal2-container').length).toBe(0)
   })
+
+  test('at least email preference is selected', () => {
+    emailCheckbox.checked = true
+    smsCheckbox.checked = false
+    displayPopUpIfPreferencesIsInvalid()
+    expect(isDisabled(saveButton)).toBe(false)
+    expect(document.getElementsByClassName('swal2-container').length).toBe(0)
+  })
+
+  test('at least SMS preference is selected', () => {
+    emailCheckbox.checked = false
+    smsCheckbox.checked = true
+    displayPopUpIfPreferencesIsInvalid()
+    expect(isDisabled(saveButton)).toBe(false)
+    expect(document.getElementsByClassName('swal2-container').length).toBe(0)
+  })
+
+  test('both preferences are selected', () => {
+    emailCheckbox.checked = true
+    smsCheckbox.checked = true
+    displayPopUpIfPreferencesIsInvalid()
+    expect(isDisabled(saveButton)).toBe(false)
+    expect(document.getElementsByClassName('swal2-container').length).toBe(0)
+  })
+
+  test('no preferences selected shows popup', () => {
+    emailCheckbox.checked = false
+    smsCheckbox.checked = false
+    displayPopUpIfPreferencesIsInvalid()
+    expect(document.getElementsByClassName('swal2-container').length).toBe(1)
+  })
 })

app/javascript/__tests__/two_minute_warning_session_timeout.test.js

@@ -1,16 +1,58 @@
 /* eslint-env jest */
+/**
+ * @jest-environment jsdom
+ */
 
-require('jest')
+describe('session_timeout_poller', () => {
+  let mockAlert
+  let mockReload
+  let originalTimeout
 
-describe('warningBoxAndReload', () => {
-  test('warning box displays 2 minutes before Devise Timeout', () => {
-    const warningBoxAndReload = jest.fn()
-    const myTimer = jest.fn()
+  beforeEach(() => {
+    // Mock window.alert and window.location.reload
+    mockAlert = jest.fn()
+    mockReload = jest.fn()
+    global.alert = mockAlert
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { reload: mockReload }
+    })
 
-    myTimer()
-    expect(myTimer).toHaveBeenCalled()
+    // Set a short timeout for testing (in minutes)
+    originalTimeout = global.window.timeout
+    global.window.timeout = 0.05 // 3 seconds total, warning at 1.2 seconds
 
-    warningBoxAndReload()
-    expect(warningBoxAndReload).toHaveBeenCalled()
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+    global.window.timeout = originalTimeout
+    jest.resetModules()
+  })
+
+  test('timer runs every second', () => {
+    jest.resetModules()
+
+    // Spy on setInterval before requiring the module
+    const setIntervalSpy = jest.spyOn(global, 'setInterval')
+
+    // Start the poller
+    require('../src/session_timeout_poller')
+
+    // Verify setInterval was called with 1000ms (1 second)
+    expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 1000)
+
+    setIntervalSpy.mockRestore()
+  })
+
+  test('demonstrates timeout logic is testable', () => {
+    // This test demonstrates the module loads and can be tested
+    // A full integration test would require complex timer manipulation
+    // due to how the module uses Date.getTime() and setInterval together
+    expect(() => {
+      jest.resetModules()
+      require('../src/session_timeout_poller')
+    }).not.toThrow()
   })
 })

app/javascript/__tests__/validated_form.test.js

@@ -1,5 +1,7 @@
 /* eslint-env jest */
-require('jest')
+/**
+ * @jest-environment jsdom
+ */
 
 const { Notifier } = require('../src/notifier.js')
 const { NonDrivingContactMediumWarning } = require('../src/validated_form.js')
@@ -77,32 +79,26 @@ describe('NonDrivingContactMediumWarning', () => {
   })
 
   describe('constructor', () => {
-    test('Throws appropriate errors when initialized with values other than a valid jQuery object', (done) => {
-      $(() => {
-        try {
-          expect(() => {
-            // eslint-disable-next-line no-new
-            new NonDrivingContactMediumWarning(3, notifier)
-          }).toThrow(TypeError)
-
-          expect(() => {
-            // eslint-disable-next-line no-new
-            new NonDrivingContactMediumWarning($('#non-existant'), notifier)
-          }).toThrow(ReferenceError)
-
-          done()
-        } catch (error) {
-          done(error)
-        }
-      })
+    test('Throws appropriate errors when initialized with values other than a valid jQuery object', () => {
+      expect(() => {
+        // eslint-disable-next-line no-new
+        new NonDrivingContactMediumWarning(3, notifier)
+      }).toThrow(TypeError)
+
+      expect(() => {
+        // eslint-disable-next-line no-new
+        new NonDrivingContactMediumWarning($('#non-existant'), notifier)
+      }).toThrow(ReferenceError)
     })
   })
 
   describe('getWarningState', () => {
     let component
 
     beforeEach(() => {
-      component = new NonDrivingContactMediumWarning($('.contact-medium.form-group input:not([type=hidden]), #case_contact_miles_driven'), notifier)
+      $(() => {
+        component = new NonDrivingContactMediumWarning($('.contact-medium.form-group input:not([type=hidden]), #case_contact_miles_driven'), notifier)
+      })
     })
 
     test('returns the warning message if a non driving contact medium is selected and the miles driven count is > 0', (done) => {