From 1cc650ea5727e345f307ea1d6eb3fbf1c5615072 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Tue, 17 Dec 2024 10:57:48 +0100
Subject: [PATCH 1/8] new util function

---
 frontend/src/tests/lib/utils/reporting.utils.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/tests/lib/utils/reporting.utils.spec.ts b/frontend/src/tests/lib/utils/reporting.utils.spec.ts
index 7261426d549..6254a2fa4c6 100644
--- a/frontend/src/tests/lib/utils/reporting.utils.spec.ts
+++ b/frontend/src/tests/lib/utils/reporting.utils.spec.ts
@@ -6,6 +6,7 @@ import {
   convertPeriodToNanosecondRange,
   convertToCsv,
   generateCsvFileToSave,
+  periodToDateRangeTimestampts,
   type CsvHeader,
 } from "$lib/utils/reporting.utils";
 import { mockPrincipal } from "$tests/mocks/auth.store.mock";

From 7d12bfb011a85c57e648e99e9f68059153bce223 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Tue, 17 Dec 2024 11:53:09 +0100
Subject: [PATCH 2/8] car

---
 frontend/src/lib/utils/reporting.utils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/lib/utils/reporting.utils.ts b/frontend/src/lib/utils/reporting.utils.ts
index d5381e7a97f..fe7a4ebe0dd 100644
--- a/frontend/src/lib/utils/reporting.utils.ts
+++ b/frontend/src/lib/utils/reporting.utils.ts
@@ -1,3 +1,4 @@
+import type { TransactionResults } from "$lib/services/reporting.services";
 import type {
   ReportingPeriod,
   TransactionResults,

From e7b90b72d3358466390c6a6709ffe4f83beae426 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Tue, 17 Dec 2024 13:35:00 +0100
Subject: [PATCH 3/8] clean up imports

missing import
---
 frontend/src/lib/utils/reporting.utils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/lib/utils/reporting.utils.ts b/frontend/src/lib/utils/reporting.utils.ts
index fe7a4ebe0dd..d5381e7a97f 100644
--- a/frontend/src/lib/utils/reporting.utils.ts
+++ b/frontend/src/lib/utils/reporting.utils.ts
@@ -1,4 +1,3 @@
-import type { TransactionResults } from "$lib/services/reporting.services";
 import type {
   ReportingPeriod,
   TransactionResults,

From 681831e7220a79f9820130bf4401cdb010932571 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Tue, 17 Dec 2024 17:13:51 +0100
Subject: [PATCH 4/8] WIP

---
 .../reporting/ReportingTransactions.svelte    |  11 +-
 .../ReportingTransactionsButton.svelte        |   1 +
 .../ReportingDateRangeSelector.spec.ts        |   2 +-
 .../reporting/ReportingTransactions.spec.ts   | 124 ++++++++++++++++++
 .../ReportingTransactionsButton.spec.ts       |   2 +-
 .../ReportingDateRangeSelector.page-object.ts |  15 +++
 .../ReportingTransactions.page-object.ts      |  30 +++++
 7 files changed, 178 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/tests/lib/components/reporting/ReportingTransactions.spec.ts
 create mode 100644 frontend/src/tests/page-objects/ReportingTransactions.page-object.ts

diff --git a/frontend/src/lib/components/reporting/ReportingTransactions.svelte b/frontend/src/lib/components/reporting/ReportingTransactions.svelte
index ebfe39313b4..166494daf91 100644
--- a/frontend/src/lib/components/reporting/ReportingTransactions.svelte
+++ b/frontend/src/lib/components/reporting/ReportingTransactions.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
   import type { ReportingPeriod } from "$lib/types/reporting";
+  import ReportingDateRangeSelector from "./ReportingDateRangeSelector.svelte";
   import ReportingTransactionsButton from "./ReportingTransactionsButton.svelte";
 
-  // TODO: This will be hooked up in a follow up
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let selectedRange: ReportingPeriod = "all";
+  let period: ReportingPeriod = "all";
 </script>
 
-<div class="wrapper">
+<div class="wrapper" data-tid="reporting-transactions-component">
   <div>
     <h3>{$i18n.reporting.transactions_title}</h3>
     <p class="description">{$i18n.reporting.transactions_description}</p>
   </div>
-  <ReportingTransactionsButton />
+
+  <ReportingDateRangeSelector bind:period />
+  <ReportingTransactionsButton {period} />
 </div>
 
 <style lang="scss">
diff --git a/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte b/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
index 1e83feabdb6..84a1a98d967 100644
--- a/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
+++ b/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
@@ -8,6 +8,7 @@
     CsvGenerationError,
     FileSystemAccessError,
     generateCsvFileToSave,
+    periodToDateRangeTimestampts,
     type CsvHeader,
     type TransactionsCsvData,
   } from "$lib/utils/reporting.utils";
diff --git a/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
index 4cf9f23d406..05e1ecdc78a 100644
--- a/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
+++ b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
@@ -5,7 +5,7 @@ import { render } from "@testing-library/svelte";
 
 describe("ReportingDateRangeSelector", () => {
   const renderComponent = () => {
-    const { container } = render(ReportingDateRangeSelector);
+    const { container } = render(ReportingDateRangeSelector, { period: "all" });
     const po = ReportingDateRangeSelectorPo.under({
       element: new JestPageObjectElement(container),
     });
diff --git a/frontend/src/tests/lib/components/reporting/ReportingTransactions.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingTransactions.spec.ts
new file mode 100644
index 00000000000..05d95dfe1de
--- /dev/null
+++ b/frontend/src/tests/lib/components/reporting/ReportingTransactions.spec.ts
@@ -0,0 +1,124 @@
+import * as governanceApi from "$lib/api/governance.api";
+import * as icpIndexApi from "$lib/api/icp-index.api";
+import ReportingTransactions from "$lib/components/reporting/ReportingTransactions.svelte";
+import * as exportDataService from "$lib/services/reporting.services";
+import * as exportToCsv from "$lib/utils/reporting.utils";
+import { mockIdentity, resetIdentity } from "$tests/mocks/auth.store.mock";
+import {
+  mockAccountsStoreData,
+  mockMainAccount,
+} from "$tests/mocks/icp-accounts.store.mock";
+import { ReportingTransactionsPo } from "$tests/page-objects/ReportingTransactions.page-object";
+import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
+import {
+  resetAccountsForTesting,
+  setAccountsForTesting,
+} from "$tests/utils/accounts.test-utils";
+import { render } from "@testing-library/svelte";
+
+vi.mock("$lib/api/icp-ledger.api");
+vi.mock("$lib/api/governance.api");
+
+describe("ReportingTransactions", () => {
+  let getAccountTransactionsConcurrently;
+
+  const renderComponent = () => {
+    const { container } = render(ReportingTransactions);
+
+    const po = ReportingTransactionsPo.under({
+      element: new JestPageObjectElement(container),
+    });
+    return po;
+  };
+
+  beforeEach(() => {
+    vi.clearAllTimers();
+    resetIdentity();
+    resetAccountsForTesting();
+
+    vi.spyOn(exportToCsv, "generateCsvFileToSave").mockImplementation(() =>
+      Promise.resolve()
+    );
+    vi.spyOn(governanceApi, "queryNeurons").mockResolvedValue([]);
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    vi.spyOn(icpIndexApi, "getTransactions").mockResolvedValue({
+      transactions: [],
+      balance: 0n,
+      oldestTxId: 1n,
+    });
+
+    const mockDate = new Date("2023-10-14T00:00:00Z");
+    vi.useFakeTimers();
+    vi.setSystemTime(mockDate);
+
+    setAccountsForTesting({
+      ...mockAccountsStoreData,
+    });
+
+    getAccountTransactionsConcurrently = vi.spyOn(
+      exportDataService,
+      "getAccountTransactionsConcurrently"
+    );
+  });
+
+  it("should fetch all transactions by default", async () => {
+    const po = renderComponent();
+    await po.getReportingTransactionsButtonPo().click();
+
+    expect(getAccountTransactionsConcurrently).toHaveBeenCalledTimes(1);
+    expect(getAccountTransactionsConcurrently).toHaveBeenCalledWith({
+      entities: [mockMainAccount],
+      identity: mockIdentity,
+      range: {},
+    });
+  });
+
+  it("should fetch year-to-date transactions when selecting such option", async () => {
+    const beginningOfYear = new Date("2023-01-01T00:00:00Z");
+    const NANOS_IN_MS = BigInt(1_000_000);
+    const beginningOfYearInNanoseconds =
+      BigInt(beginningOfYear.getTime()) * NANOS_IN_MS;
+
+    const po = renderComponent();
+    await po
+      .getReportingDateRangeSelectorPo()
+      .selectProvidedOption("year-to-date");
+    await po.getReportingTransactionsButtonPo().click();
+
+    expect(getAccountTransactionsConcurrently).toHaveBeenCalledTimes(1);
+    expect(getAccountTransactionsConcurrently).toHaveBeenCalledWith({
+      entities: [mockMainAccount],
+      identity: mockIdentity,
+      range: {
+        from: beginningOfYearInNanoseconds,
+      },
+    });
+  });
+
+  it("should fetch last-year transactions when selecting such option", async () => {
+    const beginningOfYear = new Date("2023-01-01T00:00:00Z");
+    const beginningOfLastYear = new Date("2022-01-01T00:00:00Z");
+    const NANOS_IN_MS = BigInt(1_000_000);
+    const beginningOfYearInNanoseconds =
+      BigInt(beginningOfYear.getTime()) * NANOS_IN_MS;
+
+    const beginningOfLastYearInNanoseconds =
+      BigInt(beginningOfLastYear.getTime()) * NANOS_IN_MS;
+
+    const po = renderComponent();
+    await po
+      .getReportingDateRangeSelectorPo()
+      .selectProvidedOption("last-year");
+    await po.getReportingTransactionsButtonPo().click();
+
+    expect(getAccountTransactionsConcurrently).toHaveBeenCalledTimes(1);
+    expect(getAccountTransactionsConcurrently).toHaveBeenCalledWith({
+      entities: [mockMainAccount],
+      identity: mockIdentity,
+      range: {
+        from: beginningOfLastYearInNanoseconds,
+        to: beginningOfYearInNanoseconds,
+      },
+    });
+  });
+});
diff --git a/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
index 35686e5c83f..30304b1d7da 100644
--- a/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
+++ b/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
@@ -170,7 +170,7 @@ describe("ReportingTransactionsButton", () => {
     expect(spyGenerateCsvFileToSave).toBeCalledTimes(1);
   });
 
-  it("should fetch transactions for accounts and neurons", async () => {
+  it("should all fetch transactions for accounts and neurons", async () => {
     resetAccountsForTesting();
 
     setAccountsForTesting({
diff --git a/frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts b/frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts
index 16a121e2dbb..2a602485ef9 100644
--- a/frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts
+++ b/frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts
@@ -1,3 +1,4 @@
+import type { ReportingPeriod } from "$lib/types/reporting";
 import type { PageObjectElement } from "$tests/types/page-object.types";
 import { SimpleBasePageObject } from "./simple-base.page-object";
 
@@ -21,4 +22,18 @@ export class ReportingDateRangeSelectorPo extends SimpleBasePageObject {
   getSelectedOption() {
     return this.getElement().querySelector('input[type="radio"]:checked');
   }
+
+  async selectProvidedOption(option: ReportingPeriod) {
+    const allOptions = await this.getAllOptions();
+
+    for (const opt of allOptions) {
+      const value = await opt.getValue();
+      if (value === option) {
+        await opt.click();
+        return;
+      }
+    }
+
+    throw new Error(`Option ${option} not found`);
+  }
 }
diff --git a/frontend/src/tests/page-objects/ReportingTransactions.page-object.ts b/frontend/src/tests/page-objects/ReportingTransactions.page-object.ts
new file mode 100644
index 00000000000..94b338377a1
--- /dev/null
+++ b/frontend/src/tests/page-objects/ReportingTransactions.page-object.ts
@@ -0,0 +1,30 @@
+import type { PageObjectElement } from "$tests/types/page-object.types";
+import { ReportingDateRangeSelectorPo } from "./ReportingDateRangeSelector.page-object";
+import { ReportingTransactionsButtonPo } from "./ReportingTransactionsButton.page-object";
+import { BasePageObject } from "./base.page-object";
+
+export class ReportingTransactionsPo extends BasePageObject {
+  static readonly TID = "reporting-transactions-component";
+
+  static under({
+    element,
+  }: {
+    element: PageObjectElement;
+  }): ReportingTransactionsPo {
+    return new ReportingTransactionsPo(
+      element.byTestId(ReportingTransactionsPo.TID)
+    );
+  }
+
+  getReportingDateRangeSelectorPo() {
+    return ReportingDateRangeSelectorPo.under({
+      element: this.root,
+    });
+  }
+
+  getReportingTransactionsButtonPo() {
+    return ReportingTransactionsButtonPo.under({
+      element: this.root,
+    });
+  }
+}

From 0b6204fac0156cdcc4700160b39ce5490c7c1d98 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Wed, 18 Dec 2024 13:39:41 +0100
Subject: [PATCH 5/8] clean up

---
 .../reporting/ReportingDateRangeSelector.svelte       |  2 +-
 .../reporting/ReportingTransactionsButton.svelte      |  3 +--
 .../reporting/ReportingTransactionsButton.spec.ts     | 11 +++++++++--
 frontend/src/tests/lib/utils/reporting.utils.spec.ts  |  1 -
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte b/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte
index 07cd9ae3b00..6a49035d97b 100644
--- a/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte
+++ b/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte
@@ -2,7 +2,7 @@
   import { i18n } from "$lib/stores/i18n";
   import type { ReportingPeriod } from "$lib/types/reporting";
 
-  let period: ReportingPeriod = "all";
+  export let period: ReportingPeriod = "all";
 
   const options: Array<{
     value: ReportingPeriod;
diff --git a/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte b/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
index 84a1a98d967..f281802c5ca 100644
--- a/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
+++ b/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
@@ -8,7 +8,6 @@
     CsvGenerationError,
     FileSystemAccessError,
     generateCsvFileToSave,
-    periodToDateRangeTimestampts,
     type CsvHeader,
     type TransactionsCsvData,
   } from "$lib/utils/reporting.utils";
@@ -124,7 +123,7 @@
           label: $i18n.reporting.timestamp,
         },
       ];
-      const fileName = `icp_transactions_export_${formatDateCompact(new Date())}`;
+      const fileName = `icp_transactions_export_${period}_${formatDateCompact(new Date())}`;
 
       await generateCsvFileToSave({
         datasets,
diff --git a/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
index 30304b1d7da..cf21c4f465d 100644
--- a/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
+++ b/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
@@ -102,7 +102,7 @@ describe("ReportingTransactionsButton", () => {
     await po.click();
     await runResolvedPromises();
 
-    const expectedFileName = `icp_transactions_export_20231014`;
+    const expectedFileName = `icp_transactions_export_all_20231014`;
     expect(spyGenerateCsvFileToSave).toHaveBeenCalledWith(
       expect.objectContaining({
         fileName: expectedFileName,
@@ -170,7 +170,7 @@ describe("ReportingTransactionsButton", () => {
     expect(spyGenerateCsvFileToSave).toBeCalledTimes(1);
   });
 
-  it("should all fetch transactions for accounts and neurons", async () => {
+  it("should fetch transactions for accounts and neurons", async () => {
     resetAccountsForTesting();
 
     setAccountsForTesting({
@@ -261,6 +261,13 @@ describe("ReportingTransactionsButton", () => {
     await po.click();
     await runResolvedPromises();
 
+    const expectedFileName = `icp_transactions_export_year-to-date_20231014`;
+    expect(spyGenerateCsvFileToSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fileName: expectedFileName,
+      })
+    );
+
     const expectation = [mockMainAccount, mockNeuron];
     expect(spyQueryNeurons).toBeCalledTimes(1);
     expect(spyExportDataService).toHaveBeenCalledTimes(1);
diff --git a/frontend/src/tests/lib/utils/reporting.utils.spec.ts b/frontend/src/tests/lib/utils/reporting.utils.spec.ts
index 6254a2fa4c6..7261426d549 100644
--- a/frontend/src/tests/lib/utils/reporting.utils.spec.ts
+++ b/frontend/src/tests/lib/utils/reporting.utils.spec.ts
@@ -6,7 +6,6 @@ import {
   convertPeriodToNanosecondRange,
   convertToCsv,
   generateCsvFileToSave,
-  periodToDateRangeTimestampts,
   type CsvHeader,
 } from "$lib/utils/reporting.utils";
 import { mockPrincipal } from "$tests/mocks/auth.store.mock";

From db44c51fff4415c88fd1bfb2716273eeb59978bb Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Wed, 18 Dec 2024 13:44:11 +0100
Subject: [PATCH 6/8] adds changelog

---
 CHANGELOG-Nns-Dapp-unreleased.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG-Nns-Dapp-unreleased.md b/CHANGELOG-Nns-Dapp-unreleased.md
index 2e827fdcbd1..0e2b3fcd3eb 100644
--- a/CHANGELOG-Nns-Dapp-unreleased.md
+++ b/CHANGELOG-Nns-Dapp-unreleased.md
@@ -14,6 +14,8 @@ proposal is successful, the changes it released will be moved from this file to
 
 #### Added
 
+- Reporting: Full period filter, year-to-date, and last year
+
 #### Changed
 
 #### Deprecated

From 581b2a09b6190c4feacfa06eaebb5cd4f0b3bd33 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Wed, 18 Dec 2024 17:05:25 +0100
Subject: [PATCH 7/8] car

---
 .../ReportingTransactionsButton.svelte        |  2 +-
 .../ReportingDateRangeSelector.spec.ts        | 43 ++++++++++++++++---
 .../ReportingTransactionsButton.spec.ts       |  9 +---
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte b/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
index f281802c5ca..1e83feabdb6 100644
--- a/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
+++ b/frontend/src/lib/components/reporting/ReportingTransactionsButton.svelte
@@ -123,7 +123,7 @@
           label: $i18n.reporting.timestamp,
         },
       ];
-      const fileName = `icp_transactions_export_${period}_${formatDateCompact(new Date())}`;
+      const fileName = `icp_transactions_export_${formatDateCompact(new Date())}`;
 
       await generateCsvFileToSave({
         datasets,
diff --git a/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
index 05e1ecdc78a..eee9740281b 100644
--- a/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
+++ b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
@@ -1,33 +1,51 @@
 import ReportingDateRangeSelector from "$lib/components/reporting/ReportingDateRangeSelector.svelte";
+import type { ReportingPeriod } from "$lib/types/reporting";
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import { ReportingDateRangeSelectorPo } from "$tests/page-objects/ReportingDateRangeSelector.page-object";
 import { render } from "@testing-library/svelte";
+import { tick } from "svelte";
 
 describe("ReportingDateRangeSelector", () => {
-  const renderComponent = () => {
-    const { container } = render(ReportingDateRangeSelector, { period: "all" });
+  const renderComponent = (
+    {
+      period,
+    }: {
+      period?: ReportingPeriod;
+    } = { period: "all" }
+  ) => {
+    const { container, component } = render(ReportingDateRangeSelector, {
+      period,
+    });
+
     const po = ReportingDateRangeSelectorPo.under({
       element: new JestPageObjectElement(container),
     });
 
-    return po;
+    return { po, component };
   };
 
+  it("should render the option provided as a prop", async () => {
+    const { po } = renderComponent({ period: "last-year" });
+
+    const selectedOption = po.getSelectedOption();
+    expect(await selectedOption.getValue()).toBe("last-year");
+  });
+
   it("should render three options", async () => {
-    const po = renderComponent();
+    const { po } = renderComponent();
 
     expect(await po.getAllOptions()).toHaveLength(3);
   });
 
   it("should select 'all' option by default", async () => {
-    const po = renderComponent();
+    const { po } = renderComponent();
 
     const selectedOption = po.getSelectedOption();
     expect(await selectedOption.getValue()).toBe("all");
   });
 
   it("should change the option when interacting with a new element", async () => {
-    const po = renderComponent();
+    const { po } = renderComponent();
     const allOptions = await po.getAllOptions();
     const firstOptionValue = await allOptions[0].getValue();
     const secondOption = allOptions[1];
@@ -41,4 +59,17 @@ describe("ReportingDateRangeSelector", () => {
 
     expect(await currentOption.getValue()).toBe(await secondOption.getValue());
   });
+
+  it("should update exported prop when selecting an option", async () => {
+    const { po, component } = renderComponent();
+    const allOptions = await po.getAllOptions();
+
+    // Click the second option
+    await allOptions[1].click();
+
+    await tick();
+
+    const currentValue = component.$$.ctx[component.$$.props["period"]];
+    expect(currentValue).toBe("last-year");
+  });
 });
diff --git a/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
index cf21c4f465d..35686e5c83f 100644
--- a/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
+++ b/frontend/src/tests/lib/components/reporting/ReportingTransactionsButton.spec.ts
@@ -102,7 +102,7 @@ describe("ReportingTransactionsButton", () => {
     await po.click();
     await runResolvedPromises();
 
-    const expectedFileName = `icp_transactions_export_all_20231014`;
+    const expectedFileName = `icp_transactions_export_20231014`;
     expect(spyGenerateCsvFileToSave).toHaveBeenCalledWith(
       expect.objectContaining({
         fileName: expectedFileName,
@@ -261,13 +261,6 @@ describe("ReportingTransactionsButton", () => {
     await po.click();
     await runResolvedPromises();
 
-    const expectedFileName = `icp_transactions_export_year-to-date_20231014`;
-    expect(spyGenerateCsvFileToSave).toHaveBeenCalledWith(
-      expect.objectContaining({
-        fileName: expectedFileName,
-      })
-    );
-
     const expectation = [mockMainAccount, mockNeuron];
     expect(spyQueryNeurons).toBeCalledTimes(1);
     expect(spyExportDataService).toHaveBeenCalledTimes(1);

From 34b503e02241c4014ba085d911c15e5dac4ad5ea Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Wed, 18 Dec 2024 21:17:17 +0100
Subject: [PATCH 8/8] fixes

---
 .../reporting/ReportingDateRangeSelector.spec.ts      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
index eee9740281b..887a1a575f0 100644
--- a/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
+++ b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts
@@ -24,6 +24,10 @@ describe("ReportingDateRangeSelector", () => {
     return { po, component };
   };
 
+  const getComponentPropValue = (component, propName: string) => {
+    return component.$$.ctx[component.$$.props[propName]];
+  };
+
   it("should render the option provided as a prop", async () => {
     const { po } = renderComponent({ period: "last-year" });
 
@@ -64,12 +68,13 @@ describe("ReportingDateRangeSelector", () => {
     const { po, component } = renderComponent();
     const allOptions = await po.getAllOptions();
 
-    // Click the second option
-    await allOptions[1].click();
+    let currentValue = getComponentPropValue(component, "period");
+    expect(currentValue).toBe("all");
 
+    await allOptions[1].click();
     await tick();
 
-    const currentValue = component.$$.ctx[component.$$.props["period"]];
+    currentValue = getComponentPropValue(component, "period");
     expect(currentValue).toBe("last-year");
   });
 });