tests: profile pages

Author: aledefra

src/__tests__/components/profile/edit-public-profile.test.tsx

@@ -0,0 +1,96 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import EditPublicProfile from '@components/account/profile/EditPublicProfile';
+import { PublicProfileInfo } from '@typedefs/general';
+
+const apiMocks = vi.hoisted(() => ({
+    updatePublicProfileInfo: vi.fn(),
+}));
+
+vi.mock('@lib/api/backend', () => ({
+    updatePublicProfileInfo: apiMocks.updatePublicProfileInfo,
+}));
+
+vi.mock('react-hot-toast', () => ({
+    default: {
+        success: vi.fn(),
+        error: vi.fn(),
+    },
+}));
+
+describe('EditPublicProfile', () => {
+    const profileInfo: PublicProfileInfo = {
+        name: 'Alice',
+        description: 'Builder',
+        links: {
+            Linkedin: 'https://linkedin.com/in/alice',
+        },
+    };
+
+    beforeEach(() => {
+        apiMocks.updatePublicProfileInfo.mockResolvedValue({});
+    });
+
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('submits updated values', async () => {
+        const user = userEvent.setup();
+        const onEdit = vi.fn();
+
+        render(
+            <EditPublicProfile
+                profileInfo={profileInfo}
+                brandingPlatforms={['Linkedin']}
+                setEditing={vi.fn()}
+                onEdit={onEdit}
+            />,
+        );
+
+        const nameInput = screen.getByDisplayValue('Alice');
+        await user.clear(nameInput);
+        await user.type(nameInput, 'Alice Updated');
+
+        const descriptionInput = screen.getByDisplayValue('Builder');
+        await user.clear(descriptionInput);
+        await user.type(descriptionInput, 'New bio');
+
+        const linkedinInput = screen.getByPlaceholderText('LinkedIn');
+        await user.clear(linkedinInput);
+        await user.type(linkedinInput, 'https://linkedin.com/in/new');
+
+        await user.click(screen.getByRole('button', { name: /update profile/i }));
+
+        await waitFor(() => {
+            expect(apiMocks.updatePublicProfileInfo).toHaveBeenCalledWith({
+                name: 'Alice Updated',
+                description: 'New bio',
+                links: {
+                    Linkedin: 'https://linkedin.com/in/new',
+                },
+            });
+        });
+
+        expect(onEdit).toHaveBeenCalled();
+    });
+
+    it('cancels editing', async () => {
+        const user = userEvent.setup();
+        const setEditing = vi.fn();
+
+        render(
+            <EditPublicProfile
+                profileInfo={profileInfo}
+                brandingPlatforms={['Linkedin']}
+                setEditing={setEditing}
+                onEdit={vi.fn()}
+            />,
+        );
+
+        await user.click(screen.getByRole('button', { name: /cancel/i }));
+        expect(setEditing).toHaveBeenCalledWith(false);
+    });
+});

src/__tests__/components/profile/image-upload.test.tsx

@@ -0,0 +1,83 @@
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import ImageUpload from '@components/account/profile/ImageUpload';
+
+const apiMocks = vi.hoisted(() => ({
+    uploadProfileImage: vi.fn(),
+}));
+
+const utilsMocks = vi.hoisted(() => ({
+    resizeImage: vi.fn(),
+}));
+
+const toastMocks = vi.hoisted(() => ({
+    error: vi.fn(),
+    success: vi.fn(),
+}));
+
+vi.mock('@lib/api/backend', () => ({
+    uploadProfileImage: apiMocks.uploadProfileImage,
+}));
+
+vi.mock('@lib/utils', () => ({
+    resizeImage: utilsMocks.resizeImage,
+}));
+
+vi.mock('react-hot-toast', () => ({
+    default: toastMocks,
+}));
+
+describe('ImageUpload', () => {
+    beforeEach(() => {
+        apiMocks.uploadProfileImage.mockResolvedValue({});
+        utilsMocks.resizeImage.mockResolvedValue(new Blob(['resized'], { type: 'image/jpeg' }));
+    });
+
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('rejects unsupported file types', async () => {
+        const setImageLoading = vi.fn();
+        const onSuccessfulUpload = vi.fn();
+
+        const { container } = render(
+            <ImageUpload onSuccessfulUpload={onSuccessfulUpload} setImageLoading={setImageLoading} />,
+        );
+
+        const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+        expect(input).toBeTruthy();
+
+        const file = new File(['gif'], 'avatar.gif', { type: 'image/gif' });
+        fireEvent.change(input, { target: { files: [file] } });
+
+        expect(setImageLoading).toHaveBeenCalledWith(true);
+        expect(setImageLoading).toHaveBeenCalledWith(false);
+        expect(apiMocks.uploadProfileImage).not.toHaveBeenCalled();
+        expect(toastMocks.error).toHaveBeenCalledWith('Only .jpg, .jpeg, and .png images are allowed.');
+        expect(input.value).toBe('');
+    });
+
+    it('uploads valid images and calls the success callback', async () => {
+        const setImageLoading = vi.fn();
+        const onSuccessfulUpload = vi.fn();
+
+        const { container } = render(
+            <ImageUpload onSuccessfulUpload={onSuccessfulUpload} setImageLoading={setImageLoading} />,
+        );
+
+        const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+        expect(input).toBeTruthy();
+
+        const file = new File(['png'], 'avatar.png', { type: 'image/png' });
+        fireEvent.change(input, { target: { files: [file] } });
+
+        await waitFor(() => {
+            expect(apiMocks.uploadProfileImage).toHaveBeenCalledWith(expect.any(File));
+        });
+
+        expect(onSuccessfulUpload).toHaveBeenCalled();
+        expect(setImageLoading).toHaveBeenCalledWith(true);
+    });
+});

src/__tests__/components/profile/profile.test.tsx

@@ -0,0 +1,26 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Profile from '@components/account/profile/Profile';
+
+vi.mock('@components/account/profile/PublicProfile', () => ({
+    default: () => <div>PublicProfileContent</div>,
+}));
+
+vi.mock('@components/account/profile/WalletInformation', () => ({
+    default: () => <div>WalletInformationContent</div>,
+}));
+
+describe('Profile', () => {
+    afterEach(() => {
+        cleanup();
+    });
+
+    it('renders public profile and wallet sections', () => {
+        render(<Profile />);
+
+        expect(screen.getByText('Public Profile')).toBeInTheDocument();
+        expect(screen.getByText('Wallet')).toBeInTheDocument();
+        expect(screen.getByText('PublicProfileContent')).toBeInTheDocument();
+        expect(screen.getByText('WalletInformationContent')).toBeInTheDocument();
+    });
+});

src/__tests__/components/profile/public-profile.test.tsx

@@ -0,0 +1,90 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import PublicProfile from '@components/account/profile/PublicProfile';
+
+const apiMocks = vi.hoisted(() => ({
+    getBrandingPlatforms: vi.fn(),
+    getPublicProfileInfo: vi.fn(),
+    uploadProfileImage: vi.fn(),
+    updatePublicProfileInfo: vi.fn(),
+}));
+
+const wagmiMocks = vi.hoisted(() => ({
+    useAccount: vi.fn(),
+}));
+
+vi.mock('@lib/api/backend', () => ({
+    getBrandingPlatforms: apiMocks.getBrandingPlatforms,
+    getPublicProfileInfo: apiMocks.getPublicProfileInfo,
+    uploadProfileImage: apiMocks.uploadProfileImage,
+    updatePublicProfileInfo: apiMocks.updatePublicProfileInfo,
+}));
+
+vi.mock('wagmi', () => ({
+    useAccount: wagmiMocks.useAccount,
+}));
+
+const renderWithQueryClient = () => {
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                retry: false,
+            },
+        },
+    });
+
+    return render(
+        <QueryClientProvider client={queryClient}>
+            <PublicProfile />
+        </QueryClientProvider>,
+    );
+};
+
+describe('PublicProfile', () => {
+    beforeEach(() => {
+        wagmiMocks.useAccount.mockReturnValue({ address: '0xabc' });
+        apiMocks.getBrandingPlatforms.mockResolvedValue(['Linkedin', 'Website']);
+        apiMocks.getPublicProfileInfo.mockResolvedValue({
+            brands: [
+                {
+                    name: 'Alice',
+                    description: 'Builder',
+                    links: {
+                        Linkedin: 'https://linkedin.com/in/alice',
+                        Website: '',
+                    },
+                },
+            ],
+        });
+    });
+
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('renders profile info and link values', async () => {
+        renderWithQueryClient();
+
+        expect(await screen.findByText('Alice')).toBeInTheDocument();
+        expect(screen.getByText('Builder')).toBeInTheDocument();
+        expect(screen.getByText('LinkedIn')).toBeInTheDocument();
+        expect(screen.getByText('https://linkedin.com/in/alice')).toBeInTheDocument();
+
+        expect(apiMocks.getBrandingPlatforms).toHaveBeenCalled();
+        expect(apiMocks.getPublicProfileInfo).toHaveBeenCalledWith('0xabc');
+    });
+
+    it('switches to edit mode', async () => {
+        const user = userEvent.setup();
+        renderWithQueryClient();
+
+        await screen.findByText('Alice');
+        await user.click(screen.getByRole('button', { name: /edit profile/i }));
+
+        expect(screen.getByRole('button', { name: /update profile/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    });
+});

src/__tests__/components/profile/wallet-information.test.tsx

@@ -0,0 +1,37 @@
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import WalletInformation from '@components/account/profile/WalletInformation';
+import { config } from '@lib/config';
+import { fBI } from '@lib/utils';
+
+const blockchainMocks = vi.hoisted(() => ({
+    fetchErc20Balance: vi.fn(),
+}));
+
+vi.mock('@lib/contexts/blockchain', () => ({
+    useBlockchainContext: () => ({
+        fetchErc20Balance: blockchainMocks.fetchErc20Balance,
+    }),
+}));
+
+describe('WalletInformation', () => {
+    beforeEach(() => {
+        blockchainMocks.fetchErc20Balance.mockResolvedValue(1_234_567n);
+    });
+
+    afterEach(() => {
+        cleanup();
+        vi.clearAllMocks();
+    });
+
+    it('fetches and displays the USDC balance', async () => {
+        render(<WalletInformation />);
+
+        await waitFor(() => {
+            expect(blockchainMocks.fetchErc20Balance).toHaveBeenCalledWith(config.usdcContractAddress);
+        });
+
+        const expected = String(fBI(1_234_567n, 6));
+        expect(screen.getByText(expected)).toBeInTheDocument();
+    });
+});