move initializeSettings to webpack (#19737)

* move initializeSettings to webpack + add tests

* add initializeSettings to InstantClick change block

* dont use classes, use modules

---------

Co-authored-by: PJ <pj@forem.com>

app/assets/javascripts/initializePage.js

@@ -2,7 +2,7 @@
   global initializeLocalStorageRender, initializeBodyData,
   initializeAllTagEditButtons, initializeUserFollowButts,
   initializeCommentsPage,
-  initializeSettings, initializeRuntimeBanner,
+  initializeRuntimeBanner,
   initializeCreditsPage,
   initializeOnboardingTaskCard,
   initScrolling, nextPage:writable,
@@ -13,7 +13,6 @@
 function callInitializers() {
   initializePaymentPointers();
   initializeCommentsPage();
-  initializeSettings();
   initializeCreditsPage();
   initializeOnboardingTaskCard();
 }

app/assets/javascripts/initializers/initializeSettings.js

@@ -1,51 +0,0 @@
-/* global timestampToLocalDateTime InstantClick */
-
-function initializeSettings() {
-  // initialize org secret copy to clipboard functionality
-  const settingsOrgSecretInput = document.getElementById('settings-org-secret');
-  const settingsOrgSecretButton = document.getElementById(
-    'settings-org-secret-copy-btn',
-  );
-
-  if (settingsOrgSecretInput && settingsOrgSecretButton) {
-    settingsOrgSecretButton.addEventListener('click', () => {
-      const { value } = settingsOrgSecretInput;
-      window.Forem.Runtime.copyToClipboard(value).then(() => {
-        // Show the confirmation message
-        document
-          .getElementById('copy-text-announcer')
-          .classList.remove('hidden');
-      });
-    });
-  }
-
-  // shows RSS fetch time in local time
-  let timeNode = document.getElementById('rss-fetch-time');
-  if (timeNode) {
-    var timeStamp = timeNode.getAttribute('datetime');
-    var timeOptions = {
-      month: 'long',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-      second: 'numeric',
-    };
-
-    timeNode.textContent = timestampToLocalDateTime(
-      timeStamp,
-      navigator.language,
-      timeOptions,
-    );
-  }
-
-  const mobilePageSelector = document.getElementById('mobile-page-selector');
-
-  if (mobilePageSelector) {
-    mobilePageSelector.addEventListener('change', (event) => {
-      const url = event.target.value;
-
-      InstantClick.preload(url);
-      InstantClick.display(url);
-    });
-  }
-}

app/javascript/packs/baseInitializers.js

@@ -3,6 +3,7 @@ import { initializeCommentPreview } from './initializers/initializeCommentPrevie
 import { initializeTimeFixer } from './initializers/initializeTimeFixer';
 import { initializeNotifications } from './initializers/initializeNotifications';
 import { initializeDateHelpers } from './initializers/initializeDateTimeHelpers';
+import { initializeSettings } from './initializers/initializeSettings';
 import {
   showUserAlertModal,
   showModalAfterError,
@@ -10,6 +11,7 @@ import {
 
 initializeCommentDate();
 initializeCommentPreview();
+initializeSettings();
 initializeNotifications();
 initializeTimeFixer();
 initializeDateHelpers();
@@ -17,6 +19,7 @@ initializeDateHelpers();
 InstantClick.on('change', () => {
   initializeCommentDate();
   initializeCommentPreview();
+  initializeSettings();
   initializeNotifications();
 });
 

app/javascript/packs/initializers/initializeSettings.js

@@ -0,0 +1,9 @@
+import { setupCopyOrgSecret } from '../../settings/copyOrgSecret';
+import { setupRssFetchTime } from '../../settings/rssFetchTime';
+import { setupMobilePageSel } from '../../settings/mobilePageSel';
+
+export function initializeSettings() {
+  setupCopyOrgSecret();
+  setupRssFetchTime();
+  setupMobilePageSel();
+}

app/javascript/settings/__tests__/copyOrgSecret.test.js

@@ -0,0 +1,45 @@
+import { setupCopyOrgSecret, copyToClipboardListener } from '../copyOrgSecret';
+
+describe('OrgSecretCopy Tests', () => {
+  let copyToClipboardMock, valueToCopy;
+
+  const getCopyBtn = () =>
+    document.getElementById('settings-org-secret-copy-btn');
+
+  beforeAll(async () => {
+    valueToCopy = 'abc123';
+
+    document.body.innerHTML = `
+      <input type="text" id="settings-org-secret" value="${valueToCopy}" readonly>
+      <button id="settings-org-secret-copy-btn"></button>
+      <div id="copy-text-announcer" class="hidden"></div>
+    `;
+  });
+
+  beforeEach(() => {
+    // Mock window.Forem.Runtime.copyToClipboard
+    copyToClipboardMock = jest.fn().mockResolvedValue({});
+    global.window.Forem = {
+      Runtime: {
+        copyToClipboard: copyToClipboardMock,
+      },
+    };
+  });
+
+  it('attaches listener to button', () => {
+    const spyButton = jest.spyOn(getCopyBtn(), 'addEventListener');
+
+    setupCopyOrgSecret();
+    expect(spyButton).toHaveBeenCalledWith('click', copyToClipboardListener);
+  });
+
+  it('after button is clicked, copyToClipboard called + announcer shown', async () => {
+    getCopyBtn().click();
+
+    expect(copyToClipboardMock).toHaveBeenCalledWith(valueToCopy);
+
+    await Promise.resolve();
+    const announcer = document.getElementById('copy-text-announcer');
+    expect(announcer.classList.contains('hidden')).toBe(false);
+  });
+});

app/javascript/settings/__tests__/mobilePageSel.test.js

@@ -0,0 +1,17 @@
+import { setupMobilePageSel, mobilePageSelListener } from '../mobilePageSel';
+
+describe('MobilePageSel Tests', () => {
+  beforeAll(async () => {
+    document.body.innerHTML = '<select id="mobile-page-selector" />';
+  });
+
+  it('attaches onchange listener to mobile page selector', () => {
+    const spySel = jest.spyOn(
+      document.getElementById('mobile-page-selector'),
+      'addEventListener',
+    );
+
+    setupMobilePageSel();
+    expect(spySel).toHaveBeenCalledWith('change', mobilePageSelListener);
+  });
+});

app/javascript/settings/__tests__/rssFetchTime.test.js

@@ -0,0 +1,18 @@
+jest.mock('@utilities/localDateTime', () => ({
+  timestampToLocalDateTime: jest.fn(),
+}));
+
+import { setupRssFetchTime } from '../rssFetchTime';
+import { timestampToLocalDateTime } from '@utilities/localDateTime';
+
+describe('RSSFetchTime Tests', () => {
+  beforeAll(async () => {
+    document.body.innerHTML =
+      '<time id="rss-fetch-time" datetime="2023-07-10T20:02:16Z"></time>';
+  });
+
+  it('timestampToLocalDateTime is called', () => {
+    setupRssFetchTime();
+    expect(timestampToLocalDateTime).toHaveBeenCalled();
+  });
+});

app/javascript/settings/copyOrgSecret.js

@@ -0,0 +1,16 @@
+export function copyToClipboardListener() {
+  const settingsOrgSecretInput = document.getElementById('settings-org-secret');
+  if (settingsOrgSecretInput === null) return;
+
+  const { value } = settingsOrgSecretInput;
+  return window.Forem.Runtime.copyToClipboard(value).then(() => {
+    // Show the confirmation message
+    document.getElementById('copy-text-announcer').classList.remove('hidden');
+  });
+}
+
+export function setupCopyOrgSecret() {
+  document
+    .getElementById('settings-org-secret-copy-btn')
+    ?.addEventListener('click', copyToClipboardListener);
+}

app/javascript/settings/mobilePageSel.js

@@ -0,0 +1,11 @@
+export function mobilePageSelListener(event) {
+  const url = event.target.value;
+  InstantClick.preload(url);
+  InstantClick.display(url);
+}
+
+export function setupMobilePageSel() {
+  document
+    .getElementById('mobile-page-selector')
+    ?.addEventListener('change', mobilePageSelListener);
+}

app/javascript/settings/rssFetchTime.js

@@ -0,0 +1,22 @@
+import { timestampToLocalDateTime } from '@utilities/localDateTime';
+
+export function setupRssFetchTime() {
+  // shows RSS fetch time in local time
+  const timeNode = document.getElementById('rss-fetch-time');
+  if (timeNode) {
+    const timeStamp = timeNode.getAttribute('datetime');
+    const timeOptions = {
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    };
+
+    timeNode.textContent = timestampToLocalDateTime(
+      timeStamp,
+      navigator.language,
+      timeOptions,
+    );
+  }
+}