Fix the state restore from url + localStorage

When using both the aggregator in the url would erase the selected & aggregator list stored in localStorage

Author: Alenar

mithril-explorer/__tests__/AggregatorSetter.test.js

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import AggregatorSetter from "../components/AggregatorSetter";
+import {initStore} from "./helpers";
+import {Provider} from "react-redux";
+import default_available_aggregators from "../aggregators-list";
+import {settingsSlice} from "../store/settingsSlice";
+
+function renderAggregatorSetter(default_state = undefined) {
+  const store = initStore(default_state);
+  return [
+    render(
+      <Provider store={store}>
+        <AggregatorSetter/>
+      </Provider>
+    ),
+    store
+  ];
+}
+
+describe('AggregatorSetter', () => {
+  it ('Load with data from the store', () => {
+    const [_, store] = renderAggregatorSetter();
+    const settingsState = store.getState().settings;
+    
+    expect(screen.getByRole('option', { name: settingsState.selectedAggregator }).selected).toBe(true);
+    expect(screen.getAllByRole('option').map(o => o.value)).toEqual(settingsState.availableAggregators);
+  });
+  
+  it ('Load custom aggregators', () => {
+    const customAggregator = "http://aggregator.test";
+    renderAggregatorSetter({
+      settings: {
+        ...settingsSlice.getInitialState(),
+        selectedAggregator: customAggregator,
+        availableAggregators: [...default_available_aggregators, customAggregator],
+      }
+    });
+
+    expect(screen.getByRole('option', { name: customAggregator }).selected).toBe(true);
+    expect(screen.getAllByRole('option').map(o => o.value)).toContain(customAggregator);
+  });
+});

mithril-explorer/__tests__/helpers.js

@@ -1,12 +1,53 @@
 import {saveToLocalStorage, storeBuilder} from "../store/store";
 
+const baseLocation = 'http://localhost';
+
 function initStore(default_state = undefined) {
   if (default_state) {
     saveToLocalStorage(default_state);
   }
   return storeBuilder();
 }
 
+/**
+ * Reset the windows location api to `http://localhost`
+ */
+function resetLocation() {
+  setLocation(new URL(baseLocation));
+}
+
+/**
+ * Set the window.location to the given url
+ *
+ * If you use it define a beforeEach with resetLocation else the new location will persist between tests.
+ * @param url The new location
+ */
+function setLocation(url) {
+  Object.defineProperty(window, 'location', {
+    set(v) {
+      this._href = v;
+    },
+    get() {
+      return this._href;
+    }
+  })
+
+  window.location = url;
+}
+
+/**
+ * Set the window.location search/query aggregator param to the given aggregator
+ * 
+ * If you use it define a beforeEach with resetLocation else the new location will persist between tests.
+ * @param aggregatorUrl The target aggregator
+ */
+function setLocationToAggregator(aggregatorUrl) {
+  setLocation(new URL(`?aggregator=${aggregatorUrl}`, baseLocation));
+}
+
 module.exports = {
-  initStore
+  initStore,
+  setLocation,
+  setLocationToAggregator,
+  resetLocation,
 }

mithril-explorer/__tests__/store.test.js

@@ -1,15 +1,19 @@
 import {saveToLocalStorage, storeBuilder} from "../store/store";
 import {
-  removeCustomAggregator,
+  removeSelectedAggregator,
   selectAggregator,
   settingsSlice,
   setUpdateInterval,
   toggleAutoUpdate
 } from "../store/settingsSlice";
 import default_available_aggregators from "../aggregators-list";
-import {initStore} from "./helpers";
+import {initStore, resetLocation, setLocationToAggregator} from "./helpers";
 
 describe('Store Initialization', () => {
+  beforeEach(() => {
+    resetLocation();
+  });
+
   it('init with settings initialState without local storage', () => {
     const store = initStore();
 
@@ -32,6 +36,25 @@ describe('Store Initialization', () => {
     expect(store.getState()).toEqual(expected);
   });
 
+  it('init with local storage and default aggregator in url', () => {
+    const aggregatorInUrl = default_available_aggregators.at(1);
+    setLocationToAggregator(aggregatorInUrl);
+    let aggregators = [...default_available_aggregators, "https://aggregator.test"];
+    let expected = {
+      settings: {
+        ...settingsSlice.getInitialState(),
+        selectedAggregator: aggregators.at(aggregators.length - 1),
+        availableAggregators: aggregators,
+        updateInterval: 12345,
+      }
+    };
+    saveToLocalStorage(expected);
+    expected.settings.selectedAggregator = aggregatorInUrl;
+    const store = storeBuilder();
+
+    expect(store.getState()).toEqual(expected);
+  });
+
   it('Can toggle autoUpdate', () => {
     const store = initStore();
 
@@ -70,7 +93,7 @@ describe('Store Initialization', () => {
   it('Can\'t remove a default aggregator', () => {
     const store = initStore();
 
-    store.dispatch(removeCustomAggregator(default_available_aggregators[0]));
+    store.dispatch(removeSelectedAggregator());
     expect(store.getState().settings.availableAggregators).toContain(default_available_aggregators[0]);
   });
 
@@ -84,7 +107,7 @@ describe('Store Initialization', () => {
       }
     });
 
-    store.dispatch(removeCustomAggregator(customAggregator));
+    store.dispatch(removeSelectedAggregator());
     expect(store.getState().settings.availableAggregators).not.toContain(customAggregator);
   });
 });

mithril-explorer/store/settingsSlice.js

@@ -38,7 +38,6 @@ export const settingsSlice = createSlice({
       }
     },
     removeSelectedAggregator: (state) => {
-      console.log("removing", state.selectedAggregator);
       if (default_available_aggregators.includes(state.selectedAggregator)) {
         return state;
       }

mithril-explorer/store/store.js

@@ -20,37 +20,32 @@ function loadFromLocalStorage() {
   return undefined;
 }
 
-function initStore() {
+export function initStore() {
   let state = loadFromLocalStorage();
 
   if (location?.search) {
     const params = new URLSearchParams(location.search);
     const aggregator = params.get('aggregator');
 
     if (aggregator && checkUrl(aggregator)) {
-      const settings = {
-        selectedAggregator: aggregator,
-        availableAggregators:
-          !default_available_aggregators.includes(aggregator)
-            ? [...default_available_aggregators, aggregator]
-            : default_available_aggregators,
-        canRemoveSelected: !default_available_aggregators.includes(aggregator),
-      };
-
-      state = (state)
-        ? {
-          ...state,
-          settings: {
-            ...state.settings,
-            ...settings
-          }
-        }
+      const baseState = (state)
+        ? state
         : {
-          settings: {
-            ...settingsInitialState,
-            ...settings,
-          },
+          settings: settingsInitialState
         };
+
+      state = {
+        ...baseState,
+        settings: {
+          ...baseState.settings,
+          selectedAggregator: aggregator,
+          availableAggregators:
+            !baseState.settings.availableAggregators.includes(aggregator)
+              ? [...baseState.settings.availableAggregators, aggregator]
+              : baseState.settings.availableAggregators,
+          canRemoveSelected: !default_available_aggregators.includes(aggregator),
+        }
+      };
     }
   }