Merge pull request #9 from DevNode-Dev/feat/web-onboard-ui

Added modals for web on board, and interface selections

apps/web/jest.config.js

@@ -0,0 +1,30 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const customJestConfig = {
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/components/**/*.{js,jsx,ts,tsx}',
+    'src/utils/*.{js,jsx,ts,tsx}',
+    '!src/components/**/index.{js,jsx,ts,tsx}',
+    // library issue, cannot test connect wallet
+    '!src/components/Button/ConnectWallet/ConnectWalletButton.tsx'
+  ],
+  coverageDirectory: 'coverage',
+  testEnvironment: 'jsdom',
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper:{
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.ts'
+  },
+  transformIgnorePatterns: [
+    '/node_modules'
+  ],
+  // TODO: add threshold once enough % ;)
+};
+
+module.exports = createJestConfig(customJestConfig)

apps/web/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

apps/web/package.json

@@ -9,7 +9,9 @@
     "start": "next start",
     "clean": "rimraf .turbo node_modules dist .next",
     "start:web": "next start",
-    "dev:web": "next dev"
+    "dev:web": "next dev",
+    "test:web": "jest",
+    "test:web-coverage": "jest --coverage"
   },
   "dependencies": {
     "@3id/connect": "^0.4.1",
@@ -51,6 +53,10 @@
   "devDependencies": {
     "@devnode/config": "*",
     "@devnode/tsconfig": "*",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.4.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
@@ -59,11 +65,16 @@
     "autoprefixer": "^10.4.13",
     "eslint": "^8.31.0",
     "eslint-config-next": "13.1.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
     "postcss": "^8.4.20",
     "prettier": "^2.8.1",
     "prettier-plugin-tailwindcss": "^0.2.1",
     "rimraf": "^3.0.2",
     "tailwindcss": "^3.2.4",
+    "ts-jest": "^29.0.5",
+    "ts-node": "^10.9.1",
     "turbo": "^1.6.3",
     "typescript": "^4.9.4"
   },

apps/web/src/components/AvatarCard/AvatarCard.test.tsx

@@ -0,0 +1,39 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {AvatarCard} from "./AvatarCard";
+
+describe("<AvatarCard />", () => {
+  const image = undefined;
+  const imageSize = 12;
+  const onAddressClick = jest.fn();
+
+  it("should render the badge with no issues", () => {
+    const result = render(<AvatarCard image={image} imageSize={imageSize} />);
+    expect(result.container).toBeInTheDocument();
+  });
+
+  it("should render optional name and address element", () => {
+    render(<AvatarCard image={image} imageSize={imageSize} name={"abc"} />);
+    expect(screen.getByText("abc")).toBeTruthy();
+
+    render(<AvatarCard image={image} imageSize={imageSize} address={"xyz"} />);
+    expect(document.getElementById("badge")).toBeTruthy();
+  });
+
+  it("should handle extra classes", () => {
+    const custom = "my-custom-class";
+    render(<AvatarCard image={image} imageSize={imageSize} classes={custom} />);
+    expect(document.getElementById("avatar-card")).toHaveClass(custom);
+  });
+
+  it("should set avatar image size accordingly", () => {
+    render(<AvatarCard image={image} imageSize={40} />);
+    expect(screen.getByRole("img")).toHaveAttribute("height", "40");
+    expect(screen.getByRole("img")).toHaveAttribute("width", "40");
+  });
+
+  it("should handle address click action", () => {
+    render(<AvatarCard image={image} imageSize={40} address={"0x900"} onAddressClick={onAddressClick} />);
+    fireEvent.click(document.getElementById("badge"));
+    expect(onAddressClick).toBeCalledWith("0x900");
+  });
+});

apps/web/src/components/AvatarCard/AvatarCard.tsx

@@ -0,0 +1,26 @@
+import {AvatarCardProps} from "./types";
+import Image from "next/image";
+import {Badge} from "../Badge";
+import * as utils from "../../utils";
+
+export const AvatarCard = (props: AvatarCardProps) => {
+  const handleAddressClick = () => {
+    if (props.onAddressClick) {
+      props.onAddressClick(props.address);
+    }
+  }
+
+  return (
+    <div id="avatar-card" className={`flex flex-row items-center gap-3 ${props.classes || ''}`}>
+      <Image
+        width={props.imageSize}
+        height={props.imageSize}
+        className="rounded-full"
+        src={props.image || "https://placekitten.com/200/200"}
+        alt={`${props.name} avatar`}
+      />
+      {props.name && <div>{props.name} </div>}
+      {props.address && <Badge text={utils.formatWalletAddress(props.address)} onClick={handleAddressClick}/>}
+    </div>
+  )
+}

apps/web/src/components/AvatarCard/index.tsx

@@ -0,0 +1 @@
+export * from "./AvatarCard";

apps/web/src/components/AvatarCard/types.ts

@@ -0,0 +1,8 @@
+export interface AvatarCardProps {
+  image: string;
+  imageSize: number;
+  name?: string;
+  address?: string;
+  classes?: string;
+  onAddressClick?(address: string): void;
+}

apps/web/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,28 @@
+import {fireEvent, render} from "@testing-library/react";
+import {Badge} from "./Badge";
+
+describe("<Badge />", () => {
+  it("should render the badge with no issues", () => {
+    const result = render(<Badge text={"badge"} onClick={jest.fn} />);
+    expect(result.container).toBeInTheDocument();
+  });
+
+  it("should handle click event", () => {
+    const onClick = jest.fn();
+    render(<Badge text={"badge"} onClick={onClick} />);
+    fireEvent.click(document.getElementById("badge"));
+    expect(onClick).toBeCalled();
+  });
+
+  it("should handle custom class names", () => {
+    const custom = "my-custom-class";
+    render(<Badge text={"badge"} onClick={jest.fn} classes={custom} />);
+    expect(document.getElementById("badge")).toHaveClass(custom);
+  });
+
+  it("should have same name for the badger", () => {
+    const custom = "my-custom-badge";
+    render(<Badge text={custom} onClick={jest.fn} />);
+    expect(document.getElementById("badge")).toHaveTextContent(custom);
+  });
+});

apps/web/src/components/Badge/Badge.tsx

@@ -0,0 +1,13 @@
+import {BadgeProps} from "./types";
+
+export const Badge = (props: BadgeProps) => {
+  return (
+    <span
+      id="badge"
+      className={`cursor-pointer max-w-max inline-block text-ellipsis rounded-full bg-white border-2 border-gray-100 px-2 py-1 text-center text-sm leading-none text-gray-500 hover:border-blue-200 ${props.classes || ''}`}
+      onClick={props.onClick}
+    >
+    {props.text}
+    </span>
+  );
+}

apps/web/src/components/Badge/index.tsx

@@ -0,0 +1 @@
+export * from "./Badge";

apps/web/src/components/Badge/types.ts

@@ -0,0 +1,5 @@
+export interface BadgeProps {
+  text: string;
+  classes?: string;
+  onClick?(): void;
+}

apps/web/src/components/Button/AccentButton/AccentButton.test.tsx

@@ -0,0 +1,30 @@
+import {fireEvent, render, screen} from "@testing-library/react";
+import {AccentButton} from "./AccentButton";
+
+describe("<AccentButton />", () => {
+  it("should render the button with no issues", () => {
+    const result = render(<AccentButton title={"button"} onClick={jest.fn} />);
+    expect(result.container).toBeInTheDocument();
+    expect(screen.getByRole("button")).not.toBeDisabled();
+  });
+
+  it("should be disabled if the props has disabled=true", () => {
+    render(<AccentButton title={"button"} disabled={true} onClick={jest.fn} />);
+    const button = screen.getByRole("button");
+    expect(button).toBeTruthy();
+    expect(button).toBeDisabled();
+  });
+
+  it("should handle click event", () => {
+    const onClick = jest.fn();
+    render(<AccentButton title={"button"} onClick={onClick} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClick).toBeCalled();
+  });
+
+  it("should handle custom class names", () => {
+    const custom = "my-custom-class";
+    render(<AccentButton title={"button"} onClick={jest.fn} classes={custom} />);
+    expect(screen.getByRole("button")).toHaveClass(custom);
+  });
+});

apps/web/src/components/Button/AccentButton/AccentButton.tsx

@@ -0,0 +1,15 @@
+import {ButtonProps} from "../types";
+
+export const AccentButton = (props: ButtonProps) => {
+  return (
+    <button
+      type="button"
+      id="accent-button"
+      className={`cursor-pointer rounded-3xl bg-[#FF0D0D] px-8 py-3 text-sm font-medium text-white hover:bg-red-400 disabled:bg-red-400 ${props.classes || ''}`}
+      disabled={props.disabled}
+      onClick={props.onClick}
+    >
+      {props.title}
+    </button>
+  )
+}

apps/web/src/components/Button/Back/Back.test.tsx

@@ -0,0 +1,9 @@
+import {render} from "@testing-library/react";
+import {Back} from "./Back";
+
+describe("<Back />", () => {
+  it("should render the back comp with no issues", () => {
+    const result = render(<Back link={"/"} />);
+    expect(result.container).toBeInTheDocument();
+  });
+});

apps/web/src/components/Button/Back/Back.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import {BackLinkProps} from "./types";
+
+export const Back = (props: BackLinkProps) => {
+  return (
+    <Link id="back-button" href={props.link} legacyBehavior>
+      <a className="flex w-fit items-center gap-[3px] text-[16px] font-[500] text-[#BAB2C4] hover:text-[#08010D]">
+        <svg
+          className="h-[20px] w-[20px]"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          aria-hidden="true"
+        >
+          <path d="M0 0h24v24H0z" stroke="none" />
+          <path d="M5 12h14M5 12l4 4M5 12l4-4" />
+        </svg>
+        Back
+      </a>
+    </Link>
+  )
+}

apps/web/src/components/Button/Back/types.ts

@@ -0,0 +1,3 @@
+export interface BackLinkProps {
+  link: string;
+}

apps/web/src/components/Button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./ConnectWallet/ConnectWalletButton";
+export * from "./AccentButton/AccentButton";

apps/web/src/components/Button/types.ts

@@ -0,0 +1,6 @@
+export interface ButtonProps {
+  title: string;
+  classes?: string;
+  disabled?: boolean;
+  onClick(): void;
+}

apps/web/src/components/Chip/Chip.test.tsx

@@ -0,0 +1,17 @@
+import {fireEvent, render} from "@testing-library/react";
+import {Chip} from "./Chip";
+
+describe("<Chip />", () => {
+  const onClose = jest.fn();
+
+  it("should render chip with no issues", () => {
+    const result = render(<Chip text={"sample"} />);
+    expect(result.container).toBeInTheDocument();
+  });
+
+  it("should handle click on close icon", () => {
+    render(<Chip text={"sample"} onClose={onClose}/>);
+    fireEvent.click(document.getElementById("close-icon"));
+    expect(onClose).toBeCalled();
+  });
+});

apps/web/src/components/Chip/Chip.tsx

@@ -0,0 +1,24 @@
+import {ChipProps} from "./types";
+
+export const Chip = (props: ChipProps) => {
+  return (
+    <div
+      className={`flex flex-row gap-2 items-center px-3 py-2 block w-max rounded-md border border-gray-300 ${props.classes || ''}`}
+      id="chip"
+    >
+      <span>{props.text}</span>
+      <div
+        id="close-icon"
+        className="cursor-pointer"
+        onClick={props.onClose}
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M10.0625 3.9375L3.9375 10.0625" stroke="#97929B" strokeWidth="1.5" strokeLinecap="round"
+                strokeLinejoin="round"/>
+          <path d="M3.9375 3.9375L10.0625 10.0625" stroke="#97929B" strokeWidth="1.5" strokeLinecap="round"
+                strokeLinejoin="round"/>
+        </svg>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/Chip/index.tsx

@@ -0,0 +1 @@
+export * from "./Chip";

apps/web/src/components/Chip/types.ts

@@ -0,0 +1,5 @@
+export interface ChipProps {
+  text: string;
+  onClose?(): void;
+  classes?: string;
+}

apps/web/src/components/Flex/FlexColumn/FlexColumn.test.tsx

@@ -0,0 +1,32 @@
+import {render} from "@testing-library/react";
+import {FlexColumn} from "./FlexColumn";
+
+describe("<FlexColumn />", () => {
+  it("should render flex component with no issues", () => {
+    const result = render(
+      <FlexColumn>
+        <div>sample div</div>
+      </FlexColumn>
+    );
+    expect(result.container).toBeInTheDocument();
+  });
+
+  it("should have proper classes", () => {
+    render(
+      <FlexColumn>
+        <div>sample div</div>
+      </FlexColumn>
+    );
+    expect(document.getElementById("flex-column")).toHaveClass("flex flex-col");
+  });
+
+  it("should have custom classes when added", () => {
+    const custom = "my-custom-class";
+    render(
+      <FlexColumn classes={custom}>
+        <div>sample div</div>
+      </FlexColumn>
+    );
+    expect(document.getElementById("flex-column")).toHaveClass(custom);
+  })
+});

apps/web/src/components/Flex/FlexColumn/FlexColumn.tsx

@@ -0,0 +1,9 @@
+import {FlexProps} from "../types";
+
+export const FlexColumn = (props: FlexProps) => {
+  return (
+    <div id="flex-column" className={`flex flex-col ${props.classes || ''}`}>
+      {props.children}
+    </div>
+  )
+}