diff options
Diffstat (limited to 'packages/demobank-ui/src/components')
3 files changed, 146 insertions, 133 deletions
diff --git a/packages/demobank-ui/src/components/Transactions/state.ts b/packages/demobank-ui/src/components/Transactions/state.ts index 5d613c5d0..b17986e48 100644 --- a/packages/demobank-ui/src/components/Transactions/state.ts +++ b/packages/demobank-ui/src/components/Transactions/state.ts @@ -20,7 +20,11 @@ import { useEffect } from "preact/hooks"; import useSWR from "swr"; import { Props, State } from "./index.js"; -export function useComponentState({ accountLabel, pageNumber, balanceValue }: Props): State { +export function useComponentState({ + accountLabel, + pageNumber, + balanceValue, +}: Props): State { const { data, error, mutate } = useSWR( `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`, ); @@ -39,40 +43,41 @@ export function useComponentState({ accountLabel, pageNumber, balanceValue }: Pr error: { hasError: true, operational: false, - message: `Transactions page ${pageNumber} was not found.` - } - } + message: `Transactions page ${pageNumber} was not found.`, + }, + }; case 401: return { status: "loading-error", error: { hasError: true, operational: false, - message: "Wrong credentials given." - } - } + message: "Wrong credentials given.", + }, + }; default: return { status: "loading-error", error: { hasError: true, operational: false, - message: `Transaction page ${pageNumber} could not be retrieved.` - } as any - } + message: `Transaction page ${pageNumber} could not be retrieved.`, + } as any, + }; } } if (!data) { return { status: "loading", - error: undefined - } + error: undefined, + }; } - const transactions = data.transactions.map((item: unknown) => { - if (!item || typeof item !== "object" || + if ( + !item || + typeof item !== "object" || !("direction" in item) || !("creditorIban" in item) || !("debtorIban" in item) || @@ -86,12 +91,12 @@ export function useComponentState({ accountLabel, pageNumber, balanceValue }: Pr } const anyItem = item as any; if ( - !(typeof anyItem.creditorIban === 'string') || - !(typeof anyItem.debtorIban === 'string') || - !(typeof anyItem.date === 'string') || - !(typeof anyItem.subject === 'string') || - !(typeof anyItem.currency === 'string') || - !(typeof anyItem.amount === 'string') + !(typeof anyItem.creditorIban === "string") || + !(typeof anyItem.debtorIban === "string") || + !(typeof anyItem.date === "string") || + !(typeof anyItem.subject === "string") || + !(typeof anyItem.currency === "string") || + !(typeof anyItem.amount === "string") ) { return; } @@ -109,11 +114,11 @@ export function useComponentState({ accountLabel, pageNumber, balanceValue }: Pr ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}` : undefined; - const date = parse(dateStr ?? "", "dd/MM yyyy", new Date()) + const date = parse(dateStr ?? "", "dd/MM yyyy", new Date()); const when: AbsoluteTime = { - t_ms: date.getTime() - } + t_ms: date.getTime(), + }; const amount = Amounts.parse(`${anyItem.currency}:${anyItem.amount}`); const subject = anyItem.subject; return { @@ -122,7 +127,7 @@ export function useComponentState({ accountLabel, pageNumber, balanceValue }: Pr when, amount, subject, - } + }; }); return { diff --git a/packages/demobank-ui/src/components/Transactions/test.ts b/packages/demobank-ui/src/components/Transactions/test.ts index b746f6bb7..21a0eefbb 100644 --- a/packages/demobank-ui/src/components/Transactions/test.ts +++ b/packages/demobank-ui/src/components/Transactions/test.ts @@ -26,149 +26,157 @@ import { TRANSACTION_API_EXAMPLE } from "../../endpoints.js"; import { Props } from "./index.js"; import { useComponentState } from "./state.js"; - describe("Transaction states", () => { - it("should query backend and render transactions", async () => { - const env = new SwrMockEnvironment(); const props: Props = { accountLabel: "myAccount", - pageNumber: 0 - } + pageNumber: 0, + }; env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_FIRST_PAGE, { response: { - "transactions": [ + transactions: [ { - "creditorIban": "DE159593", - "creditorBic": "SANDBOXX", - "creditorName": "exchange company", - "debtorIban": "DE118695", - "debtorBic": "SANDBOXX", - "debtorName": "Name unknown", - "amount": "1", - "currency": "KUDOS", - "subject": "Taler Withdrawal N588V8XE9TR49HKAXFQ20P0EQ0EYW2AC9NNANV8ZP5P59N6N0410", - "date": "2022-12-12Z", - "uid": "8PPFR9EM", - "direction": "DBIT", - "pmtInfId": null, - "msgId": null + creditorIban: "DE159593", + creditorBic: "SANDBOXX", + creditorName: "exchange company", + debtorIban: "DE118695", + debtorBic: "SANDBOXX", + debtorName: "Name unknown", + amount: "1", + currency: "KUDOS", + subject: + "Taler Withdrawal N588V8XE9TR49HKAXFQ20P0EQ0EYW2AC9NNANV8ZP5P59N6N0410", + date: "2022-12-12Z", + uid: "8PPFR9EM", + direction: "DBIT", + pmtInfId: null, + msgId: null, }, { - "creditorIban": "DE159593", - "creditorBic": "SANDBOXX", - "creditorName": "exchange company", - "debtorIban": "DE118695", - "debtorBic": "SANDBOXX", - "debtorName": "Name unknown", - "amount": "5.00", - "currency": "KUDOS", - "subject": "HNEWWT679TQC5P1BVXJS48FX9NW18FWM6PTK2N80Z8GVT0ACGNK0", - "date": "2022-12-07Z", - "uid": "7FZJC3RJ", - "direction": "DBIT", - "pmtInfId": null, - "msgId": null + creditorIban: "DE159593", + creditorBic: "SANDBOXX", + creditorName: "exchange company", + debtorIban: "DE118695", + debtorBic: "SANDBOXX", + debtorName: "Name unknown", + amount: "5.00", + currency: "KUDOS", + subject: "HNEWWT679TQC5P1BVXJS48FX9NW18FWM6PTK2N80Z8GVT0ACGNK0", + date: "2022-12-07Z", + uid: "7FZJC3RJ", + direction: "DBIT", + pmtInfId: null, + msgId: null, }, { - "creditorIban": "DE118695", - "creditorBic": "SANDBOXX", - "creditorName": "Name unknown", - "debtorIban": "DE579516", - "debtorBic": "SANDBOXX", - "debtorName": "The Bank", - "amount": "100", - "currency": "KUDOS", - "subject": "Sign-up bonus", - "date": "2022-12-07Z", - "uid": "I31A06J8", - "direction": "CRDT", - "pmtInfId": null, - "msgId": null - } - ] - } - }); - - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status, error }) => { - - expect(status).equals("loading"); - expect(error).undefined; - }, - ({ status, error }) => { - - expect(status).equals("ready"); - expect(error).undefined; + creditorIban: "DE118695", + creditorBic: "SANDBOXX", + creditorName: "Name unknown", + debtorIban: "DE579516", + debtorBic: "SANDBOXX", + debtorName: "The Bank", + amount: "100", + currency: "KUDOS", + subject: "Sign-up bonus", + date: "2022-12-07Z", + uid: "I31A06J8", + direction: "CRDT", + pmtInfId: null, + msgId: null, + }, + ], }, - ], env.buildTestingContext()) - - expect(hookBehavior).deep.eq({ result: "ok" }) + }); - expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status, error }) => { + expect(status).equals("loading"); + expect(error).undefined; + }, + ({ status, error }) => { + expect(status).equals("ready"); + expect(error).undefined; + }, + ], + env.buildTestingContext(), + ); + + expect(hookBehavior).deep.eq({ result: "ok" }); + + expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }); }); it("should show error message on not found", async () => { - const env = new SwrMockEnvironment(); const props: Props = { accountLabel: "myAccount", - pageNumber: 0 - } + pageNumber: 0, + }; env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_NOT_FOUND, {}); - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status, error }) => { - expect(status).equals("loading"); - expect(error).undefined; - }, - ({ status, error }) => { - expect(status).equals("loading-error"); - expect(error).deep.eq({ - hasError: true, - operational: false, - message: "Transactions page 0 was not found." - }); - }, - ], env.buildTestingContext()) - - expect(hookBehavior).deep.eq({ result: "ok" }) - expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status, error }) => { + expect(status).equals("loading"); + expect(error).undefined; + }, + ({ status, error }) => { + expect(status).equals("loading-error"); + expect(error).deep.eq({ + hasError: true, + operational: false, + message: "Transactions page 0 was not found.", + }); + }, + ], + env.buildTestingContext(), + ); + + expect(hookBehavior).deep.eq({ result: "ok" }); + expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }); }); it("should show error message on server error", async () => { - const env = new SwrMockEnvironment(false); const props: Props = { accountLabel: "myAccount", - pageNumber: 0 - } + pageNumber: 0, + }; env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_ERROR, {}); - const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [ - ({ status, error }) => { - expect(status).equals("loading"); - expect(error).undefined; - }, - ({ status, error }) => { - expect(status).equals("loading-error"); - expect(error).deep.equal({ - hasError: true, - operational: false, - message: "Transaction page 0 could not be retrieved." - }); - }, - ], env.buildTestingContext()) - - expect(hookBehavior).deep.eq({ result: "ok" }) - expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }) + const hookBehavior = await tests.hookBehaveLikeThis( + useComponentState, + props, + [ + ({ status, error }) => { + expect(status).equals("loading"); + expect(error).undefined; + }, + ({ status, error }) => { + expect(status).equals("loading-error"); + expect(error).deep.equal({ + hasError: true, + operational: false, + message: "Transaction page 0 could not be retrieved.", + }); + }, + ], + env.buildTestingContext(), + ); + + expect(hookBehavior).deep.eq({ result: "ok" }); + expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" }); }); }); - diff --git a/packages/demobank-ui/src/components/index.examples.ts b/packages/demobank-ui/src/components/index.examples.ts index a741b413d..348d5c653 100644 --- a/packages/demobank-ui/src/components/index.examples.ts +++ b/packages/demobank-ui/src/components/index.examples.ts @@ -14,4 +14,4 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -export * as tx from "./Transactions/stories.js";
\ No newline at end of file +export * as tx from "./Transactions/stories.js"; |