From 0e2c25dc191bb80a2d45542b7b225036d6803e74 Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Mon, 16 Dec 2024 21:51:15 +0100 Subject: [PATCH 1/4] new Range component --- .../ReportingDateRangeSelector.svelte | 82 +++++++++++++++++++ frontend/src/lib/i18n/en.json | 6 +- frontend/src/lib/types/i18n.d.ts | 4 + frontend/src/lib/types/reporting.ts | 1 + .../ReportingDateRangeSelector.spec.ts | 50 +++++++++++ .../ReportingDateRangeSelector.page-object.ts | 28 +++++++ 6 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte create mode 100644 frontend/src/lib/types/reporting.ts create mode 100644 frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts create mode 100644 frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts diff --git a/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte b/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte new file mode 100644 index 00000000000..80541b4ae84 --- /dev/null +++ b/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte @@ -0,0 +1,82 @@ + + +
+ {$i18n.reporting.range_filter_title} +
+ {#each options as option} + + {/each} +
+
+ + diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json index 317b8604113..565336b7380 100644 --- a/frontend/src/lib/i18n/en.json +++ b/frontend/src/lib/i18n/en.json @@ -192,7 +192,11 @@ "error_csv_generation": "Failed to generate CSV file", "error_file_system_access": "Unable to save file. Please check your permissions.", "error_neurons": "There was an error exporting the neurons. Please try again.", - "error_transactions": "There was an error exporting the transactions. Please try again." + "error_transactions": "There was an error exporting the transactions. Please try again.", + "range_filter_title": "Reporting Date Range", + "range_filter_all": "All transactions", + "range_last_year": "Last year", + "range_year_to_date": "Year to date" }, "auth": { "login": "Sign in with Internet Identity", diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts index fac721f7d8d..40c953a1a03 100644 --- a/frontend/src/lib/types/i18n.d.ts +++ b/frontend/src/lib/types/i18n.d.ts @@ -201,6 +201,10 @@ interface I18nReporting { error_file_system_access: string; error_neurons: string; error_transactions: string; + range_filter_title: string; + range_filter_all: string; + range_last_year: string; + range_year_to_date: string; } interface I18nAuth { diff --git a/frontend/src/lib/types/reporting.ts b/frontend/src/lib/types/reporting.ts new file mode 100644 index 00000000000..688c8479f98 --- /dev/null +++ b/frontend/src/lib/types/reporting.ts @@ -0,0 +1 @@ +export type ReportingDateRange = "all" | "last-year" | "year-to-date"; diff --git a/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts new file mode 100644 index 00000000000..8f4633c064f --- /dev/null +++ b/frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts @@ -0,0 +1,50 @@ +import ReportingDateRangeSelector from "$lib/components/reporting/ReportingDateRangeSelector.svelte"; +import { JestPageObjectElement } from "$tests/page-objects/jest.page-object"; +import { ReportingDateRangeSelectorPo } from "$tests/page-objects/ReportingDateRangeSelector.page-object"; +import { render } from "@testing-library/svelte"; + +describe("ReportingDateRangeSelector", () => { + const renderComponent = () => { + const { container } = render(ReportingDateRangeSelector); + const po = ReportingDateRangeSelectorPo.under({ + element: new JestPageObjectElement(container), + }); + + return po; + }; + + it("should render a title", async () => { + const po = renderComponent(); + const title = await po.getLegend(); + expect(title).toBeDefined(); + }); + + it("should render three options", async () => { + const po = renderComponent(); + + expect(await po.getAllOptions()).toHaveLength(3); + }); + + it("should select 'all' option by default", async () => { + 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 allOptions = await po.getAllOptions(); + const firstOptionValue = await allOptions[0].getValue(); + const secondOption = allOptions[1]; + + let currentOption = po.getSelectedOption(); + + expect(await currentOption.getValue()).toEqual(firstOptionValue); + + await secondOption.click(); + currentOption = po.getSelectedOption(); + + expect(await currentOption.getValue()).toBe(await secondOption.getValue()); + }); +}); diff --git a/frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts b/frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts new file mode 100644 index 00000000000..94f4079dcf5 --- /dev/null +++ b/frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts @@ -0,0 +1,28 @@ +import type { PageObjectElement } from "$tests/types/page-object.types"; +import { SimpleBasePageObject } from "./simple-base.page-object"; + +export class ReportingDateRangeSelectorPo extends SimpleBasePageObject { + static readonly TID = "reporting-data-range-selector-component"; + + static under({ + element, + }: { + element: PageObjectElement; + }): ReportingDateRangeSelectorPo { + return new ReportingDateRangeSelectorPo( + element.byTestId(ReportingDateRangeSelectorPo.TID) + ); + } + + getLegend() { + return this.getElement().querySelector("legend").getText(); + } + + getAllOptions() { + return this.getElement().querySelectorAll('input[type="radio"]'); + } + + getSelectedOption() { + return this.getElement().querySelector('input[type="radio"]:checked'); + } +} From 77435582232f88c5db20ed8d881dc1c6acc86438 Mon Sep 17 00:00:00 2001 From: Yusef Habib Fernandez Date: Mon, 16 Dec 2024 22:26:32 +0100 Subject: [PATCH 2/4] Styles --- .../ReportingDateRangeSelector.svelte | 100 ++++++++++-------- 1 file changed, 56 insertions(+), 44 deletions(-) diff --git a/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte b/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte index 80541b4ae84..293af8b59be 100644 --- a/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte +++ b/frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte @@ -19,61 +19,73 @@
- {$i18n.reporting.range_filter_title} -
- {#each options as option} - - {/each} -
+
+ {$i18n.reporting.range_filter_title} +
+ {#each options as option} + + {/each} +