From 665ab71f92125c258d4f9aee29d13f407460c338 Mon Sep 17 00:00:00 2001 From: Brian Faust Date: Wed, 17 Jun 2020 11:52:54 +0300 Subject: [PATCH 1/7] wip --- package.json | 14 +- src/__snapshots__/index.test.ts.snap | 26 +- src/app/contexts/Environment.test.tsx | 21 + src/app/contexts/Environment.tsx | 21 + .../__snapshots__/Environment.test.tsx.snap | 9 + src/app/contexts/index.ts | 1 + src/app/services/HttpClient.test.ts | 55 ++ src/app/services/HttpClient.ts | 22 + src/app/services/index.ts | 3 + .../ProfileCard/ProfileCard.test.tsx | 4 +- .../components/ProfileCard/ProfileCard.tsx | 13 +- .../__snapshots__/ProfileCard.test.tsx.snap | 20 +- .../profile/pages/Welcome/Welcome.stories.tsx | 42 +- .../profile/pages/Welcome/Welcome.test.tsx | 58 ++- src/domains/profile/pages/Welcome/Welcome.tsx | 34 +- .../__snapshots__/Welcome.test.tsx.snap | 468 +++++++++++++++++- src/index.tsx | 5 +- yarn.lock | 155 ++---- 18 files changed, 754 insertions(+), 217 deletions(-) create mode 100644 src/app/contexts/Environment.test.tsx create mode 100644 src/app/contexts/Environment.tsx create mode 100644 src/app/contexts/__snapshots__/Environment.test.tsx.snap create mode 100644 src/app/contexts/index.ts create mode 100644 src/app/services/HttpClient.test.ts create mode 100644 src/app/services/HttpClient.ts create mode 100644 src/app/services/index.ts diff --git a/package.json b/package.json index e1d9238717..685f0c8c65 100644 --- a/package.json +++ b/package.json @@ -40,12 +40,12 @@ "build:win": "yarn build && electron-builder --win --x64 --ia32 --publish never" }, "dependencies": { - "@arkecosystem/platform-sdk": "^0.9.84", - "@arkecosystem/platform-sdk-ark": "^0.9.84", - "@arkecosystem/platform-sdk-crypto": "^0.9.84", - "@arkecosystem/platform-sdk-intl": "^0.9.84", - "@arkecosystem/platform-sdk-profiles": "^0.9.84", - "@arkecosystem/platform-sdk-support": "^0.9.84", + "@arkecosystem/platform-sdk": "^0.9.106", + "@arkecosystem/platform-sdk-ark": "^0.9.106", + "@arkecosystem/platform-sdk-crypto": "^0.9.106", + "@arkecosystem/platform-sdk-intl": "^0.9.106", + "@arkecosystem/platform-sdk-profiles": "^0.9.106", + "@arkecosystem/platform-sdk-support": "^0.9.106", "@arkecosystem/utils": "^1.1.8", "@testing-library/jest-dom": "^5.9.0", "@testing-library/react": "^10.2.1", @@ -60,12 +60,14 @@ "@types/swiper": "^5.3.2", "about-window": "^1.13.4", "autoprefixer": "^9.8.0", + "axios": "^0.19.2", "electron-is-dev": "^1.2.0", "electron-notarize": "^1.0.0", "electron-root-path": "^1.0.16", "electron-window-state": "^5.0.3", "eslint-config-react-app": "^5.2.1", "framer-motion": "^1.11.0", + "http2": "^3.3.7", "i18next": "^19.4.5", "postcss": "^7.0.32", "postcss-cli": "^7.1.1", diff --git a/src/__snapshots__/index.test.ts.snap b/src/__snapshots__/index.test.ts.snap index 871cedad1e..0bcacc2c2f 100644 --- a/src/__snapshots__/index.test.ts.snap +++ b/src/__snapshots__/index.test.ts.snap @@ -12467,18 +12467,20 @@ exports[`Application root should render without crashing 1`] = `
- - - - + + + + + +
, diff --git a/src/app/contexts/Environment.test.tsx b/src/app/contexts/Environment.test.tsx new file mode 100644 index 0000000000..b9b7124501 --- /dev/null +++ b/src/app/contexts/Environment.test.tsx @@ -0,0 +1,21 @@ +import { render, screen, waitFor } from "@testing-library/react"; +import React from "react"; + +import { EnvironmentProvider } from "./Environment"; + +describe("Environment Context", () => { + it("should render the wrapper properly", async () => { + const { container, asFragment } = render( + + Provider testing + , + ); + + await waitFor(async () => { + await expect(screen.findByText("Provider testing")).resolves.toBeInTheDocument(); + }); + + expect(container).toBeTruthy(); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/src/app/contexts/Environment.tsx b/src/app/contexts/Environment.tsx new file mode 100644 index 0000000000..ff3f7b9044 --- /dev/null +++ b/src/app/contexts/Environment.tsx @@ -0,0 +1,21 @@ +// Coins +import { ARK } from "@arkecosystem/platform-sdk-ark"; +// Env +import { Environment } from "@arkecosystem/platform-sdk-profiles"; +// Services +import { httpClient } from "app/services"; +import React, { createContext } from "react"; + +type Props = { + children: React.ReactNode; +}; + +const EnvironmentContext = createContext({}); + +const EnvironmentProvider = ({ children }: Props) => { + const env: Environment = new Environment({ coins: { ARK }, httpClient, storage: "indexeddb" }); + + return {children}; +}; + +export { EnvironmentContext, EnvironmentProvider }; diff --git a/src/app/contexts/__snapshots__/Environment.test.tsx.snap b/src/app/contexts/__snapshots__/Environment.test.tsx.snap new file mode 100644 index 0000000000..41e04a0dc0 --- /dev/null +++ b/src/app/contexts/__snapshots__/Environment.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Environment Context should render the wrapper properly 1`] = ` + + + Provider testing + + +`; diff --git a/src/app/contexts/index.ts b/src/app/contexts/index.ts new file mode 100644 index 0000000000..87352c6b84 --- /dev/null +++ b/src/app/contexts/index.ts @@ -0,0 +1 @@ +export * from "./Environment"; diff --git a/src/app/services/HttpClient.test.ts b/src/app/services/HttpClient.test.ts new file mode 100644 index 0000000000..c0efa89643 --- /dev/null +++ b/src/app/services/HttpClient.test.ts @@ -0,0 +1,55 @@ +/* eslint-disable @typescript-eslint/unbound-method */ + +import { HttpClient } from "./HttpClient"; + +jest.mock("axios", () => ({ + create: () => ({ + get: () => jest.fn(), + post: () => jest.fn(), + }), +})); + +let subject: HttpClient; + +beforeEach(() => (subject = new HttpClient())); + +describe("HttpClient", () => { + beforeEach(() => { + jest.spyOn(subject, "get"); + jest.spyOn(subject, "post"); + }); + + it("should get without params", async () => { + await subject.get("/hello-world"); + + expect(subject.get).toHaveBeenCalledWith("/hello-world"); + }); + + it("should get with params", async () => { + await subject.get("/hello-world", { q: "my-param" }); + + expect(subject.get).toHaveBeenCalledWith("/hello-world", { q: "my-param" }); + }); + + it("should post without params", async () => { + await subject.post("/hello-world", { key: "value" }); + + expect(subject.post).toHaveBeenCalledWith("/hello-world", { key: "value" }); + }); + + it("should post without headers", async () => { + await subject.post("/hello-world", { name: "my-param" }); + + expect(subject.post).toHaveBeenCalledWith("/hello-world", { name: "my-param" }); + }); + + it("should post without headers", async () => { + await subject.post("/hello-world", { name: "my-param" }, { authorization: "Bearer bear" }); + + expect(subject.post).toHaveBeenCalledWith( + "/hello-world", + { name: "my-param" }, + { authorization: "Bearer bear" }, + ); + }); +}); diff --git a/src/app/services/HttpClient.ts b/src/app/services/HttpClient.ts new file mode 100644 index 0000000000..d251fb2577 --- /dev/null +++ b/src/app/services/HttpClient.ts @@ -0,0 +1,22 @@ +import { Contracts } from "@arkecosystem/platform-sdk"; +import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; + +export class HttpClient implements Contracts.HttpClient { + readonly client: AxiosInstance; + + public constructor() { + const config: AxiosRequestConfig = { + timeout: 2000, + }; + + this.client = axios.create(config); + } + + public async get(path: string, query: object = {}): Promise> { + return await this.client.get(path, { params: { ...query } }); + } + + public async post(path: string, body: object, headers: object = {}) { + return await this.client.post(path, { body, headers }); + } +} diff --git a/src/app/services/index.ts b/src/app/services/index.ts new file mode 100644 index 0000000000..5a29f9a723 --- /dev/null +++ b/src/app/services/index.ts @@ -0,0 +1,3 @@ +import { HttpClient } from "./HttpClient"; + +export const httpClient = new HttpClient(); diff --git a/src/domains/profile/components/ProfileCard/ProfileCard.test.tsx b/src/domains/profile/components/ProfileCard/ProfileCard.test.tsx index 4fe0c04127..a603e40cea 100644 --- a/src/domains/profile/components/ProfileCard/ProfileCard.test.tsx +++ b/src/domains/profile/components/ProfileCard/ProfileCard.test.tsx @@ -17,7 +17,7 @@ describe("ProfileCard", () => { expect(container).toBeTruthy(); expect(getByTestId("profile-card__user--name")).toHaveTextContent(profile.name); expect(getByTestId("profile-card__user--balance")).toHaveTextContent(profile.balance); - expect(getByTestId("profile-card__user--avatar")).toHaveAttribute("src", profile.avatar); + expect(getByTestId("profile-card__user--avatar")).toHaveAttribute("style"); expect(asFragment()).toMatchSnapshot(); }); @@ -29,7 +29,7 @@ describe("ProfileCard", () => { }); it("should hide the settings icon", () => { - const { container, getByTestId } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); diff --git a/src/domains/profile/components/ProfileCard/ProfileCard.tsx b/src/domains/profile/components/ProfileCard/ProfileCard.tsx index 6fdd08cddd..c4fc7826a7 100644 --- a/src/domains/profile/components/ProfileCard/ProfileCard.tsx +++ b/src/domains/profile/components/ProfileCard/ProfileCard.tsx @@ -28,14 +28,11 @@ export const ProfileCard = ({ avatar, name, balance, actions, onSelect, showSett
-
- User Avatar -
+

Name

diff --git a/src/domains/profile/components/ProfileCard/__snapshots__/ProfileCard.test.tsx.snap b/src/domains/profile/components/ProfileCard/__snapshots__/ProfileCard.test.tsx.snap index a6617fe8f6..fc769391d6 100644 --- a/src/domains/profile/components/ProfileCard/__snapshots__/ProfileCard.test.tsx.snap +++ b/src/domains/profile/components/ProfileCard/__snapshots__/ProfileCard.test.tsx.snap @@ -16,14 +16,8 @@ exports[`ProfileCard should hide the settings icon 1`] = ` >

- User Avatar -
+ data-testid="profile-card__user--avatar" + />
@@ -190,14 +184,8 @@ exports[`ProfileCard should render the settings icon 1`] = ` >
- User Avatar -
+ data-testid="profile-card__user--avatar" + />
diff --git a/src/domains/profile/pages/Welcome/Welcome.stories.tsx b/src/domains/profile/pages/Welcome/Welcome.stories.tsx index 5675a3c45e..0d5f2d29c9 100644 --- a/src/domains/profile/pages/Welcome/Welcome.stories.tsx +++ b/src/domains/profile/pages/Welcome/Welcome.stories.tsx @@ -1,3 +1,4 @@ +import { EnvironmentContext } from "app/contexts"; import React from "react"; import { Welcome } from "./Welcome"; @@ -6,23 +7,34 @@ export default { title: "Profile / Pages / Welcome", }; -const profiles = [ - { - id: 1, - name: "Oleg Gelo", - balance: "234,500.46 USD", - avatar: "https://www.w3schools.com/howto/img_avatar.png", - }, -]; - export const Default = () => (
- +
); -export const WithProfiles = () => ( -
- -
-); +export const WithProfiles = () => { + const env = { + profiles: () => ({ + all: async () => + new Promise((resolve) => { + resolve([ + { + id: 1, + name: "Oleg Gelo", + balance: "234,500.46 USD", + avatar: "https://www.w3schools.com/howto/img_avatar.png", + }, + ]); + }), + }), + }; + + return ( +
+ + + +
+ ); +}; diff --git a/src/domains/profile/pages/Welcome/Welcome.test.tsx b/src/domains/profile/pages/Welcome/Welcome.test.tsx index 958381ca78..95f7a0c73f 100644 --- a/src/domains/profile/pages/Welcome/Welcome.test.tsx +++ b/src/domains/profile/pages/Welcome/Welcome.test.tsx @@ -1,30 +1,62 @@ -import { render } from "@testing-library/react"; +import { ARK } from "@arkecosystem/platform-sdk-ark"; +// Contexts +import { Environment } from "@arkecosystem/platform-sdk-profiles"; +import { render, screen, waitFor } from "@testing-library/react"; +import { EnvironmentContext } from "app/contexts"; +// i18n import { i18n } from "app/i18n"; +import { httpClient } from "app/services"; import React from "react"; import { I18nextProvider } from "react-i18next"; -import { BrowserRouter as Router } from "react-router-dom"; +import { HashRouter as Router } from "react-router-dom"; -import { Welcome } from "./"; +import { Welcome } from "../"; describe("Welcome", () => { - it("should render", () => { - const profiles = [ - { - id: 1, - name: "Oleg Gelo", - balance: "234,500.46 USD", - avatar: "https://www.w3schools.com/howto/img_avatar.png", - }, - ]; + it("should render", async () => { + const env: Environment = new Environment({ coins: { ARK }, httpClient, storage: "indexeddb" }); const { container, asFragment } = render( - + + + , ); + await waitFor(async () => { + await expect( + screen.findByText("Create a new Profile or login with your MarketSquare account to get started"), + ).resolves.toBeInTheDocument(); + }); + + expect(container).toBeTruthy(); + expect(asFragment()).toMatchSnapshot(); + }); + + it("should render with profiles", async () => { + const env: Environment = new Environment({ coins: { ARK }, httpClient, storage: "indexeddb" }); + + env.profiles().create("caio"); + + const { container, asFragment } = render( + + + + + + + , + ); + + await waitFor(async () => { + await expect( + screen.findByText("You already have a profile, you can choose any of them"), + ).resolves.toBeInTheDocument(); + }); + expect(container).toBeTruthy(); expect(asFragment()).toMatchSnapshot(); }); diff --git a/src/domains/profile/pages/Welcome/Welcome.tsx b/src/domains/profile/pages/Welcome/Welcome.tsx index ce1e3c5b30..f19036914c 100644 --- a/src/domains/profile/pages/Welcome/Welcome.tsx +++ b/src/domains/profile/pages/Welcome/Welcome.tsx @@ -1,26 +1,32 @@ +// Assets import { images } from "app/assets/images"; // UI Elements import { Button } from "app/components/Button"; import { Divider } from "app/components/Divider"; import { Icon } from "app/components/Icon"; import { NavBar } from "app/components/NavBar"; +// Contexts +import { EnvironmentContext } from "app/contexts"; import { ProfileCard } from "domains/profile/components/ProfileCard"; -import React from "react"; +import React, { useContext, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -type WelcomeProps = { - profiles: Array; -}; - const WelcomeBanner = images.profile.pages.welcome.WelcomeBanner; -const Welcome = ({ profiles }: WelcomeProps) => { +const Welcome = () => { const profileCardActions = [ { label: "Setting", value: "setting" }, { label: "Delete", value: "delete" }, ]; - + const { env }: any = useContext(EnvironmentContext); const { t } = useTranslation(); + const [profiles, setProfiles] = useState([]); + + useEffect(() => { + env.profiles().create("John Doe"); + + setProfiles(env.profiles().all()); + }, [env]); return (
@@ -41,8 +47,14 @@ const Welcome = ({ profiles }: WelcomeProps) => {

- {profiles.map((profile) => ( - + {profiles.map((profile: any) => ( + ))}
@@ -71,8 +83,4 @@ const Welcome = ({ profiles }: WelcomeProps) => { ); }; -Welcome.defaultProps = { - profiles: [], -}; - export { Welcome }; diff --git a/src/domains/profile/pages/Welcome/__snapshots__/Welcome.test.tsx.snap b/src/domains/profile/pages/Welcome/__snapshots__/Welcome.test.tsx.snap index b7aa682863..6528c2541a 100644 --- a/src/domains/profile/pages/Welcome/__snapshots__/Welcome.test.tsx.snap +++ b/src/domains/profile/pages/Welcome/__snapshots__/Welcome.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Welcome should render 1`] = ` >