NNS1-3450: New Exports NNS Neurons Snapshot Component

frontend/src/lib/components/header/ExportNeuronsButton.svelte

@@ -10,7 +10,7 @@
     neuronStake,
     neuronStakedMaturity,
   } from "$lib/utils/neuron.utils";
-  import { ICPToken, secondsToDuration, TokenAmountV2 } from "@dfinity/utils";
+  import { ICPToken, isNullish, secondsToDuration, TokenAmountV2 } from "@dfinity/utils";
   import { formatTokenV2 } from "$lib/utils/token.utils";
   import { NeuronState, type NeuronInfo } from "@dfinity/nns";
   import {
@@ -29,16 +29,16 @@
   import { authStore } from "$lib/stores/auth.store";
 
   const dispatcher = createEventDispatcher<{
-    nnsExportNeuronsCSVTriggered: void;
+    nnsExportNeuronsCsvTriggered: void;
   }>();
 
   let isDisabled = true;
   let neurons: NeuronInfo[] = [];
   $: neurons = $neuronsStore?.neurons ?? [];
   $: nnsAccountPrincipal = $authStore.identity?.getPrincipal().toText() ?? "";
-  $: isDisabled = !neurons.length || !nnsAccountPrincipal;
+  $: isDisabled = neurons.length === 0 || isNullish(nnsAccountPrincipal);
 
-  const neuronToHumanReadableFormat = (neuron: NeuronInfo) => {
+  const nnsNeuronToHumanReadableFormat = (neuron: NeuronInfo) => {
     const controllerId = neuron.fullNeuron?.controller?.toString();
     const neuronId = neuron.neuronId.toString();
     const neuronAccountId = neuron.fullNeuron?.accountIdentifier.toString();
@@ -73,7 +73,7 @@
         seconds: dissolveDelaySeconds,
         i18n: $i18n.time,
       }),
-      dissolveDate: dissolveDate ?? "N/A",
+      dissolveDate: dissolveDate ?? $i18n.core.not_applicable,
       creationDate,
       state: $i18n.neuron_state[getStateInfo(neuron.state).textKey],
     };
@@ -83,7 +83,7 @@
     if (!nnsAccountPrincipal) return;
 
     try {
-      const humanFriendlyContent = neurons.map(neuronToHumanReadableFormat);
+      const humanFriendlyContent = neurons.map(nnsNeuronToHumanReadableFormat);
       const fileName = `neurons_export_${formatDateCompact(new Date())}`;
       const metadataDate = nanoSecondsToDateTime(nowInBigIntNanoSeconds());
 
@@ -168,7 +168,7 @@
         });
       }
     } finally {
-      dispatcher("nnsExportNeuronsCSVTriggered");
+      dispatcher("nnsExportNeuronsCsvTriggered");
     }
   };
 </script>

frontend/src/lib/i18n/en.json

@@ -33,7 +33,8 @@
     "send_with_token": "Send $token",
     "collapse_all": "Collapse All",
     "or": "or",
-    "add": "Add"
+    "add": "Add",
+    "not_applicable": "N/A"
   },
   "error": {
     "auth_sync": "There was an unexpected issue while syncing the status of your authentication. Try to refresh your browser.",

frontend/src/lib/types/i18n.d.ts

@@ -37,6 +37,7 @@ interface I18nCore {
   collapse_all: string;
   or: string;
   add: string;
+  not_applicable: string;
 }
 
 interface I18nError {

frontend/src/tests/lib/components/header/ExportNeuronsButton.spec.ts

@@ -36,13 +36,17 @@ describe("ExportNeuronsButton", () => {
     });
   });
 
-  const renderComponent = () => {
+  const renderComponent = ({ onTrigger }: { onTrigger?: () => void } = {}) => {
     const { container, component } = render(ExportNeuronsButton);
 
     const po = ExportNeuronsButtonPo.under({
       element: new JestPageObjectElement(container),
     });
-    return { po, component };
+
+    if (onTrigger) {
+      component.$on("nnsExportNeuronsCsvTriggered", onTrigger);
+    }
+    return { po };
   };
 
   it("should be disabled when there are no neurons", async () => {
@@ -58,19 +62,25 @@ describe("ExportNeuronsButton", () => {
 
   it("should name the file with the date of the export", async () => {
     const { po } = renderComponent();
+
+    expect(generateCsvFileToSave).not.toHaveBeenCalled();
+
     await po.click();
+
     const expectedFileName = `neurons_export_20231014`;
     expect(generateCsvFileToSave).toHaveBeenCalledWith(
       expect.objectContaining({
         fileName: expectedFileName,
       })
     );
+    expect(generateCsvFileToSave).toHaveBeenCalledOnce();
   });
 
   it("should transform neuron data correctly", async () => {
     const { po } = renderComponent();
-    await po.click();
 
+    expect(generateCsvFileToSave).not.toHaveBeenCalled();
+    await po.click();
     expect(generateCsvFileToSave).toHaveBeenCalledWith(
       expect.objectContaining({
         data: expect.arrayContaining([
@@ -91,20 +101,16 @@ describe("ExportNeuronsButton", () => {
         ]),
       })
     );
+    expect(generateCsvFileToSave).toHaveBeenCalledOnce();
   });
 
-  it("should dispatch event after export", async () => {
-    const { po, component } = renderComponent();
-
-    const mockDispatch = vi.fn();
-    component.$on("nnsExportNeuronsCSVTriggered", mockDispatch);
+  it("should dispatch nnsExportNeuronsCsvTriggered event after click to close the menu", async () => {
+    const onTrigger = vi.fn();
+    const { po } = renderComponent({ onTrigger });
 
+    expect(onTrigger).not.toHaveBeenCalled();
     await po.click();
-
-    expect(mockDispatch).toHaveBeenCalledTimes(1);
-    expect(mockDispatch.mock.calls[0][0].type).toBe(
-      "nnsExportNeuronsCSVTriggered"
-    );
+    expect(onTrigger).toHaveBeenCalledOnce();
   });
 
   it("should show error toast when file system access fails", async () => {
@@ -113,10 +119,13 @@ describe("ExportNeuronsButton", () => {
     );
 
     const { po } = renderComponent();
+
+    expect(toastsError).not.toHaveBeenCalled();
     await po.click();
     expect(toastsError).toHaveBeenCalledWith({
       labelKey: "export_error.file_system_access",
     });
+    expect(toastsError).toHaveBeenCalledOnce();
   });
 
   it("should show error toast when Csv generation fails", async () => {
@@ -125,10 +134,13 @@ describe("ExportNeuronsButton", () => {
     );
 
     const { po } = renderComponent();
+
+    expect(toastsError).not.toHaveBeenCalled();
     await po.click();
     expect(toastsError).toHaveBeenCalledWith({
       labelKey: "export_error.csv_generation",
     });
+    expect(toastsError).toHaveBeenCalledOnce();
   });
 
   it("should show error toast when file saving fails", async () => {
@@ -137,9 +149,12 @@ describe("ExportNeuronsButton", () => {
     );
 
     const { po } = renderComponent();
+
+    expect(toastsError).not.toHaveBeenCalled();
     await po.click();
     expect(toastsError).toHaveBeenCalledWith({
       labelKey: "export_error.neurons",
     });
+    expect(toastsError).toHaveBeenCalledOnce();
   });
 });