Merge remote-tracking branch 'base/main'

Author: MartianGreed

apps/arkmarket/assets/DegularDisplay-SemiBold.otf

@@ -11,7 +11,10 @@
     "lint": "eslint",
     "start": "pnpm with-env next start",
     "typecheck": "tsc --noEmit",
-    "with-env": "dotenv -e ../../.env --"
+    "with-env": "dotenv -e ../../.env --",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@ark-market/ui": "workspace:*",
@@ -58,15 +61,21 @@
     "@ark-market/tailwind-config": "workspace:*",
     "@ark-market/tsconfig": "workspace:*",
     "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20.16.4",
-    "@types/react": "catalog:react18",
     "@types/react-dom": "catalog:react18",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-v8": "2.1.2",
     "dotenv-cli": "^7.4.2",
     "eslint": "catalog:",
     "jiti": "^1.21.6",
+    "jsdom": "^25.0.1",
     "prettier": "catalog:",
     "tailwindcss": "catalog:",
-    "typescript": "catalog:"
+    "typescript": "catalog:",
+    "vitest": "^2.1.2"
   },
   "prettier": "@ark-market/prettier-config"
 }

apps/arkmarket/assets/Nitti-Regular.otf

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import AuthSwitcher from "../components/auth-switcher";
+
+vi.mock("@starknet-react/core", () => ({
+  useAccount: vi.fn(),
+  useConnect: vi.fn(() => ({
+    connect: vi.fn(),
+    connectors: [],
+  })),
+}));
+
+vi.mock("../components/authentication", () => ({
+  default: () => (
+    <div data-testid="authentication-component">Authentication Component</div>
+  ),
+}));
+
+
+import { useAccount, useConnect } from "@starknet-react/core";
+
+describe("AuthSwitcher", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useConnect as any).mockReturnValue({
+      connect: vi.fn(),
+      connectors: [],
+    });
+  });
+
+  it('renders Authentication component when account is undefined', () => {
+    (useAccount as any).mockReturnValue({ account: undefined });
+
+    render(<AuthSwitcher>
+      <div>Child Component</div>
+    </AuthSwitcher>);
+
+    expect(screen.getByTestId('authentication-component')).toBeInTheDocument();
+    expect(screen.queryByText('Child Component')).not.toBeInTheDocument();
+  });
+
+  it('renders children when account is defined', () => {
+    (useAccount as any).mockReturnValue({ account: { address: '0x123' } });
+
+    render(<AuthSwitcher>
+      <div>Child Component</div>
+    </AuthSwitcher>);
+
+    expect(screen.queryByTestId('authentication-component')).not.toBeInTheDocument();
+    expect(screen.getByText('Child Component')).toBeInTheDocument();
+  });
+
+  it('renders children when account is null', () => {
+    (useAccount as any).mockReturnValue({ account: null });
+
+    render(<AuthSwitcher>
+      <div>Child Component</div>
+    </AuthSwitcher>);
+
+    expect(screen.queryByTestId('authentication-component')).not.toBeInTheDocument();
+    expect(screen.getByText('Child Component')).toBeInTheDocument();
+  });
+});

apps/arkmarket/package.json

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import Authentication from '../components/authentication';
+
+vi.mock('next/image', () => ({
+  default: (props: any) => <img {...props} />,
+}));
+
+vi.mock('@starknet-react/core', () => ({
+  useConnect: vi.fn(),
+}));
+
+import { useConnect } from "@starknet-react/core";
+
+describe("Authentication", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useConnect as any).mockReturnValue({
+      connectors: [
+        { id: 'connector1', name: 'Connector 1' },
+        { id: 'connector2', name: 'Connector 2' },
+      ],
+      connect: vi.fn(),
+    });
+  });
+
+  it('renders the component correctly', () => {
+    render(<Authentication />);
+    
+    expect(screen.getByText('Connect your wallet')).toBeInTheDocument();
+    expect(screen.getByText('Choose a starknet wallet to start with')).toBeInTheDocument();
+    expect(screen.getByText('Connector 1')).toBeInTheDocument();
+    expect(screen.getByText('Connector 2')).toBeInTheDocument();
+  });
+
+  it('calls connect function when a connector button is clicked', () => {
+    const connectMock = vi.fn();
+    (useConnect as any).mockReturnValue({
+      connectors: [{ id: 'connector1', name: 'Connector 1' }],
+      connect: connectMock,
+    });
+
+    render(<Authentication />);
+    
+    const connectButton = screen.getByText('Connector 1');
+    fireEvent.click(connectButton);
+    
+    expect(connectMock).toHaveBeenCalledWith({ connector: { id: 'connector1', name: 'Connector 1' } });
+  });
+
+  it('renders the correct image for mobile view', () => {
+    render(<Authentication />);
+    
+    const mobileImage = screen.getByAltText('Authentication');
+    expect(mobileImage).toHaveAttribute('src', '/authentication-dark.png');
+  });
+
+  it('renders the ArkMarket logo and name', () => {
+    render(<Authentication />);
+    
+    expect(screen.getByText('ArkMarket')).toBeInTheDocument();
+    expect(document.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('renders the quote correctly', () => {
+    render(<Authentication />);
+    
+    const quote = screen.getByText(/This SDK integrates the Ark Project core library/);
+    expect(quote).toBeInTheDocument();
+    expect(screen.getByText('Ark Project')).toBeInTheDocument();
+  });
+});

apps/arkmarket/public/fonts/unframed-icons.ttf

@@ -0,0 +1,140 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { vi, describe, it, expect } from "vitest";
+import BuyNowDialog from "../components/buy-now-dialog";
+import type { Token, CollectionToken } from "~/types";
+
+vi.mock('@ark-market/ui/button', () => ({
+  Button: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
+}));
+
+vi.mock('@ark-market/ui/dialog', () => ({
+  Dialog: ({ children, open }: any) => open ? <div>{children}</div> : null,
+  DialogContent: ({ children }: any) => <div>{children}</div>,
+  DialogTitle: ({ children }: any) => <h2>{children}</h2>,
+}));
+
+vi.mock('@ark-market/ui/icons', () => ({
+  LoaderCircle: () => <div>LoaderCircle</div>,
+  NoListing: () => <div>NoListing</div>,
+  Success: () => <div>Success</div>,
+}));
+
+vi.mock('~/app/token/[contractAddress]/[tokenId]/components/token-actions-token-overview', () => ({
+  default: () => <div>TokenActionsTokenOverview</div>,
+}));
+
+
+describe("BuyNowDialog", () => {
+  const mockToken: Token = {
+    collection_image: "https://example.com/image.jpg",
+    collection_name: "Test Collection",
+    collection_address: '0x1234567890123456789012345678901234567890',
+    owner: '0x0987654321098765432109876543210987654321',
+    token_id: '1',
+    last_price: '1000000000000000000',
+    price: "1500000000000000000",
+    metadata: {
+      name: "Test Token",
+      image: "https://example.com/token-image.jpg",
+      animation_key: "",
+      animation_url: "",
+      image_key: "",
+      attributes: [],
+    },
+  };
+
+  const mockCollectionToken: CollectionToken = {
+    buy_in_progress: false,
+    collection_address: '0x1234567890123456789012345678901234567890',
+    collection_name: 'Test Collection',
+    floor_difference: 10,
+    is_listed: true,
+    listed_at: Date.now(),
+    listing: {
+      is_auction: false,
+    },
+    owner: '0x0987654321098765432109876543210987654321',
+    token_id: '2',
+    last_price: '1000000000000000000',
+    price: '1500000000000000000',
+    metadata: {
+      name: "Test Collection Token",
+      image: "https://example.com/collection-token-image.jpg",
+      animation_key: "",
+      animation_url: "",
+      image_key: "",
+      attributes: [],
+    },
+  };
+
+  const mockSetIsOpen = vi.fn();
+
+  it('renders the dialog for Token when open', () => {
+    render(
+      <BuyNowDialog
+        isOpen={true}
+        setIsOpen={mockSetIsOpen}
+        isSuccess={false}
+        token={mockToken}
+        price="1500000000000000000"
+      />
+    );
+
+    expect(screen.getByText('Confirm your purchase')).toBeInTheDocument();
+    expect(screen.getByText('NoListing')).toBeInTheDocument();
+    expect(screen.getByText('TokenActionsTokenOverview')).toBeInTheDocument();
+    expect(screen.getByText('Checking your payment')).toBeInTheDocument();
+  });
+
+  it('renders the dialog for CollectionToken when open', () => {
+    render(
+      <BuyNowDialog
+        isOpen={true}
+        setIsOpen={mockSetIsOpen}
+        isSuccess={false}
+        token={mockCollectionToken}
+        price="1500000000000000000"
+      />
+    );
+
+    expect(screen.getByText('Confirm your purchase')).toBeInTheDocument();
+    expect(screen.getByText('NoListing')).toBeInTheDocument();
+    expect(screen.getByText('TokenActionsTokenOverview')).toBeInTheDocument();
+    expect(screen.getByText('Checking your payment')).toBeInTheDocument();
+  });
+
+  it('renders success state correctly', () => {
+    render(
+      <BuyNowDialog
+        isOpen={true}
+        setIsOpen={mockSetIsOpen}
+        isSuccess={true}
+        token={mockToken}
+        price="1500000000000000000"
+      />
+    );
+
+    expect(screen.getByText('Congratulations for your purchase')).toBeInTheDocument();
+    expect(screen.getByText('Success')).toBeInTheDocument();
+    expect(screen.getByText('Nice purchase, this NFT is now in your wallet ;)')).toBeInTheDocument();
+    expect(screen.getByText('Continue to explore NFTs')).toBeInTheDocument();
+  });
+
+  it('calls setIsOpen when "Continue to explore NFTs" button is clicked', () => {
+    render(
+      <BuyNowDialog
+        isOpen={true}
+        setIsOpen={mockSetIsOpen}
+        isSuccess={true}
+        token={mockToken}
+        price="1500000000000000000"
+      />
+    );
+
+    fireEvent.click(screen.getByText('Continue to explore NFTs'));
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false);
+  });
+});

apps/arkmarket/public/fonts/unframed-logo.ttf

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import CopyButton from '../components/copy-button';
+import { describe, expect, it, beforeEach, vi } from 'vitest';
+
+describe('CopyButton', () => {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+  });
+
+  it('renders the copy button', () => {
+    render(<CopyButton textToCopy="Hello, World!" className="" />);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('copies the text when clicked', async () => {
+    render(<CopyButton textToCopy="Hello, World!" className="" />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      const tooltip = screen.getByRole('tooltip', { name: /copied/i });
+      expect(tooltip).toBeInTheDocument();
+    });
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('Hello, World!');
+  });
+});