jest testing started

Co-authored-by: ianmannn <[email protected]>
Co-authored-by: kim <[email protected]>
Co-authored-by: FredAires <[email protected]>

Author: 4 people

__tests__/Dashboard.tests.js

@@ -0,0 +1,54 @@
+// __tests__/Dashboard.test.js
+import React from 'react';
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react';
+import Dashboard from '../src/app/dashboard/page';
+import withAuth from '../src/app/components/withAuth';
+
+jest.mock('../src/app/dashboard/components/sidebar', () => () => <div>Mocked SideBar</div>);
+jest.mock('../src/app/dashboard/components/APIkey', () => () => <div>Mocked APIKey</div>);
+jest.mock('../src/app/dashboard/components/WebVitalsContainer', () => () => <div>Mocked WebVitalsContainer</div>);
+jest.mock('../src/app/dashboard/components/buildtimecontainer', () => () => <div>Mocked BuildTimeContainer</div>);
+
+// Mocking withAuth higher-order component
+jest.mock('../src/app/components/withAuth', () => (Component) => (props) => <Component {...props} />);
+
+describe('Dashboard Component', () => {
+  const props = {
+    searchParams: {
+      username: 'testuser',
+    },
+  };
+
+  it('renders without crashing', () => {
+    render(<Dashboard {...props} />);
+    expect(screen.getByText('Mocked SideBar')).toBeInTheDocument();
+    expect(screen.getByText('Mocked APIKey')).toBeInTheDocument();
+    expect(screen.getByText('Mocked WebVitalsContainer')).toBeInTheDocument();
+    expect(screen.getByText('Mocked BuildTimeContainer')).toBeInTheDocument();
+  });
+
+  it('passes the correct username to the SideBar component', () => {
+    render(<Dashboard {...props} />);
+    const sideBarElement = screen.getByText('Mocked SideBar');
+    expect(sideBarElement).toBeInTheDocument();
+  });
+
+  it('passes the correct username to the APIKey component', () => {
+    render(<Dashboard {...props} />);
+    const apiKeyElement = screen.getByText('Mocked APIKey');
+    expect(apiKeyElement).toBeInTheDocument();
+  });
+
+  it('passes the correct username to the WebVitalsContainer component', () => {
+    render(<Dashboard {...props} />);
+    const webVitalsElement = screen.getByText('Mocked WebVitalsContainer');
+    expect(webVitalsElement).toBeInTheDocument();
+  });
+
+  it('passes the correct username to the BuildTimeContainer component', () => {
+    render(<Dashboard {...props} />);
+    const buildTimeElement = screen.getByText('Mocked BuildTimeContainer');
+    expect(buildTimeElement).toBeInTheDocument();
+  });
+});

__tests__/Homepage.tests.js

@@ -0,0 +1,63 @@
+// __tests__/Home.test.js
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import Home from '../src/app/page';
+import '@testing-library/jest-dom';
+
+// Mock next/link
+jest.mock('next/link', () => {
+  return ({ children }) => {
+    return children;
+  };
+});
+
+// Mock next/image
+jest.mock('next/image', () => {
+  return (props) => {
+    return <img {...props} />;
+  };
+});
+
+describe('Home Component', () => {
+  beforeEach(() => {
+    // Mock the scroll event
+    global.scrollY = 0;
+    window.addEventListener = jest.fn();
+    window.removeEventListener = jest.fn();
+  });
+
+  it('renders without crashing', () => {
+    render(<Home />);
+    expect(screen.getByText('Take your application to the')).toBeInTheDocument();
+    expect(screen.getByText('STEP ONE')).toBeInTheDocument();
+    expect(screen.getByText('STEP TWO')).toBeInTheDocument();
+    expect(screen.getByText('STEP THREE')).toBeInTheDocument();
+    expect(screen.getByText('Tracked Metrics Include :')).toBeInTheDocument();
+  });
+
+  it('adds "show-animate" class on mount', () => {
+    const { container } = render(<Home />);
+    const section = container.querySelector('.sec-1');
+    expect(section).toHaveClass('show-animate');
+  });
+
+  it('adds "show-animate" class on scroll', () => {
+    const { container } = render(<Home />);
+    const sections = container.querySelectorAll('section');
+
+    act(() => {
+      window.scrollY = 400;
+      window.dispatchEvent(new Event('scroll'));
+    });
+
+    sections.forEach((section) => {
+      expect(section).toHaveClass('show-animate');
+    });
+  });
+
+  it('removes event listener on unmount', () => {
+    const { unmount } = render(<Home />);
+    unmount();
+    expect(window.removeEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+  });
+});

__tests__/Login.tests.js

@@ -0,0 +1,147 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { signIn, useSession } from 'next-auth/react';
+import Login from '../src/app/login/page.js';
+import Spinner from '../src/app/components/Spinner.js';
+import React from 'react';
+
+// Mock the necessary components and functions
+jest.mock('next-auth/react');
+jest.mock('../src/app/components/Spinner.js', () => () => <div>Loading...</div>);
+jest.mock('next/image', () => (props) => <img {...props} />);
+
+describe('Login', () => {
+  const mockSignIn = jest.fn();
+  const mockUseSession = useSession;
+
+  beforeEach(() => {
+    mockUseSession.mockReturnValue({
+      data: null,
+      status: 'unauthenticated'
+    });
+    signIn.mockImplementation(mockSignIn);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the login form', async () => {
+    render(<Login initialLoading={false} />);
+
+    await waitFor(() => expect(screen.getByPlaceholderText('Username')).toBeInTheDocument());
+    
+    expect(screen.getByPlaceholderText('Username')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
+    expect(screen.getByText('Login')).toBeInTheDocument();
+    expect(screen.getByText("Don't have an account?")).toBeInTheDocument();
+  });
+
+  it('displays error message on login failure', async () => {
+    mockSignIn.mockResolvedValueOnce({ error: 'Invalid credentials' });
+    render(<Login initialLoading={false} />);
+
+    await waitFor(() => expect(screen.getByPlaceholderText('Username')).toBeInTheDocument());
+
+    fireEvent.change(screen.getByPlaceholderText('Username'), { target: { value: 'testuser' } });
+    fireEvent.change(screen.getByPlaceholderText('Password'), { target: { value: 'password' } });
+    fireEvent.click(screen.getByText('Login'));
+
+    await waitFor(() => expect(screen.getByText('Invalid credentials')).toBeInTheDocument());
+  });
+
+  it('redirects to dashboard on successful login', async () => {
+    // Mock window.location.href
+    delete window.location;
+    window.location = { href: '' };
+
+    mockSignIn.mockResolvedValueOnce({ error: null });
+    render(<Login initialLoading={false} />);
+
+    await waitFor(() => expect(screen.getByPlaceholderText('Username')).toBeInTheDocument());
+
+    fireEvent.change(screen.getByPlaceholderText('Username'), { target: { value: 'testuser' } });
+    fireEvent.change(screen.getByPlaceholderText('Password'), { target: { value: 'password' } });
+    fireEvent.click(screen.getByText('Login'));
+
+    await waitFor(() => expect(screen.getByText('Loading...')).toBeInTheDocument());
+
+    await waitFor(() => expect(window.location.href).toBe('/dashboard/?username=testuser'));
+  });
+
+  it('renders the spinner when loading', () => {
+    render(<Login />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('handles OAuth sign-in error', async () => {
+    mockSignIn.mockResolvedValueOnce({ error: 'OAuth error' });
+    render(<Login initialLoading={false} />);
+
+    await waitFor(() => expect(screen.getByPlaceholderText('Username')).toBeInTheDocument());
+
+    // Changed the selector to use aria-label
+    fireEvent.click(screen.getByRole('button', { name: 'Sign in with Google' }));
+
+    await waitFor(() => expect(screen.getByText('Failed to sign in with google. Please try again.')).toBeInTheDocument());
+  });
+
+  it('redirects to dashboard on successful OAuth sign-in', async () => {
+    // Mock window.location.href
+    delete window.location;
+    window.location = { href: '' };
+
+    mockUseSession.mockReturnValue({
+      data: { user: { email: 'testuser' } },
+      status: 'authenticated',
+    });
+
+    render(<Login initialLoading={false} />);
+
+    await waitFor(() => expect(screen.getByPlaceholderText('Username')).toBeInTheDocument());
+
+    // Changed the selector to use aria-label
+    fireEvent.click(screen.getByRole('button', { name: 'Sign in with Google' }));
+
+    await waitFor(() => expect(screen.getByText('Loading...')).toBeInTheDocument());
+
+    await waitFor(() => expect(window.location.href).toBe('/dashboard/?username=testuser'));
+  });
+
+  it('applies correct styles on mount and cleans up on unmount', () => {
+    const { unmount } = render(<Login initialLoading={false} />);
+    const bodyStyles = document.body.style;
+
+    expect(bodyStyles.fontFamily).toBe("'Poppins', sans-serif");
+    expect(bodyStyles.display).toBe('flex');
+    expect(bodyStyles.justifyContent).toBe('center');
+    expect(bodyStyles.alignItems).toBe('center');
+    expect(bodyStyles.minHeight).toBe('100vh');
+    expect(bodyStyles.backgroundImage).toContain('https://getwallpapers.com/wallpaper/full/2/8/f/537844.jpg');
+    expect(bodyStyles.backgroundRepeat).toBe('no-repeat');
+    expect(bodyStyles.backgroundSize).toBe('cover');
+    expect(bodyStyles.backgroundPosition).toBe('center');
+    expect(bodyStyles.color).toBe('rgb(255, 255, 255)');
+
+    unmount();
+
+    expect(bodyStyles.fontFamily).toBe('');
+    expect(bodyStyles.display).toBe('');
+    expect(bodyStyles.justifyContent).toBe('');
+    expect(bodyStyles.alignItems).toBe('');
+    expect(bodyStyles.minHeight).toBe('');
+    expect(bodyStyles.backgroundImage).toBe('');
+    expect(bodyStyles.backgroundRepeat).toBe('no-repeat'); // Changed to check if 'no-repeat' is retained
+    expect(bodyStyles.backgroundSize).toBe('auto');
+    expect(bodyStyles.backgroundPosition).toBe('0% 0%');
+    expect(bodyStyles.color).toBe('');
+  });
+});
+
+
+
+
+
+
+
+