Migrate dashboard initializers to packs (#19327)

* add dashboard sort initializer and tests within packs folder

* run dashboard sort initializer in base.jsx spinup and on InstantClick change

* remove assets/javascripts' dashboard sort initialization and comment out original file

* fully remove original dashboard sort initializer file

* export both functions within initializeDashboardSort

* refactor import of selectNavigation function within CategoryLinksMobile

app/assets/javascripts/initializePage.js

@@ -4,7 +4,7 @@
   initializeCommentsPage,
   initializeArticleDate, initializeArticleReactions,
   initializeSettings, initializeRuntimeBanner,
-  initializeTimeFixer, initializeDashboardSort, initializeCreditsPage,
+  initializeTimeFixer, initializeCreditsPage,
   initializeOnboardingTaskCard,
   initScrolling, nextPage:writable,
   fetching:writable, done:writable, initializePaymentPointers,
@@ -18,7 +18,6 @@ function callInitializers() {
   initializeArticleReactions();
   initializeSettings();
   initializeTimeFixer();
-  initializeDashboardSort();
   initializeCreditsPage();
   initializeOnboardingTaskCard();
   initializeDateHelpers();

app/javascript/listings/components/CategoryLinksMobile.jsx

@@ -1,8 +1,6 @@
-/*
-  global selectNavigation
-*/
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
+import { selectNavigation } from '../../packs/initializers/initializeDashboardSort';
 
 export class CategoryLinksMobile extends Component {
   componentDidMount() {

app/javascript/packs/base.jsx

@@ -7,6 +7,7 @@ import {
 import { waitOnBaseData } from '../utilities/waitOnBaseData';
 import { initializePodcastPlayback } from '../utilities/podcastPlayback';
 import { initializeVideoPlayback } from '../utilities/videoPlayback';
+import { initializeDashboardSort } from './initializers/initializeDashboardSort';
 import { trackCreateAccountClicks } from '@utilities/ahoy/trackEvents';
 import { showWindowModal, closeWindowModal } from '@utilities/showModal';
 import * as Runtime from '@utilities/runtime';
@@ -65,9 +66,11 @@ window.Forem = {
   Runtime,
 };
 
+initializeDashboardSort();
 initializePodcastPlayback();
 initializeVideoPlayback();
 InstantClick.on('change', () => {
+  initializeDashboardSort();
   initializePodcastPlayback();
   initializeVideoPlayback();
 });

app/javascript/packs/initializers/__tests__/initializeDashboardSort.test.js

@@ -0,0 +1,34 @@
+import { initializeDashboardSort } from '../initializeDashboardSort';
+
+describe('initializeDashboardSort', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div>
+        <select id="dashboard_sort" <option value="views-desc">Most Views</option> </select>
+        <select id="dashboard_author" <option value="/dashboard">Personal</option> </select>
+        <select id="mobile_nav_dashboard" <option value="/dashboard">Posts (1)</option> </select>
+      </div>
+    `;
+  });
+
+  test('should add event listener to dashboard sort select when the element exists', async () => {
+    const sortSelect = document.getElementById('dashboard_sort');
+    sortSelect.addEventListener = jest.fn();
+    initializeDashboardSort();
+    expect(sortSelect.addEventListener).toHaveBeenCalled();
+  });
+
+  test('should add event listener to dashboard author select when the element exists', async () => {
+    const authorSelect = document.getElementById('dashboard_author');
+    authorSelect.addEventListener = jest.fn();
+    initializeDashboardSort();
+    expect(authorSelect.addEventListener).toHaveBeenCalled();
+  });
+
+  test('should add event listener to mobile nav dashboard select when the element exists', async () => {
+    const navSelect = document.getElementById('mobile_nav_dashboard');
+    navSelect.addEventListener = jest.fn();
+    initializeDashboardSort();
+    expect(navSelect.addEventListener).toHaveBeenCalled();
+  });
+});

app/javascript/packs/initializers/initializeDashboardSort.js

@@ -1,10 +1,5 @@
-/* global InstantClick */
-
-'use strict';
-
 function selectNavigation(select, urlPrefix) {
   const trigger = document.getElementById(select);
-
   if (trigger) {
     trigger.addEventListener('change', (event) => {
       let url = event.target.value;
@@ -23,3 +18,5 @@ function initializeDashboardSort() {
   selectNavigation('dashboard_author');
   selectNavigation('mobile_nav_dashboard');
 }
+
+export { selectNavigation, initializeDashboardSort };