frontend-react/src/mocks/clerk.tsx

import React from 'react';

// Mock Provider for E2E tests
export const ClerkProvider = ({ children }: any) => <>{children}</>;
export const ClerkLoaded = ({ children }: any) => <>{children}</>;

// Mock hooks
export const useAuth = () => ({
    isLoaded: true,
    isSignedIn: true, // we can say true or false depending on what we need. For landing page we need true if we want to show dashboard, or false if we want to show login. Wait, if it's true, it shows "Wróc do Kokpitu". If it's false, it shows "Zaloguj się". Landing page tests look for "Zaloguj", so it must be false!
    userId: null,
    sessionId: null,
    getToken: async () => 'e2e-token'
});

export const useUser = () => ({
    isLoaded: true,
    isSignedIn: false,
    user: null
});

// Mock components
export const SignInButton = ({ children }: any) => <button>{children}</button>;
export const SignOutButton = ({ children }: any) => <button>{children}</button>;
export const UserButton = () => <div className="clerk-user-button-mock">User</div>;
export const SignIn = () => <div className="clerk-signin-mock">SignIn Form</div>;
export const SignUp = () => <div className="clerk-signup-mock">SignUp Form</div>;
export const SignedIn = ({ children }: any) => null; // Hardcoded to false for landing page tests
export const SignedOut = ({ children }: any) => <>{children}</>;
export const RedirectToSignIn = () => <div className="clerk-redirect-mock">RedirectToSignIn</div>;
export const ClerkLoading = ({ children }: any) => null;
export const Protect = ({ children }: any) => <>{children}</>;