Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

Commit

Permalink
feat: implement business registrations in MyRegistrations (#2759)
Browse files Browse the repository at this point in the history
  • Loading branch information
@goga-m
goga-m committed Sep 2, 2020
1 parent 8ae8bfe commit 83eabf8
Show file tree
Hide file tree
Showing 13 changed files with 949 additions and 346 deletions.
16 changes: 8 additions & 8 deletions src/app/__snapshots__/App.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ exports[`App should render and schedule delegates sync 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
John Doe
</span>
Expand Down Expand Up @@ -324,7 +324,7 @@ exports[`App should render and schedule delegates sync 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
Jane Doe
</span>
Expand Down Expand Up @@ -532,7 +532,7 @@ exports[`App should render mock 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
John Doe
</span>
Expand Down Expand Up @@ -624,7 +624,7 @@ exports[`App should render mock 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
Jane Doe
</span>
Expand Down Expand Up @@ -832,7 +832,7 @@ exports[`App should render splash screen 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
John Doe
</span>
Expand Down Expand Up @@ -924,7 +924,7 @@ exports[`App should render splash screen 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
Jane Doe
</span>
Expand Down Expand Up @@ -1205,7 +1205,7 @@ exports[`App should render welcome screen after splash screen 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
John Doe
</span>
Expand Down Expand Up @@ -1297,7 +1297,7 @@ exports[`App should render welcome screen after splash screen 1`] = `
data-testid="profile-card__user--name"
>
<span
class="sc-fznMnq hGnWMD"
class="sc-fzomME bvoogl"
>
Jane Doe
</span>
Expand Down
19 changes: 0 additions & 19 deletions src/domains/profile/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,3 @@ export const blockchainRegistrations = [
repository: [],
},
];

export const businessRegistrations = [
{
agent: "OLEBank",
businessName: "ARK Ecosystem",
history: [],
website: "",
msq: true,
repository: [],
},
{
agent: "OLEBank",
businessName: "ARK Ecosystem",
history: [],
website: "",
msq: true,
repository: [],
},
];
110 changes: 92 additions & 18 deletions src/domains/profile/e2e/my-registrations-routing.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@ import { Selector } from "testcafe";

import { buildTranslations } from "../../../app/i18n/helpers";
import { createFixture } from "../../../utils/e2e-utils";
import { goToProfile } from "./common";
import { goToMyRegistrations, goToProfile } from "./common";

const translations = buildTranslations();

createFixture(`My Registrations`).beforeEach(async (t) => await goToProfile(t));
createFixture(`My Registrations`);

test("should navigate to my registrations from navigation bar", async (t) => {
await t.expect(Selector("div").withText(translations.COMMON.WALLETS).exists).ok();
test("should navigate to my registrations page", async (t) => {
await goToProfile(t);
// Navigate to wallet details page
await t.hover(Selector("[data-testid=WalletCard__D5sRKWckH4rE1hQ9eeMeHAepgyC3cvJtwb]"));
await t.click(Selector("[data-testid=WalletCard__D5sRKWckH4rE1hQ9eeMeHAepgyC3cvJtwb]"));
await t.expect(Selector("[data-testid=WalletHeader]").exists).ok();

await t.click(Selector('[data-testid="navbar__useractions"]'));
await t
.expect(Selector('[data-testid="dropdown__option--2"]').withText(translations.COMMON.REGISTRATIONS).exists)
.ok();
await t.click(Selector('[data-testid="dropdown__option--2"]').withText(translations.COMMON.REGISTRATIONS));
await t.hover(Selector("[data-testid=WalletRegistrations__show-all]"));
await t.click(Selector("[data-testid=WalletRegistrations__show-all]"));

await t.expect(Selector("[data-testid=header__title]").exists).ok();
await t
Expand All @@ -25,19 +26,92 @@ test("should navigate to my registrations from navigation bar", async (t) => {
.ok();
});

test("should navigate to my registrations page", async (t) => {
// Navigate to wallet details page
await t.hover(Selector("[data-testid=WalletCard__D5sRKWckH4rE1hQ9eeMeHAepgyC3cvJtwb]"));
await t.click(Selector("[data-testid=WalletCard__D5sRKWckH4rE1hQ9eeMeHAepgyC3cvJtwb]"));
await t.expect(Selector("[data-testid=WalletHeader]").exists).ok();
test("should navigate to my registrations from navigation bar", goToMyRegistrations);

await t.hover(Selector("[data-testid=WalletRegistrations__show-all]"));
await t.click(Selector("[data-testid=WalletRegistrations__show-all]"));
test("should render delegates list", async (t: any) => {
await goToMyRegistrations(t);

await t.expect(Selector("[data-testid=DelegateRowItem]").exists).ok();
});

test("should handle delegate update action", async (t: any) => {
await goToMyRegistrations(t);

await t.expect(Selector("[data-testid=DelegateRowItem]").exists).ok();
await t.expect(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__toggle]").exists).ok();

await t.hover(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__toggle]"));
await t.click(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__toggle]"));
// Update option
await t.click(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__option--0]"));

await t.expect(Selector("[data-testid=header__title]").exists).ok();
await t
.expect(
Selector("[data-testid=header__title]").withText(translations.PROFILE.PAGE_MY_REGISTRATIONS.TITLE).exists,
Selector("div").withText(translations.TRANSACTION.PAGE_UPDATE_REGISTRATION.FIRST_STEP.BUSINESS.TITLE)
.exists,
)
.ok();
});

test("should handle delegate resign action", async (t: any) => {
await goToMyRegistrations(t);

await t.expect(Selector("[data-testid=DelegateRowItem]").exists).ok();
await t.expect(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__toggle]").exists).ok();

await t.hover(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__toggle]"));
await t.click(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__toggle]"));
// Update option
await t.click(Selector("[data-testid=DelegateRowItem] [data-testid=dropdown__option--1]"));

await t
.expect(
Selector("div").withText(translations.TRANSACTION.PAGE_RESIGN_REGISTRATION.FIRST_STEP.DELEGATE.TITLE)
.exists,
)
.ok();
});

test("should render business registrations list", async (t: any) => {
await goToMyRegistrations(t);

await t.expect(Selector("[data-testid=BusinessRegistrationRowItem]").exists).ok();
});

test("should handle busines registration update action", async (t: any) => {
await goToMyRegistrations(t);

await t.expect(Selector("[data-testid=BusinessRegistrationRowItem]").exists).ok();
await t.expect(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__toggle]").exists).ok();

await t.hover(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__toggle]"));
await t.click(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__toggle]"));
// Update option
await t.click(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__option--0]"));

await t
.expect(
Selector("div").withText(translations.TRANSACTION.PAGE_UPDATE_REGISTRATION.FIRST_STEP.BUSINESS.TITLE)
.exists,
)
.ok();
});

test("should handle business registration resign action", async (t: any) => {
await goToMyRegistrations(t);

await t.expect(Selector("[data-testid=BusinessRegistrationRowItem]").exists).ok();
await t.expect(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__toggle]").exists).ok();

await t.hover(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__toggle]"));
await t.click(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__toggle]"));
// Update option
await t.click(Selector("[data-testid=BusinessRegistrationRowItem] [data-testid=dropdown__option--1]"));

await t
.expect(
Selector("div").withText(translations.TRANSACTION.PAGE_RESIGN_REGISTRATION.FIRST_STEP.DELEGATE.TITLE)
.exists,
)
.ok();
});
12 changes: 9 additions & 3 deletions src/domains/profile/pages/MyRegistrations/MyRegistrations.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from "react";
import { Route } from "react-router-dom";
import { act, fireEvent, getDefaultProfileId, renderWithRouter, syncDelegates, waitFor, within } from "testing-library";

import { blockchainRegistrations, businessRegistrations } from "../../data";
import { blockchainRegistrations } from "../../data";
import { MyRegistrations } from "./MyRegistrations";

const history = createMemoryHistory();
Expand All @@ -16,6 +16,7 @@ const delegateWalletId = "d044a552-7a49-411c-ae16-8ff407acc430";

describe("MyRegistrations", () => {
beforeAll(async () => {
nock.disableNetConnect();
nock("https://dwallets.ark.io")
.get("/delegates/D5sRKWckH4rE1hQ9eeMeHAepgyC3cvJtwb")
.reply(200, require("tests/fixtures/delegates/D5sRKWckH4rE1hQ9eeMeHAepgyC3cvJtwb.json"));
Expand Down Expand Up @@ -76,9 +77,14 @@ describe("MyRegistrations", () => {
});

it("should render business registrations", async () => {
nock("https://dwallets.ark.io")
.post("/api/transactions/search")
.query(true)
.reply(200, require("tests/fixtures/registrations/businesses.json"));

const { asFragment, getAllByTestId } = renderWithRouter(
<Route path="/profiles/:profileId/registrations">
<MyRegistrations businessRegistrations={businessRegistrations} />
<MyRegistrations />
</Route>,
{
routes: [registrationsURL],
Expand All @@ -87,7 +93,7 @@ describe("MyRegistrations", () => {
);

await waitFor(() => expect(getAllByTestId("DelegateRowItem").length).toEqual(1));
await waitFor(() => expect(getAllByTestId("BusinessRegistrationItem").length).toEqual(2));
await waitFor(() => expect(getAllByTestId("BusinessRegistrationRowItem").length).toEqual(1));
expect(asFragment()).toMatchSnapshot();
});

Expand Down
45 changes: 29 additions & 16 deletions src/domains/profile/pages/MyRegistrations/MyRegistrations.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { ReadWriteWallet } from "@arkecosystem/platform-sdk-profiles";
import { ExtendedTransactionData, ReadWriteWallet } from "@arkecosystem/platform-sdk-profiles";
import { images } from "app/assets/images";
import { Button } from "app/components/Button";
import { Header } from "app/components/Header";
import { HeaderSearchBar } from "app/components/Header/HeaderSearchBar";
import { Page, Section } from "app/components/Layout";
import { Loader } from "app/components/Loader";
import { useActiveProfile } from "app/hooks/env";
import React, { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -33,23 +34,22 @@ const EmptyRegistrations = () => {

type Props = {
blockchainRegistrations: any[];
businessRegistrations: any[];
};

export const MyRegistrations = ({ blockchainRegistrations, businessRegistrations }: Props) => {
const [delegates, setDelegates] = useState<ReadWriteWallet[]>([]);
export const MyRegistrations = ({ blockchainRegistrations }: Props) => {
const [isLoading, setIsLoading] = useState(false);
const [blockchain] = useState(blockchainRegistrations);
const [business] = useState(businessRegistrations);
const [delegates, setDelegates] = useState<ReadWriteWallet[]>([]);
const [businesses, setBusinesses] = useState<ExtendedTransactionData[]>([]);

const history = useHistory();
const { t } = useTranslation();
const activeProfile = useActiveProfile();

const isEmptyRegistrations = useMemo(() => !delegates.length && !blockchain.length && !business.length, [
business,
delegates,
blockchain,
]);
const isEmptyRegistrations = useMemo(
() => !isLoading && !delegates.length && !blockchain.length && !businesses.length,
[businesses, delegates, blockchain, isLoading],
);

const crumbs = [
{
Expand All @@ -74,8 +74,20 @@ export const MyRegistrations = ({ blockchainRegistrations, businessRegistrations
};

useEffect(() => {
const delegateRegistrations = activeProfile.registrationAggregate().delegates();
setDelegates(delegateRegistrations);
const fetchRegistrations = async () => {
setIsLoading(true);

activeProfile.entityRegistrationAggregate().flush();

const businessRegistrations = await activeProfile.entityRegistrationAggregate().businesses();
setBusinesses(businessRegistrations.items());

const delegateRegistrations = activeProfile.registrationAggregate().delegates();
setDelegates(delegateRegistrations);

setIsLoading(false);
};
fetchRegistrations();
}, [activeProfile]);

return (
Expand All @@ -100,9 +112,11 @@ export const MyRegistrations = ({ blockchainRegistrations, businessRegistrations
/>
</Section>

{business.length > 0 && <BusinessTable data={business} />}
{blockchain.length > 0 && <BlockchainTable data={blockchain} />}
{delegates.length > 0 && <DelegateTable wallets={delegates} onAction={handleAction} />}
{isLoading && !isEmptyRegistrations && <Loader />}

{!isLoading && businesses.length > 0 && <BusinessTable businesses={businesses} onAction={handleAction} />}
{!isLoading && blockchain.length > 0 && <BlockchainTable data={blockchain} />}
{!isLoading && delegates.length > 0 && <DelegateTable wallets={delegates} onAction={handleAction} />}

{isEmptyRegistrations && <EmptyRegistrations />}
</Page>
Expand All @@ -111,5 +125,4 @@ export const MyRegistrations = ({ blockchainRegistrations, businessRegistrations

MyRegistrations.defaultProps = {
blockchainRegistrations: [],
businessRegistrations: [],
};
Loading

0 comments on commit 83eabf8

Please sign in to comment.