Fix failing tests & adjustments from self review

* Some test were failing due to an incorrect import
* Make some tests name more clear
* Factorise `epoch-setting` fetch since it's used the same way across
  the two 'registrations' pages.
* Change the layout of the Discord Formatted code block modal a little:
  apply a light background + a colored border to the code block.

Author: Alenar

mithril-explorer/__tests__/InOutRegistrations/compareRegistrations.test.js

@@ -8,25 +8,25 @@ describe("Compare registrations", () => {
     expect(result).toEqual({ in: [], out: [] });
   });
 
-  it("One registration still there", () => {
+  it("One registration 'still there'", () => {
     const result = compareRegistrations([reg("party1", 10)], [reg("party1", 10)]);
 
     expect(result).toEqual({ in: [], out: [] });
   });
 
-  it("One in registration", () => {
+  it("One 'in' registration", () => {
     const result = compareRegistrations([reg("party1", 10)], []);
 
     expect(result).toEqual({ in: [reg("party1", 10)], out: [] });
   });
 
-  it("One out registration", () => {
+  it("One 'out' registration", () => {
     const result = compareRegistrations([], [reg("party1", 10)]);
 
     expect(result).toEqual({ in: [], out: [reg("party1", 10)] });
   });
 
-  it("In, out, and still there altogether", () => {
+  it("'In', 'out', and 'still there' altogether", () => {
     const result = compareRegistrations(
       [reg("party1", 10), reg("party3", 12), reg("party4", 13)],
       [reg("party1", 10), reg("party2", 11), reg("party3", 12)],

mithril-explorer/__tests__/InOutRegistrations/dedupInOutRegistrations.test.js

@@ -1,5 +1,5 @@
 import { dedupInOutRegistrations } from "@/utils";
-import reg from "../helpers";
+import { reg } from "../helpers";
 
 describe("In/Out registrations deduplication", () => {
   it("should remove duplicate 'in' registrations", () => {

mithril-explorer/src/aggregator-api.js

@@ -18,6 +18,14 @@ function fetchSignersTickers(aggregator) {
     });
 }
 
+function fetchEpochSettings(aggregator) {
+  return fetch(`${aggregator}/epoch-settings`)
+    .then((response) => (response.status === 200 ? response.json() : {}))
+    .catch((error) => {
+      console.error("Fetch epoch settings error:", error);
+    });
+}
+
 function fetchRegistrations(aggregator, epoch) {
   return fetch(`${aggregator}/signers/registered/${epoch}`)
     .then((response) => (response.status === 200 ? response.json() : {}))
@@ -29,5 +37,6 @@ function fetchRegistrations(aggregator, epoch) {
 module.exports = {
   fetchAggregatorCapabilities,
   fetchSignersTickers,
+  fetchEpochSettings,
   fetchRegistrations,
 };

mithril-explorer/src/app/registrations-in-out/page.js

@@ -7,7 +7,7 @@ import { checkUrl, computeInOutRegistrations, dedupInOutRegistrations } from "@/
 import { Col, Alert, Row, Spinner, Stack, Table } from "react-bootstrap";
 import { aggregatorSearchParam } from "@/constants";
 import { updatePoolsForAggregator } from "@/store/poolsSlice";
-import { fetchRegistrations } from "@/aggregator-api";
+import { fetchEpochSettings, fetchRegistrations } from "@/aggregator-api";
 import RegistrationDiscordFormatModal from "#/RegistrationDiscordFormatModal";
 import RegistrationsMovementsList from "@/app/registrations-in-out/RegistrationsMovementsList";
 
@@ -34,8 +34,7 @@ export default function RegistrationsChanges() {
     if (error === undefined) {
       setIsLoading(true);
 
-      fetch(`${aggregator}/epoch-settings`)
-        .then((response) => (response.status === 200 ? response.json() : {}))
+      fetchEpochSettings(aggregator)
         .then((data) => {
           let epoch = data?.epoch;
           setCurrentEpoch(epoch);
@@ -49,9 +48,8 @@ export default function RegistrationsChanges() {
           setDedupDiff(dedupInOutRegistrations(inOutRegistrations));
         })
         .then(() => setIsLoading(false))
-        .catch((error) => {
+        .catch(() => {
           setCurrentEpoch(undefined);
-          console.error("Fetch current epoch in epoch-settings error:", error);
         });
 
       dispatch(updatePoolsForAggregator(aggregator));

mithril-explorer/src/app/registrations/page.js

@@ -27,7 +27,7 @@ import LinkButton from "#/LinkButton";
 import Stake from "#/Stake";
 import RawJsonButton from "#/RawJsonButton";
 import SignerTable from "#/SignerTable";
-import { fetchRegistrations } from "@/aggregator-api";
+import { fetchEpochSettings, fetchRegistrations } from "@/aggregator-api";
 
 Chart.register(ArcElement, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 setChartJsDefaults(Chart);
@@ -71,18 +71,16 @@ export default function Registrations() {
           });
           setIsLoading(false);
         })
-        .catch((error) => {
+        .catch(() => {
           setSigningEpoch(undefined);
           setRegistrations([]);
           setIsLoading(false);
         });
 
-      fetch(`${aggregator}/epoch-settings`)
-        .then((response) => (response.status === 200 ? response.json() : {}))
+      fetchEpochSettings(aggregator)
         .then((data) => setCurrentEpoch(data?.epoch))
-        .catch((error) => {
+        .catch(() => {
           setCurrentEpoch(undefined);
-          console.error("Fetch current epoch in epoch-settings error:", error);
         });
 
       dispatch(updatePoolsForAggregator(aggregator));

mithril-explorer/src/components/RegistrationDiscordFormatModal.js

@@ -74,7 +74,7 @@ export default function RegistrationDiscordFormatModal({ registrations, onClose,
       </Modal.Header>
       <Modal.Body>
         {registrations !== undefined && (
-          <Card>
+          <Card bg="light" border={mode === "out" ? "danger" : "success"}>
             <Card.Body>
               <pre>
                 <code>{textToCopy}</code>

mithril-explorer/src/utils.js

@@ -108,11 +108,11 @@ async function fetchGenesisVerificationKey(aggregator) {
  * All registrations are expected to use the following format:
  * `{ registered_at: number, registrations: [{ party_id: string, stake: number }] }`;
  */
-function computeInOutRegistrations(lastEpochRegistrations, ...PreviousEpochsRegistrations) {
+function computeInOutRegistrations(lastEpochRegistrations, ...previousEpochsRegistrations) {
   const result = {};
   let currentRegistrations = lastEpochRegistrations.registrations;
 
-  for (const { registered_at, registrations } of PreviousEpochsRegistrations) {
+  for (const { registered_at, registrations } of previousEpochsRegistrations) {
     const epochOfChange = registered_at + 1;
     const diff = compareRegistrations(currentRegistrations, registrations);