commit cf762a00d208b57155dfc4ca4136c0d2c8572bdb
parent 58d06f9b5eaa41c083c7702d772f174a2048c9c2
Author: ms <ms@taler.net>
Date: Wed, 15 Dec 2021 12:10:06 +0100
bank: testing registration.
Diffstat:
3 files changed, 51 insertions(+), 34 deletions(-)
diff --git a/packages/bank/package.json b/packages/bank/package.json
@@ -50,6 +50,7 @@
"@types/jest": "^27.0.2",
"@typescript-eslint/eslint-plugin": "^5.3.0",
"@typescript-eslint/parser": "^5.3.0",
+ "jest-fetch-mock": "^3.0.3",
"bulma": "^0.9.3",
"bulma-checkbox": "^1.1.1",
"bulma-radio": "^1.1.1",
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -164,31 +164,34 @@ async function accountInfoCall(
* the page's (to indicate a successful login or a problem).
*/
async function registrationCall(
- url: string,
req: RegistrationRequestType,
backendStateSetter: StateUpdater<BackendStateTypeOpt>,
pageStateSetter: StateUpdater<PageStateType>
- // pageStateSetter: (fn: (state: PageStateType) => void) => void,
) {
- console.log("Try to register", req);
- var handleResp = (respStatus: number) => {
- switch (respStatus) {
- case 200: {
- pageStateSetter((state) => ({ ...state, isLoggedIn: true }));
- backendStateSetter((state) => ({
- ...state,
- url: url,
- username: req.username,
- password: req.password,
- }));
- break;
- }
- default: {
- pageStateSetter((state) => ({ ...state, hasProblem: true }));
- }
- }
- };
- handleResp(200);
+
+ let baseUrl = getRootPath();
+ try {
+ var res = await fetch(
+ `${baseUrl}testing/register`,
+ {method: 'POST', body: JSON.stringify(req)}
+ );
+ } catch (error) {
+ console.log("Could not POST new registration to the bank", error);
+ pageStateSetter((prevState) => ({ ...prevState, hasProblem: true }));
+ return;
+ }
+ if (!res.ok) {
+ pageStateSetter((prevState) => ({ ...prevState, hasProblem: true }));
+ } else {
+ console.log("Credentials are valid");
+ pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true }));
+ backendStateSetter((prevState) => ({
+ ...prevState,
+ url: baseUrl,
+ username: req.username,
+ password: req.password,
+ }));
+ }
}
/**************************
@@ -198,25 +201,29 @@ async function registrationCall(
/**
* Show only the account's balance.
*/
-export function Account(props: { balance: string }) {
- return <p>Your balance is {props.balance}</p>;
+export function Account(props: any) {
+ const { data, error } = useSWR(`accounts/${props.accountLabel}`);
+ console.log("data", data);
+ console.log("error", error);
+ return <p>Your balance is coming...</p>;
}
/**
* Factor out login credentials.
*/
function SWRWithCredentials(props: any): VNode {
- const { username, password } = props;
+ const { username, password, backendUrl } = props;
const headers = new Headers();
headers.append(
"Authorization",
`Basic ${Buffer.from(username + ":" + password).toString("base64")}`
);
+ console.log("API call to", backendUrl);
return (
<SWRConfig
value={{
fetcher: (url) =>
- fetch(url, { headers: headers }).then((r) => r.json()),
+ fetch(backendUrl + url || "", { headers: headers }).then((r) => r.json()),
}}
>
{props.children}
@@ -243,7 +250,7 @@ export function BankHome(): VNode {
* history */
if (pageState.isLoggedIn) {
if (typeof backendState === "undefined") {
- console.log("Credentials not found in state, even after login.");
+ console.log("Credentials not found in state, even after login.", backendState);
pageStateSetter((state) => ({ ...state, hasProblem: true }));
return <p>Page has a problem</p>;
}
@@ -251,8 +258,9 @@ export function BankHome(): VNode {
<SWRWithCredentials
username={backendState.username}
password={backendState.password}
+ backendUrl={backendState.url}
>
- <p>Hey!</p>
+ <Account accountLabel={backendState.username} />
</SWRWithCredentials>
);
@@ -272,6 +280,7 @@ export function BankHome(): VNode {
var registrationData: RegistrationRequestType;
return (
<div>
+ <p>Sign up!</p>
<input
type="text"
placeholder="username"
@@ -298,7 +307,6 @@ export function BankHome(): VNode {
<button
onClick={() => {
registrationCall(
- getRootPath(),
registrationData,
backendStateSetter,
pageStateSetter
diff --git a/packages/bank/tests/__tests__/homepage.js b/packages/bank/tests/__tests__/homepage.js
@@ -4,17 +4,25 @@ import { BankHome } from '../../src/pages/home';
import { h } from 'preact';
import { render, fireEvent, screen } from '@testing-library/preact';
import expect from 'expect';
+import fetchMock from "jest-fetch-mock";
+
+fetchMock.enableMocks();
+
+beforeEach(() => {
+ fetch.resetMocks();
+});
describe("home page", () => {
- test("greetings", () => {
- const { container } = render(<BankHome />);
+ test("new registration failure", async () => {
+ render(<BankHome />);
const u = screen.getByPlaceholderText("username");
const p = screen.getByPlaceholderText("password");
- fireEvent.change(u, {target: {value: "foo"}})
- fireEvent.change(p, {target: {value: "bar"}})
+ fireEvent.input(u, {target: {value: "foo"}})
+ fireEvent.input(p, {target: {value: "bar"}})
+ // Mocking 500 response.
+ fetch.mockReject("API is down");
const s = screen.getByText("Submit");
fireEvent.click(s);
- /* FIXME: currently failing because the login credentials don't
- * get stored to the state. */
+ await screen.findByText("has a problem", {exact: false});
})
})
