feat: welcome -> create profile routing (#2328)

ArkEcosystem · Jul 2, 2020 · a8446f1 · a8446f1
1 parent c8dbaba
commit a8446f1
Show file tree

Hide file tree

Showing 23 changed files with 248 additions and 68 deletions.
diff --git a/cypress.json b/cypress.json
@@ -1,5 +1,6 @@
 {
 	"baseUrl": "http://localhost:3000",
 	"defaultCommandTimeout": 8000,
-	"video": false
+	"video": false,
+	"screenshot": false
 }
diff --git a/cypress/integration/welcome-routing.spec.js b/cypress/integration/welcome-routing.spec.js
@@ -0,0 +1,9 @@
+describe("Welcome -> Create Profile routing", () => {
+	it("should navigate between welcome and create profile", () => {
+		cy.visit("/");
+
+		cy.get("button").contains("Create Profile").click();
+		cy.get("button").contains("Back").click();
+		cy.get("h1").should("have.text", "Welcome to ARK");
+	});
+});
diff --git a/package.json b/package.json
@@ -143,6 +143,7 @@
 		"eslint-plugin-simple-import-sort": "^5.0.3",
 		"eslint-plugin-testing-library": "^3.2.0",
 		"eslint-plugin-unused-imports": "^0.1.3",
+		"history": "^5.0.0",
 		"husky": "^4.2.5",
 		"jest-fetch-mock": "^3.0.3",
 		"lint-staged": "^10.2.7",

diff --git a/src/app/components/Card/Card.test.tsx b/src/app/components/Card/Card.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "test-utils";
+import { fireEvent, render } from "test-utils";
 
 import { Card } from "./Card";
 
@@ -10,4 +10,15 @@ describe("Card", () => {
 		expect(container).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
+
+	it("should handle click", () => {
+		const handleClick = jest.fn();
+		const { container, asFragment, getByText } = render(<Card handleClick={() => handleClick()}>Test</Card>);
+
+		expect(container).toBeTruthy();
+		fireEvent.click(getByText("Test"));
+
+		expect(handleClick).toHaveBeenCalled();
+		expect(asFragment()).toMatchSnapshot();
+	});
 });
diff --git a/src/app/components/Card/Card.tsx b/src/app/components/Card/Card.tsx
@@ -4,8 +4,17 @@ import tw, { styled } from "twin.macro";
 type CardProps = {
 	as?: React.ElementType;
 	children: React.ReactNode;
+	handleClick?: any;
+	className?: string;
 };
 
-export const Card = styled.div<CardProps>`
+const Wrapper = styled.div`
 	${tw`p-6 border-2 border-theme-primary-contrast rounded-lg`}
+	cursor: pointer;
 `;
+
+export const Card = ({ handleClick, children, className }: CardProps) => (
+	<Wrapper className={className} onClick={() => handleClick()}>
+		{children}
+	</Wrapper>
+);
diff --git a/src/app/components/Card/__snapshots__/Card.test.tsx.snap b/src/app/components/Card/__snapshots__/Card.test.tsx.snap
@@ -1,9 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Card should handle click 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-AxjAm eWJHeF"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Card should render 1`] = `
 <DocumentFragment>
   <div
-    class="sc-AxjAm hQFgsK"
+    class="sc-AxjAm eWJHeF"
   />
 </DocumentFragment>
 `;
diff --git a/src/app/components/Card/__snapshots__/CardControl.test.tsx.snap b/src/app/components/Card/__snapshots__/CardControl.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Card Control should render 1`] = `
       value=""
     />
     <div
-      class="sc-AxirZ CardControl__CustomCard-sc-28luv0-1 hbehcc"
+      class="sc-AxirZ PHAyy CardControl__CustomCard-sc-28luv0-1 dojmPD"
     />
   </label>
 </DocumentFragment>
@@ -30,7 +30,7 @@ exports[`Card Control should render with a control state 1`] = `
       value=""
     />
     <div
-      class="sc-AxirZ CardControl__CustomCard-sc-28luv0-1 hbehcc"
+      class="sc-AxirZ PHAyy CardControl__CustomCard-sc-28luv0-1 dojmPD"
     >
       <div
         class="flex flex-col items-center justify-between h-full"

diff --git a/src/app/components/WalletCard/__snapshots__/WalletCard.test.tsx.snap b/src/app/components/WalletCard/__snapshots__/WalletCard.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Formatted Address should render 1`] = `
     class="w-64 inline-block undefined"
   >
     <div
-      class="sc-AxjAm hQFgsK"
+      class="sc-AxjAm eWJHeF"
     >
       <div
         class="relative p-2"
@@ -62,7 +62,7 @@ exports[`Formatted Address should render blank 1`] = `
     class="w-64 inline-block undefined"
   >
     <div
-      class="sc-AxjAm hQFgsK"
+      class="sc-AxjAm eWJHeF"
     >
       <div
         class="p-2"
@@ -97,7 +97,7 @@ exports[`Formatted Address should render with wallet data 1`] = `
     class="w-64 inline-block undefined"
   >
     <div
-      class="sc-AxjAm hQFgsK"
+      class="sc-AxjAm eWJHeF"
     >
       <div
         class="relative p-2"
@@ -182,7 +182,7 @@ exports[`Formatted Address should render with wallet data and optional icon 1`]
     class="w-64 inline-block undefined"
   >
     <div
-      class="sc-AxjAm hQFgsK"
+      class="sc-AxjAm eWJHeF"
     >
       <div
         class="relative p-2"

diff --git a/src/domains/dashboard/components/Wallets/__snapshots__/Wallets.test.tsx.snap b/src/domains/dashboard/components/Wallets/__snapshots__/Wallets.test.tsx.snap
@@ -161,7 +161,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -286,7 +286,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -411,7 +411,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -536,7 +536,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -661,7 +661,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -786,7 +786,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -911,7 +911,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -1036,7 +1036,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="p-2"
@@ -1071,7 +1071,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -1196,7 +1196,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -1321,7 +1321,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -1446,7 +1446,7 @@ exports[`Wallets should render 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="relative p-2"
@@ -1741,7 +1741,7 @@ exports[`Wallets should render with empty wallets list 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="p-2"
@@ -1776,7 +1776,7 @@ exports[`Wallets should render with empty wallets list 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="p-2"
@@ -1811,7 +1811,7 @@ exports[`Wallets should render with empty wallets list 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="p-2"
@@ -1846,7 +1846,7 @@ exports[`Wallets should render with empty wallets list 1`] = `
                   class="w-64 inline-block undefined"
                 >
                   <div
-                    class="sc-AxhCb jxpqWJ"
+                    class="sc-AxhCb iaJYea"
                   >
                     <div
                       class="p-2"

diff --git a/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap b/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap
@@ -165,7 +165,7 @@ exports[`Dashboard should render 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -200,7 +200,7 @@ exports[`Dashboard should render 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -235,7 +235,7 @@ exports[`Dashboard should render 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -270,7 +270,7 @@ exports[`Dashboard should render 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -704,7 +704,7 @@ exports[`Dashboard should render portfolio chart 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -739,7 +739,7 @@ exports[`Dashboard should render portfolio chart 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -774,7 +774,7 @@ exports[`Dashboard should render portfolio chart 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -809,7 +809,7 @@ exports[`Dashboard should render portfolio chart 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -1039,7 +1039,7 @@ exports[`Dashboard should render portfolio percentage bar 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -1074,7 +1074,7 @@ exports[`Dashboard should render portfolio percentage bar 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -1109,7 +1109,7 @@ exports[`Dashboard should render portfolio percentage bar 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"
@@ -1144,7 +1144,7 @@ exports[`Dashboard should render portfolio percentage bar 1`] = `
                       class="w-64 inline-block undefined"
                     >
                       <div
-                        class="sc-AxheI euRuZs"
+                        class="sc-AxheI jQWqsv"
                       >
                         <div
                           class="p-2"