taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

pretty

Browse Source
This commit is contained in:
Sebastian 2022-12-22 18:40:38 -03:00
parent 6fd7756329
commit 5c84c32736
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
7 changed files with 569 additions and 1204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/demobank-ui/src/components/Transactions/state.ts
View File

@ -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 {

156
packages/demobank-ui/src/components/Transactions/test.ts
View File

@ -26,103 +26,106 @@ 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
}
]
}
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, [
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())
],
env.buildTestingContext(),
);
expect(hookBehavior).deep.eq({ result: "ok" })
expect(hookBehavior).deep.eq({ result: "ok" });
expect(env.assertJustExpectedRequestWereMade()).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, [
const hookBehavior = await tests.hookBehaveLikeThis(
useComponentState,
props,
[
({ status, error }) => {
expect(status).equals("loading");
expect(error).undefined;
@ -132,27 +135,31 @@ describe("Transaction states", () => {
expect(error).deep.eq({
hasError: true,
operational: false,
message: "Transactions page 0 was not found."
message: "Transactions page 0 was not found.",
});
},
], env.buildTestingContext())
],
env.buildTestingContext(),
);
expect(hookBehavior).deep.eq({ result: "ok" })
expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" })
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, [
const hookBehavior = await tests.hookBehaveLikeThis(
useComponentState,
props,
[
({ status, error }) => {
expect(status).equals("loading");
expect(error).undefined;
@ -162,13 +169,14 @@ describe("Transaction states", () => {
expect(error).deep.equal({
hasError: true,
operational: false,
message: "Transaction page 0 could not be retrieved."
message: "Transaction page 0 could not be retrieved.",
});
},
], env.buildTestingContext())
],
env.buildTestingContext(),
);
expect(hookBehavior).deep.eq({ result: "ok" })
expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" })
expect(hookBehavior).deep.eq({ result: "ok" });
expect(env.assertJustExpectedRequestWereMade()).deep.eq({ result: "ok" });
});
});

8
packages/demobank-ui/src/endpoints.ts
View File

@ -27,11 +27,11 @@ export const TRANSACTION_API_EXAMPLE = {
LIST_ERROR: {
method: "get" as const,
url: "access-api/accounts/myAccount/transactions?page=0",
code: 500
code: 500,
},
LIST_NOT_FOUND: {
method: "get" as const,
url: "access-api/accounts/myAccount/transactions?page=0",
code: 404
}
}
code: 404,
},
};

5
packages/demobank-ui/src/hooks/index.ts
View File

@ -20,7 +20,10 @@
*/
import { StateUpdater } from "preact/hooks";
import { useLocalStorage, useNotNullLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
import {
useLocalStorage,
useNotNullLocalStorage,
} from "@gnu-taler/web-util/lib/index.browser";
export type ValueOrFunction<T> = T | ((p: T) => T);
const calculateRootPath = () => {

1513
packages/demobank-ui/src/i18n/strings.ts
View File

File diff suppressed because it is too large Load Diff

10
packages/demobank-ui/src/stories.test.ts
View File

@ -24,12 +24,11 @@ import { parseGroupImport } from "@gnu-taler/web-util/lib/index.browser";
import * as pages from "./pages/index.stories.js";
import * as components from "./components/index.examples.js";
import { h as create } from "preact"
import { h as create } from "preact";
import { render as renderToString } from "preact-render-to-string";
setupI18n("en", { en: {} });
describe("All the examples:", () => {
const cms = parseGroupImport({ pages, components });
cms.forEach((group) => {
@ -38,8 +37,11 @@ describe("All the examples:", () => {
describe(`Component ${component.name}:`, () => {
component.examples.forEach((example) => {
it(`should render example: ${example.name}`, () => {
const vdom = create(example.render.component, example.render.props)
const html = renderToString(vdom)
const vdom = create(
example.render.component,
example.render.props,
);
const html = renderToString(vdom);
// console.log(html)
});
});